feat: element-plus实现按需加载

haixin-fang · Mar 13, 2024 · 8dccc4f · 8dccc4f
1 parent d988464
commit 8dccc4f
Show file tree

Hide file tree

Showing 16 changed files with 225 additions and 33 deletions.
diff --git a/bug.md b/bug.md
@@ -25,4 +25,5 @@
 - 布局优化  参考(https://epic.kcz66.com/demo/element-plus/)
 - 新增签名、评价表单
 - 表单新增提示,间距,html 
-- tab选中 初始化
+- tab选中 初始化
+- 异步加载 loading 过度动画 如jsonEditor
diff --git a/packages/editor/auto-imports.d.ts b/packages/editor/auto-imports.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}
diff --git a/packages/editor/components.d.ts b/packages/editor/components.d.ts
@@ -0,0 +1,43 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ComponentList: typeof import('./src/components/ComponentList.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    FormPreview: typeof import('./src/components/FormPreview.vue')['default']
+    GlobalFormList: typeof import('./src/components/globalFormList.vue')['default']
+    JsonEditor: typeof import('./src/components/jsonEditor.vue')['default']
+    Nav: typeof import('./src/components/Nav.vue')['default']
+    NavList: typeof import('./src/components/NavList.vue')['default']
+    PropsPanel: typeof import('./src/components/PropsPanel.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Shape: typeof import('./src/components/Shape.vue')['default']
+    Workspace: typeof import('./src/components/Workspace.vue')['default']
+  }
+}
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starfish-editor",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "main": "dist/starfish-editor.umd.js",
   "style": "dist/style.css",
   "module": "dist/starfish-editor.es.js",
