zova-jsx 1.0.0 → 1.1.1

package/dist/index.d.ts

@@ -1 +1,2 @@
-export * from './types/index.js';
+export * from './lib/index.ts';
+export * from './types/index.ts';

package/dist/index.js

@@ -1 +1,400 @@
-export * from './types/index.js';
+import { compose } from '@cabloy/compose';
+import { celEnvBase, getProperty, evaluateExpressions, isPromise } from '@cabloy/utils';
+import { toUpperCaseFirstChar } from '@cabloy/word-utils';
+import { classes } from 'typestyle';
+import { h, createTextVNode } from 'vue';
+import { BeanSimple, objectAssignReactive, cast, beanFullNameFromOnionName, deepExtend } from 'zova-core';
+
+const renderFieldJsxPropsSystem = ['children', 'v-slot', 'v-slot-scope', 'v-if', 'v-for', 'v-each', 'key'];
+
+const __propsMapper = {
+  className: 'class'
+};
+function isNativeElement(Component) {
+  return typeof Component === 'string' && !Component.includes(':') && Component.charAt(0) >= 'a' && Component.charAt(0) <= 'z';
+}
+function isZovaComponent(Component) {
+  return typeof Component === 'string' && Component.includes(':');
+}
+function isLegacyComponent(Component) {
+  return typeof Component === 'string' && !Component.includes(':') && Component.charAt(0) >= 'A' && Component.charAt(0) <= 'Y';
+}
+function isJsxComponent(Component) {
+  return typeof Component === 'object' && Component.$$typeof === 'zova-jsx:component';
+}
+function isJsxEvent(Component) {
+  return typeof Component === 'object' && Component.$$typeof === 'zova-jsx:event';
+}
+function invokeProp(prop) {
+  if (typeof prop === 'function') return prop();
+  return prop;
+}
+function normalizePropName(name) {
+  return __propsMapper[name] ?? name;
+}
+
+class ZovaJsx extends BeanSimple {
+  constructor(components, actions, celEnv) {
+    super();
+    this._components = void 0;
+    this._actions = void 0;
+    this._celEnv = void 0;
+    this._transientObject = void 0;
+    this._components = components;
+    this._actions = actions;
+    this._celEnv = this._prepareCelEnv(celEnv ?? celEnvBase);
+  }
+  _prepareCelEnv(celEnv) {
+    celEnv = celEnv.clone();
+    celEnv.registerFunction('getEvent():dyn', () => {
+      return this.transientObject.eventObject ?? null; // null means valid value
+    });
+    celEnv.registerFunction('getEventProp(string):dyn', prop => {
+      return getProperty(this.transientObject.eventObject, prop) ?? null; // null means valid value
+    });
+    return celEnv;
+  }
+  setTransientObject(transientObject, fnMethod) {
+    const transientObjectPrev = this._transientObject;
+    this._transientObject = transientObject;
+    try {
+      return fnMethod();
+    } finally {
+      this._transientObject = transientObjectPrev;
+    }
+  }
+  get transientObject() {
+    return this._transientObject;
+  }
+  get event() {
+    return this.transientObject?.eventObject;
+  }
+  get components() {
+    return this._components;
+  }
+  get actions() {
+    return this._actions;
+  }
+  get celEnv() {
+    return this._celEnv;
+  }
+  evaluateExpression(expression, celScope) {
+    return evaluateExpressions(expression, celScope, this.celEnv);
+  }
+  renderJsxOrCel(componentOptions, props, celScope, renderContext) {
+    // component
+    if (isJsxComponent(componentOptions)) {
+      const transientObject = this.transientObject;
+      return () => {
+        return this.setTransientObject(transientObject, () => {
+          return this.render(componentOptions, props, celScope, renderContext);
+        });
+      };
+    }
+    if (isJsxEvent(componentOptions)) {
+      let transientObject = this.transientObject;
+      return event => {
+        transientObject = {
+          ...transientObject,
+          eventObject: event
+        };
+        return this.setTransientObject(transientObject, () => {
+          return this.renderEvent(event, componentOptions, celScope, renderContext);
+        });
+      };
+    }
+    // normal
+    return this.evaluateExpression(componentOptions, celScope);
+  }
+  renderEvent(event, componentOptions, celScope, renderContext) {
+    // props
+    if (event && event instanceof Event) {
+      const props = this.renderJsxProps(componentOptions.props, {}, celScope, renderContext);
+      if (props.stop) event.stopPropagation();
+      if (props.prevent) event.preventDefault();
+    }
+    // render
+    const eventRes = [];
+    celScope = objectAssignReactive({}, celScope, {
+      res: eventRes
+    });
+    return this.renderEventDirect(componentOptions, celScope, renderContext, eventRes);
+  }
+  renderEventDirect(componentOptions, celScope, renderContext, eventRes, next) {
+    const actions = this._collectEventActions(componentOptions, celScope, renderContext, eventRes);
+    if (!actions || actions.length === 0) return next ? next(undefined) : undefined;
+    const transientObject = this.transientObject;
+    return compose(actions)(undefined, actionRes => {
+      if (!next) return actionRes;
+      return this.setTransientObject(transientObject, () => {
+        return next(actionRes);
+      });
+    });
+  }
+  _collectEventActions(componentOptions, celScope, renderContext, eventRes) {
+    let actionChildren = componentOptions.props?.children;
+    if (!actionChildren) return;
+    if (!Array.isArray(actionChildren)) actionChildren = [actionChildren];
+    const actions = [];
+    const transientObject = this.transientObject;
+    for (let index = 0; index < actionChildren.length; index++) {
+      const actionChild = actionChildren[index];
+      // action
+      const action = (actionRes, next) => {
+        if (isPromise(actionRes)) {
+          return actionRes.then(actionRes => {
+            return this._actionHandler(index, actionChild, actionRes, next, actionChildren, celScope, renderContext, eventRes, transientObject);
+          });
+        } else {
+          return this._actionHandler(index, actionChild, actionRes, next, actionChildren, celScope, renderContext, eventRes, transientObject);
+        }
+      };
+      actions.push(action);
+    }
+    return actions;
+  }
+  _actionHandler(index, actionChild, actionRes, next, actionChildren, celScope, renderContext, eventRes, transientObject) {
+    return this.setTransientObject(transientObject, () => {
+      // record res
+      if (index > 0) {
+        if (actionRes === undefined) actionRes = null;
+        eventRes[index - 1] = actionRes;
+        const actionChildPrev = actionChildren[index - 1];
+        const resName = cast(actionChildPrev.props)?.res;
+        if (resName) {
+          celScope = objectAssignReactive({}, celScope, {
+            [resName]: actionRes
+          });
+        }
+      }
+      // vIf
+      const vIf = this.evaluateExpression(actionChild.props?.['v-if'], celScope);
+      if (vIf === false) return next(undefined);
+      // action
+      if (actionChild.type === 'actionVar') {
+        const props = this.renderJsxProps(actionChild.props, {}, celScope, renderContext);
+        celScope = objectAssignReactive({}, celScope, {
+          [cast(props).name]: cast(props).value
+        });
+        return next(undefined);
+      } else if (actionChild.type === 'actionExpr') {
+        const expression = this.evaluateExpression(cast(actionChild.props)?.expression, celScope);
+        return next(expression);
+      } else if (isJsxEvent(actionChild)) {
+        // nested action
+        eventRes[index] = [];
+        return this.renderEventDirect(actionChild, objectAssignReactive({}, celScope), renderContext, eventRes[index], next);
+      } else {
+        // normal
+        return this._renderEventActionNormal(actionChild, celScope, renderContext, next);
+      }
+    });
+  }
+  _renderEventActionNormal(actionChild, celScope, renderContext, next) {
+    // action
+    const actionName = this.normalizeAction(actionChild.type);
+    const beanFullName = beanFullNameFromOnionName(actionName, 'action');
+    const beanInstance = this.sys.bean._getBeanSyncOnly(beanFullName);
+    if (beanInstance) {
+      // sync
+      return this._renderEventActionNormal_inner(beanInstance, actionChild, celScope, renderContext, next);
+    }
+    // async
+    const transientObject = this.transientObject;
+    return this.sys.bean._getBean(beanFullName, false).then(beanInstance => {
+      return this.setTransientObject(transientObject, () => {
+        return this._renderEventActionNormal_inner(beanInstance, actionChild, celScope, renderContext, next);
+      });
+    });
+  }
+  _renderEventActionNormal_inner(beanInstance, actionChild, celScope, renderContext, next) {
+    const onionOptions = beanInstance.$onionOptions;
+    // props
+    let props = this.renderJsxProps(actionChild.props, {}, celScope, renderContext);
+    if (onionOptions) {
+      props = deepExtend({}, onionOptions, props);
+    }
+    if (!renderContext) throw new Error('should provide renderContext');
+    return beanInstance.execute(props, renderContext, next);
+  }
+  render(componentOptions, props, celScope, renderContext) {
+    props = props ?? {};
+    componentOptions = this.normalizeComponenOptions(componentOptions);
+    // vIf
+    const vIf = this.evaluateExpression(componentOptions.props?.['v-if'], celScope);
+    if (vIf === false) return;
+    // component
+    const Component = this.normalizeComponent(componentOptions.type);
+    // vFor
+    const vFor = this.evaluateExpression(componentOptions.props?.['v-for'], celScope);
+    if (!vFor) return this._renderJsxSingle(Component, componentOptions, props, celScope, renderContext);
+    const children = [];
+    for (let index = 0; index < vFor.length; index++) {
+      const each = vFor[index];
+      const eachName = this.evaluateExpression(componentOptions.props?.['v-each'], celScope) ?? 'each';
+      const celScopeEach = objectAssignReactive({}, celScope, {
+        [eachName]: each,
+        [`${eachName}Index`]: index
+      });
+      const propsEach = {
+        ...props
+      };
+      const child = this._renderJsxSingle(Component, componentOptions, propsEach, celScopeEach, renderContext);
+      if (child) {
+        children.push(child);
+      }
+    }
+    return children;
+  }
+  normalizeComponenOptions(componentOptions) {
+    if (typeof componentOptions === 'object') return componentOptions;
+    return {
+      type: componentOptions
+    };
+  }
+  normalizeComponent(type) {
+    if (typeof type === 'function') return type;
+    if (typeof type === 'string') {
+      type = this.components?.[type] ?? type;
+    }
+    if (typeof type === 'string' && ['script', 'style', 'link'].includes(type)) {
+      throw new Error(`not valid zova jsx component: ${type}`);
+    }
+    // div/QInput/Zova Component
+    return type;
+  }
+  normalizeAction(type) {
+    return this.actions?.[type] ?? type;
+  }
+  _renderJsxSingle(Component, componentOptions, props, celScope, renderContext) {
+    const _isZovaComponent = isZovaComponent(Component);
+    // key
+    if (!cast(props).key && componentOptions.key) {
+      cast(props).key = this.evaluateExpression(componentOptions.key, celScope);
+    }
+    // props
+    this.renderJsxProps(componentOptions.props, props, celScope, renderContext);
+    // children
+    let children;
+    const propsChildren = componentOptions.props?.children;
+    if (!propsChildren) {
+      children = undefined;
+    } else {
+      if (isNativeElement(Component)) {
+        children = this.renderJsxChildrenDirect(componentOptions.props.children, celScope, renderContext);
+      } else {
+        const childrenCollect = this._renderJsxChildrenCollect(componentOptions.props.children, celScope, renderContext);
+        if (_isZovaComponent) {
+          for (const key in childrenCollect) {
+            const slot = childrenCollect[key];
+            if (key === 'default') {
+              children = slot;
+            } else {
+              props[`slot${toUpperCaseFirstChar(key)}`] = slot;
+            }
+          }
+        } else {
+          children = childrenCollect;
+        }
+      }
+    }
+    if (_isZovaComponent) {
+      Component = this.sys.meta.component.getZovaComponent(Component);
+    }
+    const vnode = h(Component, props, children);
+    if (_isZovaComponent && renderContext) {
+      cast(vnode).zovaHostProviders = {
+        $$renderContext: renderContext
+      };
+    }
+    return vnode;
+  }
+  renderJsxProps(jsxProps, props, celScope, renderContext) {
+    if (!jsxProps) return props;
+    const keys = Object.keys(jsxProps).filter(item => !renderFieldJsxPropsSystem.includes(item));
+    if (keys.length === 0) return props;
+    for (const key of keys) {
+      let keyValue = this.renderJsxOrCel(jsxProps[key], undefined, celScope, renderContext);
+      const propName = normalizePropName(key);
+      if (propName === 'class') {
+        keyValue = classes(props[propName], keyValue);
+      }
+      props[propName] = keyValue;
+    }
+    return props;
+  }
+  _renderJsxChildrenCollect(jsxChildren, celScope, renderContext) {
+    if (!Array.isArray(jsxChildren)) jsxChildren = [jsxChildren];
+    const children = [];
+    const slots = {};
+    const transientObject = this.transientObject;
+    for (const jsxChild of jsxChildren) {
+      if (jsxChild && typeof jsxChild === 'object' && jsxChild.props?.['v-slot']) {
+        const slotName = jsxChild.props?.['v-slot'];
+        const slotScopeName = jsxChild.props?.['v-slot-scope'];
+        let slot;
+        if (slotScopeName) {
+          slot = slotScope => {
+            return this.setTransientObject(transientObject, () => {
+              const celScopeSub = objectAssignReactive({}, celScope, {
+                [slotScopeName]: slotScope
+              });
+              return this.renderJsxChildrenDirect(jsxChild, celScopeSub, renderContext);
+            });
+          };
+        } else {
+          slot = () => {
+            return this.setTransientObject(transientObject, () => {
+              return this.renderJsxChildrenDirect(jsxChild, celScope, renderContext);
+            });
+          };
+        }
+        slots[slotName] = slot;
+      } else {
+        children.push(jsxChild);
+      }
+    }
+    // slotDefault
+    const slotDefault = children.length === 0 ? undefined : () => {
+      return this.setTransientObject(transientObject, () => {
+        return this.renderJsxChildrenDirect(children, celScope, renderContext);
+      });
+    };
+    // ok
+    return {
+      ...slots,
+      default: slotDefault
+    };
+  }
+  renderJsxChildrenDirect(jsxChildren, celScope, renderContext) {
+    if (!Array.isArray(jsxChildren)) jsxChildren = [jsxChildren];
+    const children = [];
+    for (const jsxChild of jsxChildren) {
+      let child;
+      if (isJsxComponent(jsxChild)) {
+        if (jsxChild.type === 'var') {
+          const props = this.renderJsxProps(jsxChild.props, {}, celScope, renderContext);
+          celScope = objectAssignReactive({}, celScope, {
+            [cast(props).name]: cast(props).value
+          });
+          child = undefined;
+        } else {
+          child = this.render(jsxChild, undefined, celScope, renderContext);
+        }
+      } else {
+        const childText = this.evaluateExpression(jsxChild, celScope);
+        child = createTextVNode(childText ?? '');
+      }
+      if (child) {
+        if (Array.isArray(child)) {
+          children.push(...child);
+        } else {
+          children.push(child);
+        }
+      }
+    }
+    return children;
+  }
+}
+
+export { ZovaJsx, invokeProp, isJsxComponent, isJsxEvent, isLegacyComponent, isNativeElement, isZovaComponent, normalizePropName, renderFieldJsxPropsSystem };

