@tomjs/create-app 1.7.0 → 2.0.1

package/templates/vscode-react/vite.config.ts

@@ -2,19 +2,18 @@ import path from 'node:path';
 import vscode from '@tomjs/vite-plugin-vscode';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
-import pkg from './package.json';
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
-  process.env.APP_BUILD_TIME = Date.now() + '';
-  process.env.APP_VERSION = pkg.version;
-
   return {
     resolve: {
       alias: {
         '@': path.join(__dirname, 'src'),
       },
     },
-    plugins: [react(), vscode()],
+    plugins: [
+      react(),
+      vscode(),
+    ],
   };
 });

package/templates/vscode-vue/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "lokalise.i18n-ally"
+  ]
+}

package/templates/vscode-vue/.vscode/launch.json

@@ -0,0 +1,34 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--disable-extensions",
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/extension/*.js"
+      ],
+      "preLaunchTask": "npm: dev"
+    },
+    {
+      "name": "Preview Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/extension/*.js"
+      ],
+      "preLaunchTask": "npm: build"
+    }
+  ]
+}

package/templates/vscode-vue/.vscode/settings.json

@@ -0,0 +1,59 @@
+{
+  "i18n-ally.localesPaths": ["locales"],
+  "i18n-ally.sourceLanguage": "zh-CN",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.translate.promptSource": true,
+  "i18n-ally.translate.saveAsCandidates": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in your IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}

package/templates/{base/electron → vscode-vue}/.vscode/tasks.json

@@ -1,17 +1,16 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
 {
-  // See https://go.microsoft.com/fwlink/?LinkId=733558
-  // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
     {
       "type": "npm",
       "script": "dev",
-      "detail": "cross-env VITE_ELECTRON_DEBUG=1 vite",
       "problemMatcher": {
         "owner": "typescript",
         "fileLocation": "relative",
         "pattern": {
-          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "regexp": "^([a-zA-Z]\\:/?([\\w\\-]/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
           "file": 1,
           "line": 3,
           "column": 4,
@@ -20,8 +19,8 @@
         },
         "background": {
           "activeOnStart": true,
-          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
-          "endsPattern": "^.*\\[tomjs:electron\\] startup electron*$"
+          "beginsPattern": "^.*extension build start*$",
+          "endsPattern": "^.*extension (build|rebuild) success.*$"
         }
       },
       "isBackground": true,
@@ -32,6 +31,15 @@
         "kind": "build",
         "isDefault": true
       }
+    },
+    {
+      "type": "npm",
+      "script": "build",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": []
     }
   ]
 }

package/templates/vscode-vue/.vscodeignore

@@ -0,0 +1,73 @@
+# logs
+*.log
+lerna-debug.log*
+logs
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# runtime data
+*.pid
+*.pid.lock
+*.seed
+pids
+
+# dependency directory
+node_modules
+
+# cache
+.cache
+.npm
+.tmp
+.temp
+.eslintcache
+.stylelintcache
+tsconfig.tsbuildinfo
+
+# environment
+*.local
+
+# macOS
+.DS_Store
+
+# package files
+*.7z
+*.gz
+*.gzip
+*.rar
+*.tar
+*.tar.*
+*.tgz
+*.zip
+*.vsix
+
+# IDEA
+.idea
+
+# vscode
+.vscode
+.history
+
+# project
+src
+extensions
+locales
+
+.husky
+.commitlintrc*
+.editorconfig
+.eslintrc*
+.eslintignore
+.gitattributes
+.gitignore
+.lintstagedrc*
+.prettierrc*
+.prettierignore
+pnpm-lock.yaml
+tsconfig.json
+tsconfig.*.json
+*.config.ts

package/templates/vscode-vue/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) {{dateYear}}-PRESENT {{gitUserName}}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/templates/vscode-vue/README.md

@@ -1,3 +1,3 @@
-# extension-webview
+# extension
 
-vite + extension + vue
+vscode extension

package/templates/vscode-vue/_.gitignore

@@ -0,0 +1,65 @@
+# logs
+*.log
+lerna-debug.log*
+logs
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# runtime data
+*.pid
+*.pid.lock
+*.seed
+pids
+
+# dependency directory
+bower_components
+jspm_packages
+node_modules
+web_modules
+
+# cache
+.cache
+.npm
+.tmp
+.temp
+.eslintcache
+.stylelintcache
+tsconfig.tsbuildinfo
+
+# environment
+*.local
+
+# macOS
+.DS_Store
+
+# package files
+*.7z
+*.gz
+*.gzip
+*.rar
+*.tar
+*.tar.*
+*.tgz
+*.zip
+*.vsix
+
+# IDEA
+.idea
+
+# vscode
+.history
+.vscode/i18n-ally-reviews.yml
+
+# build output
+build
+dist
+release
+
+package.nls.json
+package.nls.*.json
+src/vscode.d.ts

package/templates/vscode-vue/extension/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-vscode/env" />

package/templates/vscode-vue/extension/index.ts

@@ -0,0 +1,21 @@
+import type { ExtensionContext } from 'vscode';
+import { i18n, initExtension } from '@tomjs/vscode';
+import { commands, window } from 'vscode';
+import { MainPanel } from './views/panel';
+
+export function activate(context: ExtensionContext) {
+  initExtension(context);
+
+  context.subscriptions.push(
+    commands.registerCommand('tomjs.xxx.showHello', async () => {
+      window.showInformationMessage(i18n.t('tomjs.commands.hello'));
+    }),
+  );
+  context.subscriptions.push(
+    commands.registerCommand('tomjs.xxx.showPanel', async () => {
+      MainPanel.render(context);
+    }),
+  );
+}
+
+export function deactivate() {}

package/templates/vscode-vue/extension/views/helper.ts

@@ -0,0 +1,28 @@
+import type { Disposable, ExtensionContext, Webview } from 'vscode';
+import { window } from 'vscode';
+
+export class WebviewHelper {
+  public static setupHtml(webview: Webview, context: ExtensionContext) {
+    return __getWebviewHtml__({
+      serverUrl: process.env.VITE_DEV_SERVER_URL,
+      webview,
+      context,
+    });
+  }
+
+  public static setupWebviewHooks(webview: Webview, disposables: Disposable[]) {
+    webview.onDidReceiveMessage(
+      (message: any) => {
+        const command = message.command;
+        const text = message.text;
+        console.log(`command: ${command}`);
+        switch (command) {
+          case 'hello':
+            window.showInformationMessage(text);
+        }
+      },
+      undefined,
+      disposables,
+    );
+  }
+}

package/templates/vscode-vue/extension/views/panel.ts

@@ -0,0 +1,49 @@
+import type { Disposable, ExtensionContext, WebviewPanel } from 'vscode';
+import { ViewColumn, window } from 'vscode';
+import { WebviewHelper } from './helper';
+
+export class MainPanel {
+  public static currentPanel: MainPanel | undefined;
+  private readonly _panel: WebviewPanel;
+  private _disposables: Disposable[] = [];
+
+  private constructor(panel: WebviewPanel, context: ExtensionContext) {
+    this._panel = panel;
+
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+    this._panel.webview.html = WebviewHelper.setupHtml(this._panel.webview, context);
+
+    WebviewHelper.setupWebviewHooks(this._panel.webview, this._disposables);
+  }
+
+  public static render(context: ExtensionContext) {
+    if (MainPanel.currentPanel) {
+      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
+    }
+    else {
+      const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
+        enableScripts: true,
+      });
+
+      MainPanel.currentPanel = new MainPanel(panel, context);
+    }
+  }
+
+  /**
+   * Cleans up and disposes of webview resources when the webview panel is closed.
+   */
+  public dispose() {
+    MainPanel.currentPanel = undefined;
+
+    // Dispose of the current webview panel
+    this._panel.dispose();
+
+    // Dispose of all disposables (i.e. commands) for the current webview panel
+    while (this._disposables.length) {
+      const disposable = this._disposables.pop();
+      if (disposable) {
+        disposable.dispose();
+      }
+    }
+  }
+}

