@oinone/kunlun-vue-widget 6.2.0

package/src/shim-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}

package/src/token/index.ts

@@ -0,0 +1,8 @@
+import { InjectionKey } from 'vue';
+import { InjectionToken } from '@oinone/kunlun-spi';
+
+const __DEV__ = process.env.NODE_ENV === 'development';
+
+export const genToken = <T>(name: string): InjectionKey<T> => {
+  return InjectionToken<T>(__DEV__ ? `[vue-kunlun]: ${name}` : name) as any as InjectionKey<T>;
+};

package/src/typing/WidgetTagContext.ts

@@ -0,0 +1,53 @@
+import { DslDefinition } from '@oinone/kunlun-dsl';
+import { Slots } from 'vue';
+import { VueWidget } from '../basic';
+import { DslDefinitionWidgetProps } from '../dsl';
+
+/**
+ * 渲染组件
+ */
+export interface RenderWidget {
+  /**
+   * 当前组件唯一键
+   */
+  handle: string;
+  /**
+   * 主要组件
+   */
+  widget: VueWidget;
+  /**
+   * 混入组件
+   */
+  widgets: VueWidget[];
+}
+
+/**
+ * 组件标签上下文
+ */
+export interface WidgetTagContext extends Record<string, unknown> {
+  dslDefinition: DslDefinition;
+
+  slotName: string;
+
+  widgetHandle: string;
+
+  widget: VueWidget;
+
+  widgets: VueWidget[];
+
+  slotContext?: Record<string, unknown>;
+
+  getWidgetTag(): string;
+
+  getParentHandle(): string;
+
+  getDslDefinition(): DslDefinition | undefined;
+
+  getSlotName(): string;
+
+  getProps(): DslDefinitionWidgetProps;
+
+  getCurrentSlots(): Slots | undefined;
+
+  createWidget(slots?: Slots): RenderWidget | undefined;
+}

package/src/typing/WidgetTagProps.ts

@@ -0,0 +1,24 @@
+import { DslDefinition } from '@oinone/kunlun-dsl';
+import { PropType } from 'vue';
+
+/**
+ * 组件标签属性
+ */
+export const WidgetTagProps = {
+  handle: {
+    type: String
+  },
+  dslDefinition: {
+    type: Object as PropType<DslDefinition>
+  },
+  slotName: {
+    type: String
+  },
+  inline: {
+    type: Boolean,
+    default: undefined
+  },
+  slotContext: {
+    type: Object
+  }
+};

package/src/typing/index.ts

@@ -0,0 +1,3 @@
+export * from './WidgetTagProps';
+export * from './WidgetTagContext';
+export * from './typing';

package/src/typing/typing.ts

@@ -0,0 +1,7 @@
+export enum InnerWidgetType {
+  Action = 'Action',
+  Field = 'Field',
+  Element = 'Element',
+  View = 'View',
+  Mask = 'Mask'
+}

package/src/util/dsl-render.ts

