├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .vscode
├── extensions.json
├── launch.json
├── settings.json
└── tasks.json
├── .vscodeignore
├── LICENSE
├── README.md
├── assets
└── helloworld-screenshot.png
├── docs
├── extension-commands.md
├── extension-development-cycle.md
├── extension-structure.md
└── icon.png
├── package-lock.json
├── package.json
├── src
├── extension.ts
├── panels
│ ├── README.md
│ └── TokensPanel.ts
└── utilities
│ └── getUri.ts
├── tsconfig.json
├── webview-ui
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── components
│ │ └── swatch.tsx
│ ├── index.tsx
│ ├── utilities
│ │ ├── helpers.ts
│ │ └── vscode.ts
│ └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
└── yarn.lock
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "@typescript-eslint/parser",
4 | "parserOptions": {
5 | "ecmaVersion": 6,
6 | "sourceType": "module"
7 | },
8 | "plugins": ["@typescript-eslint"],
9 | "rules": {
10 | "@typescript-eslint/naming-convention": "warn",
11 | "@typescript-eslint/semi": "warn",
12 | "curly": "warn",
13 | "eqeqeq": "warn",
14 | "no-throw-literal": "warn",
15 | "semi": "off"
16 | },
17 | "ignorePatterns": ["webview-ui/**"]
18 | }
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | out
3 | *.vsix
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | /.pnp
4 | .pnp.js
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 | /dist
12 |
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "tabWidth": 2,
4 | "useTabs": false,
5 | "semi": true,
6 | "singleQuote": false,
7 | "quoteProps": "consistent",
8 | "jsxSingleQuote": false,
9 | "trailingComma": "es5",
10 | "bracketSpacing": true,
11 | "jsxBracketSameLine": true,
12 | "arrowParens": "always"
13 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // See http://go.microsoft.com/fwlink/?LinkId=827846
3 | // for the documentation about the extensions.json format
4 | "recommendations": [
5 | "dbaeumer.vscode-eslint"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | // A launch configuration that compiles the extension and then opens it inside a new window
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | {
6 | "version": "0.2.0",
7 | "configurations": [
8 | {
9 | "name": "Run Extension",
10 | "type": "extensionHost",
11 | "request": "launch",
12 | "args": [
13 | "--extensionDevelopmentPath=${workspaceFolder}"
14 | ],
15 | "outFiles": [
16 | "${workspaceFolder}/out/**/*.js"
17 | ],
18 | "preLaunchTask": "${defaultBuildTask}"
19 | },
20 | {
21 | "name": "Extension Tests",
22 | "type": "extensionHost",
23 | "request": "launch",
24 | "args": [
25 | "--extensionDevelopmentPath=${workspaceFolder}",
26 | "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
27 | ],
28 | "outFiles": [
29 | "${workspaceFolder}/out/test/**/*.js"
30 | ],
31 | "preLaunchTask": "${defaultBuildTask}"
32 | }
33 | ]
34 | }
35 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "files.exclude": {
4 | "out": false // set this to true to hide the "out" folder with the compiled JS files
5 | },
6 | "search.exclude": {
7 | "out": true // set this to false to include "out" folder in search results
8 | },
9 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
10 | "typescript.tsc.autoDetect": "off"
11 | }
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | // See https://go.microsoft.com/fwlink/?LinkId=733558
2 | // for the documentation about the tasks.json format
3 | {
4 | "version": "2.0.0",
5 | "tasks": [
6 | {
7 | "type": "npm",
8 | "script": "watch",
9 | "problemMatcher": "$tsc-watch",
10 | "isBackground": true,
11 | "presentation": {
12 | "reveal": "never"
13 | },
14 | "group": {
15 | "kind": "build",
16 | "isDefault": true
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
1 | # This file contains all the files/directories that should
2 | # be ignored (i.e. not included) in the final packaged extension.
3 |
4 | # Ignore extension configs
5 | .vscode/**
6 |
7 | # Ignore test files
8 | .vscode-test/**
9 | out/test/**
10 |
11 | # Ignore source code
12 | src/**
13 |
14 | # Ignore all webview-ui files except the build directory
15 | webview-ui/src/**
16 | webview-ui/public/**
17 | webview-ui/scripts/**
18 | webview-ui/index.html
19 | webview-ui/README.md
20 | webview-ui/package.json
21 | webview-ui/package-lock.json
22 | webview-ui/node_modules/**
23 |
24 | # Ignore Misc
25 | .yarnrc
26 | vsc-extension-quickstart.md
27 | **/.gitignore
28 | **/tsconfig.json
29 | **/vite.config.ts
30 | **/.eslintrc.json
31 | **/*.map
32 | **/*.ts
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 GitHub Next
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Spectrum
2 |
3 | This is a VSCode extension (webview) that helps you find and copy a VSCode theme CSS variable quickly and easily! No more messing around with the Chrome dev tools – fire up this webview and find what you're looking for, fast.
4 |
5 | 
6 |
7 | ## Usage
8 | Once installed, open the webview by invoking the **Spectrum: Show theme tokens** command from the command palette.
9 |
10 | 
11 |
12 | Once the webview is open, filter the grid of swatches via the text field at the top of the screen. To copy a value, click a swatch and the VSCode quickpick UI will pop up. From there you can copy either the:
13 | - Fully qualified CSS variable
14 | - Raw CSS variable name
15 | - Hex/RGB value
16 |
17 | 
18 |
19 |
20 | ## Local Development
21 |
22 | ### Dependencies
23 |
24 | ```bash
25 | # Install dependencies for both the extension and webview UI source code
26 | npm run install:all
27 |
28 | # Build webview UI source code
29 | npm run build:webview
30 |
31 | # Open sample in VS Code
32 | code .
33 | ```
34 |
35 | ### Running the extension
36 | Once the extension is open inside VS Code you can run the extension by doing the following:
37 |
38 | 1. Press `F5` to open a new Extension Development Host window
39 | 2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Spectrum: Show theme tokens`
40 |
--------------------------------------------------------------------------------
/assets/helloworld-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/githubnext/spectrum/021de6ef365faa7dbb8f003dcb2a3674921440c1/assets/helloworld-screenshot.png
--------------------------------------------------------------------------------
/docs/extension-commands.md:
--------------------------------------------------------------------------------
1 | # Extension commands
2 |
3 | A quick run down of some of the important commands that can be run when at the root of the project.
4 |
5 | ```
6 | npm run install:all Install package dependencies for both the extension and React webview source code.
7 | npm run start:webview Runs the React webview source code in development mode. Open http://localhost:3000 to view it in the browser.
8 | npm run build:webview Build React webview source code. Must be executed before compiling or running the extension.
9 | npm run compile Compile VS Code extension
10 | ```
11 |
--------------------------------------------------------------------------------
/docs/extension-development-cycle.md:
--------------------------------------------------------------------------------
1 | # Extension development cycle
2 |
3 | The intended development cycle of this React-based webview extension is slightly different than that of other VS Code extensions.
4 |
5 | Due to the fact that the `webview-ui` directory holds a self-contained React application we get to take advantage of some of the perks that that enables. In particular,
6 |
7 | - UI development and iteration cycles can happen much more quickly by using Vite
8 | - Dependency management and project configuration is hugely simplified
9 |
10 | ## UI development cycle
11 |
12 | Since we can take advantage of the much faster Vite dev server, it is encouraged to begin developing webview UI by running the `npm run start:webview` command and then editing the code in the `webview-ui/src` directory.
13 |
14 | _Tip: Open the command palette and run the `Simple Browser` command and fill in `http://localhost:3000/` when prompted. This will open a simple browser environment right inside VS Code._
15 |
16 | ### Message passing
17 | If you need to implement message passing between the webview context and extension context via the VS Code API, a helpful utility is provided in the `webview-ui/src/utilities/vscode.ts` file.
18 |
19 | This file contains a utility wrapper around the `acquireVsCodeApi()` function, which enables message passing and state management between the webview and extension contexts.
20 |
21 | This utility also enables webview code to be run in the Vite dev server by using native web browser features that mock the functionality enabled by acquireVsCodeApi. This means you can keep building your webview UI with the Vite dev server even when using the VS Code API.
22 |
23 | ### Move to traditional extension development
24 | Once you're ready to start building other parts of your extension, simply shift to a development model where you run the `npm run build:webview` command as you make changes, press `F5` to compile your extension and open a new Extension Development Host window. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Hello World`.
25 |
26 | ## Dependency management and project configuration
27 |
28 | As mentioned above, the `webview-ui` directory holds a self-contained and isolated React application meaning you can (for the most part) treat the development of your webview UI in the same way you would treat the development of a regular React application.
29 |
30 | To install webview-specific dependencies simply navigate (i.e. `cd`) into the `webview-ui` directory and install any packages you need or set up any React specific configurations you want.
31 |
--------------------------------------------------------------------------------
/docs/extension-structure.md:
--------------------------------------------------------------------------------
1 | # Extension structure
2 |
3 | This section provides a quick introduction into how this sample extension is organized and structured.
4 |
5 | The two most important directories to take note of are the following:
6 |
7 | - `src`: Contains all of the extension source code
8 | - `webview-ui`: Contains all of the webview UI source code
9 |
10 | ## `src` directory
11 |
12 | The `src` directory contains all of the extension-related source code and can be thought of as containing the "backend" code/logic for the entire extension. Inside of this directory you'll find the:
13 |
14 | - `panels` directory
15 | - `utilities` directory
16 | - `extension.ts` file
17 |
18 | The `panels` directory contains all of the webview-related code that will be executed within the extension context. It can be thought of as the place where all of the "backend" code for each webview panel is contained.
19 |
20 | This directory will typically contain individual TypeScript or JavaScript files that contain a class which manages the state and behavior of a given webview panel. Each class is usually in charge of:
21 |
22 | - Creating and rendering the webview panel
23 | - Properly cleaning up and disposing of webview resources when the panel is closed
24 | - Setting message listeners so data can be passed between the webview and extension
25 | - Setting the initial HTML markdown of the webview panel
26 | - Other custom logic and behavior related to webview panel management
27 |
28 | As the name might suggest, the `utilties` directory contains all of the extension utility functions that make setting up and managing an extension easier. In this case, it contains `getUri.ts` which contains a helper function which will get the webview URI of a given file or resource.
29 |
30 | Finally, `extension.ts` is where all the logic for activating and deactiving the extension usually live. This is also the place where extension commands are registered.
31 |
32 | ## `webview-ui` directory
33 |
34 | The `webview-ui` directory contains all of the React-based webview source code and can be thought of as containing the "frontend" code/logic for the extension webview.
35 |
36 | This directory is special because it contains a full-blown React application which was created using the TypeScript [Vite](https://vitejs.dev/) template. As a result, `webview-ui` contains its own `package.json`, `node_modules`, `tsconfig.json`, and so on––separate from the `hello-world` extension in the root directory.
37 |
38 | This strays a bit from other extension structures, in that you'll usually find the extension and webview dependencies, configurations, and source code more closely integrated or combined with each other.
39 |
40 | However, in this case, there are some unique benefits and reasons for why this sample extension does not follow those patterns such as easier management of conflicting dependencies and configurations, as well as the ability to use the Vite dev server, which drastically improves the speed of developing your webview UI, versus recompiling your extension code every time you make a change to the webview.
41 |
--------------------------------------------------------------------------------
/docs/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/githubnext/spectrum/021de6ef365faa7dbb8f003dcb2a3674921440c1/docs/icon.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "spectrum",
3 | "displayName": "Spectrum",
4 | "publisher": "githubocto",
5 | "description": "An extension that helps you quickly find and copy a VSCode theme token or underlying color value.",
6 | "version": "0.3.0",
7 | "engines": {
8 | "vscode": "^1.46.0"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/githubnext/spectrum"
13 | },
14 | "icon": "docs/icon.png",
15 | "categories": [
16 | "Other"
17 | ],
18 | "activationEvents": [
19 | "onCommand:spectrum.showTokens"
20 | ],
21 | "main": "./out/extension.js",
22 | "contributes": {
23 | "commands": [
24 | {
25 | "command": "spectrum.showTokens",
26 | "title": "Show theme tokens",
27 | "category": "Spectrum",
28 | "icon": "$(paintcan)"
29 | }
30 | ]
31 | },
32 | "scripts": {
33 | "install:all": "npm install && npm --prefix ./webview-ui install ./webview-ui",
34 | "start:webview": "npm --prefix ./webview-ui run start",
35 | "build:webview": "npm --prefix ./webview-ui run build",
36 | "vscode:prepublish": "npm run compile && npm run build:webview",
37 | "compile": "tsc -p ./",
38 | "watch": "tsc -watch -p ./",
39 | "pretest": "npm run compile && npm run lint",
40 | "lint": "eslint src --ext ts"
41 | },
42 | "devDependencies": {
43 | "@types/glob": "^7.1.3",
44 | "@types/node": "^12.11.7",
45 | "@types/vscode": "^1.46.0",
46 | "@typescript-eslint/eslint-plugin": "^4.14.1",
47 | "@typescript-eslint/parser": "^4.14.1",
48 | "eslint": "^7.19.0",
49 | "glob": "^7.1.6",
50 | "prettier": "^2.2.1",
51 | "typescript": "^4.1.3",
52 | "vscode-test": "^1.5.0"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
1 | import { commands, ExtensionContext, workspace } from "vscode";
2 | import { TokensPanel } from "./panels/TokensPanel";
3 |
4 | export function activate(context: ExtensionContext) {
5 | const showTokensCommand = commands.registerCommand("spectrum.showTokens", () => {
6 | TokensPanel.render(context);
7 | });
8 |
9 | context.subscriptions.push(showTokensCommand);
10 |
11 | const themeChangeHandler = workspace.onDidChangeConfiguration((e) => {
12 | if (e.affectsConfiguration("workbench.colorTheme")) {
13 | TokensPanel.triggerUpdate();
14 | }
15 | });
16 |
17 | context.subscriptions.push(themeChangeHandler);
18 | }
19 |
--------------------------------------------------------------------------------
/src/panels/README.md:
--------------------------------------------------------------------------------
1 | # `panels` Directory
2 |
3 | This directory contains all of the webview-related code that will be executed within the extension context. It can be thought of as the place where all of the "backend" code of a webview panel is contained.
4 |
5 | Types of content that can be contained here:
6 |
7 | Individual JavaScript / TypeScript files that contain a class which manages the state and behavior of a given webview panel. Each class is usually in charge of:
8 |
9 | - Creating and rendering the webview panel
10 | - Properly cleaning up and disposing of webview resources when the panel is closed
11 | - Setting message listeners so data can be passed between the webview and extension
12 | - Setting the HTML (and by proxy CSS/JavaScript) content of the webview panel
13 | - Other custom logic and behavior related to webview panel management
14 |
--------------------------------------------------------------------------------
/src/panels/TokensPanel.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Disposable,
3 | env,
4 | ExtensionContext,
5 | ViewColumn,
6 | Webview,
7 | WebviewPanel,
8 | window,
9 | } from "vscode";
10 | import { getUri } from "../utilities/getUri";
11 |
12 | export class TokensPanel {
13 | public static currentPanel: TokensPanel | undefined;
14 | private readonly _panel: WebviewPanel;
15 | private _disposables: Disposable[] = [];
16 |
17 | /**
18 | * The HelloWorldPanel class private constructor (called only from the render method).
19 | *
20 | * @param panel A reference to the webview panel
21 | * @param extensionUri The URI of the directory containing the extension
22 | */
23 | private constructor(panel: WebviewPanel, context: ExtensionContext) {
24 | this._panel = panel;
25 |
26 | // Set an event listener to listen for when the panel is disposed (i.e. when the user closes
27 | // the panel or when the panel is closed programmatically)
28 | this._panel.onDidDispose(this.dispose, null, this._disposables);
29 |
30 | // Set the HTML content for the webview panel
31 | this._panel.webview.html = this._getWebviewContent(this._panel.webview, context);
32 |
33 | // Set an event listener to listen for messages passed from the webview context
34 | this._setWebviewMessageListener(this._panel.webview);
35 | }
36 |
37 | public static triggerUpdate() {
38 | if (TokensPanel.currentPanel) {
39 | TokensPanel.currentPanel._panel.webview.postMessage({
40 | command: "updateTheme",
41 | });
42 | }
43 | }
44 |
45 | /**
46 | * Renders the current webview panel if it exists otherwise a new webview panel
47 | * will be created and displayed.
48 | *
49 | * @param extensionUri The URI of the directory containing the extension.
50 | */
51 | public static render(context: ExtensionContext) {
52 | if (TokensPanel.currentPanel) {
53 | // If the webview panel already exists reveal it
54 | TokensPanel.currentPanel._panel.reveal(ViewColumn.One);
55 | } else {
56 | // If a webview panel does not already exist create and show a new one
57 | const panel = window.createWebviewPanel(
58 | // Panel view type
59 | "tokensPanel",
60 | // Panel title
61 | "Spectrum 🌈",
62 | // The editor column the panel should be displayed in
63 | ViewColumn.One,
64 | // Extra panel configurations
65 | {
66 | // Enable JavaScript in the webview
67 | enableScripts: true,
68 | }
69 | );
70 |
71 | TokensPanel.currentPanel = new TokensPanel(panel, context);
72 | }
73 | }
74 |
75 | /**
76 | * Cleans up and disposes of webview resources when the webview panel is closed.
77 | */
78 | public dispose() {
79 | TokensPanel.currentPanel = undefined;
80 |
81 | // Dispose of the current webview panel
82 | this._panel.dispose();
83 |
84 | // Dispose of all disposables (i.e. commands) for the current webview panel
85 | while (this._disposables.length) {
86 | const disposable = this._disposables.pop();
87 | if (disposable) {
88 | disposable.dispose();
89 | }
90 | }
91 | }
92 |
93 | /**
94 | * Defines and returns the HTML that should be rendered within the webview panel.
95 | *
96 | * @remarks This is also the place where references to the React webview build files
97 | * are created and inserted into the webview HTML.
98 | *
99 | * @param webview A reference to the extension webview
100 | * @param extensionUri The URI of the directory containing the extension
101 | * @returns A template string literal containing the HTML that should be
102 | * rendered within the webview panel
103 | */
104 | private _getWebviewContent(webview: Webview, context: ExtensionContext) {
105 | const extensionUri = context.extensionUri;
106 | const stylesUri = getUri(webview, extensionUri, ["webview-ui", "build", "assets", "index.css"]);
107 | const scriptUri = getUri(webview, extensionUri, ["webview-ui", "build", "assets", "index.js"]);
108 |
109 | // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
110 | return /*html*/ `
111 |
112 |
113 |