@tomjs/create-app 1.0.0-alpha.1 → 1.0.1

package/templates/vscode/.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/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

package/templates/vscode/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["locales"]
+}

package/templates/vscode/.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": "^.*Build start*$",
+          "endsPattern": "^.*Build success.*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

package/templates/vscode/.vscodeignore

@@ -0,0 +1,72 @@
+# 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
+locales
+
+.husky
+.commitlintrc*
+.editorconfig
+.eslintrc*
+.eslintignore
+.gitattributes
+.gitignore
+.lintstagedrc*
+.prettierrc*
+.prettierignore
+pnpm-lock.yaml
+tsconfig.json
+tsconfig.*.json
+*.config.ts

package/templates/vscode/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT {{user.name}}<{{user.email}}>
+
+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/README.md

@@ -0,0 +1,3 @@
+# extension
+
+vscode extension

package/templates/vscode/_gitignore

@@ -0,0 +1,63 @@
+# 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
+
+# build output
+build
+dist
+release
+
+package.nls.json
+package.nls.*.json

package/templates/vscode/locales/en.json

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

package/templates/vscode/locales/zh-CN.json

@@ -0,0 +1,5 @@
+{
+  "tomjs.commands.hello": "显示你好",
+  "description": "这是一个 Tomjs 扩展。",
+  "displayName": "Tomjs 扩展"
+}

package/templates/vscode/locales/zh-TW.json

@@ -0,0 +1,5 @@
+{
+  "tomjs.commands.hello": "顯示你好",
+  "description": "這是一個 Tomjs 延伸模組。",
+  "displayName": "Tomjs 延伸模組"
+}

package/templates/vscode/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "vscode-extension",
+  "displayName": "%displayName%",
+  "description": "%description%",
+  "version": "0.0.0",
+  "publisher": "{{gitOrg}}",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14",
+    "vscode": "^1.56.0"
+  },
+  "main": "dist/index.js",
+  "keywords": [
+    "vscode"
+  ],
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "contributes": {
+    "commands": [
+      {
+        "command": "tomjs.xxx.showHello",
+        "title": "%tomjs.commands.hello%",
+        "category": "%displayName%"
+      }
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+{{gitUrl}}.git"
+  },
+  "bugs": {
+    "url": "git+{{gitUrl}}/issues"
+  },
+  "homepage": "{{gitUrl}}/blob/main/README.md",
+  "icon": "resources/logo.png",
+  "vsce": {
+    "dependencies": false,
+    "yarn": false
+  },
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:i18n": "vscode-dev i18n --watch",
+    "dev:dist": "tsup --watch",
+    "build": "vscode-dev i18n && tsup --minify"
+  },
+  "dependencies": {
+    "@tomjs/node": "^2.1.0",
+    "@tomjs/vscode": "^2.0.1"
+  },
+  "devDependencies": {
+    "@tomjs/vscode-dev": "^1.2.3",
+    "@types/vscode": "^1.56.0",
+    "tsup": "^8.1.0"
+  }
+}

package/templates/vscode/src/index.ts

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

package/templates/vscode/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tomjs/tsconfig/node.json",
+  "compilerOptions": {},
+  "include": ["src", "package.json", "vite.config.ts"]
+}

package/templates/vscode/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig(options => {
+  return {
+    entry: ['src/index.ts'],
+    format: ['cjs'],
+    target: 'node14',
+    external: ['vscode'],
+    clean: true,
+    splitting: true,
+    sourcemap: !!options.watch,
+  };
+});

package/templates/vscode-react/README.md

@@ -0,0 +1,3 @@
+# extension-webview
+
+vite + extension + react

package/templates/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/templates/vscode-react/package.json

@@ -0,0 +1 @@
+{}

package/templates/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/templates/vscode-react/src/App.tsx

@@ -0,0 +1,51 @@
+import { VSCodeButton, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+import { useState } from '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/templates/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/templates/vscode-react/src/utils/index.ts

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+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()],
+  };
+});

package/templates/vscode-vue/README.md

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

package/templates/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/templates/vscode-vue/package.json

@@ -0,0 +1,6 @@
+{
+  "scripts": {
+    "build": "vscode-dev i18n && vue-tsc --noEmit && vite build",
+    "lint:eslint": "eslint \"{src,extension}/**/*.{js,cjs,ts,tsx,vue}\" *.{js,cjs,ts} --fix --cache"
+  }
+}

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { allComponents, provideVSCodeDesignSystem } from '@vscode/webview-ui-toolkit';
+import { ref } from 'vue';
+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/templates/vscode-vue/src/main.ts

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

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

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