@tomjs/create-app 0.6.2 → 0.8.0

package/template-vscode-vue/extension/panels/MainPanel.ts

@@ -0,0 +1,172 @@
+import { Disposable, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
+// import __getWebviewHtml from '@tomjs/vscode-extension-webview';
+
+function uuid() {
+  let text = '';
+  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  for (let i = 0; i < 32; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}
+
+function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
+  return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
+}
+
+/**
+ * This class manages the state and behavior of HelloWorld webview panels.
+ *
+ * It contains all the data and methods for:
+ *
+ * - Creating and rendering HelloWorld webview panels
+ * - Properly cleaning up and disposing of webview resources when the panel is closed
+ * - Setting the HTML (and by proxy CSS/JavaScript) content of the webview panel
+ * - Setting message listeners so data can be passed between the webview and extension
+ */
+export class MainPanel {
+  public static currentPanel: MainPanel | undefined;
+  private readonly _panel: WebviewPanel;
+  private _disposables: Disposable[] = [];
+
+  /**
+   * The HelloWorldPanel class private constructor (called only from the render method).
+   *
+   * @param panel A reference to the webview panel
+   * @param extensionUri The URI of the directory containing the extension
+   */
+  private constructor(panel: WebviewPanel, extensionUri: Uri) {
+    this._panel = panel;
+
+    // Set an event listener to listen for when the panel is disposed (i.e. when the user closes
+    // the panel or when the panel is closed programmatically)
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+
+    // Set the HTML content for the webview panel
+    this._panel.webview.html = this._getWebviewContent(this._panel.webview, extensionUri);
+
+    // Set an event listener to listen for messages passed from the webview context
+    this._setWebviewMessageListener(this._panel.webview);
+  }
+
+  /**
+   * Renders the current webview panel if it exists otherwise a new webview panel
+   * will be created and displayed.
+   *
+   * @param extensionUri The URI of the directory containing the extension.
+   */
+  public static render(extensionUri: Uri) {
+    if (MainPanel.currentPanel) {
+      // If the webview panel already exists reveal it
+      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
+    } else {
+      // If a webview panel does not already exist create and show a new one
+      const panel = window.createWebviewPanel(
+        // Panel view type
+        'showHelloWorld',
+        // Panel title
+        'Hello World',
+        // The editor column the panel should be displayed in
+        ViewColumn.One,
+        // Extra panel configurations
+        {
+          // Enable JavaScript in the webview
+          enableScripts: true,
+          // Restrict the webview to only load resources from the `dist/webview` directories
+          localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
+        },
+      );
+
+      MainPanel.currentPanel = new MainPanel(panel, extensionUri);
+    }
+  }
+
+  /**
+   * 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();
+      }
+    }
+  }
+
+  /**
+   * Defines and returns the HTML that should be rendered within the webview panel.
+   *
+   * @remarks This is also the place where references to the Vue webview build files
+   * are created and inserted into the webview HTML.
+   *
+   * @param webview A reference to the extension webview
+   * @param extensionUri The URI of the directory containing the extension
+   * @returns A template string literal containing the HTML that should be
+   * rendered within the webview panel
+   */
+  private _getWebviewContent(webview: Webview, extensionUri: Uri) {
+    // The CSS file from the Vue build output
+    const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
+    // The JS file from the Vue build output
+    const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
+
+    const nonce = uuid();
+
+    if (process.env.VITE_DEV_SERVER_URL) {
+      // @ts-ignore
+      return __getWebviewHtml({ serverUrl: process.env.VITE_DEV_SERVER_URL });
+    }
+
+    // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
+    return /*html*/ `
+      <!doctype html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+          <script type="module" crossorigin nonce="${nonce}" src="${scriptUri}"></script>
+          <link rel="stylesheet" crossorigin href="${stylesUri}">
+          <title>Hello World</title>
+        </head>
+        <body>
+          <div id="app"></div>
+        </body>
+      </html>
+    `;
+  }
+
+  /**
+   * Sets up an event listener to listen for messages passed from the webview context and
+   * executes code based on the message that is recieved.
+   *
+   * @param webview A reference to the extension webview
+   * @param context A reference to the extension context
+   */
+  private _setWebviewMessageListener(webview: Webview) {
+    webview.onDidReceiveMessage(
+      (message: any) => {
+        const command = message.command;
+        const text = message.text;
+        console.log(`command: ${command}`);
+
+        switch (command) {
+          case 'hello':
+            // Code that should run in response to the hello message command
+            window.showInformationMessage(text);
+            return;
+          // Add more switch case statements here as more webview message commands
+          // are created within the webview context (i.e. inside media/main.js)
+        }
+      },
+      undefined,
+      this._disposables,
+    );
+  }
+}

package/template-vscode-vue/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <title>Vite + VSCode Extension + Vue</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template-vscode-vue/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "vscode-app",
+  "version": "0.0.0",
+  "description": "vite + vscode + vue",
+  "engines": {
+    "node": ">=14",
+    "vscode": "^1.56.0"
+  },
+  "main": "dist/extension/index.js",
+  "activationEvents": [
+    "onCommand:hello-world.showHelloWorld"
+  ],
+  "contributes": {
+    "commands": [
+      {
+        "command": "hello-world.showHelloWorld",
+        "title": "Hello World: Show"
+      }
+    ]
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xxx/node-template.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run clean && vue-tsc --noEmit && vite build",
+    "clean": "rimraf ./dist",
+    "lint": "run-s lint:eslint lint:stylelint lint:prettier",
+    "lint:eslint": "eslint \"{src,extension,scripts}/**/*.{js,cjs,ts,tsx,vue}\" *.{js,cjs,ts} --fix --cache",
+    "lint:stylelint": "stylelint \"{src,extension,scripts}/**/*.{css,scss,less,html}\" --fix --cache",
+    "lint:prettier": "prettier --write .",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@vscode/webview-ui-toolkit": "^1.4.0",
+    "vue": "^3.3.13"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@tomjs/commitlint": "^2.1.1",
+    "@tomjs/eslint": "^1.2.1",
+    "@tomjs/prettier": "^1.1.1",
+    "@tomjs/stylelint": "^2.1.1",
+    "@tomjs/tsconfig": "^1.2.1",
+    "@tomjs/vite-plugin-vscode": "^1.1.0",
+    "@tomjs/vscode-extension-webview": "^1.1.0",
+    "@types/node": "^18.19.3",
+    "@types/vscode": "^1.85.0",
+    "@types/vscode-webview": "^1.57.4",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.56.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.1.1",
+    "rimraf": "^5.0.5",
+    "stylelint": "^16.0.2",
+    "tsx": "^4.7.0",
+    "typescript": "~5.3.3",
+    "vite": "^5.0.10",
+    "vue-tsc": "^1.8.25"
+  }
+}

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { allComponents, provideVSCodeDesignSystem } from '@vscode/webview-ui-toolkit';
+import { vscode } from './utils';
+
+provideVSCodeDesignSystem().register(allComponents);
+
+function onPostMessage() {
+  vscode.postMessage({
+    command: 'hello',
+    text: 'Hey there partner! 🤠',
+  });
+}
+
+const message = ref('');
+const state = ref('');
+
+const onSetState = () => {
+  vscode.setState(state.value);
+};
+
+const onGetState = () => {
+  state.value = vscode.getState() as string;
+};
+</script>
+
+<template>
+  <main>
+    <h1>Hello Vue!</h1>
+    <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
+      </vscode-text-field>
+      <div>Message is: {{ message }}</div>
+    </div>
+    <div>
+      <vscode-text-field :value="state" @input="e => (state = e.target.value)">
+        Please enter a state
+      </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>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style>
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+}
+</style>