@@ -16,8 +16,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "prepublish": "npm version && npm run build"
+    "build": "vite build"
   },
   "dependencies": {
     "@babel/core": "^7.18.5",
@@ -34,7 +33,7 @@
     "keycon": "^1.1.2",
     "mitt": "^3.0.0",
     "nanoid": "^4.0.0",
-    "starfish-form": "^1.2.3",
+    "starfish-form": "^1.2.6",
     "vue": "^3.2.37",
     "vue-codemirror": "^6.1.1",
     "vuedraggable": "^4.1.0",
@@ -45,6 +44,8 @@
     "cross-env": "^7.0.3",
     "live-server": "^1.2.2",
     "rollup-plugin-visualizer": "^5.8.3",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
     "sass": "^1.42.1",
     "typescript": "^4.3.4",
     "vite": "^2.9.12",

diff --git a/packages/editor/src/components/FormPreview.vue b/packages/editor/src/components/FormPreview.vue
@@ -76,7 +76,7 @@ import formStore from "@/controller/form";
 import { Dynamicform } from "starfish-form";
 import uiControl from "@/controller/ui";
 import Clipboard from "clipboard";
-import { json } from "@codemirror/lang-json";
+// import { json } from "@codemirror/lang-json";
 // import Codemirror from 'vue-codemirror'
 export default defineComponent({
   components: {
@@ -90,7 +90,7 @@ export default defineComponent({
     const formResult = computed(() => formStore.get("formResult"));
     const globalDatas = computed(() => formStore?.get("globalDatas"));
     const pageType = computed(() => uiControl?.get("pageType"));
-    const extensions = [json()];
+    // const extensions = [json()];
     const codeDialog = ref();
     const code = ref();
     let clipboard: Clipboard;
@@ -111,7 +111,7 @@ export default defineComponent({
     });
     const JsonViewerDialog = ref();
     return {
-      extensions,
+      // extensions,
       code,
       pageType,
       codeDialog,

diff --git a/packages/editor/src/components/PropsPanel.vue b/packages/editor/src/components/PropsPanel.vue
@@ -8,7 +8,7 @@
       v-model="activeName"
       class="demo-tabs"
       @tab-click="handleClick"
-      style="height: 100%" 
+      style="height: 100%"
     >
       <el-tab-pane label="组件配置" name="form">
         <el-scrollbar class="dynamic">
@@ -305,7 +305,7 @@ export default defineComponent({
       () => [newAllmainlist.value, newCurControl.value?.data],
       ([, b], [, d]) => {
         if (activeName.value == "json" && jsonCenter.value) {
-            jsonCenter.value.initJsonCenter();
+          jsonCenter.value.initJsonCenter();
         }
         if (historyFlag.value) {
           hisContrl?.set("historyFlag", false);

diff --git a/packages/editor/src/main.ts b/packages/editor/src/main.ts
@@ -18,11 +18,12 @@ export default {
     window.VueContext = {
       $Flex: flex,
     };
-    app
-      .use(ElementPlus, {
-        locale: zhCn,
-      })
-      .use(StarfishForm);
+    // 合并使用的
+    app.use(StarfishForm);
+    const starfishformlist = app.config.globalProperties.$formcomponents;
+    for (const key in starfishformlist) {
+      app.component(key, starfishformlist[key]);
+    }
     app.component(
       "CustomDialog",
       defineAsyncComponent(() => import("@/common/CustomDialog.vue"))

diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
@@ -3,7 +3,10 @@ import dts from 'vite-plugin-dts';
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import pkg from './package.json';
-import Visualizer from 'rollup-plugin-visualizer'
+import visualizer from 'rollup-plugin-visualizer'
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 const alias: any = [
   {
     find: "@",
@@ -19,7 +22,6 @@ if (process.env.NODE_ENV != "production") {
 }
 export default defineConfig({
   plugins: [
-    Visualizer(),
     dts({
         outputDir: path.join(path.resolve(__dirname, 'dist'), "types"),
         include: ['src/**/*'],
@@ -28,6 +30,15 @@ export default defineConfig({
         logDiagnostics: true
     }),
     vue(),
+    visualizer({
+      open: true, //在默认用户代理中打开生成的文件
+    }),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
   ],
   resolve: {
     alias,

diff --git a/packages/form/auto-imports.d.ts b/packages/form/auto-imports.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}
diff --git a/packages/form/components.d.ts b/packages/form/components.d.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CheckBox: typeof import('./src/components/CheckBox/index.vue')['default']
+    ColorSelect: typeof import('./src/components/ColorSelect/index.vue')['default']
+    Date: typeof import('./src/components/Date/index.vue')['default']
+    DateTime: typeof import('./src/components/DateTime/index.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    InputNumber: typeof import('./src/components/InputNumber/index.vue')['default']
+    JsonEditor: typeof import('./src/components/JsonEditor/index.vue')['default']
+    Radio: typeof import('./src/components/Radio/index.vue')['default']
+    RichText: typeof import('./src/components/RichText/index.vue')['default']
+    Rule: typeof import('./src/components/Rule/index.vue')['default']
+    Selected: typeof import('./src/components/Selected/index.vue')['default']
+    Selecteds: typeof import('./src/components/Selecteds/index.vue')['default']
+    ShowRule: typeof import('./src/components/ShowRule/index.vue')['default']
+    Slider: typeof import('./src/components/Slider/index.vue')['default']
+    Switch: typeof import('./src/components/Switch/index.vue')['default']
+    Text: typeof import('./src/components/Text/index.vue')['default']
+    TextArea: typeof import('./src/components/TextArea/index.vue')['default']
+    Time: typeof import('./src/components/Time/index.vue')['default']
+  }
+}
diff --git a/packages/form/package.json b/packages/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starfish-form",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "main": "dist/starfish-form.mjs",
   "style": "dist/style.css",
   "module": "dist/starfish-form.mjs",
@@ -32,6 +32,9 @@
     "@vitejs/plugin-vue": "^2.3.3",
     "sass": "^1.35.1",
     "typescript": "^4.5.4",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^4.5.2",
     "vite-plugin-dts": "^1.2.0",
     "vue-tsc": "^0.34.7"

diff --git a/packages/form/src/main.ts b/packages/form/src/main.ts
@@ -73,12 +73,13 @@ import _ from "@/utils/_";
 // formcomponents[Action.ControlType] = Action;
 
 const utilFuns: any = {};
-const files = import.meta.glob(["./common/*", "./components/*/*", "./layout/*", "!./components/RichText/index.vue", "!./components/JsonEditor/index.vue", "!./components/Rule/index.vue", "!./common/formAction.vue"], { eager: true });
+const files: any = import.meta.glob(["./common/*", "./components/*/*", "./layout/*", "!./components/RichText/index.vue", "!./components/JsonEditor/index.vue", "!./components/Rule/index.vue", "!./common/formAction.vue"], { eager: true });
 Object.keys(files).forEach((fileName) => {
   const result = files[fileName].default;
-  utilFuns[result.ControlType] = result;
+  if (fileName.indexOf(".vue") != -1) {
+    utilFuns[result.ControlType] = result;
+  }
 });
-
 // 把size过大组件异步加载
 
 // 富文本
@@ -108,12 +109,11 @@ Rule.rule = _.getJsonValidate();
 utilFuns[Rule.ControlType] = Rule;
 const install = (app: App) => {
   app.config.globalProperties.$formcomponents = utilFuns;
-  for (const key in utilFuns) {
-    app.component(key, utilFuns[key]);
-  }
+  // for (const key in utilFuns) {
+  //   app.component(key, utilFuns[key]);
+  // }
 };
-
-export { default as Dynamicform } from "./starfish-form.vue";
+export const Dynamicform = defineAsyncComponent(() => import("./starfish-form.vue"));
 
 export default {
   install,

diff --git a/packages/form/vite.config.ts b/packages/form/vite.config.ts
@@ -2,8 +2,11 @@ import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
-import pkg from './package.json';
-
+import pkg from "./package.json";
+import visualizer from "rollup-plugin-visualizer";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -15,6 +18,15 @@ export default defineConfig({
       logDiagnostics: true,
     }),
     vue(),
+    visualizer({
+      open: true, //在默认用户代理中打开生成的文件
+    }),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
   ],
   resolve: {
     alias: [
@@ -34,7 +46,7 @@ export default defineConfig({
       entry: "src/main.ts",
       name: "StarfishForm",
       fileName: "starfish-form",
-      formats: ['es'],
+      formats: ["es"],
     },
 
     rollupOptions: {