@quicktvui/ai 1.0.6 → 1.0.8

package/rules/.source/ESVue/src/hooks/lifecycle.ts

@@ -0,0 +1,248 @@
+// esLifecycle.ts
+import { getCurrentInstance } from "vue";
+import type { ComponentPublicInstance } from "@vue/runtime-core";
+import { ESKeyEvent } from "@extscreen/es3-core";
+
+// ================== Symbol keys ==================
+const ES_CREATE = Symbol("create");
+const ES_CREATED = Symbol("created");
+const ES_RESTART = Symbol("restart");
+const ES_START = Symbol("start");
+const ES_RESUME = Symbol("resume");
+const ES_PAUSE = Symbol("pause");
+const ES_STOP = Symbol("stop");
+const ES_DESTROY = Symbol("destroy");
+const ES_NEW_INTENT = Symbol("newIntent");
+const ES_SAVE_INSTANCE_STATE = Symbol("saveInstanceState");
+const ES_RESTORE_INSTANCE_STATE = Symbol("restoreInstanceState");
+
+const ES_BIND = Symbol("bind");
+const ES_RECYCLE = Symbol("recycle");
+const ES_ATTACHED = Symbol("attached");
+const ES_DETACHED = Symbol("detached");
+const ES_SLOT_EVENT = Symbol("slotEvent");
+
+const ES_KEY_DOWN = Symbol("keyDown");
+const ES_KEY_UP = Symbol("keyUp");
+const ES_BACK_PRESSED = Symbol("backPressed");
+const ES_DISPATCH_KEY_EVENT = Symbol("dispatchKeyEvent");
+
+// ================== 通用注册器 ==================
+function registerHook(key: symbol, hook: Function) {
+  const instance = getCurrentInstance();
+  if (instance && instance.proxy) {
+    (instance.proxy as any).__internal__ = instance;
+    (instance as any)[key] ||= [];
+    (instance as any)[key].push(hook);
+  }
+}
+
+// ================== 生命周期导出方法 ==================
+export function onESCreate(hook: (params?: any) => void) {
+  registerHook(ES_CREATE, hook);
+}
+
+export function onESCreated(hook: (success?: boolean) => void) {
+  registerHook(ES_CREATED, hook);
+}
+
+export function onESRestart(hook: () => void) {
+  registerHook(ES_RESTART, hook);
+}
+
+export function onESStart(hook: () => void) {
+  registerHook(ES_START, hook);
+}
+
+export function onESResume(hook: () => void) {
+  registerHook(ES_RESUME, hook);
+}
+
+export function onESPause(hook: () => void) {
+  registerHook(ES_PAUSE, hook);
+}
+
+export function onESStop(hook: () => void) {
+  registerHook(ES_STOP, hook);
+}
+
+export function onESDestroy(hook: () => void) {
+  registerHook(ES_DESTROY, hook);
+}
+
+export function onESNewIntent(hook: (intent?: any) => void) {
+  registerHook(ES_NEW_INTENT, hook);
+}
+
+export function onESSaveInstanceState(
+  hook: (savedInstanceState?: any) => void,
+) {
+  registerHook(ES_SAVE_INSTANCE_STATE, hook);
+}
+
+export function onESRestoreInstanceState(
+  hook: (savedInstanceState?: any) => void,
+) {
+  registerHook(ES_RESTORE_INSTANCE_STATE, hook);
+}
+
+// ================== 额外扩展 ==================
+export function onESBind(hook: () => void) {
+  registerHook(ES_BIND, hook);
+}
+
+export function onESRecycle(hook: () => void) {
+  registerHook(ES_RECYCLE, hook);
+}
+
+export function onESAttached(hook: () => void) {
+  registerHook(ES_ATTACHED, hook);
+}
+
+export function onESDetached(hook: () => void) {
+  registerHook(ES_DETACHED, hook);
+}
+
+export function onESSlotEvent(hook: (event: any) => void) {
+  registerHook(ES_SLOT_EVENT, hook);
+}
+
+//-----------------------------------------------------------------------------
+export function onBackPressed(hook: () => void) {
+  registerHook(ES_BACK_PRESSED, hook);
+}
+
+export function onDispatchKeyEvent(hook: (event: ESKeyEvent) => void) {
+  registerHook(ES_DISPATCH_KEY_EVENT, hook);
+}
+
+export function onKeyDown(hook: (event: ESKeyEvent) => void) {
+  registerHook(ES_KEY_DOWN, hook);
+}
+
+export function onKeyUp(hook: (event: ESKeyEvent) => void) {
+  registerHook(ES_KEY_UP, hook);
+}
+
+// ================== 内部调用：执行指定 key 的 hooks，并收集返回值 ==================
+function callHooks<T = any>(
+  instance: ComponentPublicInstance,
+  key: symbol,
+  ...args: any[]
+): Array<T | Promise<T> | undefined> {
+  const internal = (instance as any).__internal__;
+  const hooks: Function[] = internal?.[key] || [];
+  const results: Array<T | Promise<T> | undefined> = [];
+  for (const hook of hooks) {
+    try {
+      const res = hook(...args);
+      results.push(res);
+    } catch (err) {
+      console.error(`[ESLifecycle error][${String(key)}]`, err);
+      results.push(undefined);
+    }
+  }
+  return results;
+}
+
+/**
+ * 判断实例上是否存在指定 hook
+ * @param instance 组件实例
+ * @param key Symbol，用于查找 hook
+ * @returns true 表示存在 hook，false 表示不存在
+ */
+export function hasESLifecycleHook(
+  instance: ComponentPublicInstance,
+  key: symbol,
+): boolean {
+  const internal = (instance as any).__internal__;
+  const hooks: Function[] = internal?.[key] || [];
+  return hooks.length > 0;
+}
+
+// ================== 调度器：通过 publicInstance 触发，并返回所有 hook 的返回值 ==================
+export function triggerESLifecycle<T = any>(
+  publicInstance: ComponentPublicInstance,
+  event:
+    | "create"
+    | "created"
+    | "restart"
+    | "start"
+    | "resume"
+    | "pause"
+    | "stop"
+    | "destroy"
+    | "newIntent"
+    | "saveInstanceState"
+    | "restoreInstanceState"
+    //
+    | "bind"
+    | "recycle"
+    | "attached"
+    | "detached"
+    | "slotEvent"
+    //
+    | "keyDown"
+    | "keyUp"
+    | "backPressed"
+    | "dispatchKeyEvent",
+  ...args: any[]
+): Array<T | Promise<T> | undefined> {
+  const keyMap: Record<string, symbol> = {
+    create: ES_CREATE,
+    created: ES_CREATED,
+    restart: ES_RESTART,
+    start: ES_START,
+    resume: ES_RESUME,
+    pause: ES_PAUSE,
+    stop: ES_STOP,
+    destroy: ES_DESTROY,
+    newIntent: ES_NEW_INTENT,
+    saveInstanceState: ES_SAVE_INSTANCE_STATE,
+    restoreInstanceState: ES_RESTORE_INSTANCE_STATE,
+    //
+    bind: ES_BIND,
+    recycle: ES_RECYCLE,
+    attached: ES_ATTACHED,
+    detached: ES_DETACHED,
+    slotEvent: ES_SLOT_EVENT,
+    //
+    keyDown: ES_KEY_DOWN,
+    keyUp: ES_KEY_UP,
+    backPressed: ES_BACK_PRESSED,
+    dispatchKeyEvent: ES_DISPATCH_KEY_EVENT,
+  };
+  const key = keyMap[event];
+  if (key) {
+    return callHooks<T>(publicInstance, key, ...args);
+  } else {
+    console.warn(`[ESLifecycle warn] Unknown lifecycle: ${event}`);
+    return [];
+  }
+}
+
+// ================== 导出所有 Symbol key ==================
+export const ESLifecycleKeys = {
+  ES_CREATE,
+  ES_CREATED,
+  ES_RESTART,
+  ES_START,
+  ES_RESUME,
+  ES_PAUSE,
+  ES_STOP,
+  ES_DESTROY,
+  ES_NEW_INTENT,
+  ES_SAVE_INSTANCE_STATE,
+  ES_RESTORE_INSTANCE_STATE,
+  //
+  ES_BIND,
+  ES_RECYCLE,
+  ES_ATTACHED,
+  ES_DETACHED,
+  ES_SLOT_EVENT,
+  //
+  ES_KEY_DOWN,
+  ES_KEY_UP,
+  ES_BACK_PRESSED,
+  ES_DISPATCH_KEY_EVENT,
+};

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