@@ -0,0 +1,464 @@
+import {
+  DEFAULT_SLOT_NAME,
+  DslDefinition,
+  DslDefinitionHelper,
+  DslDefinitionType,
+  DslSlots,
+  DslSlotUtils,
+  ElementDslDefinition,
+  PackDslDefinition,
+  TemplateDslDefinition
+} from '@oinone/kunlun-dsl';
+import { StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { intersection, isNil, isString } from 'lodash-es';
+import { Component, createVNode, resolveDynamicComponent, Slots, VNode, withCtx } from 'vue';
+
+export const DEFAULT_TAG_PREFIX = 'oinone';
+
+export const SLOTS_KEY = '__slots';
+
+export const RENDER_OPTIONS_KEY = '__render__options';
+
+export const SLOT_CONTEXT_KEY = 'slotContext';
+
+const htmlInternalTags: string[] = [
+  'div',
+  'a',
+  'span',
+  'table',
+  'form',
+  'detail',
+  'ul',
+  'li',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'p',
+  'thead',
+  'tbody',
+  'tr',
+  'th',
+  'td'
+];
+
+/**
+ * 渲染可选项
+ */
+export interface DslRenderOptions {
+  /**
+   * 动态key
+   * 当key不存在时进行自动生成
+   */
+  dynamicKey?: boolean;
+  /**
+   * 是否强制更新
+   * 永远使用新的key进行渲染
+   */
+  focusUpdate?: boolean;
+  /**
+   * 是否递归渲染
+   * 递归渲染有性能损耗，但可以解决某些渲染问题，建议在明确递归层数的情况下局部使用该参数
+   */
+  recursion?: boolean;
+  /**
+   * vue createVNode patchFlag
+   */
+  patchFlag?: number;
+  /**
+   * vue createVNode dynamicProps
+   */
+  dynamicProps?: string[] | null;
+  /**
+   * vue createVNode isBlockNode
+   */
+  isBlockNode?: boolean;
+  /**
+   * 插槽上下文
+   */
+  slotContext?: Record<string, unknown>;
+}
+
+export type DslChildren = string | VNode[] | Slots;
+
+/**
+ * dsl扩展属性
+ */
+export type DslRenderExtendProp = {
+  __slots?: DslChildren;
+  __render__options?: DslRenderOptions;
+};
+
+export type DslRenderDefinition = DslDefinition & DslRenderExtendProp;
+
+export type DslPropType = {
+  dslDefinition: DslRenderDefinition;
+  slotName: string;
+  slotContext?: Record<string, unknown>;
+
+  [key: string]: any;
+} & DslRenderExtendProp;
+
+function dslExtendPropProcess<T>(props: DslPropType, key: string, value?: T): T | undefined {
+  let finalValue = props[key] as T | undefined;
+  delete props[key];
+  if (!finalValue && value) {
+    finalValue = value;
+    const { dslDefinition } = props;
+    if (dslDefinition) {
+      dslDefinition[key] = value;
+    }
+  }
+  return finalValue;
+}
+
+type ResolveComponentType = Component | string;
+
+/**
+ * dsl渲染
+ */
+export class DslRender {
+  private static resolveComponentCache: Record<string, ResolveComponentType> = {};
+
+  private static resolveCommonComponentCache: Record<string, ResolveComponentType> = {};
+
+  /**
+   * 渲染指定dsl定义到对应插槽
+   * @param dsl 指定dsl
+   * @param slotName 插槽名称 默认为: default
+   * @param children 插槽
+   * @param options 渲染可选项
+   */
+  public static render(
+    dsl: DslRenderDefinition,
+    slotName = DEFAULT_SLOT_NAME,
+    children?: DslChildren,
+    options?: DslRenderOptions
+  ): VNode | undefined {
+    const component = DslRender.fetchComponent(dsl);
+    if (!component) {
+      return undefined;
+    }
+    return DslRender.createVNodeWithDslDefinition(component, dsl, slotName, children, options);
+  }
+
+  /**
+   * 渲染dsl插槽
+   * @param dslSlots dsl插槽
+   */
+  public static renderSlots(dslSlots: DslSlots): Slots {
+    const slots = {};
+    for (const slotName in dslSlots) {
+      slots[slotName] = withCtx((context: Record<string, unknown>) => {
+        return DslRender.createVNodeChildren(dslSlots[slotName]?.widgets, slotName, context);
+      });
+    }
+    return slots;
+  }
+
+  /**
+   * 通过指定dsl获取VNode插槽
+   * @param dsl 指定dsl
+   * @param supportedSlotNames
+   */
+  public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]): Slots | undefined {
+    if (!dsl) {
+      return undefined;
+    }
+    const vSlots = dsl[SLOTS_KEY];
+    if (vSlots) {
+      return vSlots;
+    }
+    if (!supportedSlotNames) {
+      const finalSupportedSlotNames = [DEFAULT_SLOT_NAME];
+      dsl.widgets?.forEach((widget) => {
+        if (DslDefinitionHelper.isTemplate(widget)) {
+          let slotName = (widget as TemplateDslDefinition).slot;
+          if (!slotName) {
+            slotName = DEFAULT_SLOT_NAME;
+          }
+          finalSupportedSlotNames.push(slotName);
+        }
+      });
+      supportedSlotNames = [...new Set(finalSupportedSlotNames)];
+    }
+    const dslSlots = DslSlotUtils.fetchSlotsBySlotNames(dsl, supportedSlotNames);
+    return DslRender.renderSlots(dslSlots);
+  }
+
+  /**
+   * 根据dsl节点类型获取对应组件
+   *
+   * @remarks
+   * - {@link DslDefinitionType#VIEW} resolve rule: `{@link DEFAULT_TAG_PREFIX}-{@link DslDefinition#dslNodeType}` (Unsupported auto resolve methods)<br />
+   * - {@link DslDefinitionType#PACK} resolve rule: `{@link PackDslDefinition#widget}` (Supported auto resolve methods)<br>
+   * - {@link DslDefinitionType#ELEMENT} resolve rule: `{@link ElementDslDefinition#widget}` (Supported auto resolve methods)<br>
+   * - Others resolve rule: `{@link DslDefinition#dslNodeType}` (Unsupported auto resolve methods)
+   *
+   * @param dslDefinition dsl定义
+   * @return
+   * - 正确获取组件时返回: Component | string;
+   * - 未知类型、插槽或模板类型返回: null;
+   * - 无效的dslNodeType返回: undefined
+   */
+  public static fetchComponent(dslDefinition: DslDefinition): ResolveComponentType | null | undefined {
+    let { dslNodeType } = dslDefinition || {};
+    if (!dslNodeType) {
+      dslNodeType = DslDefinitionType.ELEMENT;
+    }
+    let component: ResolveComponentType | null | undefined;
+    switch (dslNodeType as DslDefinitionType) {
+      case DslDefinitionType.VIEW:
+        component = resolveDynamicComponent(`${DEFAULT_TAG_PREFIX}-${dslDefinition.dslNodeType}`) as string;
+        break;
+      case DslDefinitionType.PACK: {
+        const packDslDefinition = dslDefinition as PackDslDefinition;
+        component = DslRender.resolveWidgetComponent(`${packDslDefinition.widget || 'group'}`);
+        if (typeof component === 'string') {
+          component = DslRender.resolveWidgetComponent(`${dslDefinition.dslNodeType}`);
+        }
+        break;
+      }
+      case DslDefinitionType.ELEMENT: {
+        const elementDslDefinition = dslDefinition as ElementDslDefinition;
+        component = DslRender.resolveWidgetComponent(`${elementDslDefinition.widget}`);
+        if (typeof component === 'string') {
+          component = DslRender.resolveWidgetComponent(`${dslDefinition.dslNodeType}`);
+        }
+        break;
+      }
+      case DslDefinitionType.ACTION:
+      case DslDefinitionType.FIELD: {
+        component = DslRender.resolveWidgetComponent(`${dslDefinition.dslNodeType}`);
+        break;
+      }
+      case DslDefinitionType.UNKNOWN:
+      case DslDefinitionType.SLOT:
+      case DslDefinitionType.TEMPLATE:
+        component = null;
+        break;
+      default:
+        component = DslRender.resolveCommonWidgetComponent(dslNodeType);
+        break;
+    }
+    return component;
+  }
+
+  private static createVNodeChildren(
+    widgets: DslDefinition[] | undefined,
+    slotName?: string,
+    context?: Record<string, unknown>,
+    offset?: number
+  ): VNode[] {
+    const children: VNode[] = [];
+    if (!widgets) {
+      return children;
+    }
+    if (!slotName) {
+      slotName = DEFAULT_SLOT_NAME;
+    }
+    if (isNil(offset)) {
+      offset = 0;
+    }
+    const { length } = widgets;
+    for (let i = 0; i < length; i++) {
+      const dslDefinition = widgets[i];
+      const component = DslRender.fetchComponent(dslDefinition);
+      if (component) {
+        children.push(
+          DslRender.createVNodeWithDslDefinition(
+            component,
+            dslDefinition,
+            slotName,
+            isString(component) ? DslRender.fetchVNodeSlots(dslDefinition) : undefined,
+            context ? { slotContext: context } : undefined,
+            i + offset
+          )
+        );
+      } else if (component === null) {
+        const { dslNodeType } = dslDefinition;
+        switch (dslNodeType as DslDefinitionType) {
+          case DslDefinitionType.SLOT: {
+            const slotChildren = DslRender.createVNodeChildren(dslDefinition.widgets, slotName, context, i + offset);
+            offset += slotChildren.length;
+            slotChildren.forEach((child) => children.push(child));
+            break;
+          }
+          case DslDefinitionType.UNKNOWN:
+          case DslDefinitionType.TEMPLATE:
+            // eslint-disable-next-line no-continue
+            continue;
+          default:
+            console.error('Invalid component.');
+            break;
+        }
+      }
+    }
+    return children;
+  }
+
+  private static createVNodeWithDslDefinition(
+    component: ResolveComponentType,
+    dsl: DslDefinition,
+    slotName: string,
+    children?: DslChildren,
+    options?: DslRenderOptions,
+    index?: number
+  ) {
+    if (!isNil(index) && dsl.__index !== index) {
+      dsl.__index = index;
+    }
+    const isHTMLTag = isString(component);
+    const props: DslPropType = isHTMLTag
+      ? (PropRecordHelper.collectionBasicProps(dsl) as DslPropType)
+      : {
+          ...dsl,
+          dslDefinition: { ...dsl },
+          slotName
+        };
+    let finalChildren: unknown;
+    if (isHTMLTag) {
+      finalChildren = dsl.__content || dslExtendPropProcess(props, SLOTS_KEY, children);
+    } else {
+      finalChildren = dslExtendPropProcess(props, SLOTS_KEY, children);
+    }
+    const finalOptions = dslExtendPropProcess<DslRenderOptions>(props, RENDER_OPTIONS_KEY, options);
+    const slotContext = finalOptions?.slotContext;
+    if (slotContext) {
+      const newSlotContext = options?.slotContext;
+      if (newSlotContext) {
+        finalOptions!.slotContext = newSlotContext;
+      }
+      props.slotContext = slotContext;
+    }
+    if (DslRenderHelper.predictIsUpdateKey(dsl, finalOptions)) {
+      const key = uniqueKeyGenerator();
+      dsl.key = key;
+      props.key = key;
+    }
+    if (DslRenderHelper.predictIsRecursion(finalOptions) && !finalChildren && dsl.widgets?.length) {
+      finalChildren = DslRender.fetchVNodeSlots(dsl);
+    }
+    let finalDynamicProps = finalOptions?.dynamicProps;
+    if (slotContext) {
+      finalDynamicProps = intersection(finalDynamicProps || [], [SLOT_CONTEXT_KEY]);
+    }
+    return createVNode(
+      component,
+      props,
+      finalChildren,
+      finalOptions?.patchFlag,
+      finalDynamicProps,
+      finalOptions?.isBlockNode
+    );
+  }
+
+  private static resolveMethods: ((ss: string) => string | undefined)[] = [
+    /**
+     * 首字母转换为小写
+     * @param ss 字符串
+     */
+    (ss) => {
+      if (ss.indexOf('-') === -1) {
+        const firstCharCode = ss.charCodeAt(0);
+        if (firstCharCode >= StringHelper.UPPER_A_ASCLL && firstCharCode <= StringHelper.UPPER_Z_ASCLL) {
+          return `${ss[0].toLowerCase()}${ss.substring(1)}`;
+        }
+      }
+      return undefined;
+    },
+    /**
+     * 首字母转换为大写
+     * @param ss 字符串
+     */
+    (ss) => {
+      if (ss.indexOf('-') === -1) {
+        const firstCharCode = ss.charCodeAt(0);
+        if (firstCharCode >= StringHelper.LOWER_A_ASCLL && firstCharCode <= StringHelper.LOWER_Z_ASCLL) {
+          return `${ss[0].toUpperCase()}${ss.substring(1)}`;
+        }
+      }
+      return undefined;
+    },
+    /**
+     * CamelCase转换为KebabCase
+     * @param ss 字符串
+     */
+    (ss) => {
+      return StringHelper.camelCaseToKebabCase(ss);
+    }
+  ];
+
+  private static resolveCommonWidgetComponent(widget: string): ResolveComponentType {
+    let component = DslRender.resolveCommonComponentCache[widget];
+    if (component) {
+      return component;
+    }
+    if (htmlInternalTags.includes(widget)) {
+      return widget;
+    }
+    component = resolveDynamicComponent(
+      `${DEFAULT_TAG_PREFIX}-${StringHelper.camelCaseToKebabCase(widget)}`
+    ) as ResolveComponentType;
+    if (typeof component === 'string') {
+      component = resolveDynamicComponent(widget) as ResolveComponentType;
+    }
+    DslRender.resolveCommonComponentCache[widget] = component;
+    return component;
+  }
+
+  private static resolveWidgetComponent(widget: string): ResolveComponentType {
+    let component = DslRender.resolveComponentCache[widget];
+    if (component) {
+      return component;
+    }
+    if (htmlInternalTags.includes(widget)) {
+      return widget;
+    }
+    component = resolveDynamicComponent(widget) as ResolveComponentType;
+    if (typeof component === 'string') {
+      for (const resolveMethod of DslRender.resolveMethods) {
+        const resolveWidget = resolveMethod(widget);
+        if (resolveWidget) {
+          const finalComponent = resolveDynamicComponent(resolveWidget) as ResolveComponentType;
+          if (typeof finalComponent !== 'string') {
+            component = finalComponent;
+            break;
+          }
+        }
+      }
+    }
+    DslRender.resolveComponentCache[widget] = component;
+    return component;
+  }
+}
+
+/**
+ * dsl渲染帮助类
+ */
+class DslRenderHelper {
+  /**
+   * 判定是否需要更新Key
+   * @param dsl 指定dsl
+   * @param options 渲染可选项
+   */
+  public static predictIsUpdateKey(dsl: DslDefinition, options: DslRenderOptions | undefined): boolean {
+    const dynamicKey = options?.dynamicKey || false;
+    const focusUpdate = options?.focusUpdate || false;
+    if (dsl.key) {
+      if (focusUpdate) {
+        return true;
+      }
+    } else if (dynamicKey) {
+      return true;
+    }
+    return false;
+  }
+
+  public static predictIsRecursion(options: DslRenderOptions | undefined): boolean {
+    return options?.recursion || false;
+  }
+}

