@tomjs/create-app 0.6.2 → 0.7.0

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.12"
+  },
+  "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/vite-plugin-vscode": "^1.0.0",
+    "@tomjs/vscode-extension-webview": "^1.0.1",
+    "@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-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);
-});