package/template-vscode-vue/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');

package/template-vscode-vue/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './vscode';

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

@@ -0,0 +1,84 @@
+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() {
+    console.log(typeof acquireVsCodeApi);
+    // 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;
+    }
+  }
+}
+
+// Exports class singleton to prevent multiple invocations of acquireVsCodeApi.
+export const vscode = new VSCodeAPIWrapper();

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

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

package/template-vscode-vue/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@tomjs/tsconfig/vue-dom.json",
+  "compilerOptions": {},
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/template-vscode-vue/tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tomjs/tsconfig/node.json",
+  "compilerOptions": {
+    "composite": true
+  },
+  "include": ["extension", "scripts", "package.json", "vite.config.ts"]
+}

package/template-vscode-vue/vite.config.ts

@@ -0,0 +1,21 @@
+import path from 'node:path';
+import { defineConfig } from 'vite';
+import vscode from '@tomjs/vite-plugin-vscode';
+import vue from '@vitejs/plugin-vue';
+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: [vue(), vscode()],
+    clearScreen: false,
+  };
+});

package/template-vue/package.json

@@ -17,15 +17,15 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "vue": "^3.3.12"
+    "vue": "^3.3.13"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
-    "@tomjs/commitlint": "^2.0.8",
-    "@tomjs/eslint": "^1.1.4",
-    "@tomjs/prettier": "^1.0.9",
-    "@tomjs/stylelint": "^2.0.2",
-    "@tomjs/tsconfig": "^1.1.5",
+    "@tomjs/commitlint": "^2.1.1",
+    "@tomjs/eslint": "^1.2.1",
+    "@tomjs/prettier": "^1.1.1",
+    "@tomjs/stylelint": "^2.1.1",
+    "@tomjs/tsconfig": "^1.2.1",
     "@types/node": "^18.19.3",
     "@vitejs/plugin-vue": "^4.5.2",
     "cross-env": "^7.0.3",

