From 518da3e4e64a440fdc826e859ecbec6c40cfea61 Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Fri, 27 Aug 2021 13:31:58 +0800 Subject: [PATCH 1/7] wip --- .vscode/launch.json | 27 +++++++++++++++++++ packages/miniapp-render/src/node/element.js | 1 + packages/miniapp-render/src/node/root.js | 25 ++++++++++++++--- packages/miniapp-render/src/node/text-node.js | 1 + .../babel-plugin-handle-component-wrapper.js | 6 +++++ .../babel-plugin-handle-native-component.js | 2 +- .../src/utils/handleComponentAST.js | 4 +-- 7 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..1d2a73a0 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,27 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Attach", + "port": 9229, + "request": "attach", + "skipFiles": [ + "/**" + ], + "type": "pwa-node" + }, + + { + "type": "pwa-node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}/packages/rax-miniapp-runtime-webpack-plugin/src/index.js" + } + ] +} \ No newline at end of file diff --git a/packages/miniapp-render/src/node/element.js b/packages/miniapp-render/src/node/element.js index a44c4281..011941d0 100755 --- a/packages/miniapp-render/src/node/element.js +++ b/packages/miniapp-render/src/node/element.js @@ -53,6 +53,7 @@ class Element extends Node { } _triggerUpdate(payload, immediate = true) { + payload.nodeId = this.__nodeId; if (immediate) { this._enqueueRender(payload); } else { diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index 8a7c7d73..15598ef3 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/packages/miniapp-render/src/node/root.js @@ -80,12 +80,31 @@ class RootElement extends Element { } else { const renderObject = {}; const childrenValuePaths = []; + // let hasCustomWrapper = false; + // const customWrapperUpdate = []; + this.__renderStacks.forEach(task => { const path = task.path; - if (task.type === 'children') { - childrenValuePaths.push(path); + const node = cache.getNode(task.nodeId); + if (node && node.__nativeType === 'customComponent') { + // hasCustomWrapper = true; + // customWrapperUpdate.push({ + // node: node._internal, + // data: { + // [path.replace(node._path, '')]: task.value + // } + // }); + node._internal.setData({ + [path.replace(node._path, '')]: task.value() + }, () => { + console.log('component update'); + }); + } else { + if (task.type === 'children') { + childrenValuePaths.push(path); + } + renderObject[path] = task.value; } - renderObject[path] = task.value; }); for (const path in renderObject) { // If the whole father children path is set, then its children path can be deleted diff --git a/packages/miniapp-render/src/node/text-node.js b/packages/miniapp-render/src/node/text-node.js index e90968b6..ef30c9f9 100755 --- a/packages/miniapp-render/src/node/text-node.js +++ b/packages/miniapp-render/src/node/text-node.js @@ -16,6 +16,7 @@ class TextNode extends Node { } _triggerUpdate(payload) { + payload.nodeId = this.__nodeId; this._root._enqueueRender(payload); } diff --git a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js new file mode 100644 index 00000000..c083bcd7 --- /dev/null +++ b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js @@ -0,0 +1,6 @@ +module.exports = function visitor( + { types: t }, + { usingComponents } +) { + +} \ No newline at end of file diff --git a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js index 1a258e29..852c762a 100644 --- a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js +++ b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js @@ -143,7 +143,7 @@ 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 && hasDefaultSpecifier(specifiers, t)) { + if ((filePath || source.value === 'rax-componentwrapper') && hasDefaultSpecifier(specifiers, t)) { if (!scanedPageMap[filename]) { scanedPageMap[filename] = true; path.parentPath.traverse({ diff --git a/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js b/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js index f6d66fe9..00d1cf17 100644 --- a/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js +++ b/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js @@ -39,7 +39,7 @@ function collectUsings( filePath, t ) { - const { specifiers } = path.node; + const { specifiers, source } = path.node; specifiers.some((specifier, index) => { if (!t.isImportDefaultSpecifier(specifier)) return; @@ -57,7 +57,7 @@ function collectUsings( }); // Generate a random tag name - const replacedTagName = getTagName(tagName); + const replacedTagName = source.type === 'StringLiteral' && source.value === 'rax-componentwrapper' ? 'component-wrapper' : getTagName(tagName); if (!usings[replacedTagName]) { usings[replacedTagName] = { props: [], events: [] }; } From b1bb2deac6fc51285ca3f4b0981bf66ea13b9eb8 Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Mon, 6 Sep 2021 14:36:56 +0800 Subject: [PATCH 2/7] wip --- packages/miniapp-builder-shared/CHANGELOG.md | 6 ++ packages/miniapp-builder-shared/package.json | 2 +- .../src/componentWrapper.js | 4 + packages/miniapp-builder-shared/src/index.js | 4 +- packages/miniapp-render/src/constants.js | 2 + packages/miniapp-render/src/document.js | 6 +- packages/miniapp-render/src/node/element.js | 1 + .../src/node/element/component-wrapper.js | 32 +++++++ packages/miniapp-render/src/node/root.js | 3 +- packages/miniapp-render/src/utils/cache.js | 13 ++- packages/miniapp-runtime-config/CHANGELOG.md | 6 ++ packages/miniapp-runtime-config/package.json | 2 +- .../src/setBaseConfig.js | 10 +- .../rax-miniapp-babel-plugins/CHANGELOG.md | 6 ++ .../rax-miniapp-babel-plugins/package.json | 4 +- .../rax-miniapp-babel-plugins/src/index.js | 5 +- .../babel-plugin-handle-native-component.js | 21 ++++- .../src/utils/handleComponentAST.js | 6 +- .../package.json | 7 +- .../src/generators/componentWrapper.js | 92 +++++++++++++++++++ .../src/generators/element.js | 5 +- .../src/generators/index.js | 14 ++- .../src/generators/page.js | 7 +- .../src/generators/root.js | 5 +- .../src/generators/templates/index.js | 10 ++ .../src/index.js | 45 +++++++-- 26 files changed, 288 insertions(+), 30 deletions(-) create mode 100644 packages/miniapp-builder-shared/src/componentWrapper.js create mode 100644 packages/miniapp-render/src/node/element/component-wrapper.js create mode 100644 packages/rax-miniapp-runtime-webpack-plugin/src/generators/componentWrapper.js diff --git a/packages/miniapp-builder-shared/CHANGELOG.md b/packages/miniapp-builder-shared/CHANGELOG.md index 789a78aa..0d87ecd8 100644 --- a/packages/miniapp-builder-shared/CHANGELOG.md +++ b/packages/miniapp-builder-shared/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## [0.2.11] + +### Added + +- Add ComponentWrapper + ## [0.2.10] - 2021-08-05 ### Changed diff --git a/packages/miniapp-builder-shared/package.json b/packages/miniapp-builder-shared/package.json index 54f6c4a7..492667ab 100644 --- a/packages/miniapp-builder-shared/package.json +++ b/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", diff --git a/packages/miniapp-builder-shared/src/componentWrapper.js b/packages/miniapp-builder-shared/src/componentWrapper.js new file mode 100644 index 00000000..65d2b03d --- /dev/null +++ b/packages/miniapp-builder-shared/src/componentWrapper.js @@ -0,0 +1,4 @@ +module.exports = { + WrapperPackage: 'rax-componentwrapper', + WrapperElement: 'component-wrapper' +}; diff --git a/packages/miniapp-builder-shared/src/index.js b/packages/miniapp-builder-shared/src/index.js index 4c9485f0..73396f98 100644 --- a/packages/miniapp-builder-shared/src/index.js +++ b/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 }; diff --git a/packages/miniapp-render/src/constants.js b/packages/miniapp-render/src/constants.js index e75c7242..fae57cea 100644 --- a/packages/miniapp-render/src/constants.js +++ b/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 \ No newline at end of file diff --git a/packages/miniapp-render/src/document.js b/packages/miniapp-render/src/document.js index 6252f22b..a0791e66 100755 --- a/packages/miniapp-render/src/document.js +++ b/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); diff --git a/packages/miniapp-render/src/node/element.js b/packages/miniapp-render/src/node/element.js index 011941d0..66d6708b 100755 --- a/packages/miniapp-render/src/node/element.js +++ b/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 diff --git a/packages/miniapp-render/src/node/element/component-wrapper.js b/packages/miniapp-render/src/node/element/component-wrapper.js new file mode 100644 index 00000000..89b90e09 --- /dev/null +++ b/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; diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index 15598ef3..3d2f5b5e 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/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, diff --git a/packages/miniapp-render/src/utils/cache.js b/packages/miniapp-render/src/utils/cache.js index 56300945..d3985213 100755 --- a/packages/miniapp-render/src/utils/cache.js +++ b/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 }; diff --git a/packages/miniapp-runtime-config/CHANGELOG.md b/packages/miniapp-runtime-config/CHANGELOG.md index 587f6c38..757b2981 100644 --- a/packages/miniapp-runtime-config/CHANGELOG.md +++ b/packages/miniapp-runtime-config/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## [0.3.10] + +### Added + +- Support WrapperComponent + ## [0.3.9] - 2021-07-21 ### Fixed diff --git a/packages/miniapp-runtime-config/package.json b/packages/miniapp-runtime-config/package.json index 9714da3a..82d33018 100644 --- a/packages/miniapp-runtime-config/package.json +++ b/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", diff --git a/packages/miniapp-runtime-config/src/setBaseConfig.js b/packages/miniapp-runtime-config/src/setBaseConfig.js index f33a706e..caa122bd 100644 --- a/packages/miniapp-runtime-config/src/setBaseConfig.js +++ b/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 }, ]); diff --git a/packages/rax-miniapp-babel-plugins/CHANGELOG.md b/packages/rax-miniapp-babel-plugins/CHANGELOG.md index 3fe5d50f..3087bded 100644 --- a/packages/rax-miniapp-babel-plugins/CHANGELOG.md +++ b/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 diff --git a/packages/rax-miniapp-babel-plugins/package.json b/packages/rax-miniapp-babel-plugins/package.json index 0bb45253..d049f587 100644 --- a/packages/rax-miniapp-babel-plugins/package.json +++ b/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" } } diff --git a/packages/rax-miniapp-babel-plugins/src/index.js b/packages/rax-miniapp-babel-plugins/src/index.js index 0964646f..44df9337 100644 --- a/packages/rax-miniapp-babel-plugins/src/index.js +++ b/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 } ], [ diff --git a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js index 852c762a..aca5e0a9 100644 --- a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js +++ b/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({ diff --git a/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js b/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js index 00d1cf17..eec4736e 100644 --- a/packages/rax-miniapp-babel-plugins/src/utils/handleComponentAST.js +++ b/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)), ], diff --git a/packages/rax-miniapp-runtime-webpack-plugin/package.json b/packages/rax-miniapp-runtime-webpack-plugin/package.json index 46f8d9ba..de0473ab 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/package.json +++ b/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" } } diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/componentWrapper.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/componentWrapper.js new file mode 100644 index 00000000..a3adcbff --- /dev/null +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/componentWrapper.js @@ -0,0 +1,92 @@ +/** + * generate ComponentWrapper +*/ +const { join } = require('path'); +const { platformMap, componentWrapper: { WrapperElement } } = require('miniapp-builder-shared'); + +const platformConfig = require('../platforms'); +const { RECURSIVE_TEMPLATE_TYPE, UNRECURSIVE_TEMPLATE_TYPE } = require('../constants'); + +const addFileToCompilation = require('../utils/addFileToCompilation'); +const getAssetPath = require('../utils/getAssetPath'); +const isNpmModule = require('../utils/isNpmModule'); +const rmCurDirPathSymbol = require('../utils/rmCurDirPathSymbol'); +const { generateRootTmpl } = require('./root'); +const { buildTemplate, buildNativeComponentTemplate, buildSjs } = require('./templates'); + +function ensureWrapperFolder() { + +} + +function generateWrapperJS(compilation, { target, command, subAppRoot = '' }) { + const filename = join(subAppRoot, 'wrapper.js'); + addFileToCompilation(compilation, { + filename, + content: +`const render = require('${getAssetPath('render.js', filename)}'); + +Component(render.createElementConfig());`, + target, + command, + }); +} + +function generateWrapperTemplate(compilation, + { target, command, subAppRoot = '' }) { + const { adapter: { formatBindedData, for: targetFor, key } } = platformConfig[target]; + + let content = ` + + +`; + + const isRecursiveTemplate = RECURSIVE_TEMPLATE_TYPE.has(target); + if (!isRecursiveTemplate) { + content = `` + content; + } else { + content = `` + content; + } + + addFileToCompilation(compilation, { + filename: join(subAppRoot, `wrapper${platformMap[target].extension.xml}`), + content, + target, + command + }); +} + +function generateWrapperJSON(compilation, { usingComponents, usingPlugins, target, command, subAppRoot = '' }) { + const content = { + component: true, + usingComponents: { + [WrapperElement]: './wrapper' + } + }; + + if (UNRECURSIVE_TEMPLATE_TYPE.has(target)) { + content.usingComponents.element = './comp'; + } + + Object.keys(usingComponents).forEach(component => { + const componentPath = usingComponents[component].path; + content.usingComponents[component] = isNpmModule(componentPath) ? componentPath : getAssetPath(rmCurDirPathSymbol(componentPath), join(subAppRoot, 'comp')); + }); + Object.keys(usingPlugins).forEach(plugin => { + content.usingComponents[plugin] = usingPlugins[plugin].path; + }); + + addFileToCompilation(compilation, { + filename: join(subAppRoot, 'wrapper.json'), + content: JSON.stringify(content, null, 2), + target, + command, + }); +} + + +module.exports = { + ensureWrapperFolder, + generateWrapperJS, + generateWrapperTemplate, + generateWrapperJSON, +}; diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/element.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/element.js index d12e9cee..b5626c01 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/element.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/element.js @@ -10,6 +10,7 @@ const isNpmModule = require('../utils/isNpmModule'); const rmCurDirPathSymbol = require('../utils/rmCurDirPathSymbol'); const { generateRootTmpl } = require('./root'); const { buildTemplate, buildNativeComponentTemplate, buildSjs } = require('./templates'); +const { buildComponentWrapperTemplate } = require('./componentWrapper'); function generateElementJS(compilation, { target, command, subAppRoot = '' }) { @@ -45,7 +46,9 @@ function generateElementTemplate(compilation, }); const template = buildTemplate(target, modifyTemplate, { isRecursiveTemplate }); - const nativeComponentTemplate = buildNativeComponentTemplate(usingPlugins, target, isRecursiveTemplate) + buildNativeComponentTemplate(usingComponents, target, isRecursiveTemplate); + const nativeComponentTemplate = + buildNativeComponentTemplate(usingPlugins, target, isRecursiveTemplate) + + buildNativeComponentTemplate(usingComponents, target, isRecursiveTemplate); // In recursiveTemplate, root.axml need be written into comp.axml content = template + nativeComponentTemplate + content; diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/index.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/index.js index 0f94f82b..2663cece 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/index.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/index.js @@ -14,6 +14,13 @@ const { } = require('./element'); const generateRender = require('./render'); const generatePkg = require('./pkg'); +const { + ensureWrapperFolder, + generateWrapperJS, + generateWrapperTemplate, + generateWrapperJSON, + buildComponentWrapperTemplate +} = require('./componentWrapper'); module.exports = { generateAppCSS, @@ -28,5 +35,10 @@ module.exports = { generateElementJSON, generateElementTemplate, generateRender, - generatePkg + generatePkg, + ensureWrapperFolder, + generateWrapperJS, + generateWrapperTemplate, + generateWrapperJSON, + buildComponentWrapperTemplate }; diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js index a03f3136..bb01f0e4 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js @@ -1,5 +1,5 @@ const { join } = require('path'); -const { platformMap, pathHelper: { getBundlePath }} = require('miniapp-builder-shared'); +const { platformMap, pathHelper: { getBundlePath }, componentWrapper: { WrapperElement }} = require('miniapp-builder-shared'); const platformConfig = require('../platforms'); const getAssetPath = require('../utils/getAssetPath'); @@ -96,6 +96,7 @@ function generatePageJSON( useComponent, usingComponents, usingPlugins, pageRoute, + usingComponentWrapper, { target, command, subAppRoot = '' } ) { if (!pageConfig.usingComponents) { @@ -110,6 +111,10 @@ function generatePageJSON( const componentPath = usingComponents[component].path; pageConfig.usingComponents[component] = isNpmModule(componentPath) ? componentPath : getAssetPath(rmCurDirPathSymbol(componentPath), pageRoute); }); + + if (usingComponentWrapper) { + pageConfig.usingComponents[WrapperElement] = getAssetPath(join(subAppRoot, 'wrapper'), pageRoute); + } Object.keys(usingPlugins).forEach(plugin => { pageConfig.usingComponents[plugin] = usingPlugins[plugin].path; }); diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/root.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/root.js index 550a102b..82c96ef3 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/root.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/root.js @@ -1,6 +1,7 @@ const { platformMap } = require('miniapp-builder-shared'); const addFileToCompilation = require('../utils/addFileToCompilation'); +const { buildComponentWrapperTemplate } = require('./componentWrapper'); const { buildTemplate, buildSjs, buildNativeComponentTemplate } = require('./templates'); function generateRootTmpl( @@ -9,7 +10,9 @@ function generateRootTmpl( ) { const template = buildTemplate(target, modifyTemplate); const sjs = buildSjs(target); - const nativeComponentTemplate = buildNativeComponentTemplate(usingPlugins, target) + buildNativeComponentTemplate(usingComponents, target); + const nativeComponentTemplate = + buildNativeComponentTemplate(usingPlugins, target) + + buildNativeComponentTemplate(usingComponents, target); addFileToCompilation(compilation, { filename: `${subAppRoot}/root${platformMap[target].extension.xml}`, diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/templates/index.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/templates/index.js index 37bdd531..c3bbcb08 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/templates/index.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/templates/index.js @@ -1,3 +1,5 @@ +const { componentWrapper: {WrapperElement} } = require('miniapp-builder-shared'); + const platformConfig = require('../../platforms'); const { buildRecursiveTemplate, buildRecursiveTemplateSjs } = require('./recursiveTemplate'); const { buildUnrecursiveTemplate, buildUnrecursiveTemplateSjs } = require('./unrecursiveTemplate'); @@ -31,6 +33,14 @@ function buildNativeComponentTemplate(usings, target) { const { formatBindedData, supportSjs } = adapter; return Object.keys(usings).reduce((current, componentTag) => { + if (componentTag === WrapperElement) { + return ` +`; + } const props = usings[componentTag].props.reduce((cur, prop) => { const tmpl = ` ${prop}="{{r['${prop}']}}"`; return cur + tmpl; diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/index.js b/packages/rax-miniapp-runtime-webpack-plugin/src/index.js index 15d9c35b..a6db6781 100755 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/index.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/index.js @@ -22,7 +22,10 @@ const { generateElementJSON, generateElementTemplate, generateRender, - generatePkg + generatePkg, + generateWrapperJS, + generateWrapperTemplate, + generateWrapperJSON } = require('./generators'); const getFinalRouteMap = require('./utils/getFinalRouteMap'); @@ -47,7 +50,8 @@ class MiniAppRuntimePlugin { mainPackageRoot, appConfig, subAppConfigList = [], - isPluginProject = false + isPluginProject = false, + hasComponentWrapper } = options; const { context: { command, userConfig: rootUserConfig, rootDir }, @@ -58,6 +62,7 @@ class MiniAppRuntimePlugin { let isFirstRender = true; let lastUsingComponents = {}; let lastUsingPlugins = {}; + let lastImportComponentWrapper = false; let needAutoInstallDependency = false; const packageJsonFilePath = []; @@ -74,6 +79,7 @@ class MiniAppRuntimePlugin { }); compiler.hooks.emit.tapAsync(PluginName, (compilation, callback) => { + const usingComponentWrapper = hasComponentWrapper.hasing; const outputPath = compilation.outputOptions.path; const sourcePath = join(rootDir, 'src'); const pages = []; @@ -93,14 +99,17 @@ class MiniAppRuntimePlugin { if (!isFirstRender) { useComponentChanged = !isEqual(usingComponents, lastUsingComponents) || - !isEqual(usingPlugins, lastUsingPlugins); + !isEqual(usingPlugins, lastUsingPlugins) || + lastImportComponentWrapper !== usingComponentWrapper; } lastUsingComponents = Object.assign({}, usingComponents); lastUsingPlugins = Object.assign({}, usingPlugins); + lastImportComponentWrapper = usingComponentWrapper; + const useComponent = Object.keys(lastUsingPlugins).length + Object.keys(lastUsingComponents).length > - 0; + 0 || usingComponentWrapper; // These files need be written in first render if (isFirstRender) { // render.js @@ -144,7 +153,8 @@ class MiniAppRuntimePlugin { pages, target, command, - subPackages + subPackages, + usingComponentWrapper }); // Only when developer may use native component, it will generate package.json in output @@ -188,7 +198,8 @@ class MiniAppRuntimePlugin { usingComponents: mainPackageUsingComponents, usingPlugins: mainPackageUsingPlugins, target, - command + command, + usingComponentWrapper }); generateElementTemplate(compilation, { usingComponents: mainPackageUsingComponents, @@ -197,6 +208,25 @@ class MiniAppRuntimePlugin { command, modifyTemplate }); + if (usingComponentWrapper) { + generateWrapperJS(compilation, { + target, + command + }); + generateWrapperJSON(compilation, { + usingComponents: mainPackageUsingComponents, + usingPlugins: mainPackageUsingPlugins, + target, + command + }); + generateWrapperTemplate(compilation, { + usingComponents: mainPackageUsingComponents, + usingPlugins: mainPackageUsingPlugins, + target, + command, + modifyTemplate + }); + } } else { // Only when there isn't native component, it need generate root template file // Generate root template xml @@ -267,7 +297,7 @@ class MiniAppRuntimePlugin { usingPlugins: subPackageUsingPlugins, target, command, - subAppRoot + subAppRoot, }); generateElementTemplate(compilation, { usingComponents: subPackageUsingComponents, @@ -304,6 +334,7 @@ class MiniAppRuntimePlugin { isSubPackagePage ? subPackageUsingComponents : mainPackageUsingComponents, isSubPackagePage ? subPackageUsingPlugins : mainPackageUsingPlugins, entryName, + usingComponentWrapper, { target, command, From ed9f2390d18c95070a890930e2ae6e00934543dd Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Thu, 16 Sep 2021 15:15:39 +0800 Subject: [PATCH 3/7] wip --- .vscode/launch.json | 27 ------------------- packages/miniapp-render/src/node/element.js | 2 +- packages/miniapp-runtime-config/CHANGELOG.md | 2 +- packages/miniapp-runtime-config/package.json | 10 +++---- .../src/setBaseConfig.js | 8 +++--- .../rax-miniapp-babel-plugins/package.json | 2 +- .../rax-miniapp-babel-plugins/src/index.js | 4 +-- .../babel-plugin-handle-component-wrapper.js | 6 ----- .../babel-plugin-handle-native-component.js | 7 +++-- .../package.json | 2 +- .../src/index.js | 4 +-- 11 files changed, 20 insertions(+), 54 deletions(-) delete mode 100644 .vscode/launch.json delete mode 100644 packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index 1d2a73a0..00000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - // 使用 IntelliSense 了解相关属性。 - // 悬停以查看现有属性的描述。 - // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "name": "Attach", - "port": 9229, - "request": "attach", - "skipFiles": [ - "/**" - ], - "type": "pwa-node" - }, - - { - "type": "pwa-node", - "request": "launch", - "name": "Launch Program", - "skipFiles": [ - "/**" - ], - "program": "${workspaceFolder}/packages/rax-miniapp-runtime-webpack-plugin/src/index.js" - } - ] -} \ No newline at end of file diff --git a/packages/miniapp-render/src/node/element.js b/packages/miniapp-render/src/node/element.js index e34f6320..a4f170a5 100755 --- a/packages/miniapp-render/src/node/element.js +++ b/packages/miniapp-render/src/node/element.js @@ -424,7 +424,7 @@ class Element extends Node { replaceChild(node, old) { if (!(node instanceof Node) || !(old instanceof Node)) return; - + if (node instanceof Comment && old instanceof Comment) return; const replaceIndex = this.childNodes.indexOf(old); if (replaceIndex !== -1) this.childNodes.splice(replaceIndex, 1); diff --git a/packages/miniapp-runtime-config/CHANGELOG.md b/packages/miniapp-runtime-config/CHANGELOG.md index 757b2981..716b3b2d 100644 --- a/packages/miniapp-runtime-config/CHANGELOG.md +++ b/packages/miniapp-runtime-config/CHANGELOG.md @@ -4,7 +4,7 @@ ### Added -- Support WrapperComponent +- Support componentWrapper ## [0.3.9] - 2021-07-21 diff --git a/packages/miniapp-runtime-config/package.json b/packages/miniapp-runtime-config/package.json index 82d33018..3e857de1 100644 --- a/packages/miniapp-runtime-config/package.json +++ b/packages/miniapp-runtime-config/package.json @@ -1,6 +1,6 @@ { "name": "miniapp-runtime-config", - "version": "0.3.10-0", + "version": "0.3.10-2", "description": "miniapp runtime project config", "author": "Rax Team", "homepage": "https://github.com/raxjs/miniapp#readme", @@ -24,11 +24,11 @@ "webpack": "^4.0.0" }, "dependencies": { - "miniapp-builder-shared": "^0.2.0", - "rax-miniapp-babel-plugins": "^0.1.3", + "miniapp-builder-shared": "beta", + "rax-miniapp-babel-plugins": "beta", "rax-miniapp-config-webpack-plugin": "^2.0.0", - "rax-miniapp-runtime-webpack-plugin": "^4.0.0", - "miniapp-render": "^2.0.0" + "rax-miniapp-runtime-webpack-plugin": "beta", + "miniapp-render": "beta" }, "devDependencies": { "webpack": "^4.44.2" diff --git a/packages/miniapp-runtime-config/src/setBaseConfig.js b/packages/miniapp-runtime-config/src/setBaseConfig.js index caa122bd..d00a0b2f 100644 --- a/packages/miniapp-runtime-config/src/setBaseConfig.js +++ b/packages/miniapp-runtime-config/src/setBaseConfig.js @@ -35,8 +35,8 @@ module.exports = ( // hasing rax-componentwrapper // pass variable by reference - const hasComponentWrapper = { - hasing: false + const usingComponentWrapper = { + using: false }; config.output.filename('[name].js'); @@ -66,7 +66,7 @@ module.exports = ( rootDir, usingPlugins, runtimeDependencies: userConfig.runtimeDependencies, - hasComponentWrapper + usingComponentWrapper }), }, ]; @@ -87,7 +87,7 @@ module.exports = ( usingPlugins, needCopyList, isPluginProject, - hasComponentWrapper + usingComponentWrapper }, ]); diff --git a/packages/rax-miniapp-babel-plugins/package.json b/packages/rax-miniapp-babel-plugins/package.json index d049f587..a1e151af 100644 --- a/packages/rax-miniapp-babel-plugins/package.json +++ b/packages/rax-miniapp-babel-plugins/package.json @@ -1,6 +1,6 @@ { "name": "rax-miniapp-babel-plugins", - "version": "0.1.16-2", + "version": "0.1.16-3", "description": "rax miniapp babel plugins", "main": "src/index.js", "repository": { diff --git a/packages/rax-miniapp-babel-plugins/src/index.js b/packages/rax-miniapp-babel-plugins/src/index.js index 44df9337..243be2cf 100644 --- a/packages/rax-miniapp-babel-plugins/src/index.js +++ b/packages/rax-miniapp-babel-plugins/src/index.js @@ -1,4 +1,4 @@ -module.exports = function({ usingComponents, nativeLifeCycleMap, target, rootDir, usingPlugins, runtimeDependencies, hasComponentWrapper }) { +module.exports = function({ usingComponents, nativeLifeCycleMap, target, rootDir, usingPlugins, runtimeDependencies, usingComponentWrapper }) { return [ require.resolve('./plugins/babel-plugin-remove-Function'), require.resolve('./plugins/babel-plugin-external-module'), @@ -15,7 +15,7 @@ module.exports = function({ usingComponents, nativeLifeCycleMap, target, rootDir target, rootDir, runtimeDependencies, - hasComponentWrapper + usingComponentWrapper } ], [ diff --git a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js deleted file mode 100644 index c083bcd7..00000000 --- a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-component-wrapper.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = function visitor( - { types: t }, - { usingComponents } -) { - -} \ No newline at end of file diff --git a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js index aca5e0a9..e0fe82e9 100644 --- a/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js +++ b/packages/rax-miniapp-babel-plugins/src/plugins/babel-plugin-handle-native-component.js @@ -26,8 +26,7 @@ const baseComponents = [ 'rax-slider', 'rax-textinput', 'rax-video', - 'rax-embed', - WrapperPackage + 'rax-embed' ]; /** @@ -125,7 +124,7 @@ function hasDefaultSpecifier(specifiers, t) { module.exports = function visitor( { types: t }, - { usingComponents, target, rootDir, runtimeDependencies, hasComponentWrapper } + { usingComponents, target, rootDir, runtimeDependencies, usingComponentWrapper } ) { // Collect imported dependencies let nativeComponents = {}; @@ -156,7 +155,7 @@ module.exports = function visitor( } collectUsings(path, nativeComponents, usingComponents, filePath, t); } else if (source.value === WrapperPackage) { - hasComponentWrapper.hasing = true; + usingComponentWrapper.using = true; if (!scanedPageMap[filename]) { scanedPageMap[filename] = true; path.parentPath.traverse({ diff --git a/packages/rax-miniapp-runtime-webpack-plugin/package.json b/packages/rax-miniapp-runtime-webpack-plugin/package.json index 1e55cb27..371f14e5 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/package.json +++ b/packages/rax-miniapp-runtime-webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "rax-miniapp-runtime-webpack-plugin", - "version": "4.11.0-1", + "version": "4.11.0-3", "description": "A webpack plugin for miniapp runtime build", "main": "src/index.js", "files": [ diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/index.js b/packages/rax-miniapp-runtime-webpack-plugin/src/index.js index a6db6781..eb61f362 100755 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/index.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/index.js @@ -51,7 +51,7 @@ class MiniAppRuntimePlugin { appConfig, subAppConfigList = [], isPluginProject = false, - hasComponentWrapper + usingComponentWrapper: _usingComponentWrapper } = options; const { context: { command, userConfig: rootUserConfig, rootDir }, @@ -79,7 +79,7 @@ class MiniAppRuntimePlugin { }); compiler.hooks.emit.tapAsync(PluginName, (compilation, callback) => { - const usingComponentWrapper = hasComponentWrapper.hasing; + const usingComponentWrapper = _usingComponentWrapper.using; const outputPath = compilation.outputOptions.path; const sourcePath = join(rootDir, 'src'); const pages = []; From eee429a01f2c36a56a7013dbab517f5debd7cae2 Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Thu, 23 Sep 2021 20:35:12 +0800 Subject: [PATCH 4/7] fix: use page.batchedUpdates --- packages/miniapp-builder-shared/package.json | 2 +- packages/miniapp-render/CHANGELOG.md | 6 ++ packages/miniapp-render/package.json | 2 +- .../src/createConfig/element.js | 5 +- packages/miniapp-render/src/node/element.js | 2 - packages/miniapp-render/src/node/root.js | 82 ++++++++++++------- 6 files changed, 62 insertions(+), 37 deletions(-) diff --git a/packages/miniapp-builder-shared/package.json b/packages/miniapp-builder-shared/package.json index 492667ab..fb5a941b 100644 --- a/packages/miniapp-builder-shared/package.json +++ b/packages/miniapp-builder-shared/package.json @@ -1,6 +1,6 @@ { "name": "miniapp-builder-shared", - "version": "0.2.11-0", + "version": "0.2.11", "description": "miniapp project builder shared lib", "author": "Rax Team", "homepage": "https://github.com/raxjs/miniapp#readme", diff --git a/packages/miniapp-render/CHANGELOG.md b/packages/miniapp-render/CHANGELOG.md index 0905bdc7..657492ea 100644 --- a/packages/miniapp-render/CHANGELOG.md +++ b/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 diff --git a/packages/miniapp-render/package.json b/packages/miniapp-render/package.json index 1f06de35..f48f1362 100644 --- a/packages/miniapp-render/package.json +++ b/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" diff --git a/packages/miniapp-render/src/createConfig/element.js b/packages/miniapp-render/src/createConfig/element.js index cdb28b37..9cd1bf8b 100644 --- a/packages/miniapp-render/src/createConfig/element.js +++ b/packages/miniapp-render/src/createConfig/element.js @@ -9,10 +9,7 @@ export default function() { if (isMiniApp) { return { props: { - r: { - type: Object, - value: {} - } + r: {} }, methods: createEventProxy(), ...getComponentLifeCycle({ diff --git a/packages/miniapp-render/src/node/element.js b/packages/miniapp-render/src/node/element.js index 8fe55e63..50c0c18f 100755 --- a/packages/miniapp-render/src/node/element.js +++ b/packages/miniapp-render/src/node/element.js @@ -424,7 +424,6 @@ class Element extends Node { replaceChild(node, old) { if (!(node instanceof Node) || !(old instanceof Node)) return; - if (node instanceof Comment && old instanceof Comment) return; const replaceIndex = this.childNodes.indexOf(old); if (replaceIndex !== -1) this.childNodes.splice(replaceIndex, 1); @@ -440,7 +439,6 @@ class Element extends Node { } // Set parentNode node.parentNode = this; - if (this._isRendered()) { node.__rendered = true; // Trigger update diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index 289b7cd8..227306a4 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/packages/miniapp-render/src/node/root.js @@ -1,8 +1,9 @@ +import { isMiniApp } from 'universal-env'; + import Element from './element'; import cache from '../utils/cache'; import perf from '../utils/perf'; import { isFunction } from '../utils/tool'; -import { NATIVE_TYPES } from '../constants'; class RootElement extends Element { constructor(options) { @@ -48,7 +49,7 @@ class RootElement extends Element { const { mainPackageName } = cache.getConfig(); const window = cache.getWindow(mainPackageName); - const { rootStacks, componentWrapperObject } = this._filterRenderStacks(); + const { rootStacks, componentWrapperObject } = this._filterRenderStacks(internal.$spliceData); const componentWrapperCount = Object.keys(componentWrapperObject).length; let count = rootStacks.length + componentWrapperCount; @@ -69,7 +70,7 @@ class RootElement extends Element { if (rootStacks.length > 0) { if (internal.$batchedUpdates) { internal.firstRenderCallback(); - this._batchedUpdated(internal, rootStacks, callback); + this._batchedUpdated(internal, internal, rootStacks, callback); } else { const renderObject = Object.create(null); rootStacks.forEach((task) => { @@ -82,9 +83,9 @@ class RootElement extends Element { if (componentWrapperCount > 0) { Object.values(componentWrapperObject).forEach(({ node, data }) => { - if (node._internal.$batchedUpdates) { + if (internal.$batchedUpdates) { internal.firstRenderCallback(); - this._batchedUpdated(node._internal, data, callback); + this._batchedUpdated(internal, node._internal, data, callback); } else { const renderObject = Object.create(null); data.forEach((task) => { @@ -103,27 +104,9 @@ class RootElement extends Element { const rootStacks = []; const componentWrapperObject = Object.create(null); - const renderObject = Object.create(null); - const childrenValuePaths = []; - this.__renderStacks.forEach(task => { - const path = task.path; - if (task.type === 'children') { - childrenValuePaths.push(path); - } - renderObject[path] = task; - }); - - for (const path in renderObject) { - // If the whole father children path is set, then its children path can be deleted - childrenValuePaths.forEach(cp => { - if (path.includes(cp) && cp !== path) { - delete renderObject[path]; - } - }); - - const task = renderObject[path]; - if (task) { - const value = isFunction(task.value) ? task.value() : task.value; + if (isMiniApp) { + this.__renderStacks.forEach(task => { + const path = task.path; let componentWrapperNode = null; if (task.componentWrapperId) { componentWrapperNode = cache.getNode(task.componentWrapperId); @@ -142,6 +125,47 @@ class RootElement extends Element { } else { rootStacks.push(task); } + }); + } else { + const renderObject = Object.create(null); + const childrenValuePaths = []; + this.__renderStacks.forEach(task => { + const path = task.path; + if (task.type === 'children') { + childrenValuePaths.push(path); + } + renderObject[path] = task; + }); + + for (const path in renderObject) { + // If the whole father children path is set, then its children path can be deleted + childrenValuePaths.forEach(cp => { + if (path.includes(cp) && cp !== path) { + delete renderObject[path]; + } + }); + + const task = renderObject[path]; + if (task) { + let componentWrapperNode = null; + if (task.componentWrapperId) { + componentWrapperNode = cache.getNode(task.componentWrapperId); + } + if (componentWrapperNode) { + if (!componentWrapperObject[task.componentWrapperId]) { + componentWrapperObject[task.componentWrapperId] = { + node: componentWrapperNode, + data: [] + }; + } + componentWrapperObject[task.componentWrapperId].data.push({ + ...task, + path: 'r' + path.replace(componentWrapperNode._path, '') + }); + } else { + rootStacks.push(task); + } + } } } @@ -151,9 +175,9 @@ class RootElement extends Element { }; } - _batchedUpdated(internal, stacks, callback) { - internal.$batchedUpdates(() => { - stacks.forEach((task, index) => { + _batchedUpdated(pageInternal, internal, stacks, callback) { + pageInternal.$batchedUpdates(() => { + stacks.forEach(task => { if (task.type === 'children') { const spliceArgs = [task.start, task.deleteCount]; internal.$spliceData({ From 72098a4f765bc14a8346257f3b0c435bcbae22f7 Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Thu, 23 Sep 2021 20:49:28 +0800 Subject: [PATCH 5/7] fix: eslint --- packages/miniapp-render/src/node/root.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index 227306a4..9d5d0db7 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/packages/miniapp-render/src/node/root.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/no-extraneous-dependencies import { isMiniApp } from 'universal-env'; import Element from './element'; From 6930abba64ab9edf9323d0cc3a9eb2d3d9056612 Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Fri, 24 Sep 2021 14:23:05 +0800 Subject: [PATCH 6/7] fix: compatible with appx1.0 --- .../src/createConfig/element.js | 2 + packages/miniapp-render/src/node/root.js | 178 ++++++++++-------- 2 files changed, 101 insertions(+), 79 deletions(-) diff --git a/packages/miniapp-render/src/createConfig/element.js b/packages/miniapp-render/src/createConfig/element.js index 9cd1bf8b..9da1837f 100644 --- a/packages/miniapp-render/src/createConfig/element.js +++ b/packages/miniapp-render/src/createConfig/element.js @@ -20,6 +20,8 @@ export default function() { 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 } diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index 9d5d0db7..2eb125db 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/packages/miniapp-render/src/node/root.js @@ -6,6 +6,100 @@ import cache from '../utils/cache'; import perf from '../utils/perf'; import { isFunction } from '../utils/tool'; +/** + * Return a function that filter render stacks by whether task occurs in Component-Wrapper + */ +function getFilterRenderStacks() { + if (isMiniApp) { + // In Miniapp, if sdk version != 2.x and can't use component 2, all stacks shall be passed by Page.setData although in Component-Wrapper + if (my.SDKVersion.startsWith('2') || my.canIUse('component2')) { + return (renderStacks) => { + const rootStacks = []; + const componentWrapperObject = Object.create(null); + + renderStacks.forEach(task => { + const path = task.path; + let componentWrapperNode = null; + if (task.componentWrapperId) { + componentWrapperNode = cache.getNode(task.componentWrapperId); + } + if (componentWrapperNode) { + if (!componentWrapperObject[task.componentWrapperId]) { + componentWrapperObject[task.componentWrapperId] = { + node: componentWrapperNode, + data: [] + }; + } + componentWrapperObject[task.componentWrapperId].data.push({ + ...task, + path: 'r' + path.replace(componentWrapperNode._path, '') + }); + } else { + rootStacks.push(task); + } + }); + return { + rootStacks, + componentWrapperObject + }; + }; + } + + return (renderStacks) => { + return { + rootStacks: renderStacks, + componentWrapperObject: Object.create(null) + }; + }; + } + + return () => { + const rootStacks = []; + const componentWrapperObject = Object.create(null); + const renderObject = Object.create(null); + const childrenValuePaths = []; + + this.__renderStacks.forEach(task => { + const path = task.path; + if (task.type === 'children') { + childrenValuePaths.push(path); + } + renderObject[path] = task; + }); + + for (const path in renderObject) { + // If the whole father children path is set, then its children path can be deleted + childrenValuePaths.forEach(cp => { + if (path.includes(cp) && cp !== path) { + delete renderObject[path]; + } + }); + + const task = renderObject[path]; + if (task) { + let componentWrapperNode = null; + if (task.componentWrapperId) { + componentWrapperNode = cache.getNode(task.componentWrapperId); + } + if (componentWrapperNode) { + if (!componentWrapperObject[task.componentWrapperId]) { + componentWrapperObject[task.componentWrapperId] = { + node: componentWrapperNode, + data: [] + }; + } + componentWrapperObject[task.componentWrapperId].data.push({ + ...task, + path: 'r' + path.replace(componentWrapperNode._path, '') + }); + } else { + rootStacks.push(task); + } + } + } + }; +} + class RootElement extends Element { constructor(options) { super(options); @@ -13,6 +107,7 @@ class RootElement extends Element { this.__allowRender = true; this.__renderStacks = []; this.__renderCallbacks = []; + this._filterRenderStacks = getFilterRenderStacks(); } _destroy() { @@ -50,7 +145,7 @@ class RootElement extends Element { const { mainPackageName } = cache.getConfig(); const window = cache.getWindow(mainPackageName); - const { rootStacks, componentWrapperObject } = this._filterRenderStacks(internal.$spliceData); + const { rootStacks, componentWrapperObject } = this._filterRenderStacks(this.__renderStacks); const componentWrapperCount = Object.keys(componentWrapperObject).length; let count = rootStacks.length + componentWrapperCount; @@ -71,7 +166,7 @@ class RootElement extends Element { if (rootStacks.length > 0) { if (internal.$batchedUpdates) { internal.firstRenderCallback(); - this._batchedUpdated(internal, internal, rootStacks, callback); + this._batchedUpdate(internal, internal, rootStacks, callback); } else { const renderObject = Object.create(null); rootStacks.forEach((task) => { @@ -86,7 +181,7 @@ class RootElement extends Element { Object.values(componentWrapperObject).forEach(({ node, data }) => { if (internal.$batchedUpdates) { internal.firstRenderCallback(); - this._batchedUpdated(internal, node._internal, data, callback); + this._batchedUpdate(internal, node._internal, data, callback); } else { const renderObject = Object.create(null); data.forEach((task) => { @@ -101,82 +196,7 @@ class RootElement extends Element { this.__renderStacks = []; } - _filterRenderStacks() { - const rootStacks = []; - const componentWrapperObject = Object.create(null); - - if (isMiniApp) { - this.__renderStacks.forEach(task => { - const path = task.path; - let componentWrapperNode = null; - if (task.componentWrapperId) { - componentWrapperNode = cache.getNode(task.componentWrapperId); - } - if (componentWrapperNode) { - if (!componentWrapperObject[task.componentWrapperId]) { - componentWrapperObject[task.componentWrapperId] = { - node: componentWrapperNode, - data: [] - }; - } - componentWrapperObject[task.componentWrapperId].data.push({ - ...task, - path: 'r' + path.replace(componentWrapperNode._path, '') - }); - } else { - rootStacks.push(task); - } - }); - } else { - const renderObject = Object.create(null); - const childrenValuePaths = []; - this.__renderStacks.forEach(task => { - const path = task.path; - if (task.type === 'children') { - childrenValuePaths.push(path); - } - renderObject[path] = task; - }); - - for (const path in renderObject) { - // If the whole father children path is set, then its children path can be deleted - childrenValuePaths.forEach(cp => { - if (path.includes(cp) && cp !== path) { - delete renderObject[path]; - } - }); - - const task = renderObject[path]; - if (task) { - let componentWrapperNode = null; - if (task.componentWrapperId) { - componentWrapperNode = cache.getNode(task.componentWrapperId); - } - if (componentWrapperNode) { - if (!componentWrapperObject[task.componentWrapperId]) { - componentWrapperObject[task.componentWrapperId] = { - node: componentWrapperNode, - data: [] - }; - } - componentWrapperObject[task.componentWrapperId].data.push({ - ...task, - path: 'r' + path.replace(componentWrapperNode._path, '') - }); - } else { - rootStacks.push(task); - } - } - } - } - - return { - rootStacks, - componentWrapperObject - }; - } - - _batchedUpdated(pageInternal, internal, stacks, callback) { + _batchedUpdate(pageInternal, internal, stacks, callback) { pageInternal.$batchedUpdates(() => { stacks.forEach(task => { if (task.type === 'children') { From f45d0755e04c73ab38b9db2f5316fc6f859d3ab0 Mon Sep 17 00:00:00 2001 From: "chenrongyan.cry" Date: Fri, 24 Sep 2021 15:36:10 +0800 Subject: [PATCH 7/7] fix: wechat condition --- packages/miniapp-render/src/bridge/lifeCycleAdapter.js | 6 +++--- packages/miniapp-render/src/node/root.js | 9 +++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/miniapp-render/src/bridge/lifeCycleAdapter.js b/packages/miniapp-render/src/bridge/lifeCycleAdapter.js index cb61acd6..dd0b78a8 100644 --- a/packages/miniapp-render/src/bridge/lifeCycleAdapter.js +++ b/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, deriveDataFromProps }) { +export function getComponentLifeCycle({ mount, unmount, update, onInit }) { if (isMiniApp) { return { didMount(...args) { @@ -13,8 +13,8 @@ export function getComponentLifeCycle({ mount, unmount, update, deriveDataFromPr didUnmount(...args) { unmount && unmount.apply(this, args); }, - deriveDataFromProps(...args) { - deriveDataFromProps && deriveDataFromProps.apply(this, args); + onInit(...args) { + onInit && onInit.apply(this, args); } }; } else { diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index 2eb125db..66d008c9 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/packages/miniapp-render/src/node/root.js @@ -53,13 +53,13 @@ function getFilterRenderStacks() { }; } - return () => { + return (renderStacks) => { const rootStacks = []; const componentWrapperObject = Object.create(null); const renderObject = Object.create(null); const childrenValuePaths = []; - this.__renderStacks.forEach(task => { + renderStacks.forEach(task => { const path = task.path; if (task.type === 'children') { childrenValuePaths.push(path); @@ -97,6 +97,11 @@ function getFilterRenderStacks() { } } } + + return { + rootStacks, + componentWrapperObject + }; }; }