@quicktvui/ai 1.0.6 → 1.0.7

package/rules/.source/ESVue/src/modules/events.ts

@@ -0,0 +1,119 @@
+import type { ComponentInternalInstance } from "@vue/runtime-core";
+import { callWithAsyncErrorHandling, ErrorCodes } from "@vue/runtime-core";
+
+import type { CallbackType } from "../types";
+import type { HippyElement } from "../runtime/element/hippy-element";
+import { lowerFirstLetter } from "../util";
+import { info } from "./patch-log";
+
+// event callback type
+type EventValue = CallbackType | CallbackType[];
+
+// Vue event callback interface type
+interface Invoker extends EventListener {
+  value: EventValue;
+  attached?: number;
+}
+
+// native event option
+interface EventOption {
+  [key: string]: boolean;
+}
+
+// event modifier regular expression
+const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+
+/**
+ * process the event name, remove on and lowercase the first letter
+ *
+ * @param eventName - event name
+ */
+function parseName(eventName: string): (string | EventOption)[] {
+  let name = eventName;
+  const options: EventOption = {};
+  if (optionsModifierRE.test(name)) {
+    let match = name.match(optionsModifierRE);
+    while (match) {
+      name = name.slice(0, name.length - match[0].length);
+      options[match[0].toLowerCase()] = true;
+      match = name.match(optionsModifierRE);
+    }
+  }
+
+  // vue 3.2.39+ transform custom event name start with :
+  // https://github.com/vuejs/core/commit/0739f8909a0e56ae0fa760f233dfb8c113c9bde2
+  // so we need to remove it
+  name = name[2] === ":" ? name.slice(3) : name.slice(2);
+  // remove on and lowercase the first letter
+  return [lowerFirstLetter(name), options];
+}
+
+/**
+ * create event execution method
+ *
+ * @param initialValue - the initial value of the event
+ * @param instance - vue instance
+ */
+function createInvoker(
+  initialValue: EventValue,
+  instance: ComponentInternalInstance | null,
+) {
+  const invoker = (e: Event) => {
+    callWithAsyncErrorHandling(invoker.value as Invoker, instance, 5, [e]);
+  };
+  invoker.value = initialValue;
+
+  return invoker;
+}
+
+/**
+ * set events on elements
+ *
+ * @param rawEl - target element
+ * @param rawName - event name
+ * @param prevValue - old value
+ * @param nextValue - new value
+ * @param instance - vue instance
+ */
+export function patchEvent(
+  rawEl: HippyElement & { _vei?: Record<string, Invoker | undefined> },
+  rawName: string,
+  prevValue: EventValue | null,
+  nextValue: EventValue | null,
+  instance: ComponentInternalInstance | null = null,
+): void {
+  info("patchEvent: ", rawEl, rawName, prevValue, nextValue);
+
+  // vei = vue event invokers
+  const el = rawEl;
+  const invokers: Record<string, Invoker | undefined> =
+    el._vei ?? (el._vei = {});
+  const existingInvoker: Invoker | undefined = invokers[rawName];
+
+  if (nextValue && existingInvoker) {
+    // update event
+    existingInvoker.value = nextValue;
+  } else {
+    const [name, options] = parseName(rawName);
+
+    if (nextValue) {
+      // first create the event and save it in _vei, then bind the event to el
+      invokers[rawName] = createInvoker(nextValue, instance);
+      const invoker = invokers[rawName];
+      el.addEventListener(
+        name as string,
+        invoker as Invoker,
+        options as EventOption,
+      );
+    } else {
+      // remove the event, first remove the event from el
+      el.removeEventListener(
+        name as string,
+        existingInvoker as Invoker,
+        options as EventOption,
+      );
+      // then remove the event in _vei
+      invokers[rawName] = undefined;
+    }
+  }
+}

package/rules/.source/ESVue/src/modules/patch-log.ts

@@ -0,0 +1,39 @@
+//
+export function info(msg: string, ..._args: any[]): void;
+export function info(msg: string): void {
+  if (!enableLog) return;
+  const args = Array.from(arguments).slice(1);
+  console.info.apply(
+    console,
+    ["[ESVue info]: " + msg].concat(args) as [string, ...any[]],
+  );
+}
+
+//
+export function warn(msg: string, ..._args: any[]): void;
+export function warn(msg: string): void {
+  if (!enableLog) return;
+  const args = Array.from(arguments).slice(1);
+  console.warn.apply(
+    console,
+    ["[ESVue warn]: " + msg].concat(args) as [string, ...any[]],
+  );
+}
+
+//
+export function error(msg: string, ..._args: any[]): void;
+export function error(msg: string): void {
+  if (!enableLog) return;
+  const args = Array.from(arguments).slice(1);
+  console.error.apply(
+    console,
+    ["[ESVue error]: " + msg].concat(args) as [string, ...any[]],
+  );
+}
+
+//--------------------------------------------------
+let enableLog = false;
+
+export function setLoggerDebug(enabled: boolean) {
+  enableLog = enabled;
+}

