feat: element plus 的适配并且新增携带 element plus 的模板

README.md

@@ -15,15 +15,3 @@ cocos creator FE team [官网](https://cocos-creator.github.io/fe-team/)
 ## 创建 creator 插件
 
 [create-cocos-plugin](https://www.npmjs.com/package/create-cocos-plugin)
-
-## 发布包
-
-```bash
- npm config get registry 查看当前是哪个源
-```
-
-发布要切换到[官方源](https://registry.npmjs.org)
-
-发布之后在 https://npmmirror.com/ 这里看下是否有被淘宝同步到。
-
-安装要切换到[淘宝源](https://registry.npmmirror.com)，如果淘宝源没有及时更新，可以切到官方源进行下载。

packages/create-cocos-plugin/README.md

@@ -51,7 +51,7 @@ Currently supported template presets include:
 
 -   `vanilla`
 -   `vue`
--   `vue-ts`
+-   `vue-element-plus`
 -   `react-ts`
 
 You can use `.` for the project name to scaffold in the current directory.

packages/create-cocos-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-cocos-plugin",
-    "version": "1.0.10",
+    "version": "1.0.12",
     "type": "module",
     "license": "MIT",
     "author": "cocos fe-team",
@@ -28,7 +28,8 @@
         "dev": "unbuild --stub",
         "build": "unbuild",
         "typecheck": "tsc --noEmit",
-        "prepublishOnly": "npm run build"
+        "prepublishOnly": "npm run build",
+        "syncDependenciesVersion": "node ./scripts/sync-dependencies-version.mjs"
     },
     "engines": {
         "node": "^18.0.0 || >=20.0.0"

packages/create-cocos-plugin/scripts/sync-dependencies-version.mjs

@@ -0,0 +1,47 @@
+import { join, dirname } from 'node:path';
+import { existsSync } from 'node:fs';
+import { readdir, stat, readFile, writeFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '../');
+
+async function getCocosPanelVersion() {
+    let version = '';
+    const vite_plugin_cocos_panel_pkg = join(root, '../vite-plugin-cocos-panel/package.json');
+    if (existsSync(vite_plugin_cocos_panel_pkg)) {
+        const pkgString = await readFile(vite_plugin_cocos_panel_pkg, { encoding: 'utf-8' });
+        version = JSON.parse(pkgString).version;
+    }
+    return version;
+}
+
+async function rewrite() {
+    const cocosPanelVersion = await getCocosPanelVersion();
+    if (!cocosPanelVersion) return;
+
+    const templates = await readdir(join(root, 'templates'));
+
+    for (const dir of templates) {
+        const tplDir = join(root, 'templates', dir);
+
+        const info = await stat(tplDir);
+        if (info.isDirectory()) {
+            const pkg = join(tplDir, 'package.json');
+            if (existsSync(pkg)) {
+                const jsonString = await readFile(pkg, { encoding: 'utf-8' });
+                if (jsonString) {
+                    const json = JSON.parse(jsonString);
+
+                    Object.assign(json.devDependencies, {
+                        '@cocos-fe/vite-plugin-cocos-panel': `^${cocosPanelVersion}`,
+                        '@cocos/creator-types': `^3.8.4`,
+                    });
+                    writeFile(pkg, JSON.stringify(json, null, 4), { encoding: 'utf-8' });
+                }
+            }
+        }
+    }
+}
+
+rewrite();

packages/create-cocos-plugin/src/index.ts

@@ -250,7 +250,7 @@ async function init() {
 
     pkg.contributions.menu[0].label = `i18n:${pkg.name}.title`;
 
-    write('package.json', JSON.stringify(pkg, null, 2) + '\n');
+    write('package.json', JSON.stringify(pkg, null, 4) + '\n');
 
     if (isReactSwc) {
         setupReactSwc(root, template.endsWith('-ts'));

packages/create-cocos-plugin/src/templates.ts

@@ -26,13 +26,13 @@ export const FRAMEWORKS: Framework[] = [
         color: green,
         variants: [
             {
-                name: 'vue-ts',
-                display: 'TypeScript',
+                name: 'vue-element-plus',
+                display: 'vue + element plus',
                 color: blue,
             },
             {
                 name: 'vue',
-                display: 'JavaScript',
+                display: 'vue only',
                 color: yellow,
             },
         ],

packages/create-cocos-plugin/templates/react-ts/README.md

@@ -4,47 +4,57 @@ This template provides a minimal setup to get React working in Vite with HMR and
 
 Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+-   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+-   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## setup
+
+```bash
+npm install
+
+npm run dev
+
+npm run build
+```
 
 ## Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-- Configure the top-level `parserOptions` property like this:
+-   Configure the top-level `parserOptions` property like this:
 
 ```js
 export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ['./tsconfig.node.json', './tsconfig.app.json'],
+            tsconfigRootDir: import.meta.dirname,
+        },
     },
-  },
-})
+});
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+-   Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+-   Optionally add `...tseslint.configs.stylisticTypeChecked`
+-   Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from 'eslint-plugin-react';
 
 export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+    // Set the react version
+    settings: { react: { version: '18.3' } },
+    plugins: {
+        // Add the react plugin
+        react,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended rules
+        ...react.configs.recommended.rules,
+        ...react.configs['jsx-runtime'].rules,
+    },
+});
 ```

packages/create-cocos-plugin/templates/react-ts/package.json

@@ -13,8 +13,8 @@
         "react-dom": "^18.3.1"
     },
     "devDependencies": {
-        "@cocos-fe/vite-plugin-cocos-panel": "^0.0.1-beta.2",
-        "@cocos/creator-types": "^3.8.3",
+        "@cocos-fe/vite-plugin-cocos-panel": "^0.0.1-beta.4",
+        "@cocos/creator-types": "^3.8.4",
         "@eslint/js": "^9.9.0",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
@@ -55,4 +55,4 @@
             }
         }
     }
-}
+}