@tomjs/create-app 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/README.zh_CN.md +4 -0
- package/package.json +2 -2
- package/templates/base/core/.commitlintrc.cjs +3 -0
- package/templates/base/core/.editorconfig +15 -0
- package/templates/base/core/.eslintignore +14 -0
- package/templates/base/core/.gitattributes +203 -0
- package/templates/base/core/.husky/commit-msg +1 -0
- package/templates/base/core/.husky/pre-commit +1 -0
- package/templates/base/core/.prettierignore +17 -0
- package/templates/base/core/.prettierrc.cjs +1 -0
- package/templates/base/core/_eslintrc.cjs +7 -0
- package/templates/base/core/_gitignore +60 -0
- package/templates/base/core/_lintstagedrc.cjs +4 -0
- package/templates/base/core/package.json +30 -0
- package/templates/base/electron/.vscode/launch.json +28 -0
- package/templates/base/electron/.vscode/tasks.json +37 -0
- package/templates/base/electron/electron/env.d.ts +1 -0
- package/templates/base/electron/electron/main/index.ts +111 -0
- package/templates/base/electron/electron/polyfills.ts +4 -0
- package/templates/base/electron/electron/preload/index.ts +1 -0
- package/templates/base/electron/package.json +25 -0
- package/templates/base/electron/tsconfig.node.json +7 -0
- package/templates/base/node/LICENSE +21 -0
- package/templates/base/node/README.md +13 -0
- package/templates/base/node/README.zh_CN.md +13 -0
- package/templates/base/node/package.json +46 -0
- package/templates/base/node/test/index.test.ts +7 -0
- package/templates/base/react/_eslintrc.cjs +7 -0
- package/templates/base/react/_lintstagedrc.cjs +6 -0
- package/templates/base/react/package.json +19 -0
- package/templates/base/react/tsconfig.json +5 -0
- package/templates/base/react/tsconfig.node.json +7 -0
- package/templates/base/style/.stylelintignore +16 -0
- package/templates/base/style/.stylelintrc.cjs +3 -0
- package/templates/base/style/_lintstagedrc.cjs +5 -0
- package/templates/base/style/package.json +10 -0
- package/templates/base/vscode/.vscode/extensions.json +5 -0
- package/templates/base/vscode/.vscode/launch.json +21 -0
- package/templates/base/vscode/.vscode/settings.json +3 -0
- package/templates/base/vscode/.vscode/tasks.json +36 -0
- package/templates/base/vscode/.vscodeignore +73 -0
- package/templates/base/vscode/LICENSE +21 -0
- package/templates/base/vscode/_gitignore +63 -0
- package/templates/base/vscode/extension/env.d.ts +1 -0
- package/templates/base/vscode/extension/index.ts +21 -0
- package/templates/base/vscode/extension/views/helper.ts +27 -0
- package/templates/base/vscode/extension/views/panel.ts +48 -0
- package/templates/base/vscode/locales/en.json +6 -0
- package/templates/base/vscode/locales/zh-CN.json +5 -0
- package/templates/base/vscode/locales/zh-TW.json +5 -0
- package/templates/base/vscode/package.json +70 -0
- package/templates/base/vscode/resources/logo.png +0 -0
- package/templates/base/vscode/tsconfig.node.json +7 -0
- package/templates/base/vue/_eslintrc.cjs +7 -0
- package/templates/base/vue/_lintstagedrc.cjs +6 -0
- package/templates/base/vue/package.json +17 -0
- package/templates/base/vue/tsconfig.json +5 -0
- package/templates/base/vue/tsconfig.node.json +7 -0
- package/templates/config.json +105 -0
- package/templates/electron-react/README.md +3 -0
- package/templates/electron-react/electron/main/index.ts +128 -0
- package/templates/electron-react/index.html +15 -0
- package/templates/electron-react/package.json +26 -0
- package/templates/electron-react/public/img/icon.png +0 -0
- package/templates/electron-react/public/vite.svg +1 -0
- package/templates/electron-react/src/App.css +45 -0
- package/templates/electron-react/src/App.tsx +42 -0
- package/templates/electron-react/src/assets/electron.svg +10 -0
- package/templates/electron-react/src/assets/react.svg +1 -0
- package/templates/electron-react/src/index.css +69 -0
- package/templates/electron-react/src/main.tsx +11 -0
- package/templates/electron-react/src/vite-env.d.ts +1 -0
- package/templates/electron-react/vite.config.ts +27 -0
- package/templates/electron-vue/README.md +3 -0
- package/templates/electron-vue/electron/main/index.ts +123 -0
- package/templates/electron-vue/package.json +6 -0
- package/templates/electron-vue/public/img/icon.png +0 -0
- package/templates/electron-vue/public/vite.svg +1 -0
- package/templates/electron-vue/src/App.vue +55 -0
- package/templates/electron-vue/src/assets/electron.svg +10 -0
- package/templates/electron-vue/src/assets/vue.svg +1 -0
- package/templates/electron-vue/src/components/HelloWorld.vue +43 -0
- package/templates/electron-vue/src/main.ts +6 -0
- package/templates/electron-vue/src/style.css +80 -0
- package/templates/electron-vue/src/vite-env.d.ts +1 -0
- package/templates/electron-vue/vite.config.ts +26 -0
- package/templates/node/package.json +12 -0
- package/templates/node/src/index.ts +3 -0
- package/templates/node/tsconfig.json +4 -0
- package/templates/node/tsup.config.ts +19 -0
- package/templates/node-cli/.vscode/launch.json +23 -0
- package/templates/node-cli/index.d.ts +5 -0
- package/templates/node-cli/package.json +33 -0
- package/templates/node-cli/src/cli.ts +68 -0
- package/templates/node-cli/src/config.ts +28 -0
- package/templates/node-cli/src/constants.ts +1 -0
- package/templates/node-cli/src/index.ts +3 -0
- package/templates/node-cli/src/types.ts +1 -0
- package/templates/node-cli/tsconfig.json +4 -0
- package/templates/node-cli/tsup.config.ts +18 -0
- package/templates/node-cli/xxx.config.cjs +0 -0
- package/templates/node-cli-legacy/.vscode/launch.json +23 -0
- package/templates/node-cli-legacy/index.d.ts +5 -0
- package/templates/node-cli-legacy/package.json +31 -0
- package/templates/node-cli-legacy/src/cli.ts +45 -0
- package/templates/node-cli-legacy/src/config.ts +28 -0
- package/templates/node-cli-legacy/src/index.ts +3 -0
- package/templates/node-cli-legacy/src/types.ts +1 -0
- package/templates/node-cli-legacy/src/utils.ts +5 -0
- package/templates/node-cli-legacy/tsconfig.json +4 -0
- package/templates/node-cli-legacy/tsup.config.ts +18 -0
- package/templates/node-cli-legacy/xxx.config.cjs +0 -0
- package/templates/node-vite-plugin/package.json +19 -0
- package/templates/node-vite-plugin/src/index.ts +10 -0
- package/templates/node-vite-plugin/src/types.ts +1 -0
- package/templates/node-vite-plugin/test/index.test.ts +7 -0
- package/templates/node-vite-plugin/tsconfig.json +4 -0
- package/templates/node-vite-plugin/tsup.config.ts +18 -0
- package/templates/node-workspaces/package.json +10 -0
- package/templates/react/index.html +14 -0
- package/templates/react/package.json +12 -0
- package/templates/react/public/vite.svg +1 -0
- package/templates/react/src/App.css +42 -0
- package/templates/react/src/App.tsx +32 -0
- package/templates/react/src/assets/react.svg +1 -0
- package/templates/react/src/index.css +69 -0
- package/templates/react/src/main.tsx +11 -0
- package/templates/react/src/vite-env.d.ts +1 -0
- package/templates/react/vite.config.ts +7 -0
- package/templates/schema.json +110 -0
- package/templates/vscode/.vscode/extensions.json +5 -0
- package/templates/vscode/.vscode/launch.json +21 -0
- package/templates/vscode/.vscode/settings.json +3 -0
- package/templates/vscode/.vscode/tasks.json +36 -0
- package/templates/vscode/.vscodeignore +72 -0
- package/templates/vscode/LICENSE +21 -0
- package/templates/vscode/README.md +3 -0
- package/templates/vscode/_gitignore +63 -0
- package/templates/vscode/locales/en.json +5 -0
- package/templates/vscode/locales/zh-CN.json +5 -0
- package/templates/vscode/locales/zh-TW.json +5 -0
- package/templates/vscode/package.json +57 -0
- package/templates/vscode/resources/logo.png +0 -0
- package/templates/vscode/src/index.ts +15 -0
- package/templates/vscode/tsconfig.json +5 -0
- package/templates/vscode/tsup.config.ts +13 -0
- package/templates/vscode-react/README.md +3 -0
- package/templates/vscode-react/index.html +14 -0
- package/templates/vscode-react/package.json +1 -0
- package/templates/vscode-react/src/App.css +7 -0
- package/templates/vscode-react/src/App.tsx +51 -0
- package/templates/vscode-react/src/main.tsx +9 -0
- package/templates/vscode-react/src/utils/index.ts +1 -0
- package/templates/vscode-react/src/utils/vscode.ts +83 -0
- package/templates/vscode-react/src/vite-env.d.ts +1 -0
- package/templates/vscode-react/vite.config.ts +20 -0
- package/templates/vscode-vue/README.md +3 -0
- package/templates/vscode-vue/index.html +14 -0
- package/templates/vscode-vue/package.json +6 -0
- package/templates/vscode-vue/src/App.vue +58 -0
- package/templates/vscode-vue/src/main.ts +4 -0
- package/templates/vscode-vue/src/utils/index.ts +1 -0
- package/templates/vscode-vue/src/utils/vscode.ts +83 -0
- package/templates/vscode-vue/src/vite-env.d.ts +1 -0
- package/templates/vscode-vue/vite.config.ts +29 -0
- package/templates/vue/electron/main/index.ts +123 -0
- package/templates/vue/index.html +14 -0
- package/templates/vue/package.json +12 -0
- package/templates/vue/public/vite.svg +1 -0
- package/templates/vue/src/App.vue +32 -0
- package/templates/vue/src/assets/vue.svg +1 -0
- package/templates/vue/src/components/HelloWorld.vue +37 -0
- package/templates/vue/src/main.ts +6 -0
- package/templates/vue/src/style.css +80 -0
- package/templates/vue/src/vite-env.d.ts +1 -0
- package/templates/vue/vite.config.ts +7 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vscode-extension",
|
|
3
|
+
"displayName": "%displayName%",
|
|
4
|
+
"description": "%description%",
|
|
5
|
+
"version": "0.0.0",
|
|
6
|
+
"publisher": "{{gitOrg}}",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"engines": {
|
|
9
|
+
"node": ">=14",
|
|
10
|
+
"vscode": "^1.56.0"
|
|
11
|
+
},
|
|
12
|
+
"main": "dist/index.js",
|
|
13
|
+
"keywords": [
|
|
14
|
+
"vscode"
|
|
15
|
+
],
|
|
16
|
+
"categories": [
|
|
17
|
+
"Other"
|
|
18
|
+
],
|
|
19
|
+
"activationEvents": [],
|
|
20
|
+
"contributes": {
|
|
21
|
+
"commands": [
|
|
22
|
+
{
|
|
23
|
+
"command": "tomjs.xxx.showHello",
|
|
24
|
+
"title": "%tomjs.commands.hello%",
|
|
25
|
+
"category": "%displayName%"
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "git+{{gitUrl}}.git"
|
|
32
|
+
},
|
|
33
|
+
"bugs": {
|
|
34
|
+
"url": "git+{{gitUrl}}/issues"
|
|
35
|
+
},
|
|
36
|
+
"homepage": "{{gitUrl}}/blob/main/README.md",
|
|
37
|
+
"icon": "resources/logo.png",
|
|
38
|
+
"vsce": {
|
|
39
|
+
"dependencies": false,
|
|
40
|
+
"yarn": false
|
|
41
|
+
},
|
|
42
|
+
"scripts": {
|
|
43
|
+
"dev": "run-p dev:*",
|
|
44
|
+
"dev:i18n": "vscode-dev i18n --watch",
|
|
45
|
+
"dev:dist": "tsup --watch",
|
|
46
|
+
"build": "vscode-dev i18n && tsup --minify"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@tomjs/node": "^2.1.0",
|
|
50
|
+
"@tomjs/vscode": "^2.0.1"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@tomjs/vscode-dev": "^1.2.3",
|
|
54
|
+
"@types/vscode": "^1.56.0",
|
|
55
|
+
"tsup": "^8.1.0"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { i18n, initExtension } from '@tomjs/vscode';
|
|
2
|
+
import type { ExtensionContext } from 'vscode';
|
|
3
|
+
import { commands, window } from 'vscode';
|
|
4
|
+
|
|
5
|
+
export function activate(context: ExtensionContext) {
|
|
6
|
+
initExtension(context);
|
|
7
|
+
|
|
8
|
+
context.subscriptions.push(
|
|
9
|
+
commands.registerCommand('tomjs.xxx.showHello', async () => {
|
|
10
|
+
window.showInformationMessage(i18n.t('tomjs.commands.hello'));
|
|
11
|
+
}),
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export function deactivate() {}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { defineConfig } from 'tsup';
|
|
2
|
+
|
|
3
|
+
export default defineConfig(options => {
|
|
4
|
+
return {
|
|
5
|
+
entry: ['src/index.ts'],
|
|
6
|
+
format: ['cjs'],
|
|
7
|
+
target: 'node14',
|
|
8
|
+
external: ['vscode'],
|
|
9
|
+
clean: true,
|
|
10
|
+
splitting: true,
|
|
11
|
+
sourcemap: !!options.watch,
|
|
12
|
+
};
|
|
13
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
|
7
|
+
<title>Vite + VSCode Extension + React</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<div id="app"></div>
|
|
12
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { VSCodeButton, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { vscode } from './utils/vscode';
|
|
4
|
+
|
|
5
|
+
import './App.css';
|
|
6
|
+
|
|
7
|
+
function App() {
|
|
8
|
+
function onPostMessage() {
|
|
9
|
+
vscode.postMessage({
|
|
10
|
+
command: 'hello',
|
|
11
|
+
text: 'Hey there partner! 🤠',
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const [message, setMessage] = useState('');
|
|
16
|
+
const [state, setState] = useState('');
|
|
17
|
+
|
|
18
|
+
const onSetState = () => {
|
|
19
|
+
vscode.setState(state);
|
|
20
|
+
};
|
|
21
|
+
const onGetState = () => {
|
|
22
|
+
setState(vscode.getState() as string);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<main>
|
|
27
|
+
<h1>Hello React!</h1>
|
|
28
|
+
<VSCodeButton onClick={onPostMessage}>Test VSCode Message</VSCodeButton>
|
|
29
|
+
<div>
|
|
30
|
+
<VSCodeTextField value={message} onInput={e => setMessage(e.target.value)}>
|
|
31
|
+
Please enter a message
|
|
32
|
+
</VSCodeTextField>
|
|
33
|
+
<div>Message is: {message}</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div>
|
|
36
|
+
<VSCodeTextField value={state} onInput={e => setState(e.target.value)}>
|
|
37
|
+
Please enter a state
|
|
38
|
+
</VSCodeTextField>
|
|
39
|
+
<div>State is: {state}</div>
|
|
40
|
+
<div>
|
|
41
|
+
<VSCodeButton onClick={onSetState}>setState</VSCodeButton>
|
|
42
|
+
<VSCodeButton style={{ marginLeft: '8px' }} onClick={onGetState}>
|
|
43
|
+
getState
|
|
44
|
+
</VSCodeButton>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</main>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default App;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './vscode';
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import type { WebviewApi } from 'vscode-webview';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* A utility wrapper around the acquireVsCodeApi() function, which enables
|
|
5
|
+
* message passing and state management between the webview and extension
|
|
6
|
+
* contexts.
|
|
7
|
+
*
|
|
8
|
+
* This utility also enables webview code to be run in a web browser-based
|
|
9
|
+
* dev server by using native web browser features that mock the functionality
|
|
10
|
+
* enabled by acquireVsCodeApi.
|
|
11
|
+
*/
|
|
12
|
+
class VSCodeAPIWrapper {
|
|
13
|
+
private readonly vsCodeApi: WebviewApi<unknown> | undefined;
|
|
14
|
+
|
|
15
|
+
constructor() {
|
|
16
|
+
// Check if the acquireVsCodeApi function exists in the current development
|
|
17
|
+
// context (i.e. VS Code development window or web browser)
|
|
18
|
+
if (typeof acquireVsCodeApi === 'function') {
|
|
19
|
+
this.vsCodeApi = acquireVsCodeApi();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// private init() {
|
|
24
|
+
// // TODO 环境变量判断
|
|
25
|
+
// }
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Post a message (i.e. send arbitrary data) to the owner of the webview.
|
|
29
|
+
*
|
|
30
|
+
* @remarks When running webview code inside a web browser, postMessage will instead
|
|
31
|
+
* log the given message to the console.
|
|
32
|
+
*
|
|
33
|
+
* @param message Abitrary data (must be JSON serializable) to send to the extension context.
|
|
34
|
+
*/
|
|
35
|
+
public postMessage(message: unknown) {
|
|
36
|
+
if (this.vsCodeApi) {
|
|
37
|
+
this.vsCodeApi.postMessage(message);
|
|
38
|
+
} else {
|
|
39
|
+
window.parent.postMessage({ type: 'page:message', data: message }, '*');
|
|
40
|
+
console.log(message);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Get the persistent state stored for this webview.
|
|
46
|
+
*
|
|
47
|
+
* @remarks When running webview source code inside a web browser, getState will retrieve state
|
|
48
|
+
* from local storage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
|
49
|
+
*
|
|
50
|
+
* @return The current state or `undefined` if no state has been set.
|
|
51
|
+
*/
|
|
52
|
+
public getState(): unknown | undefined {
|
|
53
|
+
if (this.vsCodeApi) {
|
|
54
|
+
return this.vsCodeApi.getState();
|
|
55
|
+
} else {
|
|
56
|
+
const state = localStorage.getItem('vscodeState');
|
|
57
|
+
return state ? JSON.parse(state) : undefined;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Set the persistent state stored for this webview.
|
|
63
|
+
*
|
|
64
|
+
* @remarks When running webview source code inside a web browser, setState will set the given
|
|
65
|
+
* state using local storage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
|
66
|
+
*
|
|
67
|
+
* @param newState New persisted state. This must be a JSON serializable object. Can be retrieved
|
|
68
|
+
* using {@link getState}.
|
|
69
|
+
*
|
|
70
|
+
* @return The new state.
|
|
71
|
+
*/
|
|
72
|
+
public setState<T extends unknown | undefined>(newState: T): T {
|
|
73
|
+
if (this.vsCodeApi) {
|
|
74
|
+
return this.vsCodeApi.setState(newState);
|
|
75
|
+
} else {
|
|
76
|
+
localStorage.setItem('vscodeState', JSON.stringify(newState));
|
|
77
|
+
return newState;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Exports class singleton to prevent multiple invocations of acquireVsCodeApi.
|
|
83
|
+
export const vscode = new VSCodeAPIWrapper();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import path from 'node:path';
|
|
2
|
+
import vscode from '@tomjs/vite-plugin-vscode';
|
|
3
|
+
import react from '@vitejs/plugin-react-swc';
|
|
4
|
+
import { defineConfig } from 'vite';
|
|
5
|
+
import pkg from './package.json';
|
|
6
|
+
|
|
7
|
+
// https://vitejs.dev/config/
|
|
8
|
+
export default defineConfig(() => {
|
|
9
|
+
process.env.APP_BUILD_TIME = Date.now() + '';
|
|
10
|
+
process.env.APP_VERSION = pkg.version;
|
|
11
|
+
|
|
12
|
+
return {
|
|
13
|
+
resolve: {
|
|
14
|
+
alias: {
|
|
15
|
+
'@': path.join(__dirname, 'src'),
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
plugins: [react(), vscode()],
|
|
19
|
+
};
|
|
20
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
|
7
|
+
<title>Vite + VSCode Extension + Vue</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<div id="app"></div>
|
|
12
|
+
<script type="module" src="/src/main.ts"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { allComponents, provideVSCodeDesignSystem } from '@vscode/webview-ui-toolkit';
|
|
3
|
+
import { ref } from 'vue';
|
|
4
|
+
import { vscode } from './utils';
|
|
5
|
+
|
|
6
|
+
provideVSCodeDesignSystem().register(allComponents);
|
|
7
|
+
|
|
8
|
+
function onPostMessage() {
|
|
9
|
+
vscode.postMessage({
|
|
10
|
+
command: 'hello',
|
|
11
|
+
text: 'Hey there partner! 🤠',
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const message = ref('');
|
|
16
|
+
const state = ref('');
|
|
17
|
+
|
|
18
|
+
const onSetState = () => {
|
|
19
|
+
vscode.setState(state.value);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const onGetState = () => {
|
|
23
|
+
state.value = vscode.getState() as string;
|
|
24
|
+
};
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<main>
|
|
29
|
+
<h1>Hello Vue!</h1>
|
|
30
|
+
<vscode-button @click="onPostMessage">Test VSCode Message</vscode-button>
|
|
31
|
+
<div>
|
|
32
|
+
<vscode-text-field :value="message" @input="e => (message = e.target.value)">
|
|
33
|
+
Please enter a message
|
|
34
|
+
</vscode-text-field>
|
|
35
|
+
<div>Message is: {{ message }}</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div>
|
|
38
|
+
<vscode-text-field :value="state" @input="e => (state = e.target.value)">
|
|
39
|
+
Please enter a state
|
|
40
|
+
</vscode-text-field>
|
|
41
|
+
<div>State is: {{ state }}</div>
|
|
42
|
+
<div>
|
|
43
|
+
<vscode-button @click="onSetState">setState</vscode-button>
|
|
44
|
+
<vscode-button style="margin-left: 8px" @click="onGetState">getState</vscode-button>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</main>
|
|
48
|
+
</template>
|
|
49
|
+
|
|
50
|
+
<style>
|
|
51
|
+
main {
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
align-items: flex-start;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
height: 100%;
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './vscode';
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import type { WebviewApi } from 'vscode-webview';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* A utility wrapper around the acquireVsCodeApi() function, which enables
|
|
5
|
+
* message passing and state management between the webview and extension
|
|
6
|
+
* contexts.
|
|
7
|
+
*
|
|
8
|
+
* This utility also enables webview code to be run in a web browser-based
|
|
9
|
+
* dev server by using native web browser features that mock the functionality
|
|
10
|
+
* enabled by acquireVsCodeApi.
|
|
11
|
+
*/
|
|
12
|
+
class VSCodeAPIWrapper {
|
|
13
|
+
private readonly vsCodeApi: WebviewApi<unknown> | undefined;
|
|
14
|
+
|
|
15
|
+
constructor() {
|
|
16
|
+
// Check if the acquireVsCodeApi function exists in the current development
|
|
17
|
+
// context (i.e. VS Code development window or web browser)
|
|
18
|
+
if (typeof acquireVsCodeApi === 'function') {
|
|
19
|
+
this.vsCodeApi = acquireVsCodeApi();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// private init() {
|
|
24
|
+
// // TODO 环境变量判断
|
|
25
|
+
// }
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Post a message (i.e. send arbitrary data) to the owner of the webview.
|
|
29
|
+
*
|
|
30
|
+
* @remarks When running webview code inside a web browser, postMessage will instead
|
|
31
|
+
* log the given message to the console.
|
|
32
|
+
*
|
|
33
|
+
* @param message Abitrary data (must be JSON serializable) to send to the extension context.
|
|
34
|
+
*/
|
|
35
|
+
public postMessage(message: unknown) {
|
|
36
|
+
if (this.vsCodeApi) {
|
|
37
|
+
this.vsCodeApi.postMessage(message);
|
|
38
|
+
} else {
|
|
39
|
+
window.parent.postMessage({ type: 'page:message', data: message }, '*');
|
|
40
|
+
console.log(message);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Get the persistent state stored for this webview.
|
|
46
|
+
*
|
|
47
|
+
* @remarks When running webview source code inside a web browser, getState will retrieve state
|
|
48
|
+
* from local storage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
|
49
|
+
*
|
|
50
|
+
* @return The current state or `undefined` if no state has been set.
|
|
51
|
+
*/
|
|
52
|
+
public getState(): unknown | undefined {
|
|
53
|
+
if (this.vsCodeApi) {
|
|
54
|
+
return this.vsCodeApi.getState();
|
|
55
|
+
} else {
|
|
56
|
+
const state = localStorage.getItem('vscodeState');
|
|
57
|
+
return state ? JSON.parse(state) : undefined;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Set the persistent state stored for this webview.
|
|
63
|
+
*
|
|
64
|
+
* @remarks When running webview source code inside a web browser, setState will set the given
|
|
65
|
+
* state using local storage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
|
66
|
+
*
|
|
67
|
+
* @param newState New persisted state. This must be a JSON serializable object. Can be retrieved
|
|
68
|
+
* using {@link getState}.
|
|
69
|
+
*
|
|
70
|
+
* @return The new state.
|
|
71
|
+
*/
|
|
72
|
+
public setState<T extends unknown | undefined>(newState: T): T {
|
|
73
|
+
if (this.vsCodeApi) {
|
|
74
|
+
return this.vsCodeApi.setState(newState);
|
|
75
|
+
} else {
|
|
76
|
+
localStorage.setItem('vscodeState', JSON.stringify(newState));
|
|
77
|
+
return newState;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Exports class singleton to prevent multiple invocations of acquireVsCodeApi.
|
|
83
|
+
export const vscode = new VSCodeAPIWrapper();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import path from 'node:path';
|
|
2
|
+
import vscode from '@tomjs/vite-plugin-vscode';
|
|
3
|
+
import vue from '@vitejs/plugin-vue';
|
|
4
|
+
import { defineConfig } from 'vite';
|
|
5
|
+
import pkg from './package.json';
|
|
6
|
+
|
|
7
|
+
// https://vitejs.dev/config/
|
|
8
|
+
export default defineConfig(() => {
|
|
9
|
+
process.env.APP_BUILD_TIME = Date.now() + '';
|
|
10
|
+
process.env.APP_VERSION = pkg.version;
|
|
11
|
+
|
|
12
|
+
return {
|
|
13
|
+
resolve: {
|
|
14
|
+
alias: {
|
|
15
|
+
'@': path.join(__dirname, 'src'),
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
plugins: [
|
|
19
|
+
vue({
|
|
20
|
+
template: {
|
|
21
|
+
compilerOptions: {
|
|
22
|
+
isCustomElement: (tag: string) => tag.startsWith('vscode-'),
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
}),
|
|
26
|
+
vscode(),
|
|
27
|
+
],
|
|
28
|
+
};
|
|
29
|
+
});
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import '../polyfills';
|
|
2
|
+
|
|
3
|
+
import { release } from 'node:os';
|
|
4
|
+
import { join } from 'node:path';
|
|
5
|
+
import { app, BrowserWindow, ipcMain, shell } from 'electron';
|
|
6
|
+
|
|
7
|
+
// Disable GPU Acceleration for Windows 7
|
|
8
|
+
if (release().startsWith('6.1')) app.disableHardwareAcceleration();
|
|
9
|
+
|
|
10
|
+
// Set application name for Windows 10+ notifications
|
|
11
|
+
if (process.platform === 'win32') app.setAppUserModelId(app.getName());
|
|
12
|
+
|
|
13
|
+
if (!app.requestSingleInstanceLock()) {
|
|
14
|
+
app.quit();
|
|
15
|
+
process.exit(0);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Remove electron security warnings
|
|
19
|
+
// This warning only shows in development mode
|
|
20
|
+
// Read more on https://www.electronjs.org/docs/latest/tutorial/security
|
|
21
|
+
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
|
|
22
|
+
|
|
23
|
+
const isDev = process.env.NODE_ENV === 'development';
|
|
24
|
+
|
|
25
|
+
let win: BrowserWindow | null = null;
|
|
26
|
+
// package.json "type":"module", must use mjs extension
|
|
27
|
+
const preload = join(__dirname, '../preload/index.mjs');
|
|
28
|
+
const serverUrl = process.env.VITE_DEV_SERVER_URL as string;
|
|
29
|
+
const rendererDist = join(__dirname, '../renderer');
|
|
30
|
+
const indexHtml = join(rendererDist, 'index.html');
|
|
31
|
+
const publicPath = serverUrl ? join(__dirname, '../../public') : rendererDist;
|
|
32
|
+
|
|
33
|
+
function createWindow() {
|
|
34
|
+
win = new BrowserWindow({
|
|
35
|
+
title: 'Main window',
|
|
36
|
+
width: 800,
|
|
37
|
+
height: 700,
|
|
38
|
+
icon: join(publicPath, 'img/icon.png'),
|
|
39
|
+
webPreferences: {
|
|
40
|
+
preload,
|
|
41
|
+
// Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
|
|
42
|
+
// Consider using contextBridge.exposeInMainWorld
|
|
43
|
+
// Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
|
|
44
|
+
nodeIntegration: true,
|
|
45
|
+
contextIsolation: false,
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
if (isDev) {
|
|
50
|
+
win.loadURL(serverUrl);
|
|
51
|
+
// Open devTool if the app is not packaged
|
|
52
|
+
win.webContents.openDevTools();
|
|
53
|
+
} else {
|
|
54
|
+
win.loadFile(indexHtml);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Test actively push message to the Electron-Renderer
|
|
58
|
+
win.webContents.on('did-finish-load', () => {
|
|
59
|
+
win?.webContents.send('main-process-message', new Date().toLocaleString());
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
// Make all links open with the browser, not with the application
|
|
63
|
+
win.webContents.setWindowOpenHandler(({ url }) => {
|
|
64
|
+
if (url.startsWith('https:')) shell.openExternal(url);
|
|
65
|
+
return { action: 'deny' };
|
|
66
|
+
});
|
|
67
|
+
// win.webContents.on('will-navigate', (event, url) => { }) #344
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
app.whenReady().then(async () => {
|
|
71
|
+
createWindow();
|
|
72
|
+
|
|
73
|
+
if (isDev) {
|
|
74
|
+
const { installExtension, VUEJS_DEVTOOLS } = await import('@tomjs/electron-devtools-installer');
|
|
75
|
+
|
|
76
|
+
installExtension(VUEJS_DEVTOOLS)
|
|
77
|
+
.then(ext => {
|
|
78
|
+
console.log('Added Extension: ', ext.name);
|
|
79
|
+
})
|
|
80
|
+
.catch(() => {
|
|
81
|
+
console.log('Failed to install extensions');
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
app.on('window-all-closed', () => {
|
|
87
|
+
win = null;
|
|
88
|
+
if (process.platform !== 'darwin') app.quit();
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
app.on('second-instance', () => {
|
|
92
|
+
if (win) {
|
|
93
|
+
// Focus on the main window if the user tried to open another
|
|
94
|
+
if (win.isMinimized()) win.restore();
|
|
95
|
+
win.focus();
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
app.on('activate', () => {
|
|
100
|
+
const allWindows = BrowserWindow.getAllWindows();
|
|
101
|
+
if (allWindows.length) {
|
|
102
|
+
allWindows[0].focus();
|
|
103
|
+
} else {
|
|
104
|
+
createWindow();
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
// New window example arg: new windows url
|
|
109
|
+
ipcMain.handle('open-win', (_, arg) => {
|
|
110
|
+
const childWindow = new BrowserWindow({
|
|
111
|
+
webPreferences: {
|
|
112
|
+
preload,
|
|
113
|
+
nodeIntegration: true,
|
|
114
|
+
contextIsolation: false,
|
|
115
|
+
},
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
if (serverUrl) {
|
|
119
|
+
childWindow.loadURL(`${serverUrl}#${arg}`);
|
|
120
|
+
} else {
|
|
121
|
+
childWindow.loadFile(indexHtml, { hash: arg });
|
|
122
|
+
}
|
|
123
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + Vue</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<div id="app"></div>
|
|
12
|
+
<script type="module" src="/src/main.ts"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|