package/rules/.source/ESVue/src/modules/style.ts

@@ -0,0 +1,68 @@
+import { camelize } from "@vue/runtime-core";
+import { isString } from "@vue/shared";
+import type { NeedToTyped } from "../types";
+import { isNullOrUndefined } from "../util";
+import { HippyElement } from "../runtime/element/hippy-element";
+import { info } from "./patch-log";
+
+// type of style
+type Style = string | Record<string, string | string[]> | null | undefined;
+
+function isStyleExisted(el: HippyElement, prev: Style, next: Style) {
+  const isElementNull = !el;
+  const isPrevAndNextNull = !prev && !next;
+  const isPrevEqualToNext = JSON.stringify(prev) === JSON.stringify(next);
+  return isElementNull || isPrevAndNextNull || isPrevEqualToNext;
+}
+
+/**
+ * set the Style property
+ *
+ * @param rawEl - target element
+ * @param prev - old value
+ * @param next - new value
+ */
+export function patchStyle(
+  rawEl: HippyElement,
+  prev: Style,
+  next: Style,
+): void {
+  const el = rawEl;
+  const batchedStyles: NeedToTyped = {};
+
+  if (isStyleExisted(el, prev, next)) {
+    // if the previous and next attributes are the same, skip the patch calculation.
+    return;
+  }
+
+  info("patchStyle: ", rawEl, prev, next);
+
+  if (prev && !next) {
+    // clear style
+    el.removeInlineStyle();
+  } else if (isString(next)) {
+    // in hippy, the styles are all array or Object types, and if it is a string, thrown an exception
+    throw new Error("Style is Not Object");
+  } else if (next) {
+    // the new style is an array or Object, apply the new style to all
+    // style is an array, so we do not update native instantly, we will update at the end
+    Object.keys(next).forEach((key) => {
+      const value = next[key];
+      if (!isNullOrUndefined(value)) {
+        batchedStyles[camelize(key)] = value;
+      }
+    });
+    // 如果 prev 和 batchedStyles 内容一致，跳过更新
+    const isStyleChanged =
+      !prev ||
+      Object.keys(batchedStyles).some(
+        (key) => batchedStyles[key] !== prev[key],
+      ) ||
+      Object.keys(prev).some((key) => batchedStyles[key] === undefined);
+
+    if (isStyleChanged) {
+      el.removeInlineStyle(true);
+      el.setInlineStyle(batchedStyles);
+    }
+  }
+}

package/rules/.source/ESVue/src/node-ops.ts

@@ -0,0 +1,153 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Implement the operation method of el in the Vue3 custom renderer
+ */
+import { HippyDocument } from "./runtime/document/hippy-document";
+import type { HippyElement } from "./runtime/element/hippy-element";
+import type { HippyCommentElement } from "./runtime/element/hippy-comment-element";
+import type { HippyNode } from "./runtime/node/hippy-node";
+import type { HippyText } from "./runtime/text/hippy-text";
+import { unCacheNodeOnIdle } from "./util/node";
+
+/**
+ * Insert the node at the specified position
+ *
+ * @param child - child node
+ * @param parent - parent node
+ * @param anchor - anchor node
+ */
+function insert(
+  child: HippyNode,
+  parent: HippyNode,
+  anchor: HippyNode | null = null,
+): void {
+  if (parent.childNodes.indexOf(child) >= 0) {
+    // Move node if node already exists
+    parent.moveChild(child, anchor);
+  } else {
+    // Insert the node at the anchor position
+    parent.insertBefore(child, anchor);
+  }
+}
+
+/**
+ * remove the specified child node
+ *
+ * @param child - child node
+ */
+function remove(child: HippyNode): void {
+  const parent: HippyNode | null = child.parentNode;
+
+  if (parent) {
+    parent.removeChild(child);
+    // when removing a node, also remove the cached node
+    unCacheNodeOnIdle(child);
+  }
+}
+
+/**
+ * create Element node
+ *
+ * @param name - tag name
+ */
+function createElement(name: string): HippyElement {
+  return HippyDocument.createElement(name);
+}
+
+/**
+ * create text node
+ *
+ * @param text - text content
+ */
+function createText(text: string): HippyText {
+  return HippyDocument.createTextNode(text);
+}
+
+/**
+ * create comment node
+ *
+ * @param text - comment content
+ */
+function createComment(text: string): HippyCommentElement {
+  return HippyDocument.createComment(text);
+}
+
+/**
+ * set the text content
+ *
+ * @param node - the node to be set text content
+ * @param text - text content
+ */
+function setText(node: HippyText, text: string): void {
+  node.setText(text);
+}
+
+/**
+ * Set the text attribute of the element node
+ *
+ * @param element - the element node to be set text attribute
+ * @param text - text content
+ */
+function setElementText(element: HippyElement, text: string): void {
+  element.setText(text);
+}
+
+/**
+ * return the parent node
+ *
+ * @param node - target node
+ */
+function parentNode(node: HippyNode): HippyNode | null {
+  return node.parentNode;
+}
+
+/**
+ * return next sibling node
+ *
+ * @param node - target node
+ */
+function nextSibling(node: HippyNode): HippyNode | null {
+  return node.nextSibling;
+}
+
+/**
+ * set style scoped id for element
+ *
+ * @param element - element node
+ * @param id - scoped id
+ */
+function setScopeId(element: HippyElement, id: string) {
+  element.setStyleScope(id);
+}
+
+export const nodeOps = {
+  insert,
+  remove,
+  setText,
+  setElementText,
+  createElement,
+  createComment,
+  createText,
+  parentNode,
+  nextSibling,
+  setScopeId,
+};

