@cicctencent/low-code-simulate-base 0.0.0-stage → 1.1.10

package/jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
+    preset: 'ts-jest',
+    testMatch: ["<rootDir>/__tests__/**/*.(spec|test).ts?(x)"],
+    transform: {
+        // 将.js后缀的文件使用babel-jest处理
+        "^.+\\.js$": "babel-jest",
+        "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    // 下面非要从重要, 将不忽略 lodash-es  es库, 从而使babel-jest去处理它们
+    transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es))"],
+    globals: {
+        "ts-jest": {
+            "tsconfig": "tsconfig.test.json"
+          }
+    }
+};
+
+export default config;

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@cicctencent/low-code-simulate-base",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.10",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "jest",
+    "tw": "jest --watch",
+    "build": "rimraf -rf dist && tsc --project tsconfig.build.json && rollup --config ../../scripts/rollup.dts.config.js --bundleConfigAsCjs && node ../../scripts/replace.js",
+    "api:json": "npm run build && npx api-extractor run",
+    "api:md": "npx api-documenter markdown -i ./docs/.api -o ./docs/api && node ./build/md.js && mv ./docs/api  ../../docs/src/low-code-simulate-base",
+    "api": "npm run api:json && npm run api:md"
+  },
+  "dependencies": {
+    "@cicctencent/ark-util": "latest",
+    "@cicctencent/low-code-core": "latest",
+    "@cicctencent/low-code-validate": "latest",
+    "@cicctencent/postmessage-channel": "latest",
+    "jm-jsruntime": "1.0.3",
+    "koa-compose": "^4.1.0",
+    "vue-demi": "latest"
+  },
+  "devDependencies": {
+    "@jest/types": "^28.1.3",
+    "@microsoft/api-documenter": "^7.30.18",
+    "@microsoft/api-extractor": "^7.59.4",
+    "@microsoft/tsdoc": "^0.14.2",
+    "@types/jest": "^29.5.14",
+    "jest": "^28.1.3",
+    "rollup": "^3.30.0",
+    "rollup-plugin-dts": "^5.3.1",
+    "ts-jest": "^28.0.8",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/src/VCComponent.ts

@@ -0,0 +1,118 @@
+import { h, getCurrentInstance, isVue3 } from 'vue-demi';
+import * as Vue from 'vue-demi';
+import { camelize } from '@cicctencent/ark-util';
+import { generateEventHandlers } from './event/generateEventHandler';
+
+function renderVue3(item: any) {
+  //@ts-ignore
+  const that: any = getCurrentInstance();
+  const {
+    name,
+    componentId,
+    formData: { style, props, event = { list: [] } },
+  } = item;
+  let component;
+  if (isVue3) {
+    component = Vue.resolveComponent(name);
+  }
+  const { on, nativeOn } = generateEventHandlers(
+    // this.$children[0],
+    that,
+    event.list || []
+  );
+  const eventObj = { ...on, ...nativeOn };
+  const onEvent = {};
+  // 处理和过滤事件
+  Object.keys(eventObj).forEach(eventType => {
+    // 如果有生命周期的事件 不直接添加到组件上
+    if (['mounted'].includes(eventType)) return;
+    const eventKey = camelize(`on-${eventType}`);
+    onEvent[eventKey] = eventObj[eventType];
+  });
+  return h(
+    component,
+    {
+      componentId,
+      ...props,
+      style,
+      key: `${name}-${componentId}`,
+      ...onEvent,
+    },
+    { ...that.slots }
+  );
+}
+
+function renderVue2(item: any, c: any, thisArg) {
+  //@ts-ignore
+  const {
+    name,
+    componentId,
+    formData: { style, props, event = { list: [] } },
+  } = item;
+
+  const { on, nativeOn } = generateEventHandlers(
+    // this.$children[0],
+    thisArg,
+    event.list || []
+  );
+
+  // 获取所有的插槽（包括具名插槽和默认插槽）
+  const slots = {
+    ...thisArg.$slots,
+    ...thisArg.$scopedSlots
+  };
+
+  // 将插槽转换为函数对象
+  const scopedSlots = Object.keys(slots).reduce((acc, key) => {
+    acc[key] = props => slots[key](props);
+    return acc;
+  }, {});
+
+  return c(
+    name,
+    {
+      key: `${name}-${componentId}`,
+      props: {componentId, ...props},
+      style,
+      on,
+      nativeOn,
+      scopedSlots
+    }
+  );
+}
+/**
+ * @public
+ */
+export const VcComponent: any = {
+  name: 'VCComponent',
+  props: {
+    componentDescriptor: Object,
+  },
+  computed: {
+    eventObj() {
+      const {
+        formData: { event = { list: [] } },
+      } = this.componentDescriptor;
+      const { on, nativeOn } = generateEventHandlers(this, event.list || []);
+      return { ...on, ...nativeOn };
+    },
+  },
+  mounted() {
+    if (Object.keys(this.eventObj).includes('mounted')) {
+      this.eventObj['mounted']();
+    }
+  },
+  render(c: any) {
+    const that: any = this;
+
+    return isVue3
+      ? renderVue3(that.componentDescriptor)
+      : renderVue2(that.componentDescriptor, c, that);
+  },
+};
+
+VcComponent.install = function (app: any) {
+  app.component('VcComponent', VcComponent);
+};
+
+export default VcComponent;