Remove --jsx flag, less is more, update docs

CHANGELOG.md

@@ -9,6 +9,7 @@
 - **Breaking:** the runtime content is now referenced via `runtime` instead of `assets.runtime` in the template
 - **Breaking:** simplified logging behind `--log` flag, choose between `info`, `progress` or `none`, with default being `info,progress`
 - **Breaking:** removed support for react-hot-loader, you can still tweak your config to pull it in, but it is no longer automatically configured, use `react-refresh` instead!
+- **Breaking:** remove --jsx command line flag, use config instead
 
 # 0.22.0
 

docs/01-configuration-options.md

@@ -14,7 +14,6 @@ Options:
   -p, --port <n>      port, defaults to 3030
   -d, --dir [path]    run jetpack in the context of this directory
   -c, --config        config file to use, defaults to jetpack.config.js
-  --jsx <pragma>      specify jsx pragma, defaults to React.createElement or Preact.h if preact is installed
   -r, --no-hot        disable hot reloading
   -u, --no-minify     disable minification
   -m, --modern        build a modern bundle

docs/03-customizing-swc.md

@@ -1,4 +1,4 @@
-# Customizing Babel
+# Customizing SWC
 
 Jetpack uses SWC via swc-loader by default, because:
 

docs/04-customizing-postcss.md

@@ -13,7 +13,7 @@ Jetpack uses the following PostCSS plugins and presets:
 
 See [lib/webpack.css.js](../lib/webpack.css.js) for the exact configuration.
 
-It's a bit more difficult to extend PostCSS than say Babel. There are 2 options that jetpack provides here.
+There are 2 ways to cusotmize postcss config.
 
 ## Specify extra postcss-preset-env features
 
@@ -43,8 +43,8 @@ module.exports = {
     'jetpack/postcss-preset-env': {
       autoprefixer: { grid: true }
     },
-    'colorguard': {},
-    'stylelint': {}
+    colorguard: {},
+    stylelint: {}
   }
 }
 ```

docs/05-customizing-browserslist.md

@@ -1,6 +1,6 @@
 # Customizing browserslist
 
-Jetpack compiles your code using `babel-preset-env` and `postcss-preset-env` plugins to ensure the code is ready for all the browsers you support. Those projects follow the lovely [browserlist](https://github.com/browserslist/browserslist) convention.
+Jetpack compiles your code using `swc-loader` and `postcss-preset-env` plugins to ensure the code is ready for all the browsers you support. Those projects follow the lovely [browserlist](https://github.com/browserslist/browserslist) convention.
 
 Jetpack supports differential serving, that is it can produce 2 bundles - modern and legacy. By default jetpack only builds a modern bundle using the following browserslist query:
 

docs/07-differential-serving.md

@@ -76,12 +76,12 @@ app.get('/api/data', (req, res) => {
 // or legacy and serve an appropriate entry point
 app.get('*', jetpack)
 
-app.listen(3000, function() {
+app.listen(3000, function () {
   console.log('Running server on http://localhost:3000')
 })
 ```
 
-This is the most convenient option, but can be undesirable if you'd like to avoid shipping the entire jetpack package with all of it's dependencies (i.e. `webpack`, `babel`, `postcss`, etc.) to your production apps. To avoid that, consider installing `jetpack` as a dev dependency and using the standalone `jetpack-serve` package instead.
+This is the most convenient option, but can be undesirable if you'd like to avoid shipping the entire jetpack package with all of it's dependencies (i.e. `webpack`, `swc`, `postcss`, etc.) to your production apps. To avoid that, consider installing `jetpack` as a dev dependency and using the standalone `jetpack-serve` package instead.
 
 ### jetpack-serve package
 
@@ -103,7 +103,7 @@ app.get('/api/data', (req, res) => {
 // express.static for the actual assets
 app.use(jetpack())
 
-app.listen(3000, function() {
+app.listen(3000, function () {
   console.log('Running server on http://localhost:3000')
 })
 ```
@@ -113,7 +113,7 @@ Or if you're using something other than express or want to customise the behavio
 ```js
 const jetpack = require('jetpack-serve')
 
-module.exports = function handle (req, res) {
+module.exports = function handle(req, res) {
   const isModern = jetpack.regexp({ modern: true }).test(req.headers['user-agent'])
   if (isModern) {
     // serve modern

docs/recipe-04-adding-flow.md

@@ -1,5 +1,7 @@
 # Adding Flow
 
+**Note:** This is outdated now that jetpack uses `swc-loader` instead of `babel`.
+
 Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.
 
 To add Flow to a jetpack project, follow these steps:

lib/cli.js

@@ -20,7 +20,6 @@ program
   .option('-p, --port <n>', 'port, defaults to 3030', Number)
   .option('-d, --dir [path]', 'run jetpack in the context of this directory')
   .option('-c, --config', 'config file to use, defaults to jetpack.config.js')
-  .option('--jsx <pragma>', 'specify jsx pragma, defaults to React.createElement or Preact.h if preact is installed')
   .option('-r, --no-hot', 'disable hot reloading', null)
   .option('-u, --no-minify', 'disable minification', null)
   .option('-m, --modern', 'build a modern bundle')

lib/options.js

@@ -29,7 +29,7 @@ module.exports = function options(command = 'dev', program = {}) {
   const options = Object.assign(
     {},
     configFromFile,
-    pick(opts, ['port', 'dir', 'exec', 'jsx', 'hot', 'config', 'minify', 'log'])
+    pick(opts, ['port', 'dir', 'exec', 'hot', 'config', 'minify', 'log'])
   )
 
   // if specified in config file

test/options.test.js

@@ -53,8 +53,7 @@ test('accepts cli flags', (t) => {
     opts: () => ({
       dir: dir('fixtures', 'pkg-swoosh'),
       hot: false,
-      port: 2800,
-      jsx: 'React.createElement'
+      port: 2800
     })
   }
   const opts = options('dev', program)
@@ -63,8 +62,7 @@ test('accepts cli flags', (t) => {
     base('pkg-swoosh', {
       hot: false,
       entry: './some/path',
-      port: 2800,
-      jsx: 'React.createElement'
+      port: 2800
     })
   )
 })