package/templates/vscode-vue/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "tomjs.commands.hello": "Show Hello",
+  "tomjs.commands.panel": "Open Panel",
+  "description": "This is a Tomjs Extension.",
+  "displayName": "Tomjs Extension"
+}

package/templates/vscode-vue/package.json

@@ -1,9 +1,63 @@
 {
+  "publisher": "",
+  "name": "vscode-vue",
+  "displayName": "%displayName%",
+  "type": "commonjs",
+  "description": "%description%",
+  "license": "MIT",
+  "keywords": [
+    "vscode"
+  ],
+  "categories": [
+    "Other"
+  ],
+  "main": "dist/extension/index.js",
+  "icon": "resources/logo.png",
+  "engines": {
+    "node": ">=14.16.0",
+    "vscode": "^1.56.0"
+  },
+  "activationEvents": [],
+  "contributes": {
+    "commands": [
+      {
+        "command": "tomjs.xxx.showHello",
+        "title": "%tomjs.commands.hello%",
+        "category": "%displayName%"
+      },
+      {
+        "command": "tomjs.xxx.showPanel",
+        "title": "%tomjs.commands.panel%",
+        "category": "%displayName%"
+      }
+    ]
+  },
+  "vsce": {
+    "dependencies": false,
+    "yarn": false
+  },
   "scripts": {
+    "dev": "run-p dev:*",
+    "dev:vsd": "vscode-dev --watch",
+    "dev:dist": "vite",
     "build": "vscode-dev && vue-tsc --noEmit && vite build",
-    "lint:eslint": "eslint \"{src,extension}/**/*.{js,cjs,ts,tsx,vue}\" *.{js,cjs,ts} --fix --cache"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "vue-i18n": "^9.14.0"
+    "@tomjs/node": "^2.2.3",
+    "@tomjs/vscode": "^2.5.0",
+    "@tomjs/vscode-webview": "^2.0.2",
+    "@vscode/webview-ui-toolkit": "^1.4.0",
+    "vue": "^3.5.25",
+    "vue-i18n": "^11.2.2"
+  },
+  "devDependencies": {
+    "@tomjs/vite-plugin-vscode": "^5.1.0",
+    "@tomjs/vscode-dev": "^3.0.2",
+    "@types/vscode": "^1.56.0",
+    "@types/vscode-webview": "^1.57.5",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.5"
   }
 }