package/src/util/index.ts

@@ -0,0 +1,4 @@
+export * from './dsl-render';
+export * from './install';
+export * from './render';
+export * from './widget-manager';

package/src/util/install.ts

@@ -0,0 +1,29 @@
+import { RuntimeContextManager } from '@oinone/kunlun-engine';
+import { isDev } from '@oinone/kunlun-router';
+import { App, Component, Directive, Plugin } from 'vue';
+
+export function componentInstall(component: Component, name?: string | string[]): void {
+  if (!name) {
+    name = component.name;
+  }
+  const app = RuntimeContextManager.createOrReplace<App>().frameworkInstance;
+  if (name) {
+    if (typeof name === 'string') {
+      app.component(name, component);
+    } else {
+      name.forEach((s) => app.component(s, component));
+    }
+  } else if (isDev()) {
+    console.warn('component install error. reason: name is blank.', component);
+  }
+}
+
+export function directiveInstall(directive: Directive, name: string) {
+  const app = RuntimeContextManager.createOrReplace<App>().frameworkInstance;
+  app.directive(name, directive);
+}
+
+export function pluginInstall(plugin: Plugin, ...options: unknown[]) {
+  const app = RuntimeContextManager.createOrReplace<App>().frameworkInstance;
+  app.use(plugin, ...options);
+}