package/rules/.source/ESVue/src/patch-prop.ts

@@ -0,0 +1,93 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Implement the patch props method required for Vue3 VNode mount
+ */
+import type { ComponentInternalInstance } from "@vue/runtime-core";
+import { isOn } from "@vue/shared";
+import type { NeedToTyped } from "./types";
+
+import { patchAttr } from "./modules/attrs";
+import { patchClass } from "./modules/class";
+import { patchEvent } from "./modules/events";
+import { patchStyle } from "./modules/style";
+import type { HippyElement } from "./runtime/element/hippy-element";
+
+export function patchProp(
+  el: HippyElement,
+  key: string,
+  prevValue: NeedToTyped,
+  nextValue: NeedToTyped,
+  // 其余部分在大多数自定义渲染器中是不会使用的
+  arg5?: any,
+  arg6?: any,
+  arg7?: any,
+  arg8?: any,
+  arg9?: any,
+): void {
+  // 新版 Vue 3.5+
+  if (typeof arg5 === "boolean" || Array.isArray(arg6)) {
+    const isSVG = arg5;
+    const prevChildren = arg6;
+    const parentComponent = arg7;
+    const parentSuspense = arg8;
+    const unmountChildren = arg9;
+    // 你的实际处理逻辑在这里...
+    handlePatchProp(el, key, prevValue, nextValue, parentComponent);
+  } else {
+    // 老版 Vue 3.4 及以下
+    const namespace = arg5;
+    const parentComponent = arg6;
+    // 你的实际处理逻辑在这里...
+    handlePatchProp(el, key, prevValue, nextValue, parentComponent);
+  }
+}
+
+function handlePatchProp(
+  el: NeedToTyped,
+  key: string,
+  prevValue: NeedToTyped,
+  nextValue: NeedToTyped,
+  parentComponent?: ComponentInternalInstance | null,
+): void {
+  // It should be noted that the values contained in prop here will have strings, numbers, arrays, objects, etc.
+  switch (key) {
+    case "class":
+      patchClass(el, nextValue);
+      break;
+    case "style":
+      patchStyle(el, prevValue, nextValue);
+      break;
+    default:
+      if (isOn(key) && !isNativeEvent(key)) {
+        // event prop
+        patchEvent(el, key, prevValue, nextValue, parentComponent);
+      } else {
+        // attribute prop
+        patchAttr(el, key, prevValue, nextValue);
+      }
+      break;
+  }
+}
+
+export function isNativeEvent(key: string) {
+  return ["onInterceptTouchEvent", "onInterceptPullUpEvent"].indexOf(key) >= 0;
+}

package/rules/.source/ESVue/src/runtime/component/index.ts

