@maxelms/create-plugin-cli 1.1.19 → 1.1.21

package/templates/react-micro-field/src/index.tsx

@@ -10,19 +10,21 @@ const render = (container: string, props?: any) => {
 const container = '#root';
 
 if (poweredByMaxelms) {
+  let $root: any
   registerPlugin({
     bootstrap() {
     },
     mount(props: any) {
       render(`#${props.containerId} ${container}`, props);
+      $root = document.querySelector(`#${props.containerId} ${container}`);
     },
     update(props: any) {
       render(`#${props.containerId} ${container}`, props);
     },
     unmount(props: any) {
-      const element = document.querySelector(`#${props.containerId} ${container}`)
+      const element = document.querySelector(`#${props.containerId} ${container}`) || $root;
       element && ReactDOM.unmountComponentAtNode(element);
-    }
+    },
   });
 } else {
   render(container);

package/templates/react-micro-field-umi/src/app.tsx

@@ -31,7 +31,7 @@ export const render = (oldRender: any) => {
     },
     unmount(props) {
       setMasterProps(props.containerId, undefined)
-      const unmountRootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`);
+      const unmountRootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`) || rootElement;
       unmountRootElement && ReactDom.unmountComponentAtNode(unmountRootElement)
     }
   })

package/templates/react-micro-plugin/src/index.tsx

@@ -10,19 +10,21 @@ const render = (container: string, props?: any) => {
 const container = '#root';
 
 if (poweredByMaxelms) {
+  let $root: any
   registerPlugin({
     bootstrap() {
     },
     mount(props: any) {
       render(`#${props.containerId} ${container}`, props);
+      $root = document.querySelector(`#${props.containerId} ${container}`);
     },
     update(props: any) {
       render(`#${props.containerId} ${container}`, props);
     },
-    unmount(props) {
-      const element = document.querySelector(`#${props.containerId} ${container}`)
+    unmount(props: any) {
+      const element = document.querySelector(`#${props.containerId} ${container}`) || $root;
       element && ReactDOM.unmountComponentAtNode(element);
-    }
+    },
   });
 } else {
   render(container);

package/templates/react-micro-plugin-umi/src/app.tsx

@@ -31,7 +31,7 @@ export const render = (oldRender: any) => {
     },
     unmount(props) {
       setMasterProps(props.containerId, undefined)
-      const unmountRootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`);
+      const unmountRootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`) || rootElement;
       unmountRootElement && ReactDom.unmountComponentAtNode(unmountRootElement)
     }
   })

package/templates/vue3vite-micro-button/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

package/templates/vue3vite-micro-button/.gitignore.tpl

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+/dist.maxplugin
+/dist.zip
+/.vscode

package/templates/vue3vite-micro-button/.prettierrc.json

@@ -0,0 +1,7 @@
+
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

package/templates/vue3vite-micro-button/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "vitest.explorer",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

package/templates/vue3vite-micro-button/README.md

@@ -0,0 +1,48 @@
+### 本地使用代理到主应用环境
+npm run proxy（可以控制 DIST_PROT 修改静态资源端口号）
+
+# vue-project
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+pnpm test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

package/templates/vue3vite-micro-button/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/vue3vite-micro-button/eslint.config.js

@@ -0,0 +1,29 @@
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginVitest from '@vitest/eslint-plugin'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*'],
+  },
+  skipFormatting,
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    }
+  },
+]

package/templates/vue3vite-micro-button/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Maxelms MicroApp</title>
+  </head>
+  <body>
+    <div id="micro-app" style="height: 100%"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue3vite-micro-button/package.json.tpl

@@ -0,0 +1,56 @@
+{
+  "name": "<%= pluginName %>",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "proxy": "npm run build && cross-env DIST_PROT=9966 node scripts/devDistServe.cjs",
+    "build": "run-p type-check \"build-only {@}\" -- && maxelms-plugin-cli -c",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@esbuild/darwin-arm64": "0.24.0",
+    "@maxelms/create-pulgin-api": "1.0.0",
+    "@rollup/rollup-darwin-arm64": "4.28.1",
+    "pinia": "2.2.6",
+    "vue": "3.5.13",
+    "vue-router": "4.4.5"
+  },
+  "devDependencies": {
+    "@maxelms/create-plugin-cli": "<%= cliVersion %>",
+    "@tsconfig/node22": "22.0.0",
+    "@types/jsdom": "21.1.7",
+    "@types/node": "22.9.3",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue-jsx": "4.1.1",
+    "@vitest/eslint-plugin": "1.1.10",
+    "@vue/eslint-config-prettier": "10.1.0",
+    "@vue/eslint-config-typescript": "14.1.3",
+    "@vue/test-utils": "2.4.6",
+    "@vue/tsconfig": "0.7.0",
+    "cors": "2.8.5",
+    "cross-env": "7.0.3",
+    "eslint": "9.14.0",
+    "eslint-plugin-vue": "9.30.0",
+    "express": "4.21.2",
+    "jsdom": "25.0.1",
+    "npm-run-all2": "7.0.1",
+    "prettier": "3.3.3",
+    "typescript": "5.6.3",
+    "vite": "6.0.1",
+    "vite-plugin-vue-devtools": "7.6.5",
+    "vitest": "2.1.5",
+    "vue-tsc": "2.1.10"
+  },
+  "resolutions": {
+    "magic-string": "0.30.15",
+    "@esbuild/darwin-arm64": "0.24.0",
+    "esbuild": "0.24.0"
+  }
+}

