Skip to content

Commit 7472e0f

Browse files
shezhangzhangshezhangzhang
committed
refactor: refactor extension setup function
1 parent 1621619 commit 7472e0f

File tree

4 files changed

+109
-90
lines changed

4 files changed

+109
-90
lines changed

‎src/config/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const LANGUAGE_SELECTORS = [
2+
"javascript",
3+
"javascriptreact",
4+
"typescript",
5+
"typescriptreact",
6+
"vue",
7+
"vue-html",
8+
"html",
9+
];

‎src/decorator.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as vscode from "vscode";
2+
3+
export default function setupChangeEvent() {
4+
let activeEditor = vscode.window.activeTextEditor;
5+
6+
vscode.workspace.onDidChangeTextDocument(
7+
(event) => {
8+
console.log(event);
9+
// if (activeEditor && event.document === activeEditor.document) {
10+
// triggerUpdateDecorations(true);
11+
// }
12+
},
13+
null
14+
// context.subscriptions
15+
);
16+
}

‎src/extension.ts

Lines changed: 7 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
// The module 'vscode' contains the VS Code extensibility API
22
import * as vscode from "vscode";
3-
import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
4-
import { genMarkdownString } from "./utils";
3+
import setupChangeEvent from "./decorator";
4+
import setupAntdToken from "./hover";
55

66
// this method is called when your extension is activated
77
// your extension is activated the very first time the command is executed
88
let isActive = true;
9-
let disposeHover: vscode.Disposable;
10-
let disposeTyping: vscode.Disposable;
119

