first version

.gitignore

@@ -0,0 +1,5 @@
+out
+dist
+node_modules
+.vscode-test/
+*.vsix

.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers", "ms-vscode.extension-test-runner"]
+}

.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": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,64 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+            "label": "watch",
+            "dependsOn": [
+                "npm: watch:tsc",
+                "npm: watch:esbuild"
+            ],
+            "presentation": {
+                "reveal": "never"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        },
+        {
+            "type": "npm",
+            "script": "watch:esbuild",
+            "group": "build",
+            "problemMatcher": "$esbuild-watch",
+            "isBackground": true,
+            "label": "npm: watch:esbuild",
+            "presentation": {
+                "group": "watch",
+                "reveal": "never"
+            }
+        },
+		{
+            "type": "npm",
+            "script": "watch:tsc",
+            "group": "build",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "label": "npm: watch:tsc",
+            "presentation": {
+                "group": "watch",
+                "reveal": "never"
+            }
+        },
+		{
+			"type": "npm",
+			"script": "watch-tests",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": "build"
+		},
+		{
+			"label": "tasks: watch-tests",
+			"dependsOn": [
+				"npm: watch",
+				"npm: watch-tests"
+			],
+			"problemMatcher": []
+		}
+	]
+}

.vscodeignore

@@ -0,0 +1,14 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+esbuild.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/eslint.config.mjs
+**/*.map
+**/*.ts
+**/.vscode-test.*

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "regexcutor" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

README.md

@@ -0,0 +1,9 @@
+# regexcutor README
+正则表达式测试器
+
+## Features
+1. 测试正则表达式
+2. 显示匹配结果和可能的捕获组
+3. 支持存储表达式。
+
+正则表达式会被存储在<homeDir>/.vscode/regexp.json中。

esbuild.js

@@ -0,0 +1,56 @@
+const esbuild = require("esbuild");
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(`    ${location.file}:${location.line}:${location.column}:`);
+			});
+			console.log('[watch] build finished');
+		});
+	},
+};
+
+async function main() {
+	const ctx = await esbuild.context({
+		entryPoints: [
+			'src/extension.ts'
+		],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production,
+		sourcesContent: false,
+		platform: 'node',
+		outfile: 'dist/extension.js',
+		external: ['vscode'],
+		logLevel: 'silent',
+		plugins: [
+			/* add to the end of plugins array */
+			esbuildProblemMatcherPlugin,
+		],
+	});
+	if (watch) {
+		await ctx.watch();
+	} else {
+		await ctx.rebuild();
+		await ctx.dispose();
+	}
+}
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});

eslint.config.mjs

@@ -0,0 +1,28 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [{
+    files: ["**/*.ts"],
+}, {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 2022,
+        sourceType: "module",
+    },
+
+    rules: {
+        "@typescript-eslint/naming-convention": ["warn", {
+            selector: "import",
+            format: ["camelCase", "PascalCase"],
+        }],
+
+        curly: "warn",
+        eqeqeq: "warn",
+        "no-throw-literal": "warn",
+        semi: "warn",
+    },
+}];

media/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="zh" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script src="##ROOT##/regulex.js"></script>
+    <script>
+      window.regv = {}
+      window.addEventListener('DOMContentLoaded', function () {
+        regv.raphael = require('regulex').Raphael
+        regv.parse = require('regulex').parse
+        regv.visualize = require('regulex').visualize
+        regv.Kit = require('regulex').Kit
+      })
+      function vizregx(dom, reg) {
+        var ret
+        try {
+          ret = regv.parse(reg)
+          paper = regv.raphael(dom, 10, 10)
+        } catch (e) {
+          if (e instanceof parse.RegexSyntaxError) {
+            console.error(e)
+          } else throw e
+          return false
+        }
+        regv.visualize(ret, 'g', paper)
+        return true
+      }
+    </script>
+    <script type="module" crossorigin src="##ROOT##/assets/index-CyTPj2TZ.js"></script>
+    <link rel="stylesheet" crossorigin href="##ROOT##/assets/index-CB3UX-ss.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