package/templates/vue3vite-micro-button/public/configuration.json

@@ -0,0 +1,30 @@
+{
+  "propName1": {
+    "label": "配置项一",
+    "type": "string",
+    "defaultValue": "配置项内容"
+  },
+  "propName2": {
+    "label": "配置项二",
+    "type": "number",
+    "defaultValue": 350
+  },
+  "propName3": {
+    "label": "配置项三",
+    "type": "select",
+    "options": [
+      {
+        "label": "选项1",
+        "value": "option1"
+      },
+      {
+        "label": "选项2",
+        "value": "option2"
+      },
+      {
+        "label": "选项3",
+        "value": "option3"
+      }
+    ]
+  }
+}

package/templates/vue3vite-micro-button/scripts/devDistServe.cjs

@@ -0,0 +1,16 @@
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+const { DIST_PROT = '3000' } = process.env
+
+const app = express();
+
+// 启用 CORS 中间件
+app.use(cors());
+
+// 设置静态文件目录
+app.use(express.static(path.join(__dirname, '../dist')));
+
+app.listen(DIST_PROT, () => {
+    console.log(`Server running at http://localhost:${DIST_PROT}/`);
+});

package/templates/vue3vite-micro-button/src/App.vue.tpl

@@ -0,0 +1,35 @@
+<template>
+  <div id="app">
+    <!-- 集成在 系统 中时会走该逻辑 -->
+    <!-- <span v-if="buttonName" @click="visible = true">{{buttonName}}</span> -->
+    <!-- 由于独立开发时没有 系统 传递的上下文数据，会渲染一个按钮辅助开发 -->
+    <button v-if="!buttonName" @click="visible = !visible">自定义按钮</button>
+    <div v-show="visible">展示按钮</div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      visible: false,
+      buttonName: this.$root?.masterProps?.originalButtonProps?.name,
+    }
+  },
+  components: {
+
+  },
+  methods: {
+
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style>
+
+</style>

package/templates/vue3vite-micro-button/src/main.ts

@@ -0,0 +1,39 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { registerPlugin, poweredByMaxelms } from '@maxelms/create-pulgin-api'
+import App from './App.vue'
+// const subId = window.__MAXELMS_GLOBAL_ENV__?.popoverContainerId?.replace(/^maxelms-ma-popover-container-/, '') || ''
+
+// Vue.config.productionTip = false
+window.__SINGLETON_MODE__ = true
+
+const vms: any = {}
+
+if (poweredByMaxelms && registerPlugin) {
+  registerPlugin({
+    mount(props) {
+      render(props)
+    },
+    update(props) {
+      if (vms[props.containerId]) {
+        vms[props.containerId].masterProps = props
+      }
+    },
+    unmount(props) {
+      vms[props.containerId]?.$destroy?.()
+      vms[props.containerId] = null
+    }
+  });
+} else {
+  render()
+}
+
+function render(props: any = {}) {
+  const { containerId } = props
+  console.log(containerId)
+  vms[containerId] = createApp(App, {
+    configurations: props || {},
+  })
+  vms[containerId].use(createPinia())
+  vms[containerId].mount(containerId ? `#${containerId} #micro-app` : '#micro-app')
+}

package/templates/vue3vite-micro-button/src/typings.d.ts

@@ -0,0 +1,8 @@
+declare module "*.vue"
+
+interface Window {
+  __SINGLETON_MODE__?: any
+  __MAXELMS_GLOBAL_ENV__?: {
+    popoverContainerId: string
+  };
+}

package/templates/vue3vite-micro-button/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/vue3vite-micro-button/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/templates/vue3vite-micro-button/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/templates/vue3vite-micro-button/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/templates/vue3vite-micro-button/vite.config.ts

@@ -0,0 +1,24 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), vueDevTools()],
+  base: './',
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  build: {
+    target: 'es2015',
+    rollupOptions: {
+      output: {
+        format: 'umd',
+      },
+    },
+  },
+})

package/templates/vue3vite-micro-button/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+)