fix: supports unicode property escape step

.changeset/wide-dodos-film.md

@@ -0,0 +1,8 @@
+---
+'@granite-js/react-native': patch
+'@granite-js/plugin-core': patch
+'@granite-js/native': patch
+'@granite-js/mpack': patch
+---
+
+fix: supports unicode property escape step

packages/mpack/package.json

@@ -81,6 +81,7 @@
     "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@babel/plugin-transform-flow-strip-types": "7.27.1",
+    "@babel/plugin-transform-unicode-regex": "7.27.1",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-react": "7.28.5",
     "@babel/preset-typescript": "7.28.5",

packages/mpack/src/bundler/internal/presets.ts

@@ -58,18 +58,6 @@ export function combineWithBaseBuildConfig(
           ].join('\n'),
         },
       },
-      babel: {
-        conditions: [
-          /**
-           * @TODO
-           * We're using a RegExp in Zod that's not supported by Hermes,
-           * so we're switching to Babel for transpilation since there's no compatible SWC config or plugin available.
-           *
-           * @see zod {@link https://github.com/colinhacks/zod/issues/2302}
-           */
-          (_code: string, path: string) => path.includes('node_modules/zod'),
-        ],
-      },
     },
     config.buildConfig
   );

packages/mpack/src/bundler/plugins/transformPlugin/steps/createTransformUnicodePropertyEscapeStep.ts

@@ -0,0 +1,32 @@
+import { transformSync } from '@babel/core';
+import { AsyncTransformStep } from '../../../../transformer/TransformPipeline';
+import { defineStepName } from '../../../../utils/defineStepName';
+
+export function createTransformUnicodePropertyEscapeStep(): AsyncTransformStep {
+  const unicodePropertyEscapeRegExp = /\\p\{[^}]+\}/u;
+
+  const transformUnicodePropertyEscapeStep: AsyncTransformStep = async (code, args) => {
+    if (!unicodePropertyEscapeRegExp.test(code)) {
+      return { code };
+    }
+
+    const result = transformSync(code, {
+      presets: [require.resolve('@babel/preset-typescript')],
+      plugins: [require.resolve('@babel/plugin-transform-unicode-regex')],
+      filename: args.path,
+      sourceMaps: false,
+      babelrc: false,
+      configFile: false,
+    });
+
+    if (result?.code != null) {
+      return { code: result.code };
+    }
+
+    return { code };
+  };
+
+  defineStepName(transformUnicodePropertyEscapeStep, 'transform-unicode-property-escape');
+
+  return transformUnicodePropertyEscapeStep;
+}

packages/mpack/src/bundler/plugins/transformPlugin/transformPlugin.ts

@@ -3,9 +3,9 @@ import * as fs from 'fs/promises';
 import { Plugin } from 'esbuild';
 import * as preludeScript from './helpers/preludeScript';
 import { createCacheSteps } from './steps/createCacheSteps';
-import { createFullyTransformStep } from './steps/createFullyTransformStep';
 import { createStripFlowStep } from './steps/createStripFlowStep';
 import { createTransformToHermesSyntaxStep } from './steps/createTransformToHermesSyntaxStep';
+import { createTransformUnicodePropertyEscapeStep } from './steps/createTransformUnicodePropertyEscapeStep';
 import { Performance } from '../../../performance';
 import { AsyncTransformPipeline } from '../../../transformer';
 import { PluginOptions } from '../types';