package/templates/vscode-vue/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - simple-git-hooks

package/templates/vscode-vue/src/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { allComponents, provideVSCodeDesignSystem } from '@vscode/webview-ui-toolkit';
 import { ref } from 'vue';
-import { vscode } from './utils';
+import { vscodeApi } from './utils';
 
 provideVSCodeDesignSystem().register(allComponents);
 
 function onPostMessage() {
-  vscode.postMessage({
+  vscodeApi.postMessage({
     command: 'hello',
     text: 'Hey there partner! 🤠',
   });
@@ -15,19 +15,21 @@ function onPostMessage() {
 const message = ref('');
 const state = ref('');
 
-const onSetState = () => {
-  vscode.setState(state.value);
-};
+function onSetState() {
+  vscodeApi.setState(state.value);
+}
 
-const onGetState = () => {
-  state.value = vscode.getState() as string;
-};
+function onGetState() {
+  state.value = vscodeApi.getState() as string;
+}
 </script>
 
 <template>
   <main>
     <h1>Hello Vue!</h1>
-    <vscode-button @click="onPostMessage">Test VSCode Message</vscode-button>
+    <vscode-button @click="onPostMessage">
+      Test VSCode Message
+    </vscode-button>
     <div>
       <vscode-text-field :value="message" @input="e => (message = e.target.value)">
         Please enter a message
@@ -40,8 +42,12 @@ const onGetState = () => {
       </vscode-text-field>
       <div>State is: {{ state }}</div>
       <div>
-        <vscode-button @click="onSetState">setState</vscode-button>
-        <vscode-button style="margin-left: 8px" @click="onGetState">getState</vscode-button>
+        <vscode-button @click="onSetState">
+          setState
+        </vscode-button>
+        <vscode-button style="margin-left: 8px" @click="onGetState">
+          getState
+        </vscode-button>
       </div>
     </div>
   </main>

package/templates/vscode-vue/src/utils/vscode.ts

@@ -1,83 +1,4 @@
-import type { WebviewApi } from 'vscode-webview';
-
-/**
- * A utility wrapper around the acquireVsCodeApi() function, which enables
- * message passing and state management between the webview and extension
- * contexts.
- *
- * This utility also enables webview code to be run in a web browser-based
- * dev server by using native web browser features that mock the functionality
- * enabled by acquireVsCodeApi.
- */
-class VSCodeAPIWrapper {
-  private readonly vsCodeApi: WebviewApi<unknown> | undefined;
-
-  constructor() {
-    // Check if the acquireVsCodeApi function exists in the current development
-    // context (i.e. VS Code development window or web browser)
-    if (typeof acquireVsCodeApi === 'function') {
-      this.vsCodeApi = acquireVsCodeApi();
-    }
-  }
-
-  // private init() {
-  //   // TODO 环境变量判断
-  // }
-
-  /**
-   * Post a message (i.e. send arbitrary data) to the owner of the webview.
-   *
-   * @remarks When running webview code inside a web browser, postMessage will instead
-   * log the given message to the console.
-   *
-   * @param message Abitrary data (must be JSON serializable) to send to the extension context.
-   */
-  public postMessage(message: unknown) {
-    if (this.vsCodeApi) {
-      this.vsCodeApi.postMessage(message);
-    } else {
-      window.parent.postMessage({ type: 'page:message', data: message }, '*');
-      console.log(message);
-    }
-  }
-
-  /**
-   * Get the persistent state stored for this webview.
-   *
-   * @remarks When running webview source code inside a web browser, getState will retrieve state
-   * from local storage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
-   *
-   * @return The current state or `undefined` if no state has been set.
-   */
-  public getState(): unknown | undefined {
-    if (this.vsCodeApi) {
-      return this.vsCodeApi.getState();
-    } else {
-      const state = localStorage.getItem('vscodeState');
-      return state ? JSON.parse(state) : undefined;
-    }
-  }
-
-  /**
-   * Set the persistent state stored for this webview.
-   *
-   * @remarks When running webview source code inside a web browser, setState will set the given
-   * state using local storage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
-   *
-   * @param newState New persisted state. This must be a JSON serializable object. Can be retrieved
-   * using {@link getState}.
-   *
-   * @return The new state.
-   */
-  public setState<T extends unknown | undefined>(newState: T): T {
-    if (this.vsCodeApi) {
-      return this.vsCodeApi.setState(newState);
-    } else {
-      localStorage.setItem('vscodeState', JSON.stringify(newState));
-      return newState;
-    }
-  }
-}
+import { WebviewApi } from '@tomjs/vscode-webview';
 
 // Exports class singleton to prevent multiple invocations of acquireVsCodeApi.
-export const vscode = new VSCodeAPIWrapper();
+export const vscodeApi = new WebviewApi<string>();

package/templates/vscode-vue/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="@tomjs/vite-plugin-vscode/env" />

package/templates/vscode-vue/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tomjs/tsconfig/vue.json",
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}