package/src/util/render.ts

@@ -0,0 +1,21 @@
+import { StableSlotProp } from '@oinone/kunlun-vue-ui-common';
+import { Slots, VNode } from 'vue';
+import { VueWidget } from '../basic';
+
+export function renderWidgets(widgets: VueWidget[], ctx: Record<string, unknown>, slots?: Slots) {
+  let vNodes: VNode | VNode[] | undefined;
+  const { length } = widgets;
+  for (let i = length - 1; i >= 0; i--) {
+    const widget = widgets[i];
+    if (vNodes) {
+      const finalVNodes = Array.isArray(vNodes) ? vNodes : [vNodes];
+      vNodes = widget.render(ctx, { default: () => finalVNodes, ...StableSlotProp });
+    } else {
+      vNodes = widget.render(ctx, {
+        ...slots,
+        ...StableSlotProp
+      });
+    }
+  }
+  return vNodes;
+}

package/src/util/widget-manager.ts

@@ -0,0 +1,14 @@
+import { CastHelper } from '@oinone/kunlun-shared';
+import { VueWidget, Widget } from '../basic';
+
+export function newVueWidget(): VueWidget {
+  return new VueWidget();
+}
+
+export function getWidget(handler: string): VueWidget | undefined {
+  return CastHelper.cast(Widget.select(handler));
+}
+
+export function getWidgetNotNull(handle: string): VueWidget {
+  return getWidget(handle) || newVueWidget();
+}