wip

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-0",
   "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/src/constants.js

@@ -37,3 +37,5 @@ export const CATCH_COMPONENTS = new Set(['view', 'h-element']); // With catchTou
 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

packages/miniapp-render/src/document.js

@@ -10,7 +10,7 @@ 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 } from './constants';
 
 const CONSTRUCTOR_MAP = new Map([['img', Image], ['input', Input], ['textarea', Textarea], ['video', Video]]);
 
@@ -61,6 +61,10 @@ class Document extends EventTarget {
 
     if (options.attrs.__native) {
       if (this.usingComponents[options.tagName]) {
+        if (options.tagName === COMPONENT_WRAPPER) {
+          options.nativeType = 'componentWrapper';
+          return new CustomComponent(options);
+        }
         // Transform to custom-component
         options.nativeType = 'customComponent';
         return new CustomComponent(options);

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

@@ -32,6 +32,7 @@ class Element extends Node {
     if (this.id && !this.ownerDocument.__idMap.has(this.id)) {
       this.ownerDocument.__idMap.set(this.id, this);
     }
+    this.__componentWrapperId = null; // ComponentWrapper NodeId which this belongs to
   }
 
   // Override the _destroy method of the parent class

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

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

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

@@ -2,6 +2,7 @@ import Element from './element';
 import cache from '../utils/cache';
 import perf from '../utils/perf';
 import { isFunction } from '../utils/tool';
+import { COMPONENT_WRAPPER } from '../constants';
 
 class RootElement extends Element {
   constructor(options) {
@@ -86,7 +87,7 @@ class RootElement extends Element {
       this.__renderStacks.forEach(task => {
         const path = task.path;
         const node = cache.getNode(task.nodeId);
-        if (node && node.__nativeType === 'customComponent') {
+        if (node && node.__nativeType === COMPONENT_WRAPPER) {
           // hasCustomWrapper = true;
           // customWrapperUpdate.push({
           //   node: node._internal,

packages/miniapp-render/src/utils/cache.js

@@ -10,6 +10,7 @@ const windowMap = new Map();
 const elementsCache = [];
 const pagesCache = [];
 const elementMethodsCache = new Map();
+const componentWrapperCache = new Map();
 
 // Init
 function init(pageId, document) {
@@ -56,6 +57,14 @@ function getNode(nodeId) {
   return nodeIdMap.get(nodeId);
 }
 
+// save componentWrapper node
+function setComponentWrapperNode(path, domNode = null) {
+  componentWrapperCache.set(path, domNode);
+}
+
+function getComponentWrapperNodeByPath(path) {
+  return componentWrapperCache.get(path);
+}
 
 /**
  * Get all nodes
@@ -126,5 +135,7 @@ export default {
   getRouteId,
   setElementInstance,
   setCustomComponentMethods,
-  setPageInstance
+  setPageInstance,
+  setComponentWrapperNode,
+  getComponentWrapperNodeByPath
 };

packages/miniapp-runtime-config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.3.10]
+
+### Added
+
+- Support WrapperComponent
+
 ## [0.3.9] - 2021-07-21
 
 ### Fixed

packages/miniapp-runtime-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniapp-runtime-config",
-  "version": "0.3.9",
+  "version": "0.3.10-0",
   "description": "miniapp runtime project config",
   "author": "Rax Team",
   "homepage": "https://github.com/raxjs/miniapp#readme",

packages/miniapp-runtime-config/src/setBaseConfig.js

@@ -33,6 +33,12 @@ module.exports = (
   // Using plugins
   const usingPlugins = {};
 
+  // hasing rax-componentwrapper
+  // pass variable by reference
+  const hasComponentWrapper = {
+    hasing: false
+  };
+
   config.output.filename('[name].js');
   // publicPath should not work in miniapp, just keep default value
   config.output.publicPath('/');
@@ -60,6 +66,7 @@ module.exports = (
               rootDir,
               usingPlugins,
               runtimeDependencies: userConfig.runtimeDependencies,
+              hasComponentWrapper
             }),
           },
         ];
@@ -79,7 +86,8 @@ module.exports = (
       nativeLifeCycleMap,
       usingPlugins,
       needCopyList,
-      isPluginProject
+      isPluginProject,
+      hasComponentWrapper
     },
   ]);
 

packages/rax-miniapp-babel-plugins/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.1.16]
+
+### Added
+
+- Support ComponentWrapper
+
 ## [0.1.15] - 2021-05-11
 
 ### Changed

packages/rax-miniapp-babel-plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-miniapp-babel-plugins",
-  "version": "0.1.15",
+  "version": "0.1.16-2",
   "description": "rax miniapp babel plugins",
   "main": "src/index.js",
   "repository": {
@@ -22,6 +22,6 @@
     "@babel/code-frame": "^7.8.3",
     "fs-extra": "^9.0.1",
     "md5": "^2.2.1",
-    "miniapp-builder-shared": "^0.2.0"
+    "miniapp-builder-shared": "0.2.11-0"
   }
 }

packages/rax-miniapp-babel-plugins/src/index.js

@@ -1,4 +1,4 @@
-module.exports = function({ usingComponents, nativeLifeCycleMap, target, rootDir, usingPlugins, runtimeDependencies }) {
+module.exports = function({ usingComponents, nativeLifeCycleMap, target, rootDir, usingPlugins, runtimeDependencies, hasComponentWrapper }) {
   return [
     require.resolve('./plugins/babel-plugin-remove-Function'),
     require.resolve('./plugins/babel-plugin-external-module'),
@@ -14,7 +14,8 @@ module.exports = function({ usingComponents, nativeLifeCycleMap, target, rootDir
         usingComponents,
         target,
         rootDir,
-        runtimeDependencies
+        runtimeDependencies,
+        hasComponentWrapper
       }
     ],
     [

packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js

@@ -2,7 +2,10 @@ const { resolve, dirname, join } = require('path');
 const { existsSync, readJSONSync } = require('fs-extra');
 const {
   pathHelper: { absoluteModuleResolve, removeExt },
-  platformMap
+  platformMap,
+  componentWrapper: {
+    WrapperPackage
+  }
 } = require('miniapp-builder-shared');
 const extMap = require('../utils/extMap');
 const { collectComponentAttr, collectUsings } = require('../utils/handleComponentAST');
@@ -23,7 +26,8 @@ const baseComponents = [
   'rax-slider',
   'rax-textinput',
   'rax-video',
-  'rax-embed'
+  'rax-embed',
+  WrapperPackage
 ];
 
 /**
@@ -121,7 +125,7 @@ function hasDefaultSpecifier(specifiers, t) {
 
 module.exports = function visitor(
   { types: t },
-  { usingComponents, target, rootDir, runtimeDependencies }
+  { usingComponents, target, rootDir, runtimeDependencies, hasComponentWrapper }
 ) {
   // Collect imported dependencies
   let nativeComponents = {};
@@ -143,7 +147,16 @@ module.exports = function visitor(
             const filePath = getTmplPath(source.value, rootDir, dirName, target, runtimeDependencies) || getCompiledComponentsPath(dirName, source.value);
             // TODO:
             // Temporarily ignore import { a, b } from 'xxx';
-            if ((filePath || source.value === 'rax-componentwrapper') && hasDefaultSpecifier(specifiers, t)) {
+            if (filePath && hasDefaultSpecifier(specifiers, t)) {
+              if (!scanedPageMap[filename]) {
+                scanedPageMap[filename] = true;
+                path.parentPath.traverse({
+                  JSXOpeningElement: collectComponentAttr(nativeComponents, t)
+                });
+              }
+              collectUsings(path, nativeComponents, usingComponents, filePath, t);
+            } else if (source.value === WrapperPackage) {
+              hasComponentWrapper.hasing = true;
               if (!scanedPageMap[filename]) {
                 scanedPageMap[filename] = true;
                 path.parentPath.traverse({

packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js

@@ -1,4 +1,5 @@
 const getTagName = require('./getTagName');
+const {componentWrapper: { WrapperElement, WrapperPackage }} = require('miniapp-builder-shared');
 
 function collectComponentAttr(components, t) {
   return (innerPath) => {
@@ -57,12 +58,13 @@ function collectUsings(
       });
 
       // Generate a random tag name
-      const replacedTagName = source.type === 'StringLiteral' && source.value === 'rax-componentwrapper' ? 'component-wrapper' : getTagName(tagName);
+      const isComponentWrapper = source.type === 'StringLiteral' && source.value === WrapperPackage;
+      const replacedTagName = isComponentWrapper ? WrapperElement : getTagName(tagName);
       if (!usings[replacedTagName]) {
         usings[replacedTagName] = { props: [], events: [] };
       }
       usings[replacedTagName] = {
-        path: filePath,
+        path: isComponentWrapper ? './wrapper' : filePath,
         props: [
           ...new Set(componentInfo.props.concat(usings[replacedTagName].props)),
         ],

packages/rax-miniapp-runtime-webpack-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-miniapp-runtime-webpack-plugin",
-  "version": "4.9.0",
+  "version": "4.11.0-1",
   "description": "A webpack plugin for miniapp runtime build",
   "main": "src/index.js",
   "homepage": "https://github.com/raxjs/miniapp#readme",
@@ -18,12 +18,15 @@
     "csso": "^4.0.3",
     "fs-extra": "^8.1.0",
     "lodash.isequal": "^4.5.0",
-    "miniapp-builder-shared": "^0.2.0",
+    "miniapp-builder-shared": "0.2.11-0",
     "path-to-regexp": "^3.0.0",
     "postcss": "^7.0.17",
     "pretty-data": "^0.40.0",
     "terser": "^4.6.10",
     "webpack": "^4.35.3",
     "webpack-sources": "^1.3.0"
+  },
+  "resolutions": {
+    "miniapp-builder-shared": "0.2.11-0"
   }
 }