babel-preset-expo 0.0.1-canary-20240222-c729a13 → 0.0.1-canary-20240305-e60019e

package/build/client-module-proxy-plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright © 2024 650 Industries.
+ */
+import { ConfigAPI, types } from '@babel/core';
+export declare function reactClientReferencesPlugin(api: ConfigAPI & {
+    types: typeof types;
+}): babel.PluginObj;

package/build/client-module-proxy-plugin.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactClientReferencesPlugin = void 0;
+const url_1 = __importDefault(require("url"));
+function reactClientReferencesPlugin(api) {
+    const { types: t } = api;
+    const reactServerAdapter = 'react-server-dom-webpack/server';
+    return {
+        name: 'expo-client-references',
+        visitor: {
+            Program(path, state) {
+                const isUseClient = path.node.directives.some((directive) => directive.value.value === 'use client');
+                // TODO: use server can be added to scopes inside of the file. https://github.com/facebook/react/blob/29fbf6f62625c4262035f931681c7b7822ca9843/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js#L55
+                const isUseServer = path.node.directives.some((directive) => directive.value.value === 'use server');
+                if (isUseClient && isUseServer) {
+                    throw path.buildCodeFrameError("It's not possible to have both `use client` and `use server` directives in the same file.");
+                }
+                const filePath = state.file.opts.filename;
+                if (!filePath) {
+                    // This can happen in tests or systems that use Babel standalone.
+                    throw new Error('[Babel] Expected a filename to be set in the state');
+                }
+                const outputKey = url_1.default.pathToFileURL(filePath).href;
+                // File starts with "use client" directive.
+                if (!isUseClient && !isUseServer) {
+                    // Do nothing for code that isn't marked as a client component.
+                    return;
+                }
+                // Clear the body
+                if (isUseClient) {
+                    path.node.body = [];
+                    path.node.directives = [];
+                    // Inject the following:
+                    //
+                    // module.exports = require('react-server-dom-webpack/server').createClientModuleProxy(`${outputKey}#${filePath}`)
+                    // TODO: Use `require.resolveWeak` instead of `filePath` to avoid leaking the file path.
+                    // module.exports = require('react-server-dom-webpack/server').createClientModuleProxy(`${outputKey}#${require.resolveWeak(filePath)}`)
+                    path.pushContainer('body', t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier('module'), t.identifier('exports')), t.callExpression(t.memberExpression(t.callExpression(t.identifier('require'), [
+                        t.stringLiteral(reactServerAdapter),
+                    ]), t.identifier('createClientModuleProxy')), 
+                    // `${outputKey}#${require.resolveWeak(filePath)}`
+                    [t.stringLiteral(outputKey)]))));
+                }
+                else {
+                    // Inject the following:
+                    //
+                    // ;(() => {
+                    //  const { registerServerReference } = require('react-server-dom-webpack/server');
+                    //  if (typeof module.exports === 'function') registerServerReference(module.exports, moduleId, null);
+                    //  else {
+                    //    for (const key in module.exports) {
+                    //      if (typeof module.exports[key] === 'function') {
+                    //        registerServerReference(module.exports[key], moduleId, key);
+                    //       }
+                    //     }
+                    //   }
+                    // })()
+                    const mmexp = t.memberExpression(t.callExpression(t.identifier('require'), [t.stringLiteral(reactServerAdapter)]), t.identifier('registerServerReference'));
+                    // Create the loop body
+                    const loopBody = t.blockStatement([
+                        t.ifStatement(t.binaryExpression('===', t.unaryExpression('typeof', t.memberExpression(t.memberExpression(t.identifier('module'), t.identifier('exports')), t.identifier('key'), true)), t.stringLiteral('function')), t.expressionStatement(t.callExpression(mmexp, [
+                            t.memberExpression(t.memberExpression(t.identifier('module'), t.identifier('exports')), t.identifier('key'), true),
+                            t.stringLiteral(outputKey),
+                            t.identifier('key'),
+                        ]))),
+                    ]);
+                    // Create the for-in loop
+                    const forInStatement = t.forInStatement(t.variableDeclaration('const', [t.variableDeclarator(t.identifier('key'))]), t.memberExpression(t.identifier('module'), t.identifier('exports')), loopBody);
+                    path.pushContainer('body', t.expressionStatement(t.callExpression(t.arrowFunctionExpression([], t.blockStatement([
+                        t.ifStatement(t.binaryExpression('===', t.unaryExpression('typeof', t.memberExpression(t.identifier('module'), t.identifier('exports'))), t.stringLiteral('function')), 
+                        // registerServerReference(module.exports, moduleId, null);
+                        t.blockStatement([
+                            t.expressionStatement(t.callExpression(mmexp, [
+                                t.memberExpression(t.identifier('module'), t.identifier('exports')),
+                                t.stringLiteral(outputKey),
+                                t.nullLiteral(),
+                            ])),
+                        ]), 
+                        // Else
+                        t.blockStatement([
+                            // for (const key in module.exports) {
+                            //   if (typeof module.exports[key] === 'function') {
+                            //     registerServerReference(module.exports[key], moduleId, key);
+                            //   }
+                            // }
+                            forInStatement,
+                        ])),
+                    ])), [])));
+                    //
+                }
+            },
+        },
+    };
+}
+exports.reactClientReferencesPlugin = reactClientReferencesPlugin;

