feat: add INTERNAL__babelOptions, INTERNAL__swcOptions (#296)

Author: leegeunhyeok

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

@@ -1,16 +1,21 @@
 import * as path from 'path';
 import * as babel from '@babel/core';
+import type { BuildConfig } from '@granite-js/plugin-core';
 import { AsyncTransformStep } from '../../../../transformer/TransformPipeline';
 import { defineStepName } from '../../../../utils/defineStepName';
 
 interface FullyTransformStepConfig {
   dev: boolean;
+  platform: string;
   additionalBabelOptions?: babel.TransformOptions;
+  INTERNAL__babelOptions?: BuildConfig['INTERNAL__babelOptions'];
 }
 
 export function createFullyTransformStep({
   dev,
+  platform,
   additionalBabelOptions,
+  INTERNAL__babelOptions,
 }: FullyTransformStepConfig): AsyncTransformStep {
   const baseOptions: babel.TransformOptions = {
     configFile: additionalBabelOptions?.configFile || false,
@@ -59,7 +64,7 @@ export function createFullyTransformStep({
   };
 
   const fullyTransformStep: AsyncTransformStep = async function fullyTransform(code, args) {
-    const babelOptions = babel.loadOptions({
+    const babelOptions: babel.TransformOptions = {
       minified: false,
       compact: false,
       babelrc: false,
@@ -72,17 +77,21 @@ export function createFullyTransformStep({
         name: 'mpack-fully-transform-plugin',
         supportsStaticESM: true,
       },
-    }) as babel.TransformOptions | null;
+    };
 
-    if (!babelOptions) {
+    const resolvedBabelOptions = babel.loadOptions(
+      INTERNAL__babelOptions ? await INTERNAL__babelOptions({ platform, dev }, babelOptions) : babelOptions
+    ) as babel.TransformOptions | null;
+
+    if (!resolvedBabelOptions) {
       return { code };
     }
 
-    if (babelOptions.sourceMaps) {
-      babelOptions.sourceFileName = path.basename(args.path);
+    if (resolvedBabelOptions.sourceMaps) {
+      resolvedBabelOptions.sourceFileName = path.basename(args.path);
     }
 
-    const result = await babel.transformAsync(code, babelOptions);
+    const result = await babel.transformAsync(code, resolvedBabelOptions);
 
     if (result?.code != null) {
       return { code: result.code };

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

@@ -8,12 +8,16 @@ import { swcHelperOptimizationRules } from '../../shared/swc';
 
 export interface TransformToHermesSyntaxStepConfig {
   dev: boolean;
+  platform: string;
   additionalSwcOptions?: BuildConfig['swc'];
+  INTERNAL__swcOptions?: BuildConfig['INTERNAL__swcOptions'];
 }
 
 export function createTransformToHermesSyntaxStep({
   dev,
+  platform,
   additionalSwcOptions = {},
+  INTERNAL__swcOptions,
 }: TransformToHermesSyntaxStepConfig): AsyncTransformStep {
   const plugins = (additionalSwcOptions.plugins ?? []).filter(isNotNil) as NonNullable<
     swc.JscConfig['experimental']
@@ -53,7 +57,9 @@ export function createTransformToHermesSyntaxStep({
       filename: path.basename(args.path),
     };
 
-    const result = await swc.transform(code, options);
+    const resolvedOptions = INTERNAL__swcOptions ? await INTERNAL__swcOptions({ platform, dev }, options) : options;
+    const result = await swc.transform(code, resolvedOptions);
+
     return { code: result.code };
   };
 

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

@@ -24,7 +24,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, babel, platform } = buildConfig;
 
       assert(id, 'id 값이 존재하지 않습니다');
       assert(typeof dev === 'boolean', 'dev 값이 존재하지 않습니다');
@@ -46,15 +46,27 @@ export function transformPlugin({ context, ...options }: PluginOptions<Transform
         })
         .addStep({
           if: ({ path, code }) => babel?.conditions?.some((cond) => cond(code, path)) ?? false,
-          then: createFullyTransformStep({ dev, additionalBabelOptions: babel }),
+          then: createFullyTransformStep({
+            dev,
+            platform,
+            additionalBabelOptions: babel,
+            INTERNAL__babelOptions: buildConfig.INTERNAL__babelOptions,
+          }),
           stopAfter: true,
         })
         .addStep({
           if: ({ path }) => /(?:^|[\\/])(?:Native\w+|(\w+)NativeComponent)\.[jt]sx?$/.test(path),
           then: createTransformCodegenStep(),
           else: createFlowStripStep(),
         })
-        .addStep(createTransformToHermesSyntaxStep({ dev, additionalSwcOptions: swc }))
+        .addStep(
+          createTransformToHermesSyntaxStep({
+            dev,
+            platform,
+            additionalSwcOptions: swc,
+            INTERNAL__swcOptions: buildConfig.INTERNAL__swcOptions,
+          })
+        )
         .afterStep(cacheSteps.afterTransform);
 
       preludeScript.registerEntryPointMarker(build);

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

@@ -79,8 +79,28 @@ export interface BuildConfig {
       platform: string;
       dev: boolean;
     },
-    buildOptions: esbuild.BuildOptions
+    options: esbuild.BuildOptions
   ) => Promise<esbuild.BuildOptions> | esbuild.BuildOptions;
+  /**
+   * Finalize babel options dynamically
+   */
+  INTERNAL__babelOptions?: (
+    context: {
+      platform: string;
+      dev: boolean;
+    },
+    options: babel.TransformOptions
+  ) => Promise<babel.TransformOptions> | babel.TransformOptions;
+  /**
+   * Finalize swc options dynamically
+   */
+  INTERNAL__swcOptions?: (
+    context: {
+      platform: string;
+      dev: boolean;
+    },
+    options: swc.Options
+  ) => Promise<swc.Options> | swc.Options;
 }
 
 export interface ResolverConfig {

services/showcase/granite.config.ts

@@ -5,6 +5,11 @@ import { router } from '@granite-js/plugin-router';
 import { sentry } from '@granite-js/plugin-sentry';
 import { defineConfig } from '@granite-js/react-native/config';
 
+const testStates = {
+  babelPrinted: false,
+  swcPrinted: false,
+};
+
 export default defineConfig({
   /**
    * granite://showcase
@@ -51,14 +56,29 @@ export default defineConfig({
       },
     },
     {
-      name: 'esbuild-custom-build-options',
+      name: 'custom-build-options',
       config: {
         INTERNAL__esbuildOptions(context, buildOptions) {
           console.debug('[DEBUG] Build options for:', context);
 
-          // You can modify build options dynamically
           return buildOptions;
         },
+        INTERNAL__babelOptions(context, babelOptions) {
+          if (!testStates.babelPrinted) {
+            console.debug('[DEBUG] Babel options for:', context);
+            testStates.babelPrinted = true;
+          }
+
+          return babelOptions;
+        },
+        INTERNAL__swcOptions(context, swcOptions) {
+          if (!testStates.swcPrinted) {
+            console.debug('[DEBUG] Swc options for:', context);
+            testStates.swcPrinted = true;
+          }
+
+          return swcOptions;
+        },
       },
     },
   ],