feat: 运行时渲染UI

canfoo · Sep 5, 2021 · 1c1bf9a · 1c1bf9a
1 parent c1808d8
commit 1c1bf9a
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 19 deletions.
diff --git a/packages/runtime-core/build.ts b/packages/runtime-core/build.ts
@@ -5,6 +5,7 @@ import { outputDir, inputRoot } from '../common/const'
 import { emptyDir, getRelativeAppPath, getRelativeComponentPath } from '../common/util'
 import { config } from '../common/configure'
 import tarnsform from './transform'
+import { baseWxml } from './template/base'
 
 async function buildSinglePage(page) {
  const pagePath = path.join(inputRoot, `${page}`)
@@ -83,6 +84,11 @@ async function copyNpm() {
  fse.ensureDirSync(path.dirname(outputNpmPath))
  fse.writeFileSync(outputNpmPath, resCode.code)
  })
+
+ const outputBaseWxml = path.join(outputDir, '/base.wxml')
+ fse.ensureDirSync(path.dirname(outputBaseWxml))
+ fse.writeFileSync(outputBaseWxml, baseWxml)
+
 
 }
 

diff --git a/packages/runtime-core/npm/Container.js b/packages/runtime-core/npm/Container.js
@@ -14,12 +14,27 @@ export default class Container {
  this.rootKey = rootKey;
  }
 
- applyUpdate() {
-
+ toJson(nodes ,data) {
+ const json = data || []
+ nodes.forEach(node => {
+ const nodeData = {
+ type: node.type,
+ props: node.props,
+ text: node.text,
+ children: []
+ }
+ if (node.children) {
+ this.toJson(node.children, nodeData.children)
+ }
+ json.push(nodeData)
+ })
+ return json
+ }
 
- console.log('this.root', this.root)
- // this.context.setData(updatePayload, () => {
- // });
+ applyUpdate() {
+ const root = this.toJson([this.root])[0]
+ console.log('root', root)
+ this.context.setData({ root});
  }
 
  clearUpdate() {

diff --git a/packages/runtime-core/npm/VNode.js b/packages/runtime-core/npm/VNode.js
@@ -8,7 +8,6 @@ export default class VNode {
 
  appendChild(node) {
  this.removeChild(node);
-
  node.parent = this;
  node.deleted = false; // 交换节点时删除的节点会被复用
 
@@ -30,6 +29,7 @@ export default class VNode {
  if (node.parent !== this) {
  return;
  }
+ this.size -= 1;
 
  if (this.firstChild === node) {
  this.firstChild = node.nextSibling;
@@ -54,9 +54,8 @@ export default class VNode {
 
  insertBefore(node, referenceNode) {
  this.removeChild(node);
-
  node.parent = this;
- node.deleted = false;
+ node.deleted = false; // 交换节点时删除的节点会被复用
 
  if (referenceNode === this.firstChild) {
  this.firstChild = node;
@@ -72,13 +71,22 @@ export default class VNode {
  }
 
  update(payload) {
- if (this.type === 'text' || !payload) {
 
- return;
+ }
+
+ get children() {
+ const arr = [];
+ let item = this.firstChild;
+
+ while (item) {
+ arr.push(item);
+ item = item.nextSibling;
  }
 
+ return arr;
  }
 
+
  isMounted() {
  return this.parent ? this.parent.isMounted() : this.mounted;
  }

diff --git a/packages/runtime-core/npm/createPageConfig.js b/packages/runtime-core/npm/createPageConfig.js
@@ -62,14 +62,6 @@ export default function createPageConfig(Page) {
  this.pageId = generatePageId();
 
  this.lifecycleCallback = {};
- this.data = {
- root: {
- children: [],
- },
- modalRoot: {
- children: [],
- },
- };
 
  this.query = query;
  this.container = new Container(this, 'root');

diff --git a/packages/runtime-core/template/base.ts b/packages/runtime-core/template/base.ts
@@ -0,0 +1,203 @@
+export const baseWxml = 
+`
+<template name="TPL">
+ <block wx:for="{{root.children}}" wx:key="*this">
+ <template is="TPL_1_CONTAINER" data="{{i: item, a: ''}}" />
+ </block>
+</template>
+
+<wxs module="_h">
+ var elements = {};
+ module.exports = {
+ v: function(value) {
+ return value !== undefined ? value : '';
+ },
+ t: function (type, ancestor) {
+ var items = ancestor.split(',');
+ var depth = 1;
+ for (var i = 0; i < items.length; i++) {
+ if (type === items[i]) {
+ depth = depth + 1;
+ }
+ }
+
+ var id = 'TPL_' + depth + '_' + type;
+ return id;
+ }
+ };
+</wxs>
+ 
+ 
+<template name="TPL_1_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_2_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_3_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_4_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_5_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_6_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_7_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_8_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_9_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+ 
+<template name="TPL_10_view">
+ <view>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </view>
+</template>
+
+<template name="TPL_1_button">
+ <button>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </button>
+</template>
+
+<template name="TPL_2_button">
+ <button>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </button>
+</template>
+
+<template name="TPL_3_button">
+ <button>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </button>
+</template>
+
+<template name="TPL_1_text">
+ <text>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </text>
+</template>
+
+<template name="TPL_2_text">
+ <text>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </text>
+</template>
+
+<template name="TPL_3_text">
+ <text>
+ <block wx:for="{{i.children}}" wx:key="*this">
+ <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />
+ </block>
+ </text>
+</template>
+
+<template name="TPL_1_plain-text" data="{{i: i}}">
+ <block>{{i.text}}</block>
+</template>
+
+<template name="TPL_1_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 1}}" />
+</template>
+
+<template name="TPL_2_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 2}}" />
+</template>
+
+<template name="TPL_3_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 3}}" />
+</template>
+
+<template name="TPL_4_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 4}}" />
+</template>
+
+<template name="TPL_5_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 5}}" />
+</template>
+
+<template name="TPL_6_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 6}}" />
+</template>
+
+<template name="TPL_7_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 7}}" />
+</template>
+
+<template name="TPL_8_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 8}}" />
+</template>
+
+<template name="TPL_9_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 9}}" />
+</template>
+
+<template name="TPL_10_CONTAINER" data="{{i: i}}">
+ <template is="{{_h.t(i.type, a)}}" data="{{i: i, a: a + ',' + i.type, tid: 10}}" />
+</template>
+
+`
diff --git a/packages/runtime-core/transform/index.ts b/packages/runtime-core/transform/index.ts
@@ -40,7 +40,10 @@ export default function tarnsform(options: TarnsformOption) {
  }
  })
 
- outTemplate = '<view>123</view>'
+ outTemplate = `
+<import src="/base.wxml"/>
+<template is="TPL" data="{{root: root}}" />
+ `
 
  ast.program.body = ast.program.body.filter(item => (!(t.isImportDeclaration(item) && /css$/.test(item.source.value))))