@financial-times/dotcom-build-js 7.3.1 → 7.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-build-js",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "description": "",
   "main": "dist/node/index.js",
   "types": "src/index.ts",
@@ -40,7 +40,8 @@
     "npm": "7.x || 8.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
   "repository": {
     "type": "git",

package/src/babel.ts

@@ -0,0 +1,65 @@
+import { PluginOptions } from './types'
+
+function getBabelConfig(options: PluginOptions = {}) {
+  const presetEnvOpts = {
+    targets: ['last 1 Chrome versions', 'Safari >= 13', 'ff ESR', 'last 1 Edge versions'],
+    // Exclude transforms that make all code slower
+    // See https://github.com/facebook/create-react-app/pull/5278
+    exclude: ['transform-typeof-symbol']
+  }
+
+  const presetReactOptions = {
+    pragma: options.jsxPragma,
+    pragmaFrag: options.jsxPragmaFrag
+  }
+
+  const presetTypescriptOptions = {
+    jsxPragma: options.jsxPragma
+  }
+
+  const pluginTransformRuntimeOptions = {
+    // You might think we'd want to abstract the helper functions so they can be reused but doing so
+    // means we generate unstable hashes because the generated helper modules are at the bottom of
+    // the dependency tree but their contents depends on the features each app uses. Inlining them
+    // adds little (usually <1kb) to our total JS payload because the minimizer can usually reduce
+    // them down and actually result in fewer function calls overall!
+    // <https://github.com/Financial-Times/dotcom-page-kit/issues/576>
+    helpers: false
+  }
+
+  const config = {
+    // By default Babel assumes all source code is ESM so force it to check for CJS
+    sourceType: 'unambiguous',
+    babelrc: true,
+    cacheDirectory: true,
+    presets: [
+      [require.resolve('@babel/preset-env'), presetEnvOpts],
+      [require.resolve('@babel/preset-react'), presetReactOptions],
+      // This only enables the parsing of TypeScript, it does not check types
+      [require.resolve('@babel/preset-typescript'), presetTypescriptOptions]
+    ],
+    plugins: [
+      // This is required by @babel/preset-typescript
+      // https://github.com/tc39/proposal-class-fields
+      [require.resolve('@babel/plugin-proposal-class-properties')],
+      // This enables Babel's built-in 'dynamicImport' flag which defines import() function usage
+      [require.resolve('@babel/plugin-syntax-dynamic-import')],
+      [require.resolve('@babel/plugin-transform-runtime'), pluginTransformRuntimeOptions]
+    ]
+  }
+
+  return config
+}
+
+export default function getBabelRule(userOptions: PluginOptions) {
+  return {
+    test: [/\.(js|jsx|mjs|ts|tsx)$/],
+    // NOTE: Do not exclude bower_components or node_modules directories
+    // https://github.com/Financial-Times/dotcom-page-kit/issues/366
+    exclude: [],
+    use: {
+      loader: require.resolve('babel-loader'),
+      options: getBabelConfig(userOptions)
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+import getBabelRule from './babel'
+import { PluginOptions } from './types'
+import type webpack from 'webpack'
+
+const defaultOptions: PluginOptions = {
+  jsxPragma: 'h',
+  jsxPragmaFrag: 'Fragment'
+}
+
+export class PageKitJsPlugin {
+  options: PluginOptions
+
+  constructor(userOptions: PluginOptions = {}) {
+    this.options = { ...defaultOptions, ...userOptions }
+  }
+
+  apply(compiler: webpack.Compiler) {
+    compiler.options.resolve.extensions = ['.js', '.jsx', '.mjs', '.json', '.ts', '.tsx']
+    compiler.options.module.rules.push(getBabelRule(this.options))
+  }
+}

package/src/types.d.ts

@@ -0,0 +1,6 @@
+export interface PluginOptions {
+  /** Replace the function used when compiling JSX expressions */
+  jsxPragma?: string
+  /** Replace the component used when compiling JSX fragments */
+  jsxPragmaFrag?: string
+}