@tomjs/create-app 0.12.0 → 0.13.0

package/template-vscode-react/package.json

@@ -16,9 +16,7 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [
-    "onCommand:hello-world.showHelloWorld"
-  ],
+  "activationEvents": [],
   "contributes": {
     "commands": [
       {
@@ -56,30 +54,29 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.4.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@tomjs/vite-plugin-vscode": "^1.5.0",
-    "@tomjs/vscode-extension-webview": "^1.2.0",
-    "@types/node": "^18.19.14",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
+    "@tomjs/vite-plugin-vscode": "^2.2.0",
+    "@types/node": "^18.19.24",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/vscode": "^1.75.0",
-    "@types/vscode-webview": "^1.57.4",
+    "@types/vscode-webview": "^1.57.5",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
-    "husky": "^9.0.10",
-    "lint-staged": "^15.2.1",
+    "eslint": "^8.57.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "stylelint": "^16.2.1",
-    "tsx": "^4.7.0",
+    "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.0.12"
+    "vite": "^5.1.6"
   }
 }

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

@@ -13,7 +13,6 @@ 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') {

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

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "composite": true
   },
-  "include": ["extension", "scripts", "package.json", "vite.config.ts"]
+  "include": ["extension", "package.json", "vite.config.ts"]
 }

package/template-vscode-vue/_eslintrc.cjs

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

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

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

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

@@ -1,14 +1,13 @@
-import { commands, ExtensionContext } from 'vscode';
-import { MainPanel } from './panels/MainPanel';
+import type { ExtensionContext } from 'vscode';
+import { commands } from 'vscode';
+import { MainPanel } from './views/panel';
 
 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);
+  context.subscriptions.push(
+    commands.registerCommand('hello-world.showHelloWorld', async () => {
+      MainPanel.render(context.extensionUri);
+    }),
+  );
 }
 
 export function deactivate() {}

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

@@ -0,0 +1,27 @@
+import type { Disposable, ExtensionContext, Webview } from 'vscode';
+import { window } from 'vscode';
+
+export class WebviewHelper {
+  public static setupHtml(webview: Webview, context: ExtensionContext) {
+    return process.env.VITE_DEV_SERVER_URL
+      ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
+      : __getWebviewHtml__(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);
+            return;
+        }
+      },
+      undefined,
+      disposables,
+    );
+  }
+}

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

@@ -0,0 +1,48 @@
+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/template-vscode-vue/package.json

@@ -16,9 +16,7 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [
-    "onCommand:hello-world.showHelloWorld"
-  ],
+  "activationEvents": [],
   "contributes": {
     "commands": [
       {
@@ -52,32 +50,31 @@
   },
   "dependencies": {
     "@vscode/webview-ui-toolkit": "^1.4.0",
-    "vue": "~3.3.13"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.4.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@tomjs/vite-plugin-vscode": "^1.5.0",
-    "@tomjs/vscode-extension-webview": "^1.2.0",
-    "@types/node": "^18.19.14",
+    "@tomjs/vite-plugin-vscode": "^2.2.0",
+    "@types/node": "^18.19.24",
     "@types/vscode": "^1.75.0",
-    "@types/vscode-webview": "^1.57.4",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@types/vscode-webview": "^1.57.5",
+    "@vitejs/plugin-vue": "^5.0.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
-    "husky": "^9.0.10",
-    "lint-staged": "^15.2.1",
+    "eslint": "^8.57.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "stylelint": "^16.2.1",
-    "tsx": "^4.7.0",
+    "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.0.12",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   }
 }

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

@@ -13,7 +13,6 @@ 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') {

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

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "composite": true
   },
-  "include": ["extension", "scripts", "package.json", "vite.config.ts"]
+  "include": ["extension", "package.json", "vite.config.ts"]
 }

package/template-vue/_eslintrc.cjs

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

package/template-vue/package.json

@@ -17,26 +17,26 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "vue": "~3.3.13"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.4.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@types/node": "^18.19.14",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@types/node": "^18.19.24",
+    "@vitejs/plugin-vue": "^5.0.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
-    "husky": "^9.0.10",
-    "lint-staged": "^15.2.1",
+    "eslint": "^8.57.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "stylelint": "^16.2.1",
     "typescript": "~5.3.3",
-    "vite": "^5.0.12",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   }
 }

package/template-config/.husky/common.sh

@@ -1,9 +0,0 @@
-#!/bin/sh
-command_exists () {
-  command -v "$1" >/dev/null 2>&1
-}
-
-# Workaround for Windows 10, Git Bash and Yarn
-if command_exists winpty && test -t 1; then
-  exec < /dev/tty
-fi

package/template-electron-react/.eslintrc.cjs

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

package/template-react/.eslintrc.cjs

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

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

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

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

@@ -1,168 +0,0 @@
-import { Disposable, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-
-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 Main webview panels.
- *
- * It contains all the data and methods for:
- *
- * - Creating and rendering Main 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 MainPanel 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 file from the vite build output
-    const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
-    const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
-
-    const nonce = uuid();
-
-    if (process.env.VITE_DEV_SERVER_URL) {
-      return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
-    }
-
-    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,
-    );
-  }
-}