@plone/babel-preset-razzle 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jared Palmer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+> [!IMPORTANT]
+> This package is a maintained fork of the original [`babel-preset-razzle`](https://github.com/jaredpalmer/razzle/tree/master/packages/babel-preset-razzle).
+> The upstream project is currently unmaintained, so we forked it into the Volto monorepo to keep its dependencies updated and address security issues.
+> All upstream attributions are preserved below.
+
+# @plone/babel-preset-razzle
+
+This package includes the [Babel](https://babeljs.io) preset used by [Razzle](https://github.com/jaredpalmer/razzle).
+
+## Usage in Razzle projects
+
+The easiest way to use this configuration is with Razzle, which includes it by default.
+
+## Usage outside of Razzle
+
+If you want to use this Babel preset in a project not built with Razzle, you can install it through the following steps.
+
+First, [install Babel](https://babeljs.io/setup/).
+
+Then create a file named `.babelrc` with the following contents in the root folder of your project:
+
+```js
+{
+  "presets": ["@plone/razzle"]
+}
+```
+
+This preset uses the `useBuiltIns` option with [`transform-object-rest-spread`](https://babeljs.io/docs/babel-plugin-transform-object-rest-spread/), which assumes that `Object.assign` is available or polyfilled.

package/babel-plugins/commonjs.js

@@ -0,0 +1,27 @@
+const commonjsPlugin = require('@babel/plugin-transform-modules-commonjs');
+
+module.exports = function (api, options, dirname) {
+  const commonjs = commonjsPlugin.default(api, options, dirname);
+  return {
+    visitor: {
+      Program: {
+        exit: function (path, state) {
+          let foundModuleExports = false;
+          path.traverse({
+            MemberExpression: function (expressionPath) {
+              if (expressionPath.node.object.name !== 'module') return;
+              if (expressionPath.node.property.name !== 'exports') return;
+              foundModuleExports = true;
+            },
+          });
+
+          if (!foundModuleExports) {
+            return;
+          }
+
+          commonjs.visitor.Program.exit.call(this, path, state);
+        },
+      },
+    },
+  };
+};

package/babel-plugins/jsx-pragma.js

@@ -0,0 +1,97 @@
+'use strict';
+
+module.exports = function (opts) {
+  const t = opts.types;
+  return {
+    inherits: require('babel-plugin-syntax-jsx'),
+    visitor: {
+      JSXElement: (_path, state) => {
+        state.set('jsx', true);
+      },
+
+      // Fragment syntax is still JSX since it compiles to createElement(),
+      // but JSXFragment is not a JSXElement
+      JSXFragment: (_path, state) => {
+        state.set('jsx', true);
+      },
+
+      Program: {
+        exit: (path, state) => {
+          if (state.get('jsx')) {
+            const pragma = t.identifier(state.opts.pragma);
+            let importAs = pragma;
+
+            // if there's already a React in scope, use that instead of adding an import
+            const existingBinding =
+              state.opts.reuseImport !== false &&
+              state.opts.importAs &&
+              path.scope.getBinding(state.opts.importAs);
+
+            // var _jsx = _pragma.createElement;
+            if (state.opts.property) {
+              if (state.opts.importAs) {
+                importAs = t.identifier(state.opts.importAs);
+              } else {
+                importAs = path.scope.generateUidIdentifier('pragma');
+              }
+
+              const mapping = t.variableDeclaration('var', [
+                t.variableDeclarator(
+                  pragma,
+                  t.memberExpression(
+                    importAs,
+                    t.identifier(state.opts.property),
+                  ),
+                ),
+              ]);
+
+              // if the React binding came from a require('react'),
+              // make sure that our usage comes after it.
+              let newPath;
+              if (
+                existingBinding &&
+                t.isVariableDeclarator(existingBinding.path.node) &&
+                t.isCallExpression(existingBinding.path.node.init) &&
+                t.isIdentifier(existingBinding.path.node.init.callee) &&
+                existingBinding.path.node.init.callee.name === 'require'
+              ) {
+                [newPath] =
+                  existingBinding.path.parentPath.insertAfter(mapping);
+              } else {
+                // @ts-ignore
+                [newPath] = path.unshiftContainer('body', mapping);
+              }
+
+              for (const declar of newPath.get('declarations')) {
+                path.scope.registerBinding(newPath.node.kind, declar);
+              }
+            }
+
+            if (!existingBinding) {
+              const importSpecifier = t.importDeclaration(
+                [
+                  state.opts.import
+                    ? // import { $import as _pragma } from '$module'
+                      t.importSpecifier(
+                        importAs,
+                        t.identifier(state.opts.import),
+                      )
+                    : state.opts.importNamespace
+                      ? t.importNamespaceSpecifier(importAs)
+                      : // import _pragma from '$module'
+                        t.importDefaultSpecifier(importAs),
+                ],
+                t.stringLiteral(state.opts.module || 'react'),
+              );
+
+              const [newPath] = path.unshiftContainer('body', importSpecifier);
+              for (const specifier of newPath.get('specifiers')) {
+                path.scope.registerBinding('module', specifier);
+              }
+            }
+          }
+        },
+      },
+    },
+  };
+};

package/babel-plugins/no-anonymous-default-export.js

@@ -0,0 +1,77 @@
+const chalk = require('chalk');
+
+module.exports = function (opts) {
+  const t = opts.types;
+  let onWarning = null;
+  opts.caller((caller) => {
+    onWarning = caller.onWarning;
+    return ''; // Intentionally empty to not invalidate cache
+  });
+
+  if (typeof onWarning !== 'function') {
+    return { visitor: {} };
+  }
+
+  const warn = onWarning;
+  return {
+    visitor: {
+      ExportDefaultDeclaration: function (path) {
+        const def = path.node.declaration;
+
+        if (
+          !(
+            def.type === 'ArrowFunctionExpression' ||
+            def.type === 'FunctionDeclaration'
+          )
+        ) {
+          return;
+        }
+
+        switch (def.type) {
+          case 'ArrowFunctionExpression': {
+            warn(
+              [
+                chalk.yellow.bold(
+                  'Anonymous arrow functions cause Fast Refresh to not preserve local component state.',
+                ),
+                'Please add a name to your function, for example:',
+                '',
+                chalk.bold('Before'),
+                chalk.cyan('export default () => <div />;'),
+                '',
+                chalk.bold('After'),
+                chalk.cyan('const Named = () => <div />;'),
+                chalk.cyan('export default Named;'),
+              ].join('\n'),
+            );
+            break;
+          }
+          case 'FunctionDeclaration': {
+            const isAnonymous = !Boolean(def.id);
+            if (isAnonymous) {
+              warn(
+                [
+                  chalk.yellow.bold(
+                    'Anonymous function declarations cause Fast Refresh to not preserve local component state.',
+                  ),
+                  'Please add a name to your function, for example:',
+                  '',
+                  chalk.bold('Before'),
+                  chalk.cyan('export default function () { /* ... */ }'),
+                  '',
+                  chalk.bold('After'),
+                  chalk.cyan('export default function Named() { /* ... */ }'),
+                ].join('\n'),
+              );
+            }
+            break;
+          }
+          default: {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const never = def;
+          }
+        }
+      },
+    },
+  };
+};

package/babel-plugins/optimize-hook-destructuring.js

@@ -0,0 +1,68 @@
+'use strict';
+
+// matches any hook-like (the default)
+const isHook = /^use[A-Z]/;
+
+// matches only built-in hooks provided by React et al
+const isBuiltInHook =
+  /^use(Callback|Context|DebugValue|Effect|ImperativeHandle|LayoutEffect|Memo|Reducer|Ref|State)$/;
+
+module.exports = function (opts) {
+  const t = opts.types;
+  const visitor = {
+    CallExpression: function (path, state) {
+      const onlyBuiltIns = state.opts.onlyBuiltIns;
+
+      // if specified, options.lib is a list of libraries that provide hook functions
+      const libs =
+        state.opts.lib &&
+        (state.opts.lib === true
+          ? ['react', 'preact/hooks']
+          : [].concat(state.opts.lib));
+
+      // skip function calls that are not the init of a variable declaration:
+      if (!t.isVariableDeclarator(path.parent)) return;
+
+      // skip function calls where the return value is not Array-destructured:
+      if (!t.isArrayPattern(path.parent.id)) return;
+
+      // name of the (hook) function being called:
+      const hookName = path.node.callee.name;
+
+      if (libs) {
+        const binding = path.scope.getBinding(hookName);
+        // not an import
+        if (!binding || binding.kind !== 'module') return;
+
+        const specifier = binding.path.parent.source.value;
+        // not a match
+        if (!libs.some((lib) => lib === specifier)) return;
+      }
+
+      // only match function calls with names that look like a hook
+      if (!(onlyBuiltIns ? isBuiltInHook : isHook).test(hookName)) return;
+
+      path.parent.id = t.objectPattern(
+        path.parent.id.elements.reduce((patterns, element, i) => {
+          if (element === null) {
+            return patterns;
+          }
+
+          return patterns.concat(
+            t.objectProperty(t.numericLiteral(i), element),
+          );
+        }, []),
+      );
+    },
+  };
+
+  return {
+    name: 'optimize-hook-destructuring',
+    visitor: {
+      // this is a workaround to run before preset-env destroys destructured assignments
+      Program: function (path, state) {
+        path.traverse(visitor, state);
+      },
+    },
+  };
+};

package/index.js

@@ -0,0 +1,138 @@
+'use strict';
+
+const path = require('path');
+const PluginItem = require('@babel/core').PluginItem;
+const env = process.env.NODE_ENV;
+const isProduction = env === 'production';
+const isDevelopment = env === 'development';
+const isTest = env === 'test';
+
+// Taken from https://github.com/babel/babel/commit/d60c5e1736543a6eac4b549553e107a9ba967051#diff-b4beead8ad9195361b4537601cc22532R158
+const supportsStaticESM = function (caller) {
+  return !!caller && caller.supportsStaticESM;
+};
+
+module.exports = function (api, options) {
+  options = options || {};
+
+  const supportsESM = api.caller(supportsStaticESM);
+  const isServer = api.caller(function (caller) {
+    return !!caller && caller.isServer;
+  });
+  const isModern = api.caller(function (caller) {
+    return !!caller && caller.isModern;
+  });
+
+  const isLaxModern =
+    isModern ||
+    ((options['preset-env'] || {}).targets &&
+      options['preset-env'].targets.esmodules === true);
+
+  const presetEnvConfig = Object.assign(
+    {
+      // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
+      // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
+      modules: 'auto',
+      exclude: ['transform-typeof-symbol'],
+    },
+    options['preset-env'] || {},
+  );
+
+  // When transpiling for the server or tests, target the current Node version
+  // if not explicitly specified:
+  if (
+    (isServer || isTest) &&
+    (!presetEnvConfig.targets ||
+      !(
+        typeof presetEnvConfig.targets === 'object' &&
+        'node' in presetEnvConfig.targets
+      ))
+  ) {
+    presetEnvConfig.targets = {
+      // Targets the current process' version of Node. This requires apps be
+      // built and deployed on the same version of Node.
+      node: 'current',
+    };
+  }
+
+  // specify a preset to use instead of @babel/preset-env
+  const customModernPreset =
+    isLaxModern && options['experimental-modern-preset'];
+
+  const result = {
+    sourceType: 'unambiguous',
+    presets: [
+      customModernPreset || [
+        require('@babel/preset-env').default,
+        presetEnvConfig,
+      ],
+      [
+        require('@babel/preset-react'),
+        Object.assign(
+          {
+            // This adds @babel/plugin-transform-react-jsx-source and
+            // @babel/plugin-transform-react-jsx-self automatically in development
+            development: isDevelopment || isTest,
+          },
+          (options['preset-react'] || {}).runtime !== 'automatic'
+            ? { pragma: '__jsx' }
+            : {},
+          options['preset-react'] || {},
+        ),
+      ],
+      options['preset-typescript'] !== false && [
+        require('@babel/preset-typescript'),
+        Object.assign(
+          { allowNamespaces: true, allExtensions: true, isTSX: true },
+          options['preset-typescript'] || {},
+        ),
+      ],
+    ].filter(Boolean),
+    plugins: [
+      (options['preset-react'] || {}).runtime !== 'automatic' && [
+        require('./babel-plugins/jsx-pragma'),
+        {
+          // This produces the following injected import for modules containing JSX:
+          //   import React from 'react';
+          //   var __jsx = React.createElement;
+          module: 'react',
+          importAs: 'React',
+          pragma: '__jsx',
+          property: 'createElement',
+        },
+      ],
+      [
+        require('./babel-plugins/optimize-hook-destructuring'),
+        {
+          // only optimize hook functions imported from React/Preact
+          lib: true,
+        },
+      ],
+      !isServer && [
+        require('@babel/plugin-transform-runtime'),
+        Object.assign(
+          {
+            corejs: false,
+            helpers: true,
+            regenerator: true,
+            useESModules: supportsESM && presetEnvConfig.modules !== 'commonjs',
+            absoluteRuntime: path.dirname(
+              require.resolve('@babel/runtime/package.json'),
+            ),
+            version: require('@babel/runtime/package.json').version,
+          },
+          options['transform-runtime'] || {},
+        ),
+      ],
+      isProduction && [
+        require('babel-plugin-transform-react-remove-prop-types'),
+        {
+          removeImport: true,
+        },
+      ],
+      isServer && require('@babel/plugin-syntax-bigint'),
+    ].filter(Boolean),
+  };
+
+  return result;
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@plone/babel-preset-razzle",
+  "version": "1.0.1",
+  "description": "Babel presets for Razzle",
+  "main": "index.js",
+  "author": "jaredpalmer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com:jaredpalmer/razzle.git",
+    "directory": "packages/babel-preset-razzle"
+  },
+  "license": "MIT",
+  "files": [
+    "index.js",
+    "babel-plugins/amp-attributes.js",
+    "babel-plugins/commonjs.js",
+    "babel-plugins/jsx-pragma.js",
+    "babel-plugins/no-anonymous-default-export.js",
+    "babel-plugins/optimize-hook-destructuring.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-syntax-bigint": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "chalk": "^5.6.2"
+  },
+  "devDependencies": {
+    "release-it": "^20.0.1"
+  },
+  "scripts": {
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha"
+  }
+}