feat: babel-preset-remax 增加 decorators 和 class-properties 配置项

remaxjs · Dec 5, 2019 · fe4d243 · fe4d243
1 parent b402c71
commit fe4d243
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 9 deletions.
diff --git a/packages/babel-preset-remax/README.md b/packages/babel-preset-remax/README.md
@@ -8,10 +8,18 @@ Babel preset for remax app.
 
 ## Options
 
-### Typescript
+### typescript
 
 configure typescript preset. https://babeljs.io/docs/en/babel-preset-typescript
 
+### decorators
+
+configure babel proposal decorators. https://babeljs.io/docs/en/babel-plugin-proposal-decorators
+
+### class-properties
+
+configure babel proposal class properties. https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
+
 ```js
 {
   presets: [
@@ -21,6 +29,12 @@ configure typescript preset. https://babeljs.io/docs/en/babel-preset-typescript
         typescript: {
           allowNamespaces: true,
         },
+        'class-properties': {
+          loose: true,
+        },
+        decorators: {
+          legacy: true,
+        },
       },
     ],
   ];

diff --git a/packages/babel-preset-remax/src/index.ts b/packages/babel-preset-remax/src/index.ts
@@ -3,6 +3,8 @@ import { declare } from '@babel/helper-plugin-utils';
 interface PresetOption {
   react?: boolean;
   typescript?: any;
+  decorators?: any;
+  'class-properties'?: any;
 }
 
 function preset(api: any, presetOption: PresetOption) {
@@ -14,6 +16,10 @@ function preset(api: any, presetOption: PresetOption) {
     typeof presetOption.typescript === 'undefined'
       ? true
       : presetOption.typescript;
+  const classProperties = presetOption['class-properties'] || {};
+  const decorators = presetOption.decorators || {
+    decoratorsBeforeExport: true,
+  };
 
   const presets = [require('@babel/preset-env')];
 
@@ -32,15 +38,10 @@ function preset(api: any, presetOption: PresetOption) {
     presets,
     plugins: [
       require('@remax/babel-plugin-macros'),
-      require('@babel/plugin-proposal-class-properties'),
       require('@babel/plugin-proposal-object-rest-spread'),
       require('@babel/plugin-syntax-jsx'),
-      [
-        require('@babel/plugin-proposal-decorators'),
-        {
-          decoratorsBeforeExport: true,
-        },
-      ],
+      [require('@babel/plugin-proposal-decorators'), decorators],
+      [require('@babel/plugin-proposal-class-properties'), classProperties],
     ],
   };
 }

diff --git a/packages/remax-cli/src/__tests__/fixtures/babelrc/babel.config.js b/packages/remax-cli/src/__tests__/fixtures/babelrc/babel.config.js
@@ -10,6 +10,12 @@ module.exports = function(api) {
           typescript: {
             allowNamespaces: true,
           },
+          'class-properties': {
+            loose: true,
+          },
+          decorators: {
+            legacy: true,
+          },
         },
       ],
     ],

diff --git a/packages/remax-cli/src/__tests__/fixtures/babelrc/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/babelrc/expected/pages/index.js
@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 require('../npm/remax/esm/render.js');
 var React = require('react');
 require('../npm/remax/esm/createAppConfig.js');
@@ -45,6 +46,8 @@ require('../npm/remax/esm/adapters/alipay/components/ContactButton.js');
 require('../npm/remax/esm/adapters/alipay/components/Video.js');
 require('../npm/remax/esm/adapters/alipay/api.js');
 
+var _class, _descriptor, _temp;
+
 var N;
 
 (function (_N) {
@@ -72,8 +75,28 @@ function timesTwo(arr) {
   return _r;
 }
 
+function readonly(target, name, descriptor) {
+  descriptor.writable = false;
+  return descriptor;
+}
+
+var C = (_class = (_temp = function C() {
+  _rollupPluginBabelHelpers.classCallCheck(this, C);
+
+  _rollupPluginBabelHelpers.initializerDefineProperty(this, "p", _descriptor, this);
+}, _temp), _descriptor = _rollupPluginBabelHelpers.applyDecoratedDescriptor(_class.prototype, "p", [readonly], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return 'p';
+  }
+}), _class);
+var c = new C();
+c.p = 'a';
+
 var _page = function _page() {
-  return React.createElement(View.default, null, timesTwo([1, 2, 3]), N.V, N.W);
+  return React.createElement(View.default, null, timesTwo([1, 2, 3]), N.V, N.W, c.p);
 };
 
 var index = Page(createPageConfig.default(_page));

diff --git a/packages/remax-cli/src/__tests__/fixtures/babelrc/src/pages/c.js b/packages/remax-cli/src/__tests__/fixtures/babelrc/src/pages/c.js
diff --git a/packages/remax-cli/src/__tests__/fixtures/babelrc/src/pages/index.tsx b/packages/remax-cli/src/__tests__/fixtures/babelrc/src/pages/index.tsx
@@ -14,10 +14,29 @@ function timesTwo(arr: number[]) {
   return arr.map(n => n * 2);
 }
 
+function readonly(target: any, name: any, descriptor: any) {
+  descriptor.writable = false;
+  return descriptor;
+}
+
+class C {
+  // eslint-disable-next-line
+  // @ts-ignore
+  @readonly
+  // eslint-disable-next-line
+  // @ts-ignore
+  p = 'p';
+}
+
+const c = new C();
+
+c.p = 'a';
+
 export default () => (
   <View>
     {timesTwo([1, 2, 3])}
     {N.V}
     {N.W}
+    {c.p}
   </View>
 );