package/template-electron-react/scripts/builder.ts

@@ -1,38 +0,0 @@
-import type { Configuration } from 'electron-builder';
-import pkg from '../package.json';
-
-/**
- * @see https://www.electron.build/configuration/configuration
- */
-export default {
-  appId: 'com.xxx.app',
-  productName: 'App',
-  directories: {
-    output: `build/${pkg.version}`,
-    app: 'dist',
-  },
-  files: ['main/index.mjs', 'preload/index.mjs', 'renderer'],
-  icon: 'public/img/icon.png',
-  artifactName: '${productName}-${version}-${os}-${arch}.${ext}',
-  electronLanguages: ['zh-CN', 'en-US'],
-  win: {
-    target: [
-      {
-        target: 'nsis',
-        arch: ['x64'],
-      },
-    ],
-  },
-  mac: {
-    target: ['dmg'],
-  },
-  linux: {
-    target: ['AppImage'],
-  },
-  nsis: {
-    oneClick: false,
-    perMachine: false,
-    allowToChangeInstallationDirectory: true,
-    deleteAppDataOnUninstall: false,
-  },
-} as Configuration;

package/template-electron-react/scripts/constants.ts

@@ -1,19 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-/**
- * 项目根路径
- */
-export const ROOT_PATH = path.join(__dirname, '../');
-
-/**
- * 生成代码目录
- */
-export const DIST_PATH = path.join(ROOT_PATH, 'dist');
-
-/**
- * electron 依赖模块
- */
-export const ELECTRON_DEPENDENCIES: string[] = [];

package/template-electron-react/scripts/release.ts