package/dist/lib/const.d.ts

@@ -0,0 +1 @@
+export declare const renderFieldJsxPropsSystem: string[];

package/dist/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './const.ts';
+export * from './utils.ts';
+export * from './zovaJsx.ts';

package/dist/lib/utils.d.ts

@@ -0,0 +1,7 @@
+export declare function isNativeElement(Component: any): boolean;
+export declare function isZovaComponent(Component: any): boolean;
+export declare function isLegacyComponent(Component: any): boolean;
+export declare function isJsxComponent(Component: any): boolean;
+export declare function isJsxEvent(Component: any): boolean;
+export declare function invokeProp(prop: any): any;
+export declare function normalizePropName(name: string): any;

package/dist/lib/zovaJsx.d.ts

@@ -0,0 +1,42 @@
+import type { VNode } from 'vue';
+import { celEnvBase } from '@cabloy/utils';
+import { BeanSimple } from 'zova-core';
+import type { IFormProviderComponents, TypeRenderComponent, TypeRenderComponentJsx, TypeRenderComponentJsxProps } from '../types/rest.ts';
+type CelEnv = typeof celEnvBase;
+export declare class ZovaJsx extends BeanSimple {
+    private _components;
+    private _actions;
+    private _celEnv;
+    private _transientObject;
+    constructor(components?: IFormProviderComponents, actions?: Record<string, string>, celEnv?: CelEnv);
+    private _prepareCelEnv;
+    setTransientObject<T>(transientObject: {} | undefined, fnMethod: () => T): T;
+    get transientObject(): any;
+    get event(): Event | undefined;
+    get components(): IFormProviderComponents | undefined;
+    get actions(): Record<string, string> | undefined;
+    get celEnv(): CelEnv;
+    evaluateExpression(expression: any, celScope?: {}): any;
+    renderJsxOrCel(componentOptions: TypeRenderComponent | any, props: {} | undefined, celScope: {}, renderContext: {}): any;
+    renderEvent(event: Event, componentOptions: TypeRenderComponentJsx, celScope: {}, renderContext: {}): any;
+    renderEventDirect(componentOptions: TypeRenderComponentJsx, celScope: {}, renderContext: {}, eventRes: any[], next?: Function): any;
+    private _collectEventActions;
+    private _actionHandler;
+    private _renderEventActionNormal;
+    private _renderEventActionNormal_inner;
+    render(componentOptions: TypeRenderComponent, props: {} | undefined, celScope: {}, renderContext: {}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | undefined;
+    normalizeComponenOptions(componentOptions: TypeRenderComponent): TypeRenderComponentJsx;
+    normalizeComponent(type: TypeRenderComponent): TypeRenderComponent;
+    normalizeAction(type: string): string;
+    private _renderJsxSingle;
+    renderJsxProps(jsxProps: TypeRenderComponentJsxProps | undefined, props: {}, celScope: {}, renderContext: {}): {};
+    private _renderJsxChildrenCollect;
+    renderJsxChildrenDirect(jsxChildren: TypeRenderComponentJsx | TypeRenderComponentJsx[], celScope: {}, renderContext: {}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+}
+export {};

package/dist/types/index.d.ts

@@ -1,16 +1 @@
-import type { OpenAPITSOptions } from '@cabloy/openapi-typescript';
-export type TypeOpenapiConfigMatchRule = string | RegExp | (string | RegExp)[];
-export interface ZovaOpenapiConfigModuleBase {
-    source?: string;
-    options?: OpenAPITSOptions;
-}
-export interface ZovaOpenapiConfigModule extends ZovaOpenapiConfigModuleBase {
-    operations?: {
-        match?: TypeOpenapiConfigMatchRule;
-        ignore?: TypeOpenapiConfigMatchRule;
-    };
-}
-export interface ZovaOpenapiConfig {
-    default?: ZovaOpenapiConfigModuleBase;
-    modules: Record<string, ZovaOpenapiConfigModule>;
-}
+export * from './rest.ts';

package/dist/types/rest.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { Constructable, IComponentIntrinsicAttributes } from 'zova-core';
+export interface TypeRenderComponentJsxPropsPublic extends IComponentIntrinsicAttributes {
+    'key'?: string;
+    'v-if'?: string | boolean;
+    'v-for'?: string | any[];
+    'v-each'?: string;
+    'v-slot'?: string;
+    'v-slot-scope'?: string;
+    'children'?: any;
+}
+export interface TypeRenderComponentJsxProps extends TypeRenderComponentJsxPropsPublic {
+    children: TypeRenderComponentJsx | TypeRenderComponentJsx[];
+}
+export interface TypeRenderComponentJsx {
+    type: string;
+    key?: string | null;
+    props?: TypeRenderComponentJsxProps;
+}
+export type TypeRenderComponentNormal = Constructable<ComponentPublicInstance> | string;
+export type TypeRenderComponent = TypeRenderComponentNormal | TypeRenderComponentJsx;
+export interface IFormProviderComponents {
+}

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "zova-jsx",
-  "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Zova JSX",
-  "publishConfig": {
-    "access": "public"
+  "keywords": [
+    "ioc",
+    "vue3",
+    "zova"
+  ],
+  "homepage": "https://github.com/cabloy/zova#readme",
+  "bugs": {
+    "url": "https://github.com/cabloy/zova/issues"
   },
-  "author": "zhennann",
   "license": "MIT",
-  "homepage": "https://github.com/cabloy/zova#readme",
+  "author": "zhennann",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cabloy/zova.git"
   },
-  "bugs": {
-    "url": "https://github.com/cabloy/zova/issues"
-  },
-  "keywords": [
-    "vue3",
-    "ioc",
-    "zova"
+  "files": [
+    "dist"
   ],
+  "type": "module",
   "exports": {
     ".": {
       "types": [
@@ -31,18 +31,23 @@
     },
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist"
-  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "lint": "eslint .",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
-    "tsc:publish": "npm run clean && tsc",
+    "tsc:publish": "npm run clean && vona :bin:buildGeneral && tsc",
     "prepublishOnly": "npm run tsc:publish",
     "prepack": "clean-package",
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@cabloy/utils": "^2.0.4"
-  }
+    "@cabloy/compose": "^2.0.4",
+    "@cabloy/utils": "^2.0.23",
+    "@cabloy/word-utils": "^2.1.1",
+    "typestyle": "^2.4.0",
+    "vue": "^3.5.6",
+    "zova-core": "^5.1.1"
+  },
+  "gitHead": "a1b13b06e259e4447ab2f361ec76941810bc4ad7"
 }

package/dist/types/index.js

@@ -1 +0,0 @@
-export {};