feat(babel-preset-remax): 支持配置 TypeScript preset 参数 (#420)

resolve #417

packages/babel-preset-remax/README.md

@@ -5,3 +5,24 @@ Babel preset for remax app.
 ```bash
   yarn add babel-preset-remax --dev
 ```
+
+## Options
+
+### Typescript
+
+configure typescript preset. https://babeljs.io/docs/en/babel-preset-typescript
+
+```js
+{
+  presets: [
+    [
+      'remax',
+      {
+        typescript: {
+          allowNamespaces: true,
+        },
+      },
+    ],
+  ];
+}
+```

packages/babel-preset-remax/src/index.ts

@@ -2,18 +2,27 @@ import { declare } from '@babel/helper-plugin-utils';
 
 interface PresetOption {
   react?: boolean;
+  typescript?: any;
 }
 
 function preset(api: any, presetOption: PresetOption) {
   api.assertVersion(7);
 
   const react =
     typeof presetOption.react === 'undefined' ? true : presetOption.react;
+  const typescript =
+    typeof presetOption.typescript === 'undefined'
+      ? true
+      : presetOption.typescript;
 
-  const presets = [
-    require('@babel/preset-typescript'),
-    require('@babel/preset-env'),
-  ];
+  const presets = [require('@babel/preset-env')];
+
+  if (typescript) {
+    presets.push([
+      require('@babel/preset-typescript'),
+      typeof typescript === 'object' ? typescript : {},
+    ]);
+  }
 
   if (react) {
     presets.push(require('@babel/preset-react'));

packages/remax-cli/src/__tests__/customRootDir.test.ts

@@ -1,5 +1,5 @@
 import runTest from './helpers/runTest';
 
-describe('custom root dir config', () => {
+describe('customize root dir config', () => {
   runTest('customRootDir');
 });

packages/remax-cli/src/__tests__/fixtures/alipay/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: [['babel-preset-remax']],
+  };
+};

packages/remax-cli/src/__tests__/fixtures/babelrc/babel.config.js

@@ -3,6 +3,15 @@ module.exports = function(api) {
 
   return {
     plugins: ['loop-optimizer'],
-    presets: ['remax']
-  }
-}
+    presets: [
+      [
+        'remax',
+        {
+          typescript: {
+            allowNamespaces: true,
+          },
+        },
+      ],
+    ],
+  };
+};

packages/remax-cli/src/__tests__/fixtures/babelrc/expected/pages/index.js

@@ -41,6 +41,17 @@ import '../npm/remax/esm/adapters/alipay/components/ContactButton.js';
 import '../npm/remax/esm/adapters/alipay/components/Video.js';
 import '../npm/remax/esm/adapters/alipay/api.js';
 
+var N;
+
+(function (_N) {
+  var V = _N.V = 1;
+})(N || (N = {})); // eslint-disable-next-line @typescript-eslint/no-namespace
+
+
+(function (_N2) {
+  var W = _N2.W = V;
+})(N || (N = {}));
+
 function timesTwo(arr) {
   var _a = arr;
 
@@ -58,7 +69,7 @@ function timesTwo(arr) {
 }
 
 var _page = function _page() {
-  return createElement(View, null, timesTwo([1, 2, 3]));
+  return createElement(View, null, timesTwo([1, 2, 3]), N.V, N.W);
 };
 
 var index = Page(createPageConfig(_page));

packages/remax-cli/src/__tests__/fixtures/babelrc/src/pages/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View } from 'remax/alipay';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace N {
+  export const V = 1;
+}
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace N {
+  export const W = V;
+}
+
+function timesTwo(arr: number[]) {
+  return arr.map(n => n * 2);
+}
+
+export default () => (
+  <View>
+    {timesTwo([1, 2, 3])}
+    {N.V}
+    {N.W}
+  </View>
+);

packages/remax-cli/src/__tests__/fixtures/toutiao/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: [['babel-preset-remax']],
+  };
+};