1210
export function activate(context: vscode.ExtensionContext) {
1311
// This line of code will only be executed once when your extension is activated
14-
setUpAntdToken();
12+
let disposeHover: vscode.Disposable;
13+
let disposeTyping: vscode.Disposable;
14+
[disposeHover, disposeTyping] = setupAntdToken();
15+
setupChangeEvent();
1516

1617
vscode.commands.registerCommand("antd-design-token.toggle", () => {
1718
isActive = !isActive;
1819

1920
if (isActive) {
20-
setUpAntdToken();
21+
[disposeHover, disposeTyping] = setupAntdToken();
2122
vscode.window.showInformationMessage("antd design token is active now.");
2223
} else {
2324
disposeHover.dispose();
@@ -29,89 +30,5 @@ export function activate(context: vscode.ExtensionContext) {
2930
});
3031
}
3132

32-
function setUpAntdToken() {
33-
const fullToken = getDesignToken();
34-
35-
if (!fullToken) {
36-
throw new Error("Get fullToken failed.");
37-
}
38-
39-
// HOVER
40-
disposeHover = vscode.languages.registerHoverProvider(
41-
[
42-
"javascript",
43-
"javascriptreact",
44-
"typescript",
45-
"typescriptreact",
46-
"vue",
47-
"vue-html",
48-
"html",
49-
],
50-
{
51-
provideHover(document, position) {
52-
const range = document.getWordRangeAtPosition(position);
53-
const word = document.getText(range);
54-
55-
if (fullToken.hasOwnProperty(word as string)) {
56-
const value = String(fullToken[word as keyof typeof fullToken]);
57-
const colorSpan = genMarkdownString(value);
58-
59-
const markDownString = new vscode.MarkdownString(
60-
`<h3>antd design token: ${word}</h3>${colorSpan}<code>${value}</code><br></br>`
61-
);
62-
markDownString.supportHtml = true;
63-
markDownString.isTrusted = true;
64-
65-
return new vscode.Hover(markDownString);
66-
}
67-
},
68-
}
69-
);
70-
71-
// TYPING
72-
// Add antd token value tips on typing
73-
// Note: 11 is a `value` kind of completion items.
74-
// Based on the kind an icon is chosen by the editor.
75-
const items: any[] | undefined = [];
76-
77-
for (let key in fullToken) {
78-
const value = String(fullToken[key as keyof typeof fullToken]);
79-
const item = new vscode.CompletionItem(`antd-${key}: ${value}`, 11);
80-
item.insertText = key.includes("-") ? `['${key}']` : key;
81-
82-
const sortValue = value.padStart(5, "0");
83-
item.sortText = `a-${sortValue}-${key}`;
84-
85-
const colorSpan = genMarkdownString(value);
86-
let documentContent: vscode.MarkdownString | string = "";
87-
88-
documentContent = new vscode.MarkdownString(
89-
`<h4>antd design token: ${key}</h4>${colorSpan}<code>${value}</code><br></br>`
90-
);
91-
documentContent.supportHtml = true;
92-
93-
item.documentation = documentContent;
94-
95-
items.push(item);
96-
}
97-
98-
disposeTyping = vscode.languages.registerCompletionItemProvider(
99-
[
100-
"javascript",
101-
"javascriptreact",
102-
"typescript",
103-
"typescriptreact",
104-
"vue",
105-
"vue-html",
106-
"html",
107-
],
108-
{
109-
provideCompletionItems(document): any {
110-
return new vscode.CompletionList(items, false);
111-
},
112-
}
113-
);
114-
}
115-
11633
// this method is called when your extension is deactivated
11734
export function deactivate() {}

‎src/hover.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import * as vscode from "vscode";
2+
import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
3+
import { genMarkdownString } from "./utils";
4+
import { LANGUAGE_SELECTORS } from "./config";
5+
6+
/**
7+
* register provider for hover and typing antd design token
8+
*/
9+
export default function setupAntdToken(): vscode.Disposable[] {
10+
const fullToken = getDesignToken();
11+
12+
if (!fullToken) {
13+
throw new Error("Get fullToken failed.");
14+
}
15+
16+
let disposeHover: vscode.Disposable;
17+
let disposeTyping: vscode.Disposable;
18+
19+
// HOVER
20+
disposeHover = vscode.languages.registerHoverProvider(LANGUAGE_SELECTORS, {
21+
provideHover(document, position) {
22+
const range = document.getWordRangeAtPosition(position);
23+
const word = document.getText(range);
24+
25+
if (fullToken.hasOwnProperty(word as string)) {
26+
const value = String(fullToken[word as keyof typeof fullToken]);
27+
const colorSpan = genMarkdownString(value);
28+
29+
const markDownString = new vscode.MarkdownString(
30+
`<h3>antd design token: ${word}</h3>${colorSpan}<code>${value}</code><br></br>`
31+
);
32+
markDownString.supportHtml = true;
33+
markDownString.isTrusted = true;
34+
35+
return new vscode.Hover(markDownString);
36+
}
37+
},
38+
});
39+
40+
// TYPING
41+
// Add antd token value tips on typing
42+
// Note: 11 is a `value` kind of completion items.
43+
// Based on the kind an icon is chosen by the editor.
44+
const items: any[] | undefined = [];
45+
46+
for (let key in fullToken) {
47+
const value = String(fullToken[key as keyof typeof fullToken]);
48+
const item = new vscode.CompletionItem(`antd-${key}: ${value}`, 11);
49+
item.insertText = key.includes("-") ? `['${key}']` : key;
50+
51+
const sortValue = value.padStart(5, "0");
52+
item.sortText = `a-${sortValue}-${key}`;
53+
54+
const colorSpan = genMarkdownString(value);
55+
let documentContent: vscode.MarkdownString | string = "";
56+
57+
documentContent = new vscode.MarkdownString(
58+
`<h4>antd design token: ${key}</h4>${colorSpan}<code>${value}</code><br></br>`
59+
);
60+
documentContent.supportHtml = true;
61+
62+
item.documentation = documentContent;
63+
64+
items.push(item);
65+
}
66+
67+
disposeTyping = vscode.languages.registerCompletionItemProvider(
68+
LANGUAGE_SELECTORS,
69+
{
70+
provideCompletionItems(): any {
71+
return new vscode.CompletionList(items, false);
72+
},
73+
}
74+
);
75+
76+
return [disposeHover, disposeTyping];
77+
}

0 commit comments

Comments
 (0)