@@ -0,0 +1,365 @@
+/*
+ * 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.
+ */
+
+import {
+  CssDeclarationType,
+  CssNodeType,
+  parseCSS,
+  translateColor,
+} from "@extscreen/es3-vue-style-parser";
+import { App, Component, createRenderer } from "@vue/runtime-core";
+import { isFunction } from "@vue/shared";
+
+import type {
+  CallbackType,
+  CommonMapParams,
+  NativeInterfaceMap,
+  NeedToTyped,
+} from "./types";
+import BuiltInComponent from "./built-in-component";
+import { nodeOps } from "./node-ops";
+import { patchProp } from "./patch-prop";
+import {
+  ElementComponent,
+  getTagComponent,
+  registerElement,
+  TagComponent,
+} from "./runtime/component";
+import { HippyDocument } from "./runtime/document/hippy-document";
+import type { HippyElement } from "./runtime/element/hippy-element";
+import type { HippyInputElement } from "./runtime/element/hippy-input-element";
+import type { HippyListElement } from "./runtime/element/hippy-list-element";
+import { EventBus } from "./runtime/event/event-bus";
+import type { NativeApiType } from "./runtime/native";
+import { Native } from "./runtime/native";
+import "./runtime/event/hippy-event-dispatcher";
+import "./runtime/websocket/websocket";
+import type { HippyNode } from "./runtime/node/hippy-node";
+import {
+  setBeforeLoadStyle,
+  setBeforeRenderToNative,
+  setSilent,
+  setTrimWhitespace,
+  trace,
+} from "./util";
+import type { HippyCachedInstanceType } from "./util/instance";
+import {
+  getHippyCachedInstance,
+  setHippyCachedInstance,
+  setHippyCachedInstanceParams,
+} from "./util/instance";
+import { setScreenSize } from "./util/screen";
+import { setLoggerDebug } from "./util/log";
+
+/**
+ * Hippy App type, override the mount method of Vue
+ *
+ */
+export type ESApp = App & {
+  $start: (
+    afterCallback?: CallbackType,
+  ) => Promise<{ superProps: NeedToTyped; rootViewId: number }>;
+
+  exit(code?: number);
+};
+
+/**
+ * options type of initialization parameters
+ */
+export interface ESAppOptions {
+  // The app name registered by the Hippy native needs to be applied to the Hippy party
+  appName?: string;
+  // style configuration
+  styleOptions?: {
+    // hook method for style loading
+    beforeLoadStyle?: (decl: CssDeclarationType) => CssDeclarationType;
+    // base screen width, the default value is 750, which is usually used in the design draft.
+    ratioBaseWidth?: number;
+    // base rem
+    remBase?: number;
+  };
+  // do not print trace info if set to true
+  silent?: boolean;
+  debug?: boolean;
+  // set whether to trim text whitespace
+  trimWhitespace?: boolean;
+}
+
+// base screen width
+const defaultRatioBaseWidth = 1920;
+//
+const defaultRemBase = 16;
+
+const componentName = [
+  "%c[Hippy-Vue-Next]%c",
+  "color: #4fc08d; font-weight: bold",
+  "color: auto; font-weight: auto",
+];
+
+/**
+ * create root node
+ */
+function createRootNode(rootContainer: string): HippyNode {
+  // Create the root node as the root of the entire hippy tree
+  const root: HippyElement = HippyDocument.createElement("div");
+  // The id value of the root node is set to the incoming parameter rootContainer
+  root.id = rootContainer;
+  // The root node flex is set to 1 by default
+  root.style = {
+    display: "flex",
+    flex: 1,
+  };
+
+  return root;
+}
+
+/**
+ * Create Hippy Vue instance
+ *
+ * @param vueRootComponent - instance of vue root component
+ * @param options - initialization parameters
+ *
+ * @public
+ */
+export const createApp = (
+  vueRootComponent: Component,
+  options: ESAppOptions,
+): ESApp => {
+  // createRenderer ---> vue
+  // Create a custom renderer and get the vue app instance
+  const app: App = createRenderer({
+    //
+    //RendererOptions
+    //https://cn.vuejs.org/api/custom-renderer
+    patchProp, //
+    ...nodeOps, //
+  }).createApp(vueRootComponent);
+  // hippy app instance
+  const hippyApp: ESApp = app as ESApp;
+
+  // register built-in label components, such as div, span, etc., to enable HippyNode to support built-in labels
+  // these built-in tags will be converted to component types recognized by Native,
+  // registered with default properties, added additional event processing, etc.
+  hippyApp.use(BuiltInComponent);
+
+  if (typeof options?.styleOptions?.beforeLoadStyle === "function") {
+    // If a style loading hook is set, save the custom style loading hook
+    setBeforeLoadStyle(options.styleOptions.beforeLoadStyle);
+  }
+
+  // do not print trace info
+  if (options.silent != undefined) {
+    setSilent(options.silent);
+  }
+
+  //
+  if (options.debug != undefined) {
+    setLoggerDebug(options.debug);
+  }
+
+  // set whether to trim whitespace
+  setTrimWhitespace(options.trimWhitespace);
+
+  // save the original mount method
+  const { mount } = hippyApp;
+
+  // rewrite mount method of vue
+  hippyApp.mount = (rootContainer) => {
+    // cache rootContainer, used to determine whether it is the root node
+    setHippyCachedInstanceParams("rootContainer", rootContainer);
+    // create the root node
+    const root = createRootNode(rootContainer);
+    // mount and get the instance
+    const instance = mount(root, false, false);
+    // cache Vue instance
+    setHippyCachedInstanceParams("instance", instance);
+
+    return instance;
+  };
+
+  // return instance of HippyApp instance
+  hippyApp.$start = async (afterCallback?: CallbackType) =>
+    new Promise((resolve) => {
+      // call the interface provided by Native to register hippy
+      Native.hippyNativeRegister.regist(
+        options.appName,
+        (superProps: NeedToTyped) => {
+          // get the initialization parameters passed in by the native, login parameters
+          const { __instanceId__: rootViewId } = superProps;
+
+          trace(
+            ...componentName,
+            "Start",
+            options.appName,
+            "with rootViewId",
+            rootViewId,
+            superProps,
+          );
+          // when refreshing the app, need to remove the old instance first
+          const oldInstance = getHippyCachedInstance();
+          if (oldInstance?.app) {
+            oldInstance.app.unmount();
+          }
+
+          // cache initialization parameters
+          setHippyCachedInstance({
+            rootViewId, // id of root view returned by native, do not forget set style for root view
+            superProps, // initialization parameters returned by native
+            app: hippyApp,
+            ratioBaseWidth:
+              options?.styleOptions?.ratioBaseWidth ?? defaultRatioBaseWidth, // base screen width
+            remBase: options?.styleOptions?.remBase ?? defaultRemBase,
+          });
+
+          const globalInitParams = {
+            superProps,
+            rootViewId,
+          };
+
+          // the initialization is complete, and return the initialization parameters returned
+          // by native. support callback && promise
+          if (isFunction(afterCallback)) {
+            afterCallback(globalInitParams);
+          } else {
+            resolve(globalInitParams);
+          }
+        },
+      );
+    });
+
+  hippyApp.exit = (code) => {
+    try {
+      if (code != undefined) {
+        if (code == 0) {
+          console.log("[Quick TV App Exit] Exit code:", code);
+        } else {
+          console.error("[Quick TV App Exit] Exit code:", code);
+        }
+      } else {
+        console.log("[Quick TV App Exit] Exit!");
+      }
+    } catch (e) {}
+    //
+    if (Native.isAndroid()) {
+      Native.callNative("EsNativeModule", "finish");
+    } else {
+      Native.callNative("ESAbilityModule", "terminateSelf");
+    }
+  };
+
+  hippyApp.directive("pseudo", {
+    mounted(el: HippyElement, binding) {
+      const pseudo = binding.arg;
+      if (pseudo) {
+        const value = binding.value;
+        el.setPseudoState(pseudo, value);
+      }
+    },
+    updated(el: HippyElement, binding) {
+      const pseudo = binding.arg;
+      if (pseudo) {
+        const value = binding.value;
+        el.setPseudoState(pseudo, value);
+      }
+    },
+  });
+
+  // return hippy vue instance
+  return hippyApp;
+};
+
+/*
+ * used to validate beforeRenderToNative hook
+ * when ElementNode or ViewNode have breaking changes, add version number to disable
+ * beforeRenderToNative hook
+ */
+const BEFORE_RENDER_TO_NATIVE_HOOK_VERSION = 1;
+export const _setBeforeRenderToNative = (hook, version) => {
+  if (isFunction(hook)) {
+    if (BEFORE_RENDER_TO_NATIVE_HOOK_VERSION === version) {
+      setBeforeRenderToNative(hook);
+    } else {
+      console.error(
+        "_setBeforeRenderToNative API had changed, the hook function will be ignored!",
+      );
+    }
+  }
+};
+
+export type {
+  NativeApiType,
+  HippyCachedInstanceType,
+  HippyElement,
+  HippyNode,
+  HippyInputElement,
+  HippyListElement,
+  CssNodeType,
+  TagComponent,
+  ElementComponent,
+  CallbackType,
+  CommonMapParams,
+  NeedToTyped,
+  NativeInterfaceMap,
+};
+
+export {
+  HIPPY_DEBUG_ADDRESS,
+  HIPPY_STATIC_PROTOCOL,
+  NATIVE_COMPONENT_MAP,
+  IS_PROD,
+  HIPPY_GLOBAL_STYLE_NAME,
+  HIPPY_GLOBAL_DISPOSE_STYLE_NAME,
+  HIPPY_VUE_VERSION,
+} from "./config";
+export {
+  HippyEvent,
+  HippyTouchEvent,
+  HippyKeyboardEvent,
+  HippyLayoutEvent,
+  HippyLoadResourceEvent,
+  ExposureEvent,
+  FocusEvent,
+  ContentSizeEvent,
+  ListViewEvent,
+  ViewPagerEvent,
+  eventIsKeyboardEvent,
+  //-----------add by liulipeng-----------------------------
+  BindEvent,
+  HippyScrollOffsetEvent,
+  HippyScrollStateChangedEvent,
+  HippyChildFocusEvent,
+  HippyChildSelectEvent,
+  HippyFocusSearchFailedEvent,
+  //-----------add by liulipeng-----------------------------
+} from "./runtime/event/hippy-event";
+
+export {
+  EventBus,
+  Native,
+  translateColor,
+  parseCSS,
+  setScreenSize,
+  getTagComponent,
+  registerElement,
+};
+
+export { resolveScaleValue } from "./runtime/style";
+
+export * from "./hooks/lifecycle";

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

