支持注册基础组件

.codesandbox/ci.json

@@ -1,3 +1,8 @@
 {
-  "packages": ["packages/remax", "packages/remax-cli"]
+  "packages": [
+    "packages/remax",
+    "packages/remax-cli",
+    "packages/remax.macro",
+    "packages/babel-preset-remax"
+  ]
 }

.prettierignore

@@ -1,3 +1,3 @@
 lib
 node_modules
-**/__tests__/**/expected
+**/__tests__/**/expected

docs/guide/component.md

@@ -30,3 +30,46 @@ Remax
 ```html
 <view class="view" style="display: flex;" onTap="handleClick"></view>
 ```
+
+## 注册基础组件
+
+如果小程序添加了新的组件，而你所用的 Remax 版本还没提供该组件的支持，Remax 允许你自己创建一个新的基础组件。
+
+假设微信小程序新增了一个 `<foo-bar>` 组件，你可以这么做以让 Remax 提前支持：
+
+```jsx
+import { createHostComponent } from 'remax/macro';
+
+const FooBar = createHostComponent('foo-bar', ['foo']);
+
+function Page() {
+  return <FooBar foo="bar" />;
+}
+```
+
+如果你使用的是 TypeScript，还可以定义 `props` 类型：
+
+```jsx
+import { createHostComponent } from 'remax/macro';
+
+const FooBar = createHostComponent<{ foo: string; }>('foo-bar', ['foo]);
+
+function Page() {
+  return <FooBar foo="bar" />;
+}
+```
+
+> 组件名称和组件属性不能是动态变量，以下写法是错误的。
+
+```jsx
+import { createHostComponent } from 'remax/macro';
+
+const componentName = 'foo-bar';
+const props = ['foo'];
+// 必须直接写明组件名称和组件属性，不可用动态写法或变量传递的形式。
+const FooBar = createHostComponent(componentName, props);
+
+function Page() {
+  return <FooBar foo="bar" />;
+}
+```

lint-staged.config.js

@@ -3,7 +3,10 @@ const micromatch = require('micromatch');
 module.exports = {
   '*.{ts,tsx}': ['eslint --fix', 'prettier --write', 'git add'],
   '*.{md,js,jsx}': files => {
-    const match = micromatch.not(files, '**/__tests__/**/expected/**/*.js');
+    const match = micromatch.not(files, [
+      '**/__tests__/**/expected/**/*.js',
+      '**/tests/fixtures/**/output.js',
+    ]);
     return match.length > 1
       ? [`prettier ${match.join(' ')} --write`, `git add ${match.join(' ')}`]
       : [];

package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "scripts": {
     "watch": "lerna run watch --parallel",
-    "prebuild": "lerna run build --scope remax",
+    "prebuild": "lerna run build --scope remax --scope remax.macro",
     "build": "lerna run build --ignore website",
     "test": "lerna run --scope remax --scope remax-cli --stream test",
     "test:cov": "lerna run --scope remax --scope remax-cli --stream test -- --collect-coverage",

packages/babel-preset-remax/package.json

@@ -26,7 +26,8 @@
     "@babel/plugin-syntax-jsx": "^7.2.0",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.6.0"
+    "@babel/preset-typescript": "^7.6.0",
+    "babel-plugin-macros": "^2.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.6.0",

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

@@ -22,6 +22,7 @@ function preset(api: any, presetOption: PresetOption) {
   return {
     presets,
     plugins: [
+      require('babel-plugin-macros'),
       require('@babel/plugin-proposal-class-properties'),
       require('@babel/plugin-proposal-object-rest-spread'),
       require('@babel/plugin-syntax-jsx'),

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

@@ -22,6 +22,22 @@ describe('build', () => {
     path.resolve(__dirname, `./fixtures/universe/expected/toutiao`)
   );
 
+  runTest(
+    'createHostComponent',
+    'alipay',
+    path.resolve(__dirname, `./fixtures/createHostComponent/expected/alipay`)
+  );
+  runTest(
+    'createHostComponent',
+    'wechat',
+    path.resolve(__dirname, `./fixtures/createHostComponent/expected/wechat`)
+  );
+  runTest(
+    'createHostComponent',
+    'toutiao',
+    path.resolve(__dirname, `./fixtures/createHostComponent/expected/toutiao`)
+  );
+
   runTest('customRootDir');
   runTest('disablePxToRpx');
   runTest('babelrc');

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

@@ -3,6 +3,7 @@ import '../npm/remax/esm/render.js';
 import { cloneElement, createElement } from 'react';
 import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
+import '../npm/remax/esm/createHostComponent.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';

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

@@ -2,6 +2,7 @@ import '../npm/remax/esm/render.js';
 import { createElement } from 'react';
 import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
+import '../npm/remax/esm/createHostComponent.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';