babel-preset-expo 12.0.0-preview.1 → 12.0.0-preview.3

package/build/server-actions-plugin.js

@@ -263,14 +263,94 @@ function reactServerActionsPlugin(api) {
                 if (!state.file.metadata.isModuleMarkedWithUseServerDirective) {
                     return;
                 }
-                // TODO: support variable functions
-                throw path.buildCodeFrameError(`Not implemented: 'export default' declarations in "use server" files. Try using 'export { name as default }' instead.`);
+                // Convert `export default function foo() {}` to `function foo() {}; export { foo as default }`
+                if (path.node.declaration) {
+                    if (t.isFunctionDeclaration(path.node.declaration)) {
+                        let { id } = path.node.declaration;
+                        if (id == null) {
+                            const moduleScope = path.scope.getProgramParent();
+                            const extractedIdentifier = moduleScope.generateUidIdentifier('$$INLINE_ACTION');
+                            id = extractedIdentifier;
+                            // Transform `async function () {}` to `async function $$INLINE_ACTION() {}`
+                            path.node.declaration.id = extractedIdentifier;
+                        }
+                        const exportedSpecifier = t.exportSpecifier(id, t.identifier('default'));
+                        path.replaceWith(path.node.declaration);
+                        path.insertAfter(t.exportNamedDeclaration(null, [exportedSpecifier]));
+                    }
+                    else {
+                        // Convert anonymous function expressions to named function expressions and export them as default.
+                        // export default foo = async () => {}
+                        // vvv
+                        // const foo = async () => {}
+                        // (() => _registerServerReference(foo, "file:///unknown", "default"))();
+                        // export { foo as default };
+                        if (t.isAssignmentExpression(path.node.declaration) &&
+                            t.isArrowFunctionExpression(path.node.declaration.right)) {
+                            if (!t.isIdentifier(path.node.declaration.left)) {
+                                throw path.buildCodeFrameError(`Expected an assignment to an identifier but found ${path.node.declaration.left.type}.`);
+                            }
+                            const { left, right } = path.node.declaration;
+                            const id = left;
+                            const exportedSpecifier = t.exportSpecifier(id, t.identifier('default'));
+                            // Replace `export default foo = async () => {}` with `const foo = async () => {}`
+                            path.replaceWith(t.variableDeclaration('const', [t.variableDeclarator(id, right)]));
+                            // Insert `(() => _registerServerReference(foo, "file:///unknown", "default"))();`
+                            path.insertAfter(t.exportNamedDeclaration(null, [exportedSpecifier]));
+                        }
+                        else if (t.isArrowFunctionExpression(path.node.declaration) &&
+                            path.node.declaration) {
+                            // export default async () => {}
+                            // Give the function a name
+                            // const $$INLINE_ACTION = async () => {}
+                            const moduleScope = path.scope.getProgramParent();
+                            const extractedIdentifier = moduleScope.generateUidIdentifier('$$INLINE_ACTION');
+                            // @ts-expect-error: Transform `export default async () => {}` to `const $$INLINE_ACTION = async () => {}`
+                            path.node.declaration = t.variableDeclaration('const', [
+                                t.variableDeclarator(extractedIdentifier, path.node.declaration),
+                            ]);
+                            // Strip the `export default`
+                            path.replaceWith(path.node.declaration);
+                            // export { $$INLINE_ACTION as default }
+                            const exportedSpecifier = t.exportSpecifier(extractedIdentifier, t.identifier('default'));
+                            path.insertAfter(t.exportNamedDeclaration(null, [exportedSpecifier]));
+                        }
+                        else if (
+                        // Match `export default foo;`
+                        t.isIdentifier(path.node.declaration)) {
+                            // Ensure the `path.node.declaration` is a function or a variable for a function.
+                            const binding = path.scope.getBinding(path.node.declaration.name);
+                            const isServerActionType = t.isFunctionDeclaration(binding?.path.node ?? path.node.declaration) ||
+                                t.isArrowFunctionExpression(binding?.path.node ?? path.node.declaration) ||
+                                // `const foo = async () => {}`
+                                (t.isVariableDeclarator(binding?.path.node) &&
+                                    t.isArrowFunctionExpression(binding?.path.node.init));
+                            if (isServerActionType) {
+                                // Convert `export default foo;` to `export { foo as default };`
+                                const exportedSpecifier = t.exportSpecifier(path.node.declaration, t.identifier('default'));
+                                path.replaceWith(t.exportNamedDeclaration(null, [exportedSpecifier]));
+                            }
+                        }
+                        else {
+                            // Unclear when this happens.
+                            throw path.buildCodeFrameError(`Cannot create server action. Expected a assignment expression but found ${path.node.declaration.type}.`);
+                        }
+                    }
+                }
+                else {
+                    // TODO: Unclear when this happens.
+                    throw path.buildCodeFrameError(`Not implemented: 'export default' declarations in "use server" files. Try using 'export { name as default }' instead.`);
+                }
             },
             ExportNamedDeclaration(path, state) {
                 assertExpoMetadata(state.file.metadata);
                 if (!state.file.metadata.isModuleMarkedWithUseServerDirective) {
                     return;
                 }
+                // This can happen with `export {};` and TypeScript types.
+                if (!path.node.declaration && !path.node.specifiers.length) {
+                    return;
+                }
                 const registerServerReferenceId = addReactImport();
                 const actionModuleId = getActionModuleId();
                 const createRegisterCall = (identifier, exported = identifier) => {
@@ -287,11 +367,12 @@ function reactServerActionsPlugin(api) {
                     for (const specifier of path.node.specifiers) {
                         // `export * as ns from './foo';`
                         if (t.isExportNamespaceSpecifier(specifier)) {
-                            throw path.buildCodeFrameError('Not implemented: Namespace exports');
+                            throw path.buildCodeFrameError('Namespace exports for server actions are not supported. Re-export named actions instead: export { foo } from "./bar".');
                         }
                         else if (t.isExportDefaultSpecifier(specifier)) {
+                            // NOTE: This is handled by ExportDefaultDeclaration
                             // `export default foo;`
-                            throw path.buildCodeFrameError('Not implemented (ExportDefaultSpecifier in ExportNamedDeclaration)');
+                            throw path.buildCodeFrameError('Internal error while extracting server actions. Expected `export default variable;` to be extracted. (ExportDefaultSpecifier in ExportNamedDeclaration)');
                         }
                         else if (t.isExportSpecifier(specifier)) {
                             // `export { foo };`
@@ -311,9 +392,6 @@ function reactServerActionsPlugin(api) {
                             }
                             state.file.metadata.extractedActions.push({ localName, exportedName });
                         }
-                        else {
-                            throw path.buildCodeFrameError('Not implemented: whatever this is');
-                        }
                     }
                     return;
                 }
@@ -339,6 +417,14 @@ function reactServerActionsPlugin(api) {
                         }
                         return [innerPath.get('id').node];
                     }
+                    else if (
+                    // TypeScript type exports
+                    innerPath.isTypeAlias() ||
+                        innerPath.isTSDeclareFunction() ||
+                        innerPath.isTSInterfaceDeclaration() ||
+                        innerPath.isTSTypeAliasDeclaration()) {
+                        return [];
+                    }
                     else {
                         throw innerPath.buildCodeFrameError(`Unimplemented server action export`);
                     }

package/build/use-dom-directive-plugin.js

@@ -17,6 +17,7 @@ function expoUseDomDirectivePlugin(api) {
     // TODO: Is exporting
     const isProduction = api.caller(common_1.getIsProd);
     const platform = api.caller((caller) => caller?.platform);
+    const projectRoot = api.caller(common_1.getPossibleProjectRoot);
     return {
         name: 'expo-use-dom-directive',
         visitor: {
@@ -59,6 +60,23 @@ function expoUseDomDirectivePlugin(api) {
                 if (!hasDefaultExport) {
                     throw path.buildCodeFrameError('The "use dom" directive requires a default export to be present in the file.');
                 }
+                // Assert that _layout routes cannot be used in DOM components.
+                const fileBasename = (0, path_1.basename)(filePath);
+                if (projectRoot &&
+                    // Detecting if the file is in the router root would be extensive as it would cause a more complex
+                    // cache key for each file. Instead, let's just check if the file is in the project root and is not a node_module,
+                    // then we can assert that users should not use `_layout` or `+api` with "use dom".
+                    filePath.includes(projectRoot) &&
+                    !filePath.match(/node_modules/)) {
+                    if (fileBasename.match(/^_layout\.[jt]sx?$/)) {
+                        throw path.buildCodeFrameError('Layout routes cannot be marked as DOM components because they cannot render native views.');
+                    }
+                    else if (
+                    // No API routes
+                    fileBasename.match(/\+api\.[jt]sx?$/)) {
+                        throw path.buildCodeFrameError('API routes cannot be marked as DOM components.');
+                    }
+                }
                 const outputKey = url_1.default.pathToFileURL(filePath).href;
                 const proxyModule = [
                     `import React from 'react';`,
@@ -81,7 +99,7 @@ function expoUseDomDirectivePlugin(api) {
                 else {
                     proxyModule.push(
                     // Add the basename to improve the Safari debug preview option.
-                    `const source = { uri: new URL("/_expo/@dom/${(0, path_1.basename)(filePath)}?file=" + ${JSON.stringify(outputKey)}, require("react-native/Libraries/Core/Devtools/getDevServer")().url).toString() };`);
+                    `const source = { uri: new URL("/_expo/@dom/${fileBasename}?file=" + ${JSON.stringify(outputKey)}, require("react-native/Libraries/Core/Devtools/getDevServer")().url).toString() };`);
                 }
                 proxyModule.push(`
 export default React.forwardRef((props, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "12.0.0-preview.1",
+  "version": "12.0.0-preview.3",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
@@ -47,7 +47,7 @@
     "@babel/plugin-transform-parameters": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
-    "@react-native/babel-preset": "0.76.0",
+    "@react-native/babel-preset": "0.76.1",
     "babel-plugin-react-native-web": "~0.19.13",
     "react-refresh": "^0.14.2"
   },
@@ -70,5 +70,5 @@
     "jest": "^29.2.1",
     "react-compiler-runtime": "^19.0.0-beta-8a03594-20241020"
   },
-  "gitHead": "0a07b965c4bef67e7718355a0dc770d524ad3cee"
+  "gitHead": "d5b7ec4949eb461634b2f02a1a0ff1df2a0e2a21"
 }