@@ -1,40 +0,0 @@
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { build as electronBuild } from 'electron-builder';
-import shell from 'shelljs';
-import pkg from '../package.json';
-import builderConfig from './builder';
-import { DIST_PATH, ELECTRON_DEPENDENCIES } from './constants';
-
-function genPkgJson() {
-  const pkgJson = {
-    name: pkg.name,
-    version: pkg.version,
-    author: os.userInfo().username,
-    description: pkg.description,
-    main: 'main/index.mjs',
-    dependencies: Object.entries(Object.assign({}, pkg.dependencies, pkg.devDependencies))
-      .filter(([name]) => ELECTRON_DEPENDENCIES.includes(name))
-      .reduce((object, entry) => ({ ...object, [entry[0]]: entry[1] }), {}),
-  };
-
-  fs.writeFileSync(path.join(DIST_PATH, 'package.json'), JSON.stringify(pkgJson, undefined, 2));
-}
-
-async function run() {
-  try {
-    genPkgJson();
-    // 安装依赖
-    shell.exec(`cd ${DIST_PATH} && npm install`);
-    console.log();
-    await electronBuild({ config: builderConfig });
-  } catch (e) {
-    console.error(e);
-    process.exit(1);
-  }
-}
-
-run().then(() => {
-  process.exit(0);
-});

package/template-electron-vue/scripts/builder.ts

@@ -1,38 +0,0 @@
-import type { Configuration } from 'electron-builder';
-import pkg from '../package.json';
-
-/**
- * @see https://www.electron.build/configuration/configuration
- */
-export default {
-  appId: 'com.xxx.app',
-  productName: 'App',
-  directories: {
-    output: `build/${pkg.version}`,
-    app: 'dist',
-  },
-  files: ['main/index.mjs', 'preload/index.mjs', 'renderer'],
-  icon: 'public/img/icon.png',
-  artifactName: '${productName}-${version}-${os}-${arch}.${ext}',
-  electronLanguages: ['zh-CN', 'en-US'],
-  win: {
-    target: [
-      {
-        target: 'nsis',
-        arch: ['x64'],
-      },
-    ],
-  },
-  mac: {
-    target: ['dmg'],
-  },
-  linux: {
-    target: ['AppImage'],
-  },
-  nsis: {
-    oneClick: false,
-    perMachine: false,
-    allowToChangeInstallationDirectory: true,
-    deleteAppDataOnUninstall: false,
-  },
-} as Configuration;

package/template-electron-vue/scripts/constants.ts

@@ -1,19 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-/**
- * 项目根路径
- */
-export const ROOT_PATH = path.join(__dirname, '../');
-
-/**
- * 生成代码目录
- */
-export const DIST_PATH = path.join(ROOT_PATH, 'dist');
-
-/**
- * electron 依赖模块
- */
-export const ELECTRON_DEPENDENCIES: string[] = [];

package/template-electron-vue/scripts/release.ts

@@ -1,40 +0,0 @@
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { build as electronBuild } from 'electron-builder';
-import shell from 'shelljs';
-import pkg from '../package.json';
-import builderConfig from './builder';
-import { DIST_PATH, ELECTRON_DEPENDENCIES } from './constants';
-
-function genPkgJson() {
-  const pkgJson = {
-    name: pkg.name,
-    version: pkg.version,
-    author: os.userInfo().username,
-    description: pkg.description,
-    main: 'main/index.mjs',
-    dependencies: Object.entries(Object.assign({}, pkg.dependencies, pkg.devDependencies))
-      .filter(([name]) => ELECTRON_DEPENDENCIES.includes(name))
-      .reduce((object, entry) => ({ ...object, [entry[0]]: entry[1] }), {}),
-  };
-
-  fs.writeFileSync(path.join(DIST_PATH, 'package.json'), JSON.stringify(pkgJson, undefined, 2));
-}
-
-async function run() {
-  try {
-    genPkgJson();
-    // 安装依赖
-    shell.exec(`cd ${DIST_PATH} && npm install`);
-    console.log();
-    await electronBuild({ config: builderConfig });
-  } catch (e) {
-    console.error(e);
-    process.exit(1);
-  }
-}
-
-run().then(() => {
-  process.exit(0);
-});