@@ -23,7 +23,7 @@ export function transformPlugin({ context, ...options }: PluginOptions<Transform
     setup(build) {
       const { id, config } = context;
       const { dev, cache, buildConfig } = config;
-      const { esbuild, swc, babel } = buildConfig;
+      const { esbuild, swc } = buildConfig;
 
       assert(id, 'id 값이 존재하지 않습니다');
       assert(typeof dev === 'boolean', 'dev 값이 존재하지 않습니다');
@@ -43,10 +43,7 @@ export function transformPlugin({ context, ...options }: PluginOptions<Transform
 
           return { code };
         })
-        .addStep(createFullyTransformStep({ dev, additionalBabelOptions: babel }), {
-          conditions: babel?.conditions,
-          skipOtherSteps: true,
-        })
+        .addStep(createTransformUnicodePropertyEscapeStep())
         .addStep(createStripFlowStep({ dev }))
         .addStep(createTransformToHermesSyntaxStep({ dev, additionalSwcOptions: swc }))
         .afterStep(cacheSteps.afterTransform);

packages/plugin-core/src/types/BuildConfig.ts

@@ -199,13 +199,6 @@ export interface SwcConfig {
 }
 
 export interface BabelConfig {
-  /**
-   * List of rules for Babel transform processing
-   * (option to skip Babel transform only when certain conditions are met)
-   *
-   * If all rules return `false`, Babel transform is skipped
-   */
-  conditions?: Array<(code: string, path: string) => boolean>;
   configFile?: string;
   presets?: string[];
   plugins?: (string | [string, any])[];

services/showcase/package.json

@@ -13,8 +13,8 @@
     "@granite-js/react-native": "workspace:*",
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "valibot": "^1.1.0",
-    "zod": "^4.1.12"
+    "valibot": "^1.2.0",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",

services/showcase/src/_app.tsx

@@ -6,4 +6,4 @@ function AppContainer({ children }: PropsWithChildren<InitialProps>) {
   return <>{children}</>;
 }
 
-export default Granite.registerApp(AppContainer, { context, appName: 'showcase' });
+export default Granite.registerApp(AppContainer, { context, appName: 'shared' });

services/showcase/src/pages/about.tsx

@@ -1,12 +1,17 @@
 import { createRoute, Stack } from '@granite-js/react-native';
 import { StyleSheet, Text } from 'react-native';
 import { Button } from '../components/Button';
+import * as v from 'valibot';
 
 export const Route = createRoute('/about', {
   component: Page,
+  validateParams: v.object({
+    name: v.string(),
+  }),
 });
 
 function Page() {
+  const params = Route.useParams();
   const navigation = Route.useNavigation();
 
   const handleGoShowcase = () => {
@@ -19,7 +24,7 @@
 
   return (
     <Stack.Vertical style={styles.container} gutter={16}>
-      <Text style={styles.title}>About Granite</Text>
+      <Text style={styles.title}>About {params.name}</Text>
       <Text style={styles.description}>Granite is a powerful and flexible React Native Framework 🚀</Text>
       <Button label="Show more" onPress={handleGoShowcase} />
       <Button label="Go Back" appearance="text" onPress={handleGoBack} />

services/showcase/src/pages/index.tsx

@@ -10,7 +10,7 @@ function Page() {
   const navigation = Route.useNavigation();
 
   const goToAboutPage = () => {
-    navigation.navigate('/about');
+    navigation.navigate({ name: '/about', params: { name: 'John' } });
   };
 
   return (

yarn.lock

@@ -2980,7 +2980,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
+"@babel/plugin-transform-unicode-regex@npm:7.27.1, @babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
   dependencies:
@@ -5095,8 +5095,8 @@ __metadata:
     react-native: "npm:0.72.6"
     react-test-renderer: "npm:18.2.0"
     typescript: "npm:^5.7.2"
-    valibot: "npm:^1.1.0"
-    zod: "npm:^4.1.12"
+    valibot: "npm:^1.2.0"
+    zod: "npm:^4.1.13"
   languageName: unknown
   linkType: soft
 
@@ -5277,6 +5277,7 @@ __metadata:
     "@babel/plugin-proposal-private-methods": "npm:7.18.6"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.11"
     "@babel/plugin-transform-flow-strip-types": "npm:7.27.1"
+    "@babel/plugin-transform-unicode-regex": "npm:7.27.1"
     "@babel/preset-env": "npm:7.28.5"
     "@babel/preset-react": "npm:7.28.5"
     "@babel/preset-typescript": "npm:7.28.5"
@@ -25491,6 +25492,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"valibot@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "valibot@npm:1.2.0"
+  peerDependencies:
+    typescript: ">=5"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/e6897ed2008fc900380a6ce39b62bc5fca45fd5e070f70571c6380ede3ba026d0b7016230215d87f7f3d672a28dbde5a0522d39830b493fdc3dccd1a59ef4ee6
+  languageName: node
+  linkType: hard
+
 "validate-npm-package-license@npm:^3.0.1, validate-npm-package-license@npm:^3.0.4":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"
@@ -26453,6 +26466,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^4.1.13":
+  version: 4.1.13
+  resolution: "zod@npm:4.1.13"
+  checksum: 10c0/d7e74e82dba81a91ffc3239cd85bc034abe193a28f7087a94ab258a3e48e9a7ca4141920cac979a0d781495b48fc547777394149f26be04c3dc642f58bbc3941
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^2.0.4":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"