wip(app): uni-app-plus

packages/uni-app-plus/__tests__/service/dom/dom.spec.ts

 import { UniNodeJSON } from '@dcloudio/uni-shared'
-import {
-  ACTION_TYPE_INSERT,
-  ACTION_TYPE_REMOVE,
-  ACTION_TYPE_REMOVE_ATTRIBUTE,
-  ACTION_TYPE_SET_ATTRIBUTE,
-  ACTION_TYPE_SET_TEXT,
-  createPageNode,
-  InsertAction,
-  SetAttributeAction,
-} from '../../../src/service/framework/dom/Page'
+import { createPageNode } from '../../../src/service/framework/dom/Page'
 import {
   createElement,
   createTextNode,
 } from '../../../../uni-app-vue/lib/service.runtime.esm'
+import {
+  InsertAction,
+  ACTION_TYPE_INSERT,
+  SetAttributeAction,
+  ACTION_TYPE_SET_ATTRIBUTE,
+  ACTION_TYPE_REMOVE_ATTRIBUTE,
+  ACTION_TYPE_SET_TEXT,
+  ACTION_TYPE_REMOVE,
+} from '../../../src/PageAction'
 describe('dom', () => {
   const pageId = 1
   const root = createPageNode(pageId, {
+    route: 'pages/index/index',
     version: 1,
     locale: 'zh_CN',
     disableScroll: false,

packages/uni-app-plus/__tests__/service/index.spec.ts

@@ -11,6 +11,7 @@ import {
 import { createPageNode } from '../../src/service/framework/dom/Page'
 
 const defaultPageNodeOptions = {
+  route: 'pages/index/index',
   version: 1,
   locale: 'zh_CN',
   disableScroll: false,
@@ -55,7 +56,6 @@ describe('vue', () => {
     }
     const pageNode = createPageNode(1, defaultPageNodeOptions, true)
     createApp(Page).mount(pageNode as unknown as Element)
-    pageNode.mounted()
     show.value = false
     handleClick = null
     nextTick(() => {

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -818,6 +818,84 @@
   function formatLog(module, ...args) {
     return `[${Date.now()}][${module}]\uFF1A${args.map((arg) => JSON.stringify(arg)).join(" ")}`;
   }
+  const ATTR_MAP = {
+    class: ".c",
+    style: ".s",
+    onClick: ".e0",
+    onChange: ".e1",
+    onInput: ".e2",
+    onLoad: ".e3",
+    onError: ".e4",
+    onTouchstart: ".e5",
+    onTouchmove: ".e6",
+    onTouchcancel: ".e7",
+    onTouchend: ".e8",
+    onLongpress: ".e9",
+    onTransitionend: ".ea",
+    onAnimationstart: ".eb",
+    onAnimationiteration: ".ec",
+    onAnimationend: ".ed",
+    onTouchforcechange: ".ee"
+  };
+  const COMPONENT_MAP = {
+    VIEW: 1,
+    IMAGE: 2,
+    TEXT: 3,
+    "#text": 4,
+    "#comment": 5,
+    NAVIGATOR: 6,
+    FORM: 7,
+    BUTTON: 8,
+    INPUT: 9,
+    LABEL: 10,
+    RADIO: 11,
+    CHECKBOX: 12,
+    "CHECKBOX-GROUP": 13,
+    AD: 14,
+    AUDIO: 15,
+    CAMERA: 16,
+    CANVAS: 17,
+    "COVER-IMAGE": 18,
+    "COVER-VIEW": 19,
+    EDITOR: 20,
+    "FUNCTIONAL-PAGE-NAVIGATOR": 21,
+    ICON: 22,
+    "RADIO-GROUP": 23,
+    "LIVE-PLAYER": 24,
+    "LIVE-PUSHER": 25,
+    MAP: 26,
+    "MOVABLE-AREA": 27,
+    "MOVABLE-VIEW": 28,
+    "OFFICIAL-ACCOUNT": 29,
+    "OPEN-DATA": 30,
+    PICKER: 31,
+    "PICKER-VIEW": 32,
+    "PICKER-VIEW-COLUMN": 33,
+    PROGRESS: 34,
+    "RICH-TEXT": 35,
+    "SCROLL-VIEW": 36,
+    SLIDER: 37,
+    SWIPER: 38,
+    "SWIPER-ITEM": 39,
+    SWITCH: 40,
+    TEXTAREA: 41,
+    VIDEO: 42,
+    "WEB-VIEW": 43
+  };
+  const DECODED_ATTR_MAP = /* @__PURE__ */ Object.keys(ATTR_MAP).reduce((map, name) => {
+    map[ATTR_MAP[name]] = name;
+    return map;
+  }, Object.create(null));
+  function decodeAttr(name) {
+    return DECODED_ATTR_MAP[name] || name;
+  }
+  const DECODED_COMPONENT_ARR = /* @__PURE__ */ Object.keys(COMPONENT_MAP).reduce((arr, name) => {
+    arr.push(name.toLowerCase());
+    return arr;
+  }, [""]);
+  function decodeTag(tag) {
+    return DECODED_COMPONENT_ARR[tag] || tag;
+  }
   const E = function() {
   };
   E.prototype = {
@@ -2593,6 +2671,49 @@
   }
   const ACTION_TYPE_PAGE_CREATE = 1;
   const ACTION_TYPE_PAGE_CREATED = 2;
+  const ACTION_TYPE_CREATE = 3;
+  const ACTION_TYPE_INSERT = 4;
+  const ACTION_TYPE_REMOVE = 5;
+  const ACTION_TYPE_SET_ATTRIBUTE = 6;
+  const ACTION_TYPE_REMOVE_ATTRIBUTE = 7;
+  const ACTION_TYPE_SET_TEXT = 8;
+  const elements = new Map();
+  function $(id) {
+    return elements.get(id);
+  }
+  function createElement(id, tag) {
+    const element = document.createElement(decodeTag(tag));
+    elements.set(id, element);
+    return element;
+  }
+  function setElementAttr(element, name, value) {
+    element.setAttribute(decodeAttr(name), value);
+  }
+  function onNodeCreate(id, tag) {
+    return createElement(id, decodeTag(tag));
+  }
+  function onNodeInsert(nodeId, parentNodeId, refNodeId, nodeJson) {
+    const element = $(nodeId);
+    $(parentNodeId).insertBefore(initElement(element, nodeJson), $(refNodeId));
+  }
+  function initElement(element, { a, s }) {
+    initAttribute(element, a);
+    return element;
+  }
+  function initAttribute(element, attr) {
+    if (!attr) {
+      return;
+    }
+    Object.keys(attr).forEach((name) => setElementAttr(element, name, attr[name]));
+  }
+  function onNodeRemove(nodeId, parentNodeId) {
+  }
+  function onNodeRemoveAttr(nodeId, name) {
+  }
+  function onNodeSetAttr(nodeId, name, value) {
+  }
+  function onNodeSetText(nodeId, text) {
+  }
   function onPageCreate({
     route,
     disableScroll,
@@ -2648,6 +2769,18 @@
           return onPageCreate(action[1]);
         case ACTION_TYPE_PAGE_CREATED:
           return onPageCreated();
+        case ACTION_TYPE_CREATE:
+          return onNodeCreate(action[1], action[2]);
+        case ACTION_TYPE_INSERT:
+          return onNodeInsert(action[1], action[2], action[3], action[4]);
+        case ACTION_TYPE_REMOVE:
+          return onNodeRemove(action[1], action[2]);
+        case ACTION_TYPE_SET_ATTRIBUTE:
+          return onNodeSetAttr(action[1], action[2], action[3]);
+        case ACTION_TYPE_REMOVE_ATTRIBUTE:
+          return onNodeRemoveAttr(action[1], action[2]);
+        case ACTION_TYPE_SET_TEXT:
+          return onNodeSetText(action[1], action[2]);
       }
     });
   }

packages/uni-app-plus/src/PageAction.ts

+import { onNodeCreate } from './view/framework/subscriber/vdom/onNodeCreate'
+import { onNodeInsert } from './view/framework/subscriber/vdom/onNodeInsert'
+import { onNodeRemove } from './view/framework/subscriber/vdom/onNodeRemove'
+import { onNodeRemoveAttr } from './view/framework/subscriber/vdom/onNodeRemoveAttr'
+import { onNodeSetAttr } from './view/framework/subscriber/vdom/onNodeSetAttr'
+import { onNodeSetText } from './view/framework/subscriber/vdom/onNodeSetText'
+
 export const ACTION_TYPE_PAGE_CREATE = 1
 export const ACTION_TYPE_PAGE_CREATED = 2
 export const ACTION_TYPE_CREATE = 3
@@ -27,40 +34,32 @@ export type PageCreatedAction = [typeof ACTION_TYPE_PAGE_CREATED]
 
 export type CreateAction = [
   typeof ACTION_TYPE_CREATE,
-  number, // nodeId
-  string | number //nodeName
+  ...Parameters<typeof onNodeCreate>
 ]
 
 export type InsertAction = [
   typeof ACTION_TYPE_INSERT,
-  number, // nodeId
-  number, // parentNodeId
-  number, // index
-  Record<string, any> // Element JSON
+  ...Parameters<typeof onNodeInsert>
 ]
 
 export type RemoveAction = [
   typeof ACTION_TYPE_REMOVE,
-  number, // nodeId
-  number // parentNodeId
+  ...Parameters<typeof onNodeRemove>
 ]
 
 export type SetAttributeAction = [
   typeof ACTION_TYPE_SET_ATTRIBUTE,
-  number, // nodeId
-  string, // attribute name
-  unknown // attribute value
+  ...Parameters<typeof onNodeSetAttr>
 ]
+
 export type RemoveAttributeAction = [
   typeof ACTION_TYPE_REMOVE_ATTRIBUTE,
-  number, // nodeId
-  string // attribute name
+  ...Parameters<typeof onNodeRemoveAttr>
 ]
 
 export type SetTextAction = [
   typeof ACTION_TYPE_SET_TEXT,
-  number, // nodeId
-  string // text content
+  ...Parameters<typeof onNodeSetText>
 ]
 
 export type PageUpdateAction =

packages/uni-app-plus/src/service/framework/page/define.ts

 import { once } from '@dcloudio/uni-shared'
-import { createApp, defineComponent } from 'vue'
+import { createApp, DefineComponent } from 'vue'
 import { createPageNode } from '../dom/Page'
 import { setupPage } from './setup'
 import __vuePlugin from '../plugin'
 import { PageNodeOptions } from '../../../PageAction'
 
-export type VueComponent = ReturnType<typeof defineComponent>
+export type VueComponent = DefineComponent
 
 const pagesMap = new Map<string, ReturnType<typeof createFactory>>()
 

packages/uni-app-plus/src/view/framework/subscriber/vdom/index.ts

 import {
+  ACTION_TYPE_CREATE,
+  ACTION_TYPE_INSERT,
   ACTION_TYPE_PAGE_CREATE,
   ACTION_TYPE_PAGE_CREATED,
+  ACTION_TYPE_REMOVE,
+  ACTION_TYPE_REMOVE_ATTRIBUTE,
+  ACTION_TYPE_SET_ATTRIBUTE,
+  ACTION_TYPE_SET_TEXT,
   PageAction,
 } from '../../../../PageAction'
+import { onNodeCreate } from './onNodeCreate'
+import { onNodeInsert } from './onNodeInsert'
+import { onNodeRemove } from './onNodeRemove'
+import { onNodeRemoveAttr } from './onNodeRemoveAttr'
+import { onNodeSetAttr } from './onNodeSetAttr'
+import { onNodeSetText } from './onNodeSetText'
 import { onPageCreate } from './onPageCreate'
 import { onPageCreated } from './onPageCreated'
 
@@ -13,6 +25,18 @@ export function onVdSync(actions: PageAction[]) {
         return onPageCreate(action[1])
       case ACTION_TYPE_PAGE_CREATED:
         return onPageCreated()
+      case ACTION_TYPE_CREATE:
+        return onNodeCreate(action[1], action[2])
+      case ACTION_TYPE_INSERT:
+        return onNodeInsert(action[1], action[2], action[3], action[4])
+      case ACTION_TYPE_REMOVE:
+        return onNodeRemove(action[1], action[2])
+      case ACTION_TYPE_SET_ATTRIBUTE:
+        return onNodeSetAttr(action[1], action[2], action[3])
+      case ACTION_TYPE_REMOVE_ATTRIBUTE:
+        return onNodeRemoveAttr(action[1], action[2])
+      case ACTION_TYPE_SET_TEXT:
+        return onNodeSetText(action[1], action[2])
     }
   })
 }

packages/uni-app-plus/src/view/framework/subscriber/vdom/onNodeCreate.ts

+import { decodeTag } from '@dcloudio/uni-shared'
+import { createElement } from './utils'
+
+export function onNodeCreate(id: number, tag: string | number) {
+  return createElement(id, decodeTag(tag))
+}

packages/uni-app-plus/src/view/framework/subscriber/vdom/onNodeInsert.ts

+import { UniNodeJSON } from '@dcloudio/uni-shared'
+import { $, setElementAttr } from './utils'
+
+export function onNodeInsert(
+  nodeId: number,
+  parentNodeId: number,
+  refNodeId: number,
+  nodeJson: Partial<UniNodeJSON>
+) {
+  const element = $(nodeId)
+  $(parentNodeId).insertBefore(initElement(element, nodeJson), $(refNodeId))
+}
+
+function initElement(element: Element, { a, s }: Partial<UniNodeJSON>) {
+  initAttribute(element, a)
+  // TODO style
+  return element
+}
+
+function initAttribute(element: Element, attr?: Record<string, unknown>) {
+  if (!attr) {
+    return
+  }
+  Object.keys(attr).forEach((name) => setElementAttr(element, name, attr[name]))
+}

packages/uni-app-plus/src/view/framework/subscriber/vdom/onNodeRemove.ts

+export function onNodeRemove(nodeId: number, parentNodeId: number) {}

packages/uni-app-plus/src/view/framework/subscriber/vdom/onNodeRemoveAttr.ts

+export function onNodeRemoveAttr(nodeId: number, name: string) {}

packages/uni-app-plus/src/view/framework/subscriber/vdom/onNodeSetAttr.ts

+export function onNodeSetAttr(nodeId: number, name: string, value: unknown) {}

packages/uni-app-plus/src/view/framework/subscriber/vdom/onNodeSetText.ts

+export function onNodeSetText(nodeId: number, text: string) {}

packages/uni-app-plus/src/view/framework/subscriber/vdom/utils.ts

+import { decodeAttr, decodeTag } from '@dcloudio/uni-shared'
+
+const elements = new Map<number, Element>()
+
+export function $(id: number) {
+  return elements.get(id)!
+}
+
+export function createElement(id: number, tag: string) {
+  const element = document.createElement(decodeTag(tag))
+  elements.set(id, element)
+  return element
+}
+
+export function setElementAttr(element: Element, name: string, value: unknown) {
+  // TODO
+  element.setAttribute(decodeAttr(name), value as string)
+}

packages/uni-shared/dist/uni-shared.cjs.js

@@ -789,7 +789,7 @@ const DECODED_COMPONENT_ARR = /*#__PURE__*/ Object.keys(COMPONENT_MAP).reduce((a
     return arr;
 }, ['']);
 function decodeTag(tag) {
-    return DECODED_COMPONENT_ARR[tag] || tag;
+    return (DECODED_COMPONENT_ARR[tag] || tag);
 }
 
 function cache(fn) {

packages/uni-shared/dist/uni-shared.d.ts

@@ -45,7 +45,7 @@ export declare function decodeAttr(name: string): any;
 
 export declare function decodedQuery(query?: Record<string, any>): Record<string, string>;
 
-export declare function decodeTag(tag: string | number): string | number;
+export declare function decodeTag(tag: string | number): string;
 
 export declare const defaultRpx2Unit: {
     unit: string;

packages/uni-shared/dist/uni-shared.es.js

@@ -785,7 +785,7 @@ const DECODED_COMPONENT_ARR = /*#__PURE__*/ Object.keys(COMPONENT_MAP).reduce((a
     return arr;
 }, ['']);
 function decodeTag(tag) {
-    return DECODED_COMPONENT_ARR[tag] || tag;
+    return (DECODED_COMPONENT_ARR[tag] || tag);
 }
 
 function cache(fn) {

packages/uni-shared/src/vdom/decode.ts

@@ -21,5 +21,5 @@ const DECODED_COMPONENT_ARR = /*#__PURE__*/ Object.keys(COMPONENT_MAP).reduce(
 )
 
 export function decodeTag(tag: string | number) {
-  return DECODED_COMPONENT_ARR[tag as number] || tag
+  return (DECODED_COMPONENT_ARR[tag as number] || tag) as string
 }