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])[];

packages/plugin-core/src/utils/mergeBabel.spec.ts

@@ -35,19 +35,6 @@ describe('mergeBabel', () => {
     expect(result?.plugins).toEqual(['plugin1', 'plugin2']);
   });
 
-  it('merges conditions arrays', () => {
-    const condition1 = (code: string) => code.includes('test1');
-    const condition2 = (code: string) => code.includes('test2');
-
-    const source = { conditions: [condition1] };
-    const target = { conditions: [condition2] };
-    const result = mergeBabel(source, target);
-
-    expect(result?.conditions).toHaveLength(2);
-    expect(result?.conditions).toContain(condition1);
-    expect(result?.conditions).toContain(condition2);
-  });
-
   it('handles missing arrays gracefully', () => {
     const source = { presets: ['preset1'] };
     const target = { plugins: ['plugin1'] };
@@ -66,21 +53,16 @@ describe('mergeBabel', () => {
   });
 
   it('performs complete merge with all properties', () => {
-    const condition1 = (code: string) => code.includes('test1');
-    const condition2 = (code: string) => code.includes('test2');
-
     const source = {
       configFile: 'babel.config.js',
       presets: ['preset1'],
       plugins: ['plugin1'],
-      conditions: [condition1],
     };
 
     const target = {
       configFile: 'babel.config.json',
       presets: ['preset2'],
       plugins: ['plugin2'],
-      conditions: [condition2],
     };
 
     const result = mergeBabel(source, target);
@@ -89,7 +71,6 @@ describe('mergeBabel', () => {
       configFile: 'babel.config.json',
       presets: ['preset1', 'preset2'],
       plugins: ['plugin1', 'plugin2'],
-      conditions: [condition1, condition2],
     });
   });
 });

packages/plugin-core/src/utils/mergeBabel.ts

@@ -18,6 +18,5 @@ export function mergeBabel(source: BuildConfig['babel'], target: BuildConfig['ba
     ...target,
     presets: [...(source.presets ?? []), ...(target.presets ?? [])],
     plugins: [...(source.plugins ?? []), ...(target.plugins ?? [])],
-    conditions: [...(source.conditions ?? []), ...(target.conditions ?? [])],
   };
 }

packages/plugin-core/src/utils/mergeConfig.spec.ts

@@ -8,8 +8,6 @@ describe('mergeConfig', () => {
     const mockLoad2 = vitest.fn();
 
     const mockPluginOption = {};
-    const mockCondition1 = vitest.fn();
-    const mockCondition2 = vitest.fn();
 
     const mockMiddleware1 = vitest.fn();
     const mockMiddleware2 = vitest.fn();
@@ -32,7 +30,6 @@ describe('mergeConfig', () => {
       babel: {
         presets: ['preset1'],
         plugins: [['plugin1', mockPluginOption], 'plugin2'],
-        conditions: [mockCondition1],
       },
       esbuild: {
         minify: true,
@@ -70,7 +67,6 @@ describe('mergeConfig', () => {
       babel: {
         presets: ['preset2'],
         plugins: ['plugin3'],
-        conditions: [mockCondition2],
       },
       esbuild: {
         sourcemap: true,
@@ -122,7 +118,6 @@ describe('mergeConfig', () => {
       },
       babel: {
         presets: ['preset1', 'preset2'],
-        conditions: [mockCondition1, mockCondition2],
         plugins: [['plugin1', mockPluginOption], 'plugin2', 'plugin3'],
       },
       esbuild: {
@@ -264,8 +259,6 @@ describe('mergeConfig', () => {
     const mockLoad2 = vitest.fn();
 
     const mockPluginOption = {};
-    const mockCondition1 = vitest.fn();
-    const mockCondition2 = vitest.fn();
 
     const mockMiddleware1 = vitest.fn();
     const mockMiddleware2 = vitest.fn();
@@ -337,7 +330,6 @@ describe('mergeConfig', () => {
     const target2: GranitePluginCore['config'] = {
       babel: {
         plugins: ['plugin3'],
-        conditions: [mockCondition1],
       },
       swc: {
         plugins: ['swc-plugin' as any],
@@ -356,7 +348,6 @@ describe('mergeConfig', () => {
       },
       babel: {
         plugins: ['plugin4'],
-        conditions: [mockCondition2],
       },
       esbuild: {
         prelude: ['source-2.js'],
@@ -409,7 +400,6 @@ describe('mergeConfig', () => {
       babel: {
         presets: ['preset1', 'preset2'],
         plugins: [['plugin1', {}], 'plugin2', 'plugin3', 'plugin4'],
-        conditions: [mockCondition1, mockCondition2],
       },
       metro: {
         middlewares: [mockMiddleware1, mockMiddleware2],

services/counter/src/router.gen.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 // This file is auto-generated by @granite-js/react-native. DO NOT EDIT.
 import { Route as _IndexRoute } from '../pages/';
 

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/pages/about.tsx

@@ -1,12 +1,17 @@
 import { createRoute, Stack } from '@granite-js/react-native';
 import { StyleSheet, Text } from 'react-native';
+import * as v from 'valibot';
 import { Button } from '../components/Button';
 
 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 @@ function Page() {
 
   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('/about', { name: 'John' });
   };
 
   return (

services/showcase/src/pages/showcase/index.tsx

@@ -21,7 +21,7 @@ function Showcase() {
   );
 
   const handlePressShowcaseItem = (page: keyof RegisterScreen) => {
-    navigation.navigate(page);
+    navigation.navigate(page, { name: 'John' });
   };
 
   return (