@@ -0,0 +1,24 @@
+import type { NeedToTyped } from "../types";
+import type { HippyElement } from "../runtime/element/hippy-element";
+import { info } from "./patch-log";
+
+/**
+ * set element attribute value
+ *
+ * @param el - element
+ * @param key - key
+ * @param prevValue - before value
+ * @param nextValue - after value
+ */
+export function patchAttr(
+  el: HippyElement,
+  key: string,
+  prevValue: NeedToTyped,
+  nextValue: NeedToTyped,
+): void {
+  info("patchAttr: ", el, key, prevValue, nextValue);
+  // set attr when next value is not equal before value
+  if (prevValue !== nextValue) {
+    el.setAttribute(key, nextValue);
+  }
+}

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

@@ -0,0 +1,31 @@
+import type { HippyElement } from "../runtime/element/hippy-element";
+import { info } from "./patch-log";
+
+/**
+ * Set the class attribute to an element
+ *
+ * @param el - element
+ * @param newValue - new value
+ */
+export function patchClass(el: HippyElement, newValue: string): void {
+  let value = newValue;
+
+  info("patchClass: ", el, newValue);
+
+  if (value === null) {
+    value = "";
+  }
+
+  // directly setting className should be faster than setAttribute in theory
+  // if this is an element during a transition, take the temporary transition classes into account.
+  // the animation class will be processed later
+  // const transitionClasses = (el as ElementWithTransition)._vtc;
+  const transitionClasses = "";
+  if (transitionClasses) {
+    value = (
+      value ? [value, ...transitionClasses] : [...transitionClasses]
+    ).join(" ");
+  }
+
+  el.setAttribute("class", value);
+}