packages/remax-cli/src/__tests__/fixtures/wechat/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: [['babel-preset-remax']],
+  };
+};

packages/remax-cli/src/build/plugins/babel.ts

@@ -0,0 +1,77 @@
+import babel from 'rollup-plugin-babel';
+import { PartialConfig, ConfigItem } from '@babel/core';
+import { merge } from 'lodash';
+
+interface CustomOptions {
+  reactPreset: boolean;
+  usePlugins: any[];
+}
+
+function processPresets(presets: ConfigItem[], babel: any, react: boolean) {
+  const remaxPresetIndex = presets.findIndex(
+    preset =>
+      preset.file &&
+      (preset.file.resolved === require.resolve('babel-preset-remax') ||
+        preset.file.request === 'remax' ||
+        preset.file.request === 'babel-preset-remax')
+  );
+
+  const defaultOptions = {
+    react,
+  };
+
+  const existOptions =
+    remaxPresetIndex !== -1 ? presets[remaxPresetIndex].options : {};
+
+  const remaxPreset = babel.createConfigItem(
+    [
+      require.resolve('babel-preset-remax'),
+      merge({}, defaultOptions, existOptions),
+    ],
+    {
+      type: `preset`,
+    }
+  );
+
+  if (remaxPresetIndex === -1) {
+    presets.unshift(remaxPreset);
+  } else {
+    presets[remaxPreset] = remaxPreset;
+  }
+
+  return presets;
+}
+
+export default babel.custom((babelCore: any) => {
+  return {
+    options({ reactPreset, usePlugins, ...pluginOptions }: CustomOptions) {
+      return {
+        customOptions: {
+          reactPreset,
+          usePlugins,
+        },
+        pluginOptions,
+      };
+    },
+
+    config(
+      cfg: PartialConfig,
+      { customOptions }: { customOptions: CustomOptions }
+    ) {
+      const presets = processPresets(
+        cfg.options.presets as ConfigItem[],
+        babelCore,
+        customOptions.reactPreset
+      );
+
+      return {
+        ...cfg.options,
+        presets,
+        plugins: [
+          ...(cfg.options.plugins || []),
+          ...(customOptions.usePlugins || []),
+        ],
+      };
+    },
+  };
+});

packages/remax-cli/src/build/rollupConfig.ts

@@ -2,7 +2,7 @@ import { RollupOptions, RollupWarning } from 'rollup';
 import path from 'path';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
-import babel from 'rollup-plugin-babel';
+import babel from './plugins/babel';
 import url from '@remax/rollup-plugin-url';
 import json from '@rollup/plugin-json';
 import postcss from '@remax/rollup-plugin-postcss';
@@ -117,26 +117,24 @@ export default function rollupConfig(
       modules: stubModules,
     }),
     babel({
-      babelrc: false,
       include: entries.pages.map(p => p.file),
       extensions: without(extensions, '.json'),
-      plugins: [nativeComponentsBabelPlugin(options, adapter), page],
-      presets: [[require.resolve('babel-preset-remax'), { react: false }]],
+      usePlugins: [nativeComponentsBabelPlugin(options, adapter), page],
+      reactPreset: false,
     }),
     babel({
-      babelrc: false,
       include: entries.app,
       extensions: without(extensions, '.json'),
-      plugins: [nativeComponentsBabelPlugin(options, adapter), app],
-      presets: [[require.resolve('babel-preset-remax'), { react: false }]],
+      usePlugins: [nativeComponentsBabelPlugin(options, adapter), app],
+      reactPreset: false,
     }),
     babel({
       extensions: without(extensions, '.json'),
-      plugins: [
+      usePlugins: [
         nativeComponentsBabelPlugin(options, adapter),
         components(adapter),
       ],
-      presets: [require.resolve('babel-preset-remax')],
+      reactPreset: true,
     }),
     postcss({
       extract: true,