feat: add rax-componentwrapper

packages/rax-componentwrapper/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+# 1.0.0
+
+- Add `rax-componentwrapper`

packages/rax-componentwrapper/README.md

@@ -0,0 +1,45 @@
+## rax-componentwrapper
+
+## 支持
+阿里小程序（运行时） / 微信小程序(运行时)
+
+## 描述
+在运行时小程序中，默认所有的数据更新都使用 `Page` 的 `setData` 方法。对于部分需要频繁更新数据的元素来说，可以在元素外包裹 `rax-componentwrapper` 的方式，自动将该元素转成自定义组件，当元素数据发生变化时，使用组件的 `setData`，来起到性能优化的目的。
+
+需要注意：在阿里小程序中，需要开启基础库 2.0 构建或开启 component2 功能时，才能正常使用该组件，否则将降级使用 `Page` 的 `setData` 方法。
+
+## 安装
+
+```
+$ npm install rax-componentwrapper --save
+```
+
+## 使用
+
+```
+import ComponentWrapper from 'rax-componentwrapper';
+```
+## 例子
+
+```jsx
+import { createElement, render, useState } from 'rax';
+import DriverUniversal from 'driver-universal';
+import ComponentWrapper from 'rax-componentwrapper';
+import View from 'rax-view'
+
+const App = () => {
+  const [count, setCount] = useState(1);
+
+  return (
+    <View>
+      <View onClick={() => setCount(count + 1)}>plus</View>
+      <ComponentWrapper>
+        <View>{count}</View>
+      </ComponentWrapper>
+    </View>
+  );
+}
+
+
+render(<App />, document.body, { driver: DriverUniversal });
+```

packages/rax-componentwrapper/demo/basic.md

@@ -0,0 +1,27 @@
+---
+title: Baisc
+order: 1
+---
+
+basic usage
+
+```jsx
+import { createElement, useState } from 'rax';
+import ComponentWrapper from 'rax-componentwrapper';
+import View from 'rax-view';
+
+const App = () => {
+  const [count, setCount] = useState(1);
+
+  return (
+    <View>
+      <View onClick={() => setCount(count + 1)}>plus</View>
+      <ComponentWrapper>
+        <View>{count}</View>
+      </ComponentWrapper>
+    </View>
+  );
+}
+
+export default App;
+```

packages/rax-componentwrapper/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "rax-componentwrapper",
+  "version": "1.0.0",
+  "description": "组件功能描述",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
+  "keywords": [
+    "Rax",
+    "rax-component"
+  ],
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/raxjs/rax-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/raxjs/rax-components/issues"
+  },
+  "homepage": "https://github.com/raxjs/rax-components#readme",
+  "scripts": {
+    "build": "../../node_modules/.bin/build-scripts build --config ../../build.json --skip-demo",
+    "start": "../../node_modules/.bin/build-scripts start --config ../../build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "rax": "^1.1.0"
+  },
+  "devDependencies": {
+    "@ali/build-plugin-miniapp-preview": "^1.1.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@types/rax": "^1.0.0",
+    "build-plugin-component": "^1.0.0",
+    "driver-universal": "^3.1.0",
+    "eslint": "^6.8.0",
+    "rax": "^1.1.0",
+    "rax-test-renderer": "^1.0.0",
+    "rax-text": "^2.2.0",
+    "rax-view": "^2.2.1",
+    "stylelint": "^13.7.2",
+    "typescript": "^3.7.3"
+  },
+  "license": "BSD-3-Clause"
+}

packages/rax-componentwrapper/src/index.tsx

@@ -0,0 +1,9 @@
+import { createElement } from 'rax';
+
+const MyComponent = ({ children }) => {
+  return (
+    <div>{children}</div>
+  );
+};
+
+export default MyComponent;

packages/rax-componentwrapper/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "module": "esNext",
+    "target": "es2015",
+    "jsx": "preserve",
+    "jsxFactory": "createElement",
+    "moduleResolution": "node",
+    "alwaysStrict": true,
+    "sourceMap": false,
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "experimentalDecorators": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noImplicitThis": false,
+    "outDir": "lib",
+    "baseUrl": "."
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}