@tomjs/create-app 0.6.2 → 0.8.0

package/template-vscode-react/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-react/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 + React</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template-vscode-react/package.json

@@ -0,0 +1,71 @@
+{
+  "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 && vite build",
+    "clean": "rimraf ./dist",
+    "lint": "run-s lint:eslint lint:stylelint lint:prettier",
+    "lint:eslint": "eslint \"{src,extension,scripts}/**/*.{js,cjs,ts,tsx}\" *.{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",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "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/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/vscode": "^1.85.0",
+    "@types/vscode-webview": "^1.57.4",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "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"
+  }
+}

package/template-vscode-react/src/App.css

@@ -0,0 +1,7 @@
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+}

package/template-vscode-react/src/App.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { VSCodeButton, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+import { vscode } from './utils/vscode';
+
+import './App.css';
+
+function App() {
+  function onPostMessage() {
+    vscode.postMessage({
+      command: 'hello',
+      text: 'Hey there partner! 🤠',
+    });
+  }
+
+  const [message, setMessage] = useState('');
+  const [state, setState] = useState('');
+
+  const onSetState = () => {
+    vscode.setState(state);
+  };
+  const onGetState = () => {
+    setState(vscode.getState() as string);
+  };
+
+  return (
+    <main>
+      <h1>Hello React!</h1>
+      <VSCodeButton onClick={onPostMessage}>Test VSCode Message</VSCodeButton>
+      <div>
+        <VSCodeTextField value={message} onInput={e => setMessage(e.target.value)}>
+          Please enter a message
+        </VSCodeTextField>
+        <div>Message is: {message}</div>
+      </div>
+      <div>
+        <VSCodeTextField value={state} onInput={e => setState(e.target.value)}>
+          Please enter a state
+        </VSCodeTextField>
+        <div>State is: {state}</div>
+        <div>
+          <VSCodeButton onClick={onSetState}>setState</VSCodeButton>
+          <VSCodeButton style={{ marginLeft: '8px' }} onClick={onGetState}>
+            getState
+          </VSCodeButton>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default App;

package/template-vscode-react/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

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

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

package/template-vscode-react/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-react/src/vite-env.d.ts

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

package/template-vscode-react/tsconfig.json

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

package/template-vscode-react/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-react/vite.config.ts

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

package/template-vscode-vue/.eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: [require.resolve('@tomjs/eslint/vue/typescript')],
+};

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

@@ -0,0 +1,21 @@
+// 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": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/extension/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

package/template-vscode-vue/.vscode/tasks.json

@@ -0,0 +1,36 @@
+// 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",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*extension build start*$",
+          "endsPattern": "^.*extension (build|rebuild) success.*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

package/template-vscode-vue/README.md

@@ -0,0 +1,87 @@
+# extension-vue
+
+vite + extension + vue
+
+## Description
+
+- Recommend `extension` and page `src` code directory structure
+
+```
+|--extension      // extension code
+|  |--index.ts
+|--src            // front-end code
+|  |--App.vue
+|  |--main.ts
+```
+
+- Zero configuration, default dist output directory
+
+```
+|--dist
+|  |--extension
+|  |  |--index.js
+|  |  |--index.js.map
+|  |--webview
+|  |  |--index.html
+```
+
+## Debug
+
+Run `Debug Extension` through `vscode` to debug. For debugging tools, refer to [Official Documentation](https://code.visualstudio.com/docs/editor/debugging)
+
+`launch.json` is configured as follows:
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/dist/extension/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}
+```
+
+`tasks.json` is configured as follows:
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:/?([\\w\\-]/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*extension build start*$",
+          "endsPattern": "^.*extension (build|rebuild) success.*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}
+```

package/template-vscode-vue/_lintstagedrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  '*.{js,cjs,ts,tsx}': ['eslint --fix', 'prettier --write'],
+  '*.{json,md}': ['prettier --write'],
+  '*.vue': ['eslint --fix', 'stylelint --fix', 'prettier --write'],
+  '*.{css,scss,less,html}': ['stylelint --fix', 'prettier --write'],
+};

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

@@ -0,0 +1,14 @@
+import { commands, ExtensionContext } from 'vscode';
+import { MainPanel } from './panels/MainPanel';
+
+export function activate(context: ExtensionContext) {
+  // Create the show hello world command
+  const showHelloWorldCommand = commands.registerCommand('hello-world.showHelloWorld', async () => {
+    MainPanel.render(context.extensionUri);
+  });
+
+  // Add command to the extension context
+  context.subscriptions.push(showHelloWorldCommand);
+}
+
+export function deactivate() {}