Merge pull request #127 from KidkArolis/add-ts-support

Add TypeScript support

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 4.0.0
+
+- Add `typescript` support, compiled by `builtin:swc-loader`
+- Use `core-js@3.40` to correctly include latest polyfills
+- Switch to `builtin:swc-loader`
+- Remove `h` as the default jsx pragma, instead use swc-loader's automatic mode for react
+
 # 3.1.0
 
 - Removed `commander` in favor of native Node.js `parseArgs` util, this might have slight affect on cli flags

README.md

@@ -85,11 +85,6 @@ Jetpack provides an ability to proxy requests to your api by specifying `proxy`
 - [Differential serving](./docs/07-differential-serving.md)
 - [Hot reloading](./docs/08-hot-reloading.md)
 - [Comparison to cra, pwa-cli, parcel, etc.](./docs/09-comparison.md)
-
-#### Recipes
-
-- [Adding Flow](./docs/recipe-04-adding-flow.md)
-- [Adding Typescript](./docs/recipe-05-adding-typescript.md)
 - [Server side rendering](./docs/recipe-06-server-side-rendering.md)
 
 ## Motivation

lib/options.js

@@ -83,8 +83,8 @@ module.exports = function options(command = 'dev', { entry = null, flags = {} }
 
     publicPath,
 
-    // jsx pragma
-    jsx: options.jsx || jsx(dir),
+    // are we using react
+    react: options.react || isUsingReact(dir),
 
     // hot reloading
     hot: options.hot === undefined ? true : options.hot,
@@ -184,7 +184,8 @@ function readConfigFromFile(dir, configFilePath) {
   if (!configFilePath) return {}
   const configPath = path.join(dir, configFilePath)
   const exists = fs.pathExistsSync(configPath)
-  return exists ? require(configPath) : {}
+  const config = exists ? require(configPath) : {}
+  return config.default ? config.default : config
 }
 
 function pkg(dir) {
@@ -195,16 +196,16 @@ function pkg(dir) {
   }
 }
 
-function jsx(dir) {
+function isUsingReact(dir) {
   try {
     requireRelative.resolve('react', dir)
-    return 'React.createElement'
+    return true
   } catch (err) {
     if (err.code !== 'MODULE_NOT_FOUND') {
       throw err
     }
   }
-  return 'h'
+  return false
 }
 
 function assets({ publicPath, entrypoints }) {

lib/webpack.config.js

@@ -4,10 +4,12 @@ const RetryChunkLoadPlugin = require('./retryChunkLoadPlugin.js')
 
 const plugins = {
   js: require('./webpack.js'),
+  ts: require('./webpack.ts'),
+  react: require('./webpack.react'),
+  hot: require('./webpack.hot'),
   css: require('./webpack.css'),
   scss: require('./webpack.scss'),
-  assets: require('./webpack.assets'),
-  hot: require('./webpack.hot')
+  assets: require('./webpack.assets')
 }
 
 module.exports = async function config(options, log) {
@@ -81,10 +83,12 @@ async function createConfig(options, log) {
   }
 
   await plugins.js(config, options)
+  await plugins.ts(config, options)
+  await plugins.react(config, options)
+  await plugins.hot(config, options)
   await plugins.scss(config, options)
   await plugins.css(config, options)
   await plugins.assets(config, options)
-  await plugins.hot(config, options)
 
   if (options.rspack) {
     config = (await options.rspack(config, options)) || config

lib/webpack.hot.js

@@ -1,5 +1,4 @@
 const rspack = require('@rspack/core')
-const requireRelative = require('require-relative')
 const ReactRefreshPlugin = require('@rspack/plugin-react-refresh')
 
 module.exports = (config, options) => {
@@ -12,51 +11,9 @@ module.exports = (config, options) => {
       ].concat(config.entry[e])
     })
 
-    const usingReact = isUsingReact(options.dir)
-    const usingReactDOM = isUsingReactDOM(options.dir)
-
-    if (usingReact && usingReactDOM) {
-      // important for when jetpack is used without installing it locally
-      config.resolve.alias.react = usingReact
-      config.resolve.alias['react-dom'] = usingReactDOM
-
+    if (options.react) {
       config.plugins.push(new ReactRefreshPlugin())
       config.resolve.alias['react-refresh/runtime'] = require.resolve('react-refresh/runtime')
-      config.module.rules[0].oneOf.forEach((rule) => {
-        if (rule.use) {
-          rule.use.forEach((loader) => {
-            if (loader.loader === require.resolve('swc-loader')) {
-              loader.options.jsc.transform.react = {
-                runtime: 'automatic',
-                development: true,
-                refresh: true
-              }
-            }
-          })
-        }
-      })
-    }
-  }
-}
-
-function isUsingReact(dir) {
-  try {
-    return requireRelative.resolve('react', dir).replace(/\/index.js$/, '')
-  } catch (err) {
-    if (err.code !== 'MODULE_NOT_FOUND') {
-      throw err
-    }
-  }
-  return false
-}
-
-function isUsingReactDOM(dir) {
-  try {
-    return requireRelative.resolve('react-dom', dir).replace(/\/index.js$/, '')
-  } catch (err) {
-    if (err.code !== 'MODULE_NOT_FOUND') {
-      throw err
     }
   }
-  return false
 }

lib/webpack.js.js

@@ -6,11 +6,11 @@ module.exports = (config, options) => {
     exclude: /(node_modules)/,
     use: [
       {
-        loader: require.resolve('swc-loader'),
+        loader: 'builtin:swc-loader',
         options: {
           env: {
             targets: browsers.query(options),
-            coreJs: 3,
+            coreJs: '3.40',
             mode: 'usage'
           },
           jsc: {
@@ -48,11 +48,11 @@ module.exports = (config, options) => {
     },
     use: [
       {
-        loader: require.resolve('swc-loader'),
+        loader: 'builtin:swc-loader',
         options: {
           env: {
             targets: browsers.query(options),
-            coreJs: 3,
+            coreJs: '3.40',
             mode: 'usage'
           },
           jsc: {

lib/webpack.react.js

@@ -0,0 +1,50 @@
+const requireRelative = require('require-relative')
+
+module.exports = (config, options) => {
+  if (options.react) {
+    const reactPath = getReactPath(options.dir)
+    if (reactPath) {
+      config.resolve.alias.react = reactPath
+    }
+    const reactDOMPath = getReactDOMPath(options.dir)
+    if (reactDOMPath) {
+      config.resolve.alias['react-dom'] = reactDOMPath
+    }
+
+    config.module.rules[0].oneOf.forEach((rule) => {
+      if (rule.use) {
+        rule.use.forEach((loader) => {
+          if (loader.loader === require.resolve('swc-loader') || loader.loader === 'builtin:swc-loader') {
+            loader.options.jsc.transform.react = {
+              runtime: 'automatic',
+              development: !options.production,
+              refresh: !options.production && options.hot
+            }
+          }
+        })
+      }
+    })
+  }
+}
+
+function getReactPath(dir) {
+  try {
+    return requireRelative.resolve('react', dir).replace(/\/index.js$/, '')
+  } catch (err) {
+    if (err.code !== 'MODULE_NOT_FOUND') {
+      throw err
+    }
+  }
+  return null
+}
+
+function getReactDOMPath(dir) {
+  try {
+    return requireRelative.resolve('react-dom', dir).replace(/\/index.js$/, '')
+  } catch (err) {
+    if (err.code !== 'MODULE_NOT_FOUND') {
+      throw err
+    }
+  }
+  return null
+}

lib/webpack.ts.js

@@ -0,0 +1,30 @@
+const browsers = require('./browsers')
+
+module.exports = (config, options) => {
+  config.module.rules[0].oneOf.push({
+    test: /\.(ts|tsx)$/,
+    exclude: /(node_modules)/,
+    use: [
+      {
+        loader: 'builtin:swc-loader',
+        options: {
+          env: {
+            targets: browsers.query(options),
+            coreJs: '3.40',
+            mode: 'usage'
+          },
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              exportDefaultFrom: true,
+              jsx: true
+            },
+            externalHelpers: true,
+            transform: {}
+          },
+          isModule: 'unknown'
+        }
+      }
+    ]
+  })
+}