fix: make mdx transformation more resilient

.changeset/weak-ducks-doubt.md

@@ -0,0 +1,5 @@
+---
+"ladle-react-native": minor
+---
+
+fix: native extension resolution issue and babel incompatibility with Expo

README.md

@@ -67,4 +67,4 @@ For powershell, replace in the above listings echo with the following
 @"
 export const World = () => <p>Hey</p>;
 "@ | out-file -encoding ASCII src/hello.stories.tsx
-```
+```

e2e/addons/package.json

@@ -19,7 +19,7 @@
     "@playwright/test": "^1.49.1",
     "axe-playwright": "^2.0.3",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "query-string": "^9.1.1",
     "react": "^19.0.0",

e2e/babel/package.json

@@ -18,7 +18,7 @@
     "@playwright/test": "^1.49.1",
     "@vitejs/plugin-react": "^4.3.4",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

e2e/baseweb/package.json

@@ -19,7 +19,7 @@
     "autoprefixer": "^10.4.20",
     "baseui": "^14.0.0",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "postcss": "^8.4.49",
     "react": "^19.0.0",

e2e/config-ts/package.json

@@ -17,7 +17,7 @@
     "@ladle/react": "workspace:*",
     "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

e2e/config/package.json

@@ -17,7 +17,7 @@
     "@ladle/react": "workspace:*",
     "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

e2e/css/package.json

@@ -18,7 +18,7 @@
     "@playwright/test": "^1.49.1",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "postcss": "^8.4.49",
     "react": "^19.0.0",

e2e/decorators/package.json

@@ -17,7 +17,7 @@
     "@ladle/react": "workspace:*",
     "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

e2e/msw/package.json

@@ -19,7 +19,7 @@
     "autoprefixer": "^10.4.20",
     "baseui": "^14.0.0",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "postcss": "^8.4.49",
     "react": "^19.0.0",

e2e/playwright/package.json

@@ -20,7 +20,7 @@
     "@playwright/test": "^1.49.1",
     "@types/sync-fetch": "^0.4.3",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

e2e/programmatic/package.json

@@ -19,7 +19,7 @@
     "@ladle/react": "workspace:*",
     "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

e2e/provider/package.json

@@ -17,7 +17,7 @@
     "@ladle/react": "workspace:*",
     "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "expo": "^51.0.26",
+    "expo": "^52.0.37",
     "metro-runtime": "^0.80.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

packages/example/package.json

@@ -7,24 +7,25 @@
     "serve": "ladle serve",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test": "echo 'no test'"
+    "test": "echo 'no test'",
+    "start": "expo start"
   },
   "dependencies": {
-    "@expo/metro-runtime": "^3.2.1",
+    "@expo/metro-runtime": "^4.0.1",
     "@ladle/react": "workspace:*",
-    "@react-native/assets-registry": "^0.75.2",
-    "expo": "^51.0.26",
-    "metro-runtime": "^0.80.10",
+    "@react-native/assets-registry": "0.77.1",
+    "expo": "^52.0.37",
+    "metro-runtime": "^0.81.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-native": "^0.74.5",
     "react-native-svg": "^15.5.0",
     "react-native-svg-transformer": "^1.5.0",
-    "react-native-web": "^0.19.12"
+    "react-native-web": "^0.19.13"
   },
   "devDependencies": {
     "@babel/core": "7.24.0",
     "@babel/runtime": "7.24.0",
-    "@react-native/metro-config": "^0.74.87"
+    "@react-native/metro-config": "^0.77.2"
   }
 }

packages/ladle/lib/app/ladle.css

@@ -45,10 +45,8 @@ body {
   grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
   overflow: auto;
   background-color: var(--ladle-blueprint);
-  background-image: linear-gradient(
-      rgba(255, 255, 255, 0.1) 2px,
-      transparent 2px
-    ),
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
     linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);

packages/ladle/lib/cli/metro-base.js

@@ -50,6 +50,7 @@ export async function getBaseMetroConfig(port, ladleConfig) {
        * @param {string} platform
        */
       resolveRequest(context, moduleName, platform) {
+        const newCtx = { ...context, preferNativePlatform: false };
         // Redirecting '/ladle.bundle' requests to the actual entry file.
         //
         // We have a pseudo bundle name called `ladle.bundle`.
@@ -96,7 +97,7 @@ export async function getBaseMetroConfig(port, ladleConfig) {
         }
 
         // Fall back to standard resolution for other modules
-        return context.resolveRequest(context, moduleName, platform);
+        return newCtx.resolveRequest(newCtx, moduleName, platform);
       },
     },
     transformer: {

packages/ladle/lib/cli/metro-prod.js

@@ -111,7 +111,10 @@ const metroProd = async (ladleConfig, configFolder) => {
    */
   const { code: bundle } = await metroServer.build({
     ...Server.DEFAULT_BUNDLE_OPTIONS,
-    entryFile: path.relative(projectRoot, entryFilePath),
+    entryFile: path.relative(
+      metroConfig?.server?.unstable_serverRoot || metroConfig.projectRoot,
+      entryFilePath,
+    ),
     dev: false,
     minify: false,
     platform: "web",

packages/ladle/lib/cli/vite-plugin/mdx-to-stories.js

@@ -168,6 +168,8 @@ const prepare = async (code, filename, transformMdx = false) => {
     : code;
   const ast = getAst(inputCode, filename);
   const output = await transformFromAstAsync(ast, inputCode, {
+    caller: { name: "metro", bundler: "metro", platform: "web" },
+    filename,
     plugins: [transformPlugin],
   });
   let result = output?.code?.replace(

packages/website/docs/nextjs.md

@@ -35,7 +35,7 @@ export default UnoptimizedLink;
 ```
 
 ```tsx title=".ladle/UnoptimizedImage.tsx"
-import React from 'react';
+import React from "react";
 
 interface UnoptimizedImageProps
   extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -48,10 +48,10 @@ const UnoptimizedImage: React.FC<UnoptimizedImageProps> = ({
 }) => {
   const style: React.CSSProperties = fill
     ? {
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
+        position: "absolute",
+        inset: "0",
+        width: "100%",
+        height: "100%",
       }
     : {};