package/build/common.d.ts

@@ -3,6 +3,8 @@ export declare function hasModule(name: string): boolean;
 export declare function getBundler(caller: any): any;
 export declare function getPlatform(caller: any): any;
 export declare function getPossibleProjectRoot(caller: any): any;
+/** If bundling for a react-server target. */
+export declare function getIsReactServer(caller: any): boolean;
 export declare function getIsDev(caller: any): any;
 export declare function getIsFastRefreshEnabled(caller: any): any;
 export declare function getIsProd(caller: any): boolean;

package/build/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAsyncRoutes = exports.getInlineEnvVarsEnabled = exports.getExpoRouterAbsoluteAppRoot = exports.getIsServer = exports.getBaseUrl = exports.getIsNodeModule = exports.getIsProd = exports.getIsFastRefreshEnabled = exports.getIsDev = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
+exports.getAsyncRoutes = exports.getInlineEnvVarsEnabled = exports.getExpoRouterAbsoluteAppRoot = exports.getIsServer = exports.getBaseUrl = exports.getIsNodeModule = exports.getIsProd = exports.getIsFastRefreshEnabled = exports.getIsDev = exports.getIsReactServer = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
 const path_1 = __importDefault(require("path"));
 function hasModule(name) {
     try {
@@ -56,6 +56,11 @@ function getPossibleProjectRoot(caller) {
     return process.env.EXPO_PROJECT_ROOT;
 }
 exports.getPossibleProjectRoot = getPossibleProjectRoot;
+/** If bundling for a react-server target. */
+function getIsReactServer(caller) {
+    return caller?.isReactServer ?? false;
+}
+exports.getIsReactServer = getIsReactServer;
 function getIsDev(caller) {
     if (caller?.isDev != null)
         return caller.isDev;

package/build/environment-restricted-imports.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright © 2024 650 Industries.
+ */
+import { ConfigAPI, types } from '@babel/core';
+/** Prevent importing certain known imports in given environments. This is for sanity to ensure a module never accidentally gets imported unexpectedly. */
+export declare function environmentRestrictedImportsPlugin(api: ConfigAPI & {
+    types: typeof types;
+}): babel.PluginObj;

package/build/environment-restricted-imports.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.environmentRestrictedImportsPlugin = void 0;
+const common_1 = require("./common");
+const FORBIDDEN_CLIENT_IMPORTS = ['server-only'];
+const FORBIDDEN_REACT_SERVER_IMPORTS = ['client-only'];
+/** Prevent importing certain known imports in given environments. This is for sanity to ensure a module never accidentally gets imported unexpectedly. */
+function environmentRestrictedImportsPlugin(api) {
+    const { types: t } = api;
+    const isReactServer = api.caller(common_1.getIsReactServer);
+    const forbiddenPackages = isReactServer
+        ? FORBIDDEN_REACT_SERVER_IMPORTS
+        : FORBIDDEN_CLIENT_IMPORTS;
+    function checkSource(source, path) {
+        forbiddenPackages.forEach((forbiddenImport) => {
+            if (source === forbiddenImport) {
+                if (isReactServer) {
+                    throw path.buildCodeFrameError(`Importing '${forbiddenImport}' module is not allowed in a React server bundle. Add the "use client" directive to this file or one of the parent modules to allow importing this module.`);
+                }
+                else {
+                    throw path.buildCodeFrameError(`Importing '${forbiddenImport}' module is not allowed in a client component.`);
+                }
+            }
+        });
+    }
+    return {
+        name: 'expo-environment-restricted-imports-plugin',
+        visitor: {
+            ImportDeclaration(path) {
+                checkSource(path.node.source.value, path);
+            },
+            ExportAllDeclaration(path) {
+                if (path.node.source) {
+                    checkSource(path.node.source.value, path);
+                }
+            },
+            ExportNamedDeclaration(path) {
+                if (path.node.source) {
+                    checkSource(path.node.source.value, path);
+                }
+            },
+            CallExpression(path) {
+                if ((('name' in path.node.callee && path.node.callee.name === 'require') ||
+                    (t.isMemberExpression(path.node.callee) &&
+                        'name' in path.node.callee.property &&
+                        ['resolveWeak', 'importAll', 'importDefault'].includes(path.node.callee.property.name))) &&
+                    path.node.arguments.length > 0 &&
+                    t.isStringLiteral(path.node.arguments[0])) {
+                    checkSource(path.node.arguments[0].value, path);
+                }
+                // Handle dynamic import() syntax
+                else if (path.node.callee.type === 'Import' &&
+                    path.node.arguments.length > 0 &&
+                    t.isStringLiteral(path.node.arguments[0])) {
+                    checkSource(path.node.arguments[0].value, path);
+                }
+            },
+        },
+    };
+}
+exports.environmentRestrictedImportsPlugin = environmentRestrictedImportsPlugin;

package/build/index.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const client_module_proxy_plugin_1 = require("./client-module-proxy-plugin");
 const common_1 = require("./common");
+const environment_restricted_imports_1 = require("./environment-restricted-imports");
 const expo_inline_manifest_plugin_1 = require("./expo-inline-manifest-plugin");
 const expo_router_plugin_1 = require("./expo-router-plugin");
 const inline_env_vars_1 = require("./inline-env-vars");
 const lazyImports_1 = require("./lazyImports");
+const restricted_react_api_plugin_1 = require("./restricted-react-api-plugin");
 function getOptions(options, platform) {
     const tag = platform === 'web' ? 'web' : 'native';
     return {
@@ -18,6 +21,7 @@ function babelPresetExpo(api, options = {}) {
     let platform = api.caller((caller) => caller?.platform);
     const engine = api.caller((caller) => caller?.engine) ?? 'default';
     const isDev = api.caller(common_1.getIsDev);
+    const isReactServer = api.caller(common_1.getIsReactServer);
     const isFastRefreshEnabled = api.caller(common_1.getIsFastRefreshEnabled);
     const baseUrl = api.caller(common_1.getBaseUrl);
     const supportsStaticESM = api.caller((caller) => caller?.supportsStaticESM);
@@ -106,6 +110,14 @@ function babelPresetExpo(api, options = {}) {
     if ((0, common_1.hasModule)('expo-router')) {
         extraPlugins.push(expo_router_plugin_1.expoRouterBabelPlugin);
     }
+    // Ensure these only run when the user opts-in to bundling for a react server to prevent unexpected behavior for
+    // users who are bundling using the client-only system.
+    if (isReactServer) {
+        extraPlugins.push(client_module_proxy_plugin_1.reactClientReferencesPlugin);
+        extraPlugins.push(restricted_react_api_plugin_1.environmentRestrictedReactAPIsPlugin);
+    }
+    // This plugin is fine to run whenever as the server-only imports were introduced as part of RSC and shouldn't be used in any client code.
+    extraPlugins.push(environment_restricted_imports_1.environmentRestrictedImportsPlugin);
     if (isFastRefreshEnabled) {
         extraPlugins.push([
             require('react-refresh/babel'),

package/build/restricted-react-api-plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright © 2024 650 Industries.
+ */
+import { ConfigAPI, types } from '@babel/core';
+export declare function environmentRestrictedReactAPIsPlugin(api: ConfigAPI & {
+    types: typeof types;
+}): babel.PluginObj;

package/build/restricted-react-api-plugin.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.environmentRestrictedReactAPIsPlugin = void 0;
+const INVALID_SERVER_REACT_DOM_APIS = [
+    'findDOMNode',
+    'flushSync',
+    'unstable_batchedUpdates',
+    'useFormStatus',
+    'useFormState',
+];
+// From the React docs: https://github.com/vercel/next.js/blob/d43a387d271263f2c1c4da6b9db826e382fc489c/packages/next-swc/crates/next-custom-transforms/src/transforms/react_server_components.rs#L665-L681
+const INVALID_SERVER_REACT_APIS = [
+    'Component',
+    'createContext',
+    'createFactory',
+    'PureComponent',
+    'useDeferredValue',
+    'useEffect',
+    'useImperativeHandle',
+    'useInsertionEffect',
+    'useLayoutEffect',
+    'useReducer',
+    'useRef',
+    'useState',
+    'useSyncExternalStore',
+    'useTransition',
+    'useOptimistic',
+];
+function isNodeModule(path) {
+    return path != null && /[\\/]node_modules[\\/]/.test(path);
+}
+// Restricts imports from `react` and `react-dom` when using React Server Components.
+const FORBIDDEN_IMPORTS = {
+    react: INVALID_SERVER_REACT_APIS,
+    'react-dom': INVALID_SERVER_REACT_DOM_APIS,
+};
+function environmentRestrictedReactAPIsPlugin(api) {
+    const { types: t } = api;
+    return {
+        name: 'expo-environment-restricted-react-api-plugin',
+        visitor: {
+            ImportDeclaration(path, state) {
+                // Skip node_modules
+                if (isNodeModule(state.file.opts.filename)) {
+                    return;
+                }
+                const sourceValue = path.node.source.value;
+                const forbiddenList = FORBIDDEN_IMPORTS[sourceValue];
+                if (forbiddenList) {
+                    path.node.specifiers.forEach((specifier) => {
+                        if (t.isImportSpecifier(specifier)) {
+                            const importName = t.isStringLiteral(specifier.imported)
+                                ? specifier.imported.value
+                                : specifier.imported.name;
+                            // Check for both named and namespace imports
+                            const isForbidden = forbiddenList.includes(importName);
+                            if (isForbidden) {
+                                // Add special handling for `Component` since it is different to a function API.
+                                throw path.buildCodeFrameError(`Client-only "${sourceValue}" API "${importName}" cannot be imported in a React server component. Add the "use client" directive to the top of this file or one of the parent files to enable running this stateful code on a user's device.`);
+                            }
+                        }
+                        else {
+                            const importName = t.isStringLiteral(specifier.local)
+                                ? specifier.local
+                                : specifier.local.name;
+                            // Save namespace import for later checks in MemberExpression
+                            path.scope.setData('importedNamespace', { [importName]: sourceValue });
+                        }
+                    });
+                }
+            },
+            MemberExpression(path) {
+                const importedNamespaces = path.scope.getData('importedNamespace') || {};
+                Object.keys(importedNamespaces).forEach((namespace) => {
+                    const library = importedNamespaces[namespace];
+                    const forbiddenList = FORBIDDEN_IMPORTS[library];
+                    const objectName = t.isIdentifier(path.node.object) ? path.node.object.name : null;
+                    if (objectName === namespace &&
+                        forbiddenList &&
+                        t.isIdentifier(path.node.property) &&
+                        forbiddenList.includes(path.node.property.name)) {
+                        // Throw a special error for class components since it's not always clear why they cannot be used in RSC.
+                        // e.g. https://x.com/Baconbrix/status/1749223042440392806?s=20
+                        if (path.node.property.name === 'Component') {
+                            throw path.buildCodeFrameError(`Class components cannot be used in a React server component due to their ability to contain stateful and interactive APIs that cannot be statically evaluated in non-interactive environments such as a server or at build-time. Migrate to a function component, or add the "use client" directive to the top of this file or one of the parent files to render this class component on a user's device.`);
+                        }
+                        throw path.buildCodeFrameError(`Client-only "${namespace}" API "${path.node.property.name}" cannot be used in a React server component. Add the "use client" directive to the top of this file or one of the parent files to enable running this stateful code on a user's device.`);
+                    }
+                });
+            },
+        },
+    };
+}
+exports.environmentRestrictedReactAPIsPlugin = environmentRestrictedReactAPIsPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "0.0.1-canary-20240222-c729a13",
+  "version": "0.0.1-canary-20240305-e60019e",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
@@ -53,8 +53,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "expo-module-scripts": "0.0.1-canary-20240222-c729a13",
+    "expo-module-scripts": "0.0.1-canary-20240305-e60019e",
     "jest": "^29.2.1"
   },
-  "gitHead": "c729a13f936926743c13c021f569a22921455e49"
+  "gitHead": "e60019e11a6d46e330b57b18c64468a58d589875"
 }