feat: support rax-componentwrapper

packages/miniapp-builder-shared/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.2.11]
+
+### Added
+
+- Add ComponentWrapper
+
 ## [0.2.10] - 2021-08-05
 
 ### Changed

packages/miniapp-builder-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniapp-builder-shared",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "miniapp project builder shared lib",
   "author": "Rax Team",
   "homepage": "https://github.com/raxjs/miniapp#readme",

packages/miniapp-builder-shared/src/componentWrapper.js

@@ -0,0 +1,4 @@
+module.exports = {
+  WrapperPackage: 'rax-componentwrapper',
+  WrapperElement: 'component-wrapper'
+};

packages/miniapp-builder-shared/src/index.js

@@ -5,6 +5,7 @@ const pathHelper = require('./pathHelper');
 const platformMap = require('./platformMap');
 const constants = require('./constants');
 const autoInstallNpm = require('./autoInstallNpm');
+const componentWrapper = require('./componentWrapper');
 
 module.exports = {
   filterNativePages,
@@ -13,5 +14,6 @@ module.exports = {
   pathHelper,
   platformMap,
   constants,
-  autoInstallNpm
+  autoInstallNpm,
+  componentWrapper
 };

packages/miniapp-render/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.9.0] - 2021-09-23
+
+### Added
+
+- Use Component.setData in `rax-componentwrapper`
+
 ## [2.8.3] - 2021-09-09
 
 ### Changed

