feat: preset

Author: jbroma

apps/tester-app/babel.config.js

@@ -1,32 +1,9 @@
 module.exports = {
   plugins: [
-    '@babel/plugin-syntax-typescript',
-    '@react-native/babel-plugin-codegen',
-    '@babel/plugin-transform-flow-strip-types',
     [
       '@babel/plugin-transform-react-jsx',
       { runtime: 'automatic', importSource: 'nativewind' },
     ],
     'react-native-reanimated/plugin',
   ],
-  overrides: [
-    {
-      test: /\.ts$/,
-      plugins: [
-        [
-          '@babel/plugin-syntax-typescript',
-          { isTSX: false, allowNamespaces: true },
-        ],
-      ],
-    },
-    {
-      test: /\.tsx$/,
-      plugins: [
-        [
-          '@babel/plugin-syntax-typescript',
-          { isTSX: true, allowNamespaces: true },
-        ],
-      ],
-    },
-  ],
 };

apps/tester-app/rspack.config.mjs

@@ -43,7 +43,9 @@ export default (env) => {
           use: {
             loader: '@callstack/repack/babel-loader',
             parallel: true,
-            options: {},
+            options: {
+              projectRoot: context,
+            },
           },
           type: 'javascript/auto',
         },

packages/repack/src/loaders/babelLoader/babelLoader.ts

@@ -10,6 +10,8 @@ import {
 import * as hermesParser from 'hermes-parser';
 
 import type { LoaderContext } from '@rspack/core';
+import { type BabelLoaderOptions, getOptions } from './options.js';
+import { repackBabelPreset } from './preset.js';
 
 export const raw = false;
 
@@ -71,7 +73,6 @@ const getBabelRC = (() => {
       }
 
       // If we found a babel config file, extend our config off of it
-      // otherwise the default config will be used
       if (fs.existsSync(projectBabelRCPath)) {
         babelRC.extends = projectBabelRCPath;
       }
@@ -92,8 +93,11 @@ function buildBabelConfig(
     code: true,
     cwd: options.projectRoot,
     filename,
-    highlightCode: false,
+    highlightCode: true,
     compact: false,
+    comments: true,
+    minified: false,
+    presets: [repackBabelPreset],
   };
 
   return { ...babelRC, ...extraConfig };
@@ -108,9 +112,10 @@ const transform = ({
   options: CustomOptions;
   src: string;
 }) => {
+  const builtConfig = buildBabelConfig(filename, options);
   const babelConfig: TransformOptions = {
     sourceType: 'unambiguous',
-    ...buildBabelConfig(filename, options),
+    ...builtConfig,
     caller: { name: 'repack' },
     ast: false,
     cloneInputAst: false,
@@ -129,9 +134,13 @@ const transform = ({
   return transformFromAstSync(sourceAst, src, babelConfig);
 };
 
-export default function babelLoader(this: LoaderContext, source: string) {
+export default function babelLoader(
+  this: LoaderContext<BabelLoaderOptions>,
+  source: string
+) {
   this.cacheable();
   const callback = this.async();
+  const options = getOptions(this);
 
   try {
     const result = transform({
@@ -140,7 +149,8 @@ export default function babelLoader(this: LoaderContext, source: string) {
       options: {
         enableBabelRCLookup: true,
         // this is currently broken in Rspack and needs to be fixed upstream
-        projectRoot: this.rootContext,
+        // for now we can pass this as an option to loader
+        projectRoot: options.projectRoot,
       },
     });
     // @ts-ignore

packages/repack/src/loaders/babelLoader/options.ts

@@ -0,0 +1,26 @@
+import type { LoaderContext } from '@rspack/core';
+import type { validate } from 'schema-utils';
+
+export interface BabelLoaderOptions {
+  projectRoot: string;
+}
+
+type Schema = Parameters<typeof validate>[0];
+
+export const optionsSchema: Schema = {
+  type: 'object',
+  required: ['projectRoot'],
+  properties: {
+    projectRoot: { type: 'string' },
+  },
+};
+
+export function getOptions(
+  loaderContext: LoaderContext<BabelLoaderOptions>
+): BabelLoaderOptions {
+  const options = loaderContext.getOptions(loaderContext) || {};
+
+  //   validate(optionsSchema, options, { name: 'repackBabelLoader' });
+
+  return options;
+}

packages/repack/src/loaders/babelLoader/preset.ts

@@ -0,0 +1,33 @@
+import type { TransformOptions } from '@babel/core';
+
+export const repackBabelPreset: TransformOptions = {
+  plugins: [
+    ['@babel/plugin-syntax-typescript', false],
+    ['@react-native/babel-plugin-codegen', false],
+    '@babel/plugin-transform-flow-strip-types',
+  ],
+  overrides: [
+    {
+      test: /(?:^|[\\/])(?:Native\w+|(\w+)NativeComponent)\.[jt]sx?$/,
+      plugins: ['@react-native/babel-plugin-codegen'],
+    },
+    {
+      test: /\.ts$/,
+      plugins: [
+        [
+          '@babel/plugin-syntax-typescript',
+          { isTSX: false, allowNamespaces: true },
+        ],
+      ],
+    },
+    {
+      test: /\.tsx$/,
+      plugins: [
+        [
+          '@babel/plugin-syntax-typescript',
+          { isTSX: true, allowNamespaces: true },
+        ],
+      ],
+    },
+  ],
+};