From 7f505f66a2547b7691d42c5fa08ad97e87d970fa Mon Sep 17 00:00:00 2001 From: mantou132 <709922234@qq.com> Date: Wed, 13 Nov 2024 21:32:34 +0800 Subject: [PATCH] Update docs --- packages/duoyun-ui/src/lib/encode.ts | 8 +++---- packages/duoyun-ui/src/lib/image.ts | 2 +- packages/duoyun-ui/src/lib/timer.ts | 10 ++++---- packages/duoyun-ui/src/lib/utils.ts | 2 +- .../001-guide/002-advance/008-ide-support.md | 11 ++++++--- .../gem/docs/en/003-api/001-gem-element.md | 3 +-- packages/gem/docs/en/003-api/003-store.md | 2 +- packages/gem/docs/en/003-api/004-history.md | 12 +++++++++- packages/gem/docs/en/003-api/006-helper.md | 14 ++++++----- packages/gem/docs/en/003-api/008-utils.md | 13 +++++----- .../001-guide/002-advance/008-ide-support.md | 10 +++++--- .../gem/docs/zh/003-api/001-gem-element.md | 3 +-- packages/gem/docs/zh/003-api/003-store.md | 2 +- packages/gem/docs/zh/003-api/004-history.md | 11 ++++++++- packages/gem/docs/zh/003-api/006-helper.md | 14 ++++++----- packages/gem/docs/zh/003-api/008-utils.md | 13 +++++----- packages/gem/src/elements/base/link.ts | 19 +++++++-------- packages/gem/src/elements/base/route.ts | 22 ++++++++--------- packages/gem/src/elements/base/unsafe.ts | 6 ++--- packages/gem/src/elements/base/use.ts | 5 +--- packages/gem/src/lib/utils.ts | 11 +-------- packages/vscode-gem-plugin/package.json | 2 +- packages/vscode-gem-plugin/src/constants.ts | 10 ++++---- packages/vscode-gem-plugin/src/decorators.ts | 24 +++++++++---------- packages/vscode-gem-plugin/src/diagnostic.ts | 8 ++++--- packages/vscode-gem-plugin/src/extension.ts | 20 ++++++++-------- 26 files changed, 138 insertions(+), 119 deletions(-) diff --git a/packages/duoyun-ui/src/lib/encode.ts b/packages/duoyun-ui/src/lib/encode.ts index 8f2be1a3..a7e6be81 100644 --- a/packages/duoyun-ui/src/lib/encode.ts +++ b/packages/duoyun-ui/src/lib/encode.ts @@ -7,7 +7,7 @@ function safeUrlToBase64Str(str: string) { // https://developer.mozilla.org/en-US/docs/Glossary/Base64#solution_1_%E2%80%93_escaping_the_string_before_encoding_it export function b64ToUtf8(str: string) { return decodeURIComponent( - window + self .atob(safeUrlToBase64Str(str)) .split('') .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)) @@ -16,7 +16,7 @@ export function b64ToUtf8(str: string) { } export function base64ToArrayBuffer(str: string) { - return new Uint8Array([...window.atob(safeUrlToBase64Str(str))].map((char) => char.charCodeAt(0))).buffer; + return new Uint8Array([...self.atob(safeUrlToBase64Str(str))].map((char) => char.charCodeAt(0))).buffer; } function base64ToSafeUrl(str: string) { @@ -25,7 +25,7 @@ function base64ToSafeUrl(str: string) { /**Converted string to Base64, `isSafe` indicates URL safe */ export function utf8ToB64(str: string, isSafe?: boolean) { - const base64 = window.btoa( + const base64 = self.btoa( encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(Number(`0x${p1}`))), ); return isSafe ? base64ToSafeUrl(base64) : base64; @@ -33,7 +33,7 @@ export function utf8ToB64(str: string, isSafe?: boolean) { // https://github.com/tc39/proposal-arraybuffer-base64 export function arrayBufferToBase64(arrayBuffer: ArrayBuffer, isSafe?: boolean) { - const base64 = window.btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); + const base64 = self.btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); return isSafe ? base64ToSafeUrl(base64) : base64; } diff --git a/packages/duoyun-ui/src/lib/image.ts b/packages/duoyun-ui/src/lib/image.ts index ecaf37ac..6717eba3 100644 --- a/packages/duoyun-ui/src/lib/image.ts +++ b/packages/duoyun-ui/src/lib/image.ts @@ -15,7 +15,7 @@ export function createCanvas(width?: number, height?: number) { } export function createDataURLFromSVG(rawStr: string) { - return `data:image/svg+xml;base64,${window.btoa(rawStr)}`; + return `data:image/svg+xml;base64,${self.btoa(rawStr)}`; } // if `bg` is't `HexColor`, text fill color error diff --git a/packages/duoyun-ui/src/lib/timer.ts b/packages/duoyun-ui/src/lib/timer.ts index 9d7d0b9e..7bacfcce 100644 --- a/packages/duoyun-ui/src/lib/timer.ts +++ b/packages/duoyun-ui/src/lib/timer.ts @@ -21,7 +21,7 @@ export function polling(fn: (args?: any[]) => any, delay: number) { } catch { } finally { if (!hasExit) { - timer = window.setTimeout(poll, delay); + timer = self.setTimeout(poll, delay); } } }; @@ -48,7 +48,7 @@ export function throttle any>( let timer = 0; let first = 0; const exec = (...rest: Parameters) => { - timer = window.setTimeout(() => (timer = 0), wait); + timer = self.setTimeout(() => (timer = 0), wait); fn(...(rest as any)); }; return (...rest: Parameters) => { @@ -62,7 +62,7 @@ export function throttle any>( exec(...rest); } else { clearTimeout(timer); - timer = window.setTimeout(() => exec(...rest), wait); + timer = self.setTimeout(() => exec(...rest), wait); } }; } @@ -76,9 +76,9 @@ export function debounce any>( return function (...args: Parameters) { return new Promise>>((resolve, reject) => { clearTimeout(timer); - timer = window.setTimeout( + timer = self.setTimeout( () => { - timer = window.setTimeout(() => (timer = 0), wait); + timer = self.setTimeout(() => (timer = 0), wait); Promise.resolve(fn(...(args as any))) .then(resolve) .catch(reject); diff --git a/packages/duoyun-ui/src/lib/utils.ts b/packages/duoyun-ui/src/lib/utils.ts index 7d79dde0..d1b03a5f 100644 --- a/packages/duoyun-ui/src/lib/utils.ts +++ b/packages/duoyun-ui/src/lib/utils.ts @@ -260,7 +260,7 @@ export function createCacheStore>( ); }; - window.addEventListener('pagehide', saveStore); + self.addEventListener('pagehide', saveStore); return { store, saveStore }; } diff --git a/packages/gem/docs/en/001-guide/002-advance/008-ide-support.md b/packages/gem/docs/en/001-guide/002-advance/008-ide-support.md index 6442eb32..44395830 100644 --- a/packages/gem/docs/en/001-guide/002-advance/008-ide-support.md +++ b/packages/gem/docs/en/001-guide/002-advance/008-ide-support.md @@ -6,12 +6,12 @@ Gem does not have perfect IDE support, but the following content can also give y ### Highlight -- Template highlight [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) -- CSS rule highlighting [vscode-styled-component](https://github.com/styled-components/vscode-styled-components) +- [lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) +- [Gem](https://marketplace.visualstudio.com/items?itemName=gem-vscode.vscode-plugin-gem) ([Under development](https://github.com/mantou132/gem/issues/144), will replace lit-plugin in the future) ### Verification -When using defined elements in a template [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) many verifications can be performed, including attr/prop type, custom element tag name, etc. To provide these features for elements, you need to manually [write](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin#-documenting-slots-events-attributes-and-properties) jsDoc comment: +When using defined elements in a template [lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) many verifications can be performed, including attr/prop type, custom element tag name, etc. To provide these features for elements, you need to manually [write](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin#-documenting-slots-events-attributes-and-properties) jsDoc comment: ```js /** @@ -35,3 +35,8 @@ class MyElement extends GemElement {} ``` _In the future, the ts decorator may be used to let the IDE recognize all the characteristics of custom elements, in addition, the decorator is automatically transferred to jsDoc through a custom ts compiler, so that it can be used in js projects_ + + +## Zed + +- Gem ([Under development](https://github.com/mantou132/gem/issues/144), will replace lit-plugin in the future) \ No newline at end of file diff --git a/packages/gem/docs/en/003-api/001-gem-element.md b/packages/gem/docs/en/003-api/001-gem-element.md index 751b13f9..fa718adf 100644 --- a/packages/gem/docs/en/003-api/001-gem-element.md +++ b/packages/gem/docs/en/003-api/001-gem-element.md @@ -59,8 +59,7 @@ Type with decorator | `@fallback` | When the content render error, rendering the reserve content | - -## Lifecycle hook +## ~~Lifecycle hook~~ | name | description | | -------------- | ----------------------------------------------------------------------------------------- | diff --git a/packages/gem/docs/en/003-api/003-store.md b/packages/gem/docs/en/003-api/003-store.md index 009eff7c..f4cadaea 100644 --- a/packages/gem/docs/en/003-api/003-store.md +++ b/packages/gem/docs/en/003-api/003-store.md @@ -2,5 +2,5 @@ | API name | description | | ------------- | ------------------------------------------------------------------------------------ | -| `createStore` | Create a `Store` | +| `createStore` | Create a `Store`, like `State` callable | | `connect` | Connect a callback function to the `Store`, asynchronously called by `Store` updated | diff --git a/packages/gem/docs/en/003-api/004-history.md b/packages/gem/docs/en/003-api/004-history.md index b6892c51..e2ada387 100644 --- a/packages/gem/docs/en/003-api/004-history.md +++ b/packages/gem/docs/en/003-api/004-history.md @@ -2,7 +2,10 @@ Gem exports a `history` object, which extends [History API](https://developer.mozilla.org/en-US/docs/Web/API/History). -| property | description | + +## Property + +| name | description | | ----------------------- | ----------------------------------------------------------------- | | `store` | `Store` to maintain history | | `basePath` | Specify the base path (only allowed to be set once) | @@ -12,3 +15,10 @@ Gem exports a `history` object, which extends [History API](https://developer.mo | `getParams` | Get the value of `path`, `query`, `hash` etc. of the current page | | `updateParams` | Update `title` or `handle` | | `basePathStore` | `Store` corresponding to `history.basePath` | + +## Other + +| name | description | +| --------------- | ------------------------------ | +| `titleStore` | document title | +| `basePathStore` | export `history.basePathStore` | \ No newline at end of file diff --git a/packages/gem/docs/en/003-api/006-helper.md b/packages/gem/docs/en/003-api/006-helper.md index b5e74434..87a8cf8b 100644 --- a/packages/gem/docs/en/003-api/006-helper.md +++ b/packages/gem/docs/en/003-api/006-helper.md @@ -6,9 +6,11 @@ Gem also contains some commonly used functions, they are not built-in by default import { createTheme } from '@mantou/gem/helper/theme'; ``` -| name | description | -| ------------------------------------------- | ----------------------------------- | -| `createTheme`/`getThemeStore` | Themes created and updated | -| `mediaQuery` | CSS media query constants | -| `request`/`get`/`post`/`del`/`put` | Simple and convenient call REST API | -| `I18n` | Support internationalization | +| name | description | +| ---------------------------------- | ----------------------------------- | +| `createTheme`/`getThemeStore` | Themes created and updated | +| `mediaQuery` | CSS media query constants | +| `request`/`get`/`post`/`del`/`put` | Simple and convenient call REST API | +| `I18n` | Support internationalization | +| react-utils | Use in React | +| ssr-shim | Support SSR | diff --git a/packages/gem/docs/en/003-api/008-utils.md b/packages/gem/docs/en/003-api/008-utils.md index d5a02d4b..10ec9a4e 100644 --- a/packages/gem/docs/en/003-api/008-utils.md +++ b/packages/gem/docs/en/003-api/008-utils.md @@ -2,9 +2,10 @@ Some frequently used functions -| name | description | -| ---------- | ------------------------------------------------------------------------- | -| `styled` | A collection of template string label functions, provide CSS highlighting | -| `styleMap` | Convert objects into `style` attribute | -| `classMap` | Convert objects into `class` attribute | -| `partMap` | Convert objects into `part` attribute | +| name | description | +| ---------------- | -------------------------------------------- | +| `styled` | Provide CSS highlighting | +| `styleMap` | Convert objects into `style` attribute | +| `classMap` | Convert objects into `class` attribute | +| `partMap` | Convert objects into `part` attribute | +| `exportPartsMap` | Convert objects into `exportparts` attribute | diff --git a/packages/gem/docs/zh/001-guide/002-advance/008-ide-support.md b/packages/gem/docs/zh/001-guide/002-advance/008-ide-support.md index b63903e0..6ec3bc30 100644 --- a/packages/gem/docs/zh/001-guide/002-advance/008-ide-support.md +++ b/packages/gem/docs/zh/001-guide/002-advance/008-ide-support.md @@ -6,12 +6,12 @@ Gem 现在没有完美的 IDE 支持，但下面的内容也能让你获得不 ### 高亮 -- 模版高亮 [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) -- CSS 规则高亮 [vscode-styled-component](https://github.com/styled-components/vscode-styled-components) +- [lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) +- [Gem](https://marketplace.visualstudio.com/items?itemName=gem-vscode.vscode-plugin-gem)（[开发中](https://github.com/mantou132/gem/issues/144)，将来取代 lit-plugin） ### 验证 -在模版中使用定义的元素时 [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) 能进行许多验证，包括 attr/prop 类型，自定义元素标签名等。 +在模版中使用定义的元素时 [lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) 能进行许多验证，包括 attr/prop 类型，自定义元素标签名等。 要为元素提供这些功能，需要手动[编写](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin#-documenting-slots-events-attributes-and-properties) jsDoc 注释： ```js @@ -37,3 +37,7 @@ class MyElement extends GemElement {} _在未来可能通过 ts 装饰器让 IDE 识别自定义元素的所有特性，_ _另外通过自定义 ts 编译器将装饰器自动转移成 jsDoc，以便使用在 js 项目中_ + +## Zed + +- Gem（[开发中](https://github.com/mantou132/gem/issues/144)，将来取代 lit-plugin） diff --git a/packages/gem/docs/zh/003-api/001-gem-element.md b/packages/gem/docs/zh/003-api/001-gem-element.md index 69101041..ab686858 100644 --- a/packages/gem/docs/zh/003-api/001-gem-element.md +++ b/packages/gem/docs/zh/003-api/001-gem-element.md @@ -59,8 +59,7 @@ class GemElement extends HTMLElement { | `@fallback` | 当内容渲染失败时渲染后备内容 | - -## 生命周期钩子 +## ~~生命周期钩子~~ | 名称 | 描述 | | -------------- | ------------------------------------------- | diff --git a/packages/gem/docs/zh/003-api/003-store.md b/packages/gem/docs/zh/003-api/003-store.md index 4557255d..108d891d 100644 --- a/packages/gem/docs/zh/003-api/003-store.md +++ b/packages/gem/docs/zh/003-api/003-store.md @@ -2,5 +2,5 @@ | API 名称 | 描述 | | ------------- | ------------------------------------------------------------- | -| `createStore` | 创建一个 `Store` | +| `createStore` | 创建一个 `Store`，和 `State` 一样可直接调用更新 | | `connect` | 将一个回调函数连接到 `Store`, 当 `Store` 更新时会异步进行调用 | diff --git a/packages/gem/docs/zh/003-api/004-history.md b/packages/gem/docs/zh/003-api/004-history.md index ec5c55a6..5cadd4d0 100644 --- a/packages/gem/docs/zh/003-api/004-history.md +++ b/packages/gem/docs/zh/003-api/004-history.md @@ -2,7 +2,9 @@ Gem 导出一个 `history` 对象，它扩展了 [History API](https://developer.mozilla.org/en-US/docs/Web/API/History). -| 属性 | 描述 | +## 属性 + +| 名称 | 描述 | | ----------------------- | ------------------------------------------- | | `store` | 维护历史记录的 `Store` | | `basePath` | 指定基本路径(只允许设置一次) | @@ -12,3 +14,10 @@ Gem 导出一个 `history` 对象，它扩展了 [History API](https://developer | `getParams` | 获取当前页面的 `path`, `query`,`hash` 等值 | | `updateParams` | 更新 `title` 或者 `handle` | | `basePathStore` | `history.basePath` 对应的 `Store` | + +## Other + +| 名称 | 描述 | +| --------------- | ---------------------------- | +| `titleStore` | 文档标题 | +| `basePathStore` | 导出 `history.basePathStore` | \ No newline at end of file diff --git a/packages/gem/docs/zh/003-api/006-helper.md b/packages/gem/docs/zh/003-api/006-helper.md index d1aefa2a..e7762900 100644 --- a/packages/gem/docs/zh/003-api/006-helper.md +++ b/packages/gem/docs/zh/003-api/006-helper.md @@ -6,9 +6,11 @@ Gem 还包含一些常用的功能，他们没有默认内置, 需要自己手 import { createTheme } from '@mantou/gem/helper/theme'; ``` -| 名称 | 描述 | -| ------------------------------------------- | ------------------------------------------------- | -| `createTheme`/`getThemeStore` | 创建和更新主题 | -| `mediaQuery` | 使用媒体查询查询到的信息以及一些 CSS 媒体查询常量 | -| `request`/`get`/`post`/`del`/`put` | 简单方便的调用 REST API | -| `I18n` | 支持国际化 | +| 名称 | 描述 | +| ---------------------------------- | ------------------------------------------------- | +| `createTheme`/`getThemeStore` | 创建和更新主题 | +| `mediaQuery` | 使用媒体查询查询到的信息以及一些 CSS 媒体查询常量 | +| `request`/`get`/`post`/`del`/`put` | 简单方便的调用 REST API | +| `I18n` | 支持国际化 | +| react-utils | 在 React 中使用 Gem | +| ssr-shim | 支持 SSR | diff --git a/packages/gem/docs/zh/003-api/008-utils.md b/packages/gem/docs/zh/003-api/008-utils.md index e03b0855..e781b804 100644 --- a/packages/gem/docs/zh/003-api/008-utils.md +++ b/packages/gem/docs/zh/003-api/008-utils.md @@ -2,9 +2,10 @@ 一些经常被用到的函数 -| 名称 | 描述 | -| ---------- | --------------------------------------------------------- | -| `styled` | 模版字符串标签函数的集合，用来提供 CSS 规则高亮和 JS 引用 | -| `styleMap` | 将对象构建成 `style` 属性 | -| `classMap` | 将对象构建成 `class` 属性 | -| `partMap` | 将对象构建成 `part` 属性 | +| 名称 | 描述 | +| ---------------- | ------------------------------- | +| `styled` | 提供 CSS 规则高亮 | +| `styleMap` | 将对象构建成 `style` 属性 | +| `classMap` | 将对象构建成 `class` 属性 | +| `partMap` | 将对象构建成 `part` 属性 | +| `exportPartsMap` | 将对象构建成 `exportparts` 属性 | diff --git a/packages/gem/src/elements/base/link.ts b/packages/gem/src/elements/base/link.ts index 3d35792f..e8b27213 100644 --- a/packages/gem/src/elements/base/link.ts +++ b/packages/gem/src/elements/base/link.ts @@ -40,7 +40,7 @@ const styles = css` `; /** - * Bug: print `` https://github.com/mantou132/gem/issues/36 + * Bug: [can't print ``](https://github.com/mantou132/gem/issues/36) */ @connectStore(basePathStore) @adoptedStyle(styles) @@ -146,16 +146,13 @@ export class GemLinkElement extends GemElement { @template() #content = () => { - return html` - - - - `; + return html``; }; /** diff --git a/packages/gem/src/elements/base/route.ts b/packages/gem/src/elements/base/route.ts index d716b800..7fc98622 100644 --- a/packages/gem/src/elements/base/route.ts +++ b/packages/gem/src/elements/base/route.ts @@ -1,7 +1,7 @@ import type { TemplateResult } from '../../lib/element'; -import { createState, GemElement, html } from '../../lib/element'; +import { createState, css, GemElement, html } from '../../lib/element'; import type { Emitter } from '../../lib/decorators'; -import { property, emitter, boolattribute, shadow, effect, template, light } from '../../lib/decorators'; +import { property, emitter, boolattribute, shadow, effect, template, light, adoptedStyle } from '../../lib/decorators'; import type { Store } from '../../lib/store'; import { createStore, connect } from '../../lib/store'; import type { UpdateHistoryParams } from '../../lib/history'; @@ -276,15 +276,7 @@ export class GemLightRouteElement extends GemElement { return html`${content}`; } - return html` - - ${content === INIT_CONTENT ? html`` : content} - `; + return content === INIT_CONTENT ? html`` : content; }; // 重写 `update`，并暴露为公共字段 @@ -324,5 +316,13 @@ export class GemLightRouteElement extends GemElement { }; } +const style = css` + :host(:where(:not([hidden]))), + :not(:defined) { + display: contents; + } +`; + @shadow() +@adoptedStyle(style) export class GemRouteElement extends GemLightRouteElement {} diff --git a/packages/gem/src/elements/base/unsafe.ts b/packages/gem/src/elements/base/unsafe.ts index a5609bfa..4b510015 100644 --- a/packages/gem/src/elements/base/unsafe.ts +++ b/packages/gem/src/elements/base/unsafe.ts @@ -1,6 +1,5 @@ import { GemElement } from '../../lib/element'; import { attribute, shadow, template } from '../../lib/decorators'; -import { raw } from '../../lib/utils'; @shadow() export class GemUnsafeElement extends GemElement { @@ -9,16 +8,17 @@ export class GemUnsafeElement extends GemElement { @template() #content = () => { - this.shadowRoot!.innerHTML = raw` + const style = /*html*/ ` - ${this.content} `; + this.shadowRoot!.innerHTML = this.content + style.trim(); + // 不要更新内容 return undefined; }; diff --git a/packages/gem/src/elements/base/use.ts b/packages/gem/src/elements/base/use.ts index 58a8a8b8..7953f856 100644 --- a/packages/gem/src/elements/base/use.ts +++ b/packages/gem/src/elements/base/use.ts @@ -48,9 +48,6 @@ export class GemUseElement extends GemElement { @template() #content = () => { - return html` - ${this.#getContent()} - - `; + return html`${this.#getContent()}`; }; } diff --git a/packages/gem/src/lib/utils.ts b/packages/gem/src/lib/utils.ts index b6bc373f..e1f1d78b 100644 --- a/packages/gem/src/lib/utils.ts +++ b/packages/gem/src/lib/utils.ts @@ -224,16 +224,7 @@ export function raw(arr: TemplateStringsArray, ...args: any[]) { return arr.reduce((prev, current, index) => prev + (args[index - 1] ?? '') + current); } -// 在 html 中引用 class 时使用，目前仅提供高亮功能 -// -// css({ -// red: styled` -// background: red; -// &:hover { -// background: blue; -// } -// `, -// }); +// 在 html 中引用 class 时使用，仅提供高亮功能 export const styled = raw; export function randomStr(len = 5): string { diff --git a/packages/vscode-gem-plugin/package.json b/packages/vscode-gem-plugin/package.json index b56f1676..ca8ec058 100644 --- a/packages/vscode-gem-plugin/package.json +++ b/packages/vscode-gem-plugin/package.json @@ -4,7 +4,7 @@ "displayName": "Gem", "description": "Gem plugin for VS Code", "icon": "logo.png", - "version": "1.0.1", + "version": "1.0.2", "engines": { "vscode": "^1.94.0" }, diff --git a/packages/vscode-gem-plugin/src/constants.ts b/packages/vscode-gem-plugin/src/constants.ts index dfe9c21c..5ebd648e 100644 --- a/packages/vscode-gem-plugin/src/constants.ts +++ b/packages/vscode-gem-plugin/src/constants.ts @@ -1,10 +1,12 @@ -export const COLOR_REG = /(?'|")?(?#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4}))($1|\s*;)/gi; +export const COLOR_REG = /(?'|")?(?#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4}))($1|\s*;)/g; // 直接通过正则匹配 css 片段，通过条件的结束 ` 号匹配 -export const CSS_REG = /(?\/\*\s*css\s*\*\/\s*`|(?.*?)(`(?=;|,?\s*\)))/gis; +export const CSS_REG = /(?\/\*\s*css\s*\*\/\s*`|(?.*?)(`(?=;|,?\s*\)))/gs; // 直接通过正则匹配 style 片段，通过条件的结束 ` 号匹配 // 语言服务和高亮都只支持 styled 写法 -export const STYLE_REG = /(?\/\*\s*style\s*\*\/\s*`|(?.*?)(`(?=,|\s*}\s*\)))/gis; +export const STYLE_REG = /(?\/\*\s*style\s*\*\/\s*`|(?.*?)(`(?=,|\s*}\s*\)))/gs; // 处理后进行正则匹配，所以不需要验证后面的 ` 号 -export const HTML_REG = /(?\/\*\s*html\s*\*\/\s*`|(?[^`]*)(`)/gi; +export const HTML_REG = /(?\/\*\s*html\s*\*\/\s*`|(?[^`]*)(`)/g; + +export const LANG_SELECTOR = ['typescriptreact', 'javascriptreact', 'typescript', 'javascript']; diff --git a/packages/vscode-gem-plugin/src/decorators.ts b/packages/vscode-gem-plugin/src/decorators.ts index b8269ffc..fe1d1638 100644 --- a/packages/vscode-gem-plugin/src/decorators.ts +++ b/packages/vscode-gem-plugin/src/decorators.ts @@ -3,35 +3,33 @@ // eslint-disable-next-line import/no-unresolved import { workspace, window, Range } from 'vscode'; import type { DecorationOptions, ExtensionContext } from 'vscode'; +import { debounce } from 'duoyun-ui/lib/timer'; + +import { LANG_SELECTOR } from './constants'; const decorationType = window.createTextEditorDecorationType({ opacity: '1 !important' }); -const regEx = /(?<=^\s*@\w+\([^@\n]*\)\s+)(#\w+)/gm; +const hooksRegExp = /(?<=^\s*@\w+\([^@\n]*\)\s+)(#\w+)/gm; let activeEditor = window.activeTextEditor; -function updateDecorations() { +const updateDecorations = debounce(() => { if (!activeEditor || !activeEditor.document) { return; } + if (!LANG_SELECTOR.includes(activeEditor.document.languageId)) return; const text = activeEditor.document.getText(); const decorations: DecorationOptions[] = []; let match; - while ((match = regEx.exec(text))) { + while ((match = hooksRegExp.exec(text))) { const startPos = activeEditor.document.positionAt(match.index); const endPos = activeEditor.document.positionAt(match.index + match[0].length); decorations.push({ range: new Range(startPos, endPos) }); } activeEditor.setDecorations(decorationType, decorations); -} - -let timeout: NodeJS.Timeout; -function triggerUpdateDecorations() { - clearTimeout(timeout); - timeout = setTimeout(updateDecorations, 60); -} +}); if (activeEditor) { - triggerUpdateDecorations(); + updateDecorations(); } export function markDecorators(context: ExtensionContext) { @@ -39,7 +37,7 @@ export function markDecorators(context: ExtensionContext) { window.onDidChangeActiveTextEditor((editor) => { activeEditor = editor; if (editor) { - triggerUpdateDecorations(); + updateDecorations(); } }), ); @@ -47,7 +45,7 @@ export function markDecorators(context: ExtensionContext) { context.subscriptions.push( workspace.onDidChangeTextDocument((event) => { if (activeEditor && event.document === activeEditor.document) { - triggerUpdateDecorations(); + updateDecorations(); } }), ); diff --git a/packages/vscode-gem-plugin/src/diagnostic.ts b/packages/vscode-gem-plugin/src/diagnostic.ts index d28df595..c152c907 100644 --- a/packages/vscode-gem-plugin/src/diagnostic.ts +++ b/packages/vscode-gem-plugin/src/diagnostic.ts @@ -6,14 +6,16 @@ import { workspace, languages, window, Range, Diagnostic } from 'vscode'; import { getCSSLanguageService as getCSSLanguageService } from 'vscode-css-languageservice'; import type { ExtensionContext, TextDocument } from 'vscode'; +import { debounce } from 'duoyun-ui/lib/timer'; -import { CSS_REG, STYLE_REG } from './constants'; +import { CSS_REG, LANG_SELECTOR, STYLE_REG } from './constants'; import { createVirtualDocument, removeSlot } from './util'; const diagnosticCollection = languages.createDiagnosticCollection('gem'); const cssLanguageService = getCSSLanguageService(); -const updateDiagnostic = (document: TextDocument) => { +const updateDiagnostic = debounce((document: TextDocument) => { + if (!LANG_SELECTOR.includes(document.languageId)) return; const diagnostics: Diagnostic[] = []; const text = document.getText(); @@ -41,7 +43,7 @@ const updateDiagnostic = (document: TextDocument) => { matchFragments(STYLE_REG, ':host { ', ' }'); diagnosticCollection.set(document.uri, diagnostics); -}; +}); export function markDiagnostic(context: ExtensionContext) { context.subscriptions.push(diagnosticCollection); diff --git a/packages/vscode-gem-plugin/src/extension.ts b/packages/vscode-gem-plugin/src/extension.ts index 8d91643d..87db3390 100644 --- a/packages/vscode-gem-plugin/src/extension.ts +++ b/packages/vscode-gem-plugin/src/extension.ts @@ -12,8 +12,8 @@ import { ColorProvider } from './providers/color'; import { HTMLHoverProvider, CSSHoverProvider, StyleHoverProvider } from './providers/hover'; import { markDecorators } from './decorators'; import { markDiagnostic } from './diagnostic'; +import { LANG_SELECTOR } from './constants'; -const selector = ['typescriptreact', 'javascriptreact', 'typescript', 'javascript']; const triggers = ['!', '.', '}', ':', '*', '$', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; let client: LanguageClient | undefined; @@ -31,7 +31,7 @@ function useLS(context: ExtensionContext) { }, }, { - documentSelector: selector, + documentSelector: LANG_SELECTOR, synchronize: { fileEvents: workspace.createFileSystemWatcher('**/.gemrc') }, }, ); @@ -42,21 +42,21 @@ export function activate(context: ExtensionContext) { markDecorators(context); markDiagnostic(context); - context.subscriptions.push(languages.registerColorProvider(selector, new ColorProvider())); - context.subscriptions.push(languages.registerHoverProvider(selector, new HTMLHoverProvider())); - context.subscriptions.push(languages.registerHoverProvider(selector, new StyleHoverProvider())); - context.subscriptions.push(languages.registerHoverProvider(selector, new CSSHoverProvider())); + context.subscriptions.push(languages.registerColorProvider(LANG_SELECTOR, new ColorProvider())); + context.subscriptions.push(languages.registerHoverProvider(LANG_SELECTOR, new HTMLHoverProvider())); + context.subscriptions.push(languages.registerHoverProvider(LANG_SELECTOR, new StyleHoverProvider())); + context.subscriptions.push(languages.registerHoverProvider(LANG_SELECTOR, new CSSHoverProvider())); context.subscriptions.push( - languages.registerCompletionItemProvider(selector, new HTMLCompletionItemProvider(), '<', ...triggers), + languages.registerCompletionItemProvider(LANG_SELECTOR, new HTMLCompletionItemProvider(), '<', ...triggers), ); context.subscriptions.push( - languages.registerCompletionItemProvider(selector, new HTMLStyleCompletionItemProvider(), ...triggers), + languages.registerCompletionItemProvider(LANG_SELECTOR, new HTMLStyleCompletionItemProvider(), ...triggers), ); context.subscriptions.push( - languages.registerCompletionItemProvider(selector, new CSSCompletionItemProvider(), ...triggers), + languages.registerCompletionItemProvider(LANG_SELECTOR, new CSSCompletionItemProvider(), ...triggers), ); context.subscriptions.push( - languages.registerCompletionItemProvider(selector, new StyleCompletionItemProvider(), ...triggers), + languages.registerCompletionItemProvider(LANG_SELECTOR, new StyleCompletionItemProvider(), ...triggers), ); context.subscriptions.push(