@@ -0,0 +1,83 @@
+/**
+ * module for the Hippy tag
+ *
+ * Register Hippy tag uniformly,
+ * establish the mapping between Hippy tag and native tag, and add default parameters and event processing logic.
+ *
+ * TODO Is it better to obtain component information in the node or where it is used?
+ *
+ */
+import { camelize } from "@vue/shared";
+import type { NeedToTyped, NativeNodeProps } from "../../types";
+import { normalizeTagName } from "../../util";
+import type { EventsUnionType, HippyEvent } from "../event/hippy-event";
+
+export interface TagComponent {
+  // the type of component that Native actually renders, such as View, TextView, etc.
+  name: string;
+  // manually modify the native event return value and do some additional processing logic
+  processEventData?: (
+    evtData: EventsUnionType,
+    nativeEventParams: NeedToTyped,
+  ) => HippyEvent;
+  // event Map, for example, touchmove in template corresponds to native onTouchMove
+  eventNamesMap?: Map<string, string>;
+  // default style
+  defaultNativeStyle?: NativeNodeProps;
+  // default props
+  defaultNativeProps?: NativeNodeProps;
+  // can be used to set the props of the Native node, with the highest priority
+  nativeProps?: NativeNodeProps;
+  // attribute map
+  attributeMaps?: NativeNodeProps;
+}
+
+export interface ElementComponent {
+  component: TagComponent;
+}
+
+// the mapping between Hippy tag and native tag
+const tagMap = new Map();
+
+/**
+ * register component information for the specified tag
+ *
+ * @param tagName - tag name
+ * @param elementComponent - tag component
+ */
+export function registerElement(
+  tagName: string,
+  elementComponent: ElementComponent,
+): void {
+  if (!tagName) {
+    throw new Error("tagName can not be empty");
+  }
+
+  // normalize tag name
+  const normalizedTagName = normalizeTagName(tagName);
+
+  // register only those who have not yet registered
+  if (!tagMap.has(normalizedTagName)) {
+    // TODO merge component default information
+
+    // save the component with tag
+    tagMap.set(normalizedTagName, elementComponent.component);
+  }
+}
+
+/**
+ * get the component information of the specified tag
+ *
+ * @param tagName - tag name
+ */
+export function getTagComponent(tagName: string): TagComponent {
+  // normalize tag name
+  const normalizedTagName = normalizeTagName(tagName);
+  // lowerCase camelize tag name, compatible vue2 component tag name
+  const lowerCamelizedTagName = camelize(tagName).toLowerCase();
+  // first, get normal tag name. second get lower camelized name
+  // eg. register hippy custom element: registerElement('CustomTag', xxx).
+  // vue tepmlate: vue2 <custom-tag> -> customtag, vue3 <custom-tag> -> custom-tag
+  // so we compatible tag name at here
+  return tagMap.get(normalizedTagName) || tagMap.get(lowerCamelizedTagName);
+}

package/rules/.source/ESVue/src/runtime/document/hippy-document.ts

@@ -0,0 +1,56 @@
+import { HippyCommentElement } from "../element/hippy-comment-element";
+import { HippyElement } from "../element/hippy-element";
+import { HippyInputElement } from "../element/hippy-input-element";
+import { HippyListElement } from "../element/hippy-list-element";
+import { HippyNode, NodeType } from "../node/hippy-node";
+import { HippyText } from "../text/hippy-text";
+import { info } from "../../util/log";
+
+/**
+ * Hippy document, provide methods for creating different type element node
+ */
+export class HippyDocument extends HippyNode {
+  /**
+   * create comment node with text content
+   *
+   * @param text - text content
+   */
+  static createComment(text: string): HippyCommentElement {
+    return new HippyCommentElement(text);
+  }
+
+  /**
+   * create different type elements by tag name
+   *
+   * @param tagName - tag name
+   */
+  static createElement(
+    tagName: string,
+  ): HippyElement | HippyInputElement | HippyListElement {
+    info("[hippy document] createElement:" + tagName);
+
+    switch (tagName) {
+      case "input":
+      case "textarea":
+        return new HippyInputElement(tagName);
+      case "ul":
+        return new HippyListElement(tagName);
+      // use tagName to create element
+      default:
+        return new HippyElement(tagName);
+    }
+  }
+
+  /**
+   * create text node
+   *
+   * @param text - text content
+   */
+  static createTextNode(text: string): HippyText {
+    return new HippyText(text);
+  }
+
+  constructor() {
+    super(NodeType.DocumentNode);
+  }
+}

package/rules/.source/ESVue/src/runtime/element/hippy-comment-element.ts

@@ -0,0 +1,21 @@
+import { HippyElement } from "./hippy-element";
+
+/**
+ * Hippy comment element
+ *
+ * @public
+ */
+class HippyCommentElement extends HippyElement {
+  public text: string;
+
+  constructor(text: string) {
+    super(text);
+
+    this.text = text;
+
+    // comment nodes do not need to be inserted into Native
+    this.isNeedInsertToNative = false;
+  }
+}
+
+export { HippyCommentElement };