packages/miniapp-render/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniapp-render",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "DOM simulator for MiniApp",
   "files": [
     "dist"

packages/miniapp-render/src/bridge/lifeCycleAdapter.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { isMiniApp } from 'universal-env';
 
-export function getComponentLifeCycle({ mount, unmount, update }) {
+export function getComponentLifeCycle({ mount, unmount, update, onInit }) {
   if (isMiniApp) {
     return {
       didMount(...args) {
@@ -12,6 +12,9 @@ export function getComponentLifeCycle({ mount, unmount, update }) {
       },
       didUnmount(...args) {
         unmount && unmount.apply(this, args);
+      },
+      onInit(...args) {
+        onInit && onInit.apply(this, args);
       }
     };
   } else {

packages/miniapp-render/src/constants.js

@@ -44,3 +44,11 @@ export const CATCH_COMPONENTS = new Set(isBaiduSmartProgram || isKuaiShouMiniPro
 export const APPEAR_COMPONENT = 'view'; // Without appear event components
 
 export const ANCHOR_COMPONENT = 'scroll-view'; // Components which only use scrollIntoView to scroll
+
+export const COMPONENT_WRAPPER = 'component-wrapper'; // rax-componentwrapper tag
+
+export const NATIVE_TYPES = {
+  customComponent: 'customComponent',
+  miniappPlugin: 'miniappPlugin',
+  componentWrapper: 'componentWrapper'
+};

packages/miniapp-render/src/createConfig/element.js

@@ -3,6 +3,7 @@ import { isMiniApp } from 'universal-env';
 import createEventProxy from '../bridge/createEventProxy';
 import cache from '../utils/cache';
 import { getComponentLifeCycle } from '../bridge/lifeCycleAdapter';
+import { COMPONENT_WRAPPER } from '../constants';
 
 export default function() {
   if (isMiniApp) {
@@ -14,6 +15,16 @@ export default function() {
       ...getComponentLifeCycle({
         mount() {
           cache.setElementInstance(this);
+          const node = cache.getNode(this.props.r.nodeId);
+          if (node) {
+            node._internal = this;
+            node.__isCustomComponentRoot = true; // add __isCustomComponentRoot tag to mark the custom component when getting native component instance
+          }
+        },
+        onInit() {
+          if (this.props.__tag === COMPONENT_WRAPPER) {
+            this.data = this.props; // init set data
+          }
         }
       })
     };

packages/miniapp-render/src/document.js

@@ -10,7 +10,8 @@ import Textarea from './node/element/textarea';
 import Video from './node/element/video';
 import CustomComponent from './node/element/custom-component';
 import RootElement from './node/root';
-import { BODY_NODE_ID } from './constants';
+import { BODY_NODE_ID, COMPONENT_WRAPPER, NATIVE_TYPES } from './constants';
+import ComponentWrapper from './node/element/component-wrapper';
 
 const CONSTRUCTOR_MAP = new Map([['img', Image], ['input', Input], ['textarea', Textarea], ['video', Video]]);
 
@@ -61,11 +62,15 @@ class Document extends EventTarget {
 
     if (options.attrs.__native) {
       if (this.usingComponents[options.tagName]) {
+        if (options.tagName === COMPONENT_WRAPPER) {
+          options.nativeType = NATIVE_TYPES.componentWrapper;
+          return new ComponentWrapper(options);
+        }
         // Transform to custom-component
-        options.nativeType = 'customComponent';
+        options.nativeType = NATIVE_TYPES.customComponent;
         return new CustomComponent(options);
       } else if (this.usingPlugins[options.tagName]) {
-        options.nativeType = 'miniappPlugin';
+        options.nativeType = NATIVE_TYPES.miniappPlugin;
         return new CustomComponent(options);
       }
     } else {

packages/miniapp-render/src/node/element.js

@@ -53,6 +53,9 @@ class Element extends Node {
   }
 
   _triggerUpdate(payload, immediate = true) {
+    payload.nodeId = this.__nodeId;
+    payload.componentWrapperId = this.componentWrapperId;
+
     if (immediate) {
       this._enqueueRender(payload);
     } else {
@@ -421,7 +424,6 @@ class Element extends Node {
 
   replaceChild(node, old) {
     if (!(node instanceof Node) || !(old instanceof Node)) return;
-
     const replaceIndex = this.childNodes.indexOf(old);
     if (replaceIndex !== -1) this.childNodes.splice(replaceIndex, 1);
 

packages/miniapp-render/src/node/element/component-wrapper.js

@@ -0,0 +1,29 @@
+import { omitFalsyFields } from '../../utils/tool';
+import Element from '../element';
+
+class ComponentWrapper extends Element {
+  constructor(options) {
+    super(options);
+    this.__nativeType = options.nativeType;
+    this.__componentWrapperId = this.__nodeId;
+  }
+
+  _destroy() {
+    super._destroy();
+    this.__nativeType = null;
+    this.__componentWrapperId = null;
+  }
+
+  get _renderInfo() {
+    const renderInfo = omitFalsyFields({
+      nodeId: this.__nodeId,
+      nodeType: this.__tagName,
+      style: this.style.cssText,
+      class: this.className,
+      ...this.__attrs.__value
+    }, ['class', 'style']);
+    return renderInfo;
+  }
+}
+
+export default ComponentWrapper;

packages/miniapp-render/src/node/element/custom-component.js

@@ -1,6 +1,7 @@
 import Element from '../element';
 import cache from '../../utils/cache';
 import { getId, omitFalsyFields } from '../../utils/tool';
+import { NATIVE_TYPES } from '../../constants';
 
 class CustomComponent extends Element {
   constructor(options) {
@@ -25,9 +26,9 @@ class CustomComponent extends Element {
 
     const config = cache.getConfig();
     let nativeInfo = null;
-    if (this.__nativeType === 'customComponent') {
+    if (this.__nativeType === NATIVE_TYPES.customComponent) {
       nativeInfo = config.usingComponents[this.__tagName];
-    } else if (this.__nativeType === 'miniappPlugin') {
+    } else if (this.__nativeType === NATIVE_TYPES.miniappPlugin) {
       nativeInfo = config.usingPlugins[this.__tagName];
     }
     if (nativeInfo) {

packages/miniapp-render/src/node/node.js

@@ -15,6 +15,7 @@ class Node extends EventTarget {
     this.parentNode = null;
     this.__rendered = false;
     this.__ownerDocument = options.document;
+    this.__componentWrapperId = null; // ComponentWrapper Id which this belongs to
   }
 
   get __pageId() {
@@ -60,6 +61,16 @@ class Node extends EventTarget {
     return this.__rendered;
   }
 
+  get componentWrapperId() {
+    if (this.__componentWrapperId) {
+      return this.__componentWrapperId;
+    }
+    if (this.parentNode) {
+      this.__componentWrapperId = this.parentNode.componentWrapperId;
+    }
+    return this.__componentWrapperId;
+  }
+
   get nodeValue() {
     return null;
   }