media/regexcutor.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <!-- 定义渐变 -->
+  <defs>
+    <linearGradient id="rainbowGradient" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="15%" stop-color="orange" />
+      <stop offset="30%" stop-color="yellow" />
+      <stop offset="45%" stop-color="green" />
+      <stop offset="60%" stop-color="blue" />
+      <stop offset="75%" stop-color="indigo" />
+      <stop offset="100%" stop-color="violet" />
+    </linearGradient>
+  </defs>
+
+  <!-- 使用文本绘制字母 R -->
+  <text x="10" y="60" font-size="60" font-family="Arial" fill="url(#rainbowGradient)">R</text>
+</svg>

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "regexcutor",
+  "displayName": "RegExcutor",
+  "description": "正则表达式工具",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.97.0"
+  },
+  "publisher": "elfcheng",
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "commands":[
+      {
+        "command": "regexcutor.delete",
+        "title": "删除"
+      }
+    ],
+    "menus": {
+      "view/item/context": [
+        {
+          "command": "regexcutor.delete",
+          "when": "view == regexcutor.list",
+          "group": "navigation"
+        }
+      ]
+    },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "regexcutor",
+          "title": "RegExcutor",
+          "icon": "media/regexcutor.svg"
+        }
+      ]
+    },
+    "views": {
+      "regexcutor": [
+        {
+          "id": "regexcutor.excutor",
+          "name": "正则测试器",
+          "type": "webview"
+        },
+        {
+          "id": "regexcutor.list",
+          "name": "常用正则",
+          "type": "tree"
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run package",
+    "compile": "npm run check-types && npm run lint && node esbuild.js",
+    "watch": "npm-run-all -p watch:*",
+    "watch:esbuild": "node esbuild.js --watch",
+    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
+    "package": "npm run check-types && npm run lint && node esbuild.js --production",
+    "compile-tests": "tsc -p . --outDir out",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "npm run compile-tests && npm run compile && npm run lint",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vscode-test"
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.97.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "20.x",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
+    "eslint": "^9.19.0",
+    "esbuild": "^0.24.2",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^5.7.3",
+    "@vscode/test-cli": "^0.0.10",
+    "@vscode/test-electron": "^2.4.1"
+  }
+}

src/excutor.view.ts

@@ -0,0 +1,54 @@
+import * as vscode from "vscode";
+import * as path from "path";
+import * as fs from "fs";
+import { RegexpItem } from './mode';
+import { Storage } from "./storage";
+
+export class ExecutorView  implements vscode.WebviewViewProvider  {
+     static readonly viewType = "regexcutor.excutor";
+    private _view?: vscode.WebviewView;
+    constructor(private context: vscode.ExtensionContext, private readonly _storage: Storage) {
+ 
+        console.log("constructor:------------");
+    }
+    private getResourcePath(relativePath: string): vscode.Uri {
+        return vscode.Uri.file(path.join(this.context.extensionPath, relativePath));
+    }
+    private getResourceUri(relativePath: string): vscode.Uri|undefined {
+        return this._view?.webview.asWebviewUri(this.getResourcePath(relativePath));
+    }
+    resolveWebviewView(webviewView: vscode.WebviewView, context: vscode.WebviewViewResolveContext, token: vscode.CancellationToken): Thenable<void> | void {
+        webviewView.webview.options = { enableScripts: true };
+        this._view = webviewView;
+        
+        webviewView.webview.html = this.generateHtml(webviewView);
+        webviewView.webview.onDidReceiveMessage(message => {
+            if(message.command === "regex.save"){
+                const item:RegexpItem = {
+                    name:message.name,
+                    regexp:message.regexp,
+                    teststr:message.teststr
+                };
+                this._storage.addItem(item);
+            }
+        });
+    }
+    generateHtml(webviewView: vscode.WebviewView): string {
+        const indexUri = this.getResourcePath("media/index.html");
+        const indexWebUri = this.getResourceUri("media/index.html");
+        if(!indexWebUri){
+           vscode.window.showErrorMessage("index.html not found");
+           return "";
+        }
+        const root = path.dirname(indexWebUri?.toString());
+        const indexHtml = fs.readFileSync(indexUri?.fsPath||'', 'utf-8');
+        const indexHtmlWithRoot = indexHtml.replace(/##ROOT##/g, root)
+        return indexHtmlWithRoot;
+    }
+
+    displayRegx(reg:RegexpItem) {
+        const command = Object.assign(reg,{command:"regex.show"});
+        this._view?.webview.postMessage(command);
+    }
+
+}

src/extension.ts

@@ -0,0 +1,32 @@
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from 'vscode';
+import { Storage } from './storage';
+import { ListProvider } from './list.provider';
+import { ExecutorView } from './excutor.view';
+import { RegexpItem } from './mode';
+// This method is called when your extension is activated
+// Your extension is activated the very first time the command is executed
+export function activate(context: vscode.ExtensionContext) {
+	const storage = new Storage();
+	const commandReg = vscode.commands.registerCommand('regexcutor.delete', (item: RegexpItem) => {
+		storage.removeItem(item);
+	});
+	const listProvider = new ListProvider(storage);
+	const executorView = new ExecutorView(context,storage);
+	context.subscriptions.push(vscode.window.registerWebviewViewProvider(ExecutorView.viewType, executorView));
+	const listView = vscode.window.createTreeView('regexcutor.list', {
+		treeDataProvider: listProvider
+	});
+	listView.onDidChangeSelection((e) => {
+		if (e.selection.length === 1) {
+			const item = e.selection[0];
+			executorView.displayRegx(item);
+		}
+	});
+	
+	context.subscriptions.push(listView);
+}
+
+// This method is called when your extension is deactivated
+export function deactivate() {}

src/list.provider.ts

@@ -0,0 +1,46 @@
+import * as vscode from "vscode";
+import { RegexpItem } from './mode';
+import { Storage } from "./storage";
+
+export class ReTreeItem extends vscode.TreeItem {
+    constructor(
+        public readonly label: string,
+        public readonly collapsibleState: vscode.TreeItemCollapsibleState,
+        private item: RegexpItem
+    ) {
+        super(label, collapsibleState);
+        // this.command = {
+        //     command: 'regexcutor.delete',
+        //     title: '删除',
+        //     arguments: [this.item]
+        // };
+    }
+}
+
+export class ListProvider implements vscode.TreeDataProvider<RegexpItem> {
+    private items: RegexpItem[] = [];
+    private _onDidChangeTreeData: vscode.EventEmitter<RegexpItem | undefined | null | void> = new vscode.EventEmitter<RegexpItem | undefined | null | void>();
+    onDidChangeTreeData?: vscode.Event<void | RegexpItem | RegexpItem | null | undefined> | undefined = this._onDidChangeTreeData.event;
+
+    getTreeItem(element: RegexpItem): ReTreeItem | Thenable<ReTreeItem> {
+        return new ReTreeItem(element.name, vscode.TreeItemCollapsibleState.None, element);
+    }
+
+    getChildren(element?: RegexpItem | undefined): vscode.ProviderResult<RegexpItem[]> {
+        return this.items;
+    }
+
+
+
+    constructor(private storage: Storage) {
+        this.storage.on('changed', () => {
+            this.load()
+        });
+        this.load();
+    }
+
+    load() {
+        this.items = this.storage.getItems();
+        this._onDidChangeTreeData?.fire();
+    }
+}

src/mode.ts

@@ -0,0 +1,5 @@
+export interface RegexpItem {
+    name: string;
+    regexp: string;
+    teststr: string;
+}

src/storage.ts

@@ -0,0 +1,43 @@
+import * as os from 'os';
+import * as fs from 'fs';
+import * as path from 'path';
+import { RegexpItem } from './mode';
+import { EventEmitter } from "events";
+export class Storage extends EventEmitter{
+    private storagePath: string = path.join(os.homedir(), '.vscode', 'regexp.json');
+    private items: RegexpItem[] = [];
+    constructor() {
+        super()
+        if (!fs.existsSync(this.storagePath)) {
+            fs.writeFileSync(this.storagePath, '[]');
+        }
+        this.load();
+    }
+
+    load() {
+        this.items = JSON.parse(fs.readFileSync(this.storagePath, 'utf-8'));
+    }
+
+    getItems() {
+        return this.items;
+    }
+    addItem(item: RegexpItem) {
+        this.items.push(item);
+        this.save();
+        this.emit('changed');
+    }
+    removeItem(item: RegexpItem) {
+        const index = this.items.findIndex(i => {
+           return  i.name === item.name && i.regexp === item.regexp;
+        });
+        if(index === -1){
+            return;
+        }
+        this.items.splice(index, 1);
+        this.save();
+        this.emit('changed');
+    }
+    save() {
+        fs.writeFileSync(this.storagePath, JSON.stringify(this.items));
+    }
+}

src/test/extension.test.ts

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode';
+// import * as myExtension from '../../extension';
+
+suite('Extension Test Suite', () => {
+	vscode.window.showInformationMessage('Start all tests.');
+
+	test('Sample test', () => {
+		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+	});
+});

tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"lib": [
+			"ES2022"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true,   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	}
+}

vsc-extension-quickstart.md

@@ -0,0 +1,48 @@
+# Welcome to your VS Code Extension
+
+## What's in the folder
+
+* This folder contains all of the files necessary for your extension.
+* `package.json` - this is the manifest file in which you declare your extension and command.
+  * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
+* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
+  * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
+  * We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
+
+## Setup
+
+* install the recommended extensions (amodio.tsl-problem-matcher, ms-vscode.extension-test-runner, and dbaeumer.vscode-eslint)
+
+
+## Get up and running straight away
+
+* Press `F5` to open a new window with your extension loaded.
+* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
+* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
+* Find output from your extension in the debug console.
+
+## Make changes
+
+* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+
+## Explore the API
+
+* You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`.
+
+## Run tests
+
+* Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner)
+* Run the "watch" task via the **Tasks: Run Task** command. Make sure this is running, or tests might not be discovered.
+* Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A`
+* See the output of the test result in the Test Results view.
+* Make changes to `src/test/extension.test.ts` or create new test files inside the `test` folder.
+  * The provided test runner will only consider files matching the name pattern `**.test.ts`.
+  * You can create folders inside the `test` folder to structure your tests any way you want.
+
+## Go further
+
+* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
+* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
+* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).