Use esm.sh

.vscode/settings.json

@@ -16,6 +16,6 @@
     "editor.formatOnSave": false
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   }
 }

packages/duoyun-ui/docs/en/02-elements/code-block.md

@@ -14,8 +14,9 @@
       <a>The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamps community and growth.
     </p>
   </body>
-</html>'
-  props='{"style": "width: 100%", "codelang": "html"}'
+</html>
+Test'
+  props='{"style": "width: 100%", "codelang": "html", "range": "-11", "highlight": "8"}'
   src="https://jspm.dev/duoyun-ui/elements/code-block"></gbp-example>
 
 ## API

packages/duoyun-ui/docs/zh/02-elements/README.md

@@ -1,4 +1,4 @@
-# 索引
+# 元素索引
 
 | DuoyunUI                                           | AntD                                        | Element Plus                             |
 | -------------------------------------------------- | ------------------------------------------- | ---------------------------------------- |

packages/duoyun-ui/docs/zh/02-elements/code-block.md

@@ -14,8 +14,9 @@
       <a>The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamps community and growth.
     </p>
   </body>
-</html>'
-  props='{"style": "width: 100%", "codelang": "html"}'
+</html>
+Test'
+  props='{"style": "width: 100%", "codelang": "html", "range": "-11", "highlight": "8"}'
   src="https://jspm.dev/duoyun-ui/elements/code-block"></gbp-example>
 
 ## API

packages/duoyun-ui/package.json

@@ -1,7 +1,19 @@
 {
   "name": "duoyun-ui",
-  "version": "1.1.0",
-  "description": "WebComponts UI",
+  "version": "1.1.2",
+  "description": "A lightweight desktop UI component library, implemented using Gem",
+  "keywords": [
+    "frontend",
+    "components",
+    "react",
+    "vue",
+    "svelte",
+    "gem",
+    "ui"
+  ],
+  "esm.sh": {
+    "bundle": false
+  },
   "exports": {
     "./elements/*": "./elements/*.js",
     "./react/*": "./react/*.js",

packages/duoyun-ui/src/elements/code-block.ts

@@ -5,6 +5,8 @@ import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
 
+const prismjs = 'https://esm.sh/[email protected]';
+
 // https://github.com/PrismJS/prism/blob/master/plugins/autoloader/prism-autoloader.js
 const langDependencies: Record<string, string | string[]> = {
   javascript: 'clike',
@@ -358,8 +360,7 @@ export class DuoyunCodeBlockElement extends GemElement {
     this.effect(
       async () => {
         if (!this.codeRef.element) return;
-        const esmHost = 'https://cdn.skypack.dev/[email protected]';
-        await import(/* @vite-ignore */ /* webpackIgnore: true */ `${esmHost}?min`);
+        await import(/* @vite-ignore */ /* webpackIgnore: true */ prismjs);
         const { Prism } = window as any;
         if (this.codelang && !Prism.languages[this.codelang]) {
           const lang = langAliases[this.codelang] || this.codelang;
@@ -369,12 +370,12 @@ export class DuoyunCodeBlockElement extends GemElement {
               langDeps.map((langDep) => {
                 if (!Prism.languages[langDep]) {
                   return import(
-                    /* @vite-ignore */ /* webpackIgnore: true */ `${esmHost}/components/prism-${langDep}.min.js`
+                    /* @vite-ignore */ /* webpackIgnore: true */ `${prismjs}/components/prism-${langDep}.min.js`
                   );
                 }
               }),
             );
-            await import(/* @vite-ignore */ /* webpackIgnore: true */ `${esmHost}/components/prism-${lang}.min.js`);
+            await import(/* @vite-ignore */ /* webpackIgnore: true */ `${prismjs}/components/prism-${lang}.min.js`);
           } catch {
             //
           }

packages/gem-book/src/element/elements/plugin.ts

@@ -23,9 +23,6 @@ export class GemBookPluginElement<T = any> extends GemElement<T> {
       },
     },
   );
-  static get devMode() {
-    return bookStore.devMode;
-  }
   static get links() {
     return bookStore.links;
   }
@@ -50,6 +47,9 @@ export class GemBookPluginElement<T = any> extends GemElement<T> {
   static get currentLinks() {
     return bookStore.currentLinks;
   }
+  static get devMode() {
+    return bookStore.isDevMode?.();
+  }
   static get currentLink() {
     return bookStore.getCurrentLink?.();
   }

packages/gem-book/src/element/elements/pre.ts

@@ -4,7 +4,7 @@ import { styleMap } from '@mantou/gem/lib/utils';
 
 import { theme } from '../helper/theme';
 
-const prismjs = 'https://cdn.skypack.dev/[email protected]';
+const prismjs = 'https://esm.sh/[email protected]';
 
 let contenteditableValue = 'true';
 (() => {
@@ -320,7 +320,7 @@ export class Pre extends GemElement {
       if (!this.getBoundingClientRect().width) return;
       if (this.status === 'hidden') return;
       if (!this.codeRef.element) return;
-      await import(/* @vite-ignore */ /* webpackIgnore: true */ `${prismjs}?min`);
+      await import(/* @vite-ignore */ /* webpackIgnore: true */ prismjs);
       const { Prism } = window as any;
       if (this.codelang && !Prism.languages[this.codelang]) {
         const lang = langAliases[this.codelang] || this.codelang;

packages/gem-book/src/element/store.ts

@@ -15,7 +15,6 @@ import './elements/main';
 import './elements/404';
 
 interface CurrentBookConfig {
-  devMode: boolean;
   config: BookConfig;
 
   links: NavItemWithLink[];
@@ -29,6 +28,7 @@ interface CurrentBookConfig {
   homePage: string;
   currentLinks: NavItemWithLink[];
   getCurrentLink: () => NavItemWithLink;
+  isDevMode: () => boolean;
 }
 
 export const bookStore = createStore<Partial<CurrentBookConfig>>({});
@@ -135,7 +135,7 @@ function getLinkRouters(links: NavItemWithLink[], title: string, lang: string, d
       async getContent() {
         const renderer = getRenderer({ lang, link: originLink, displayRank });
         const content = await fetchDocument(originLink, lang, hash);
-        if (bookStore.devMode) await new Promise((res) => setTimeout(res, 500));
+        if (bookStore.isDevMode?.()) await new Promise((res) => setTimeout(res, 500));
         return html`<gem-book-main role="article" .renderer=${renderer} .content=${content}></gem-book-main>`;
       },
       data: item,
@@ -252,7 +252,7 @@ export function updateBookConfig(config?: BookConfig, gemBookElement?: GemBookEl
   });
   if (gemBookElement) {
     updateStore(bookStore, {
-      devMode: gemBookElement.dev,
+      isDevMode: () => gemBookElement.dev,
       getCurrentLink: () => {
         return gemBookElement?.routeRef.element?.currentRoute?.data as NavItemWithLink;
       },

packages/gem-book/src/plugins/api.ts

@@ -7,7 +7,7 @@ import type { Main } from '../element/elements/main';
 import type { GemBookElement } from '../element';
 
 const tsMorph = 'https://esm.sh/[email protected]';
-const gemAnalyzer = 'https://jspm.dev/gem-analyzer';
+const gemAnalyzer = 'https://esm.sh/gem-analyzer';
 
 type State = { elements?: ElementDetail[]; exports?: ExportDetail[]; error?: any };
 
@@ -73,9 +73,10 @@ customElements.whenDefined('gem-book').then(() => {
 
     #parseFile = async (text: string) => {
       const { Project } = (await import(/* webpackIgnore: true */ tsMorph)) as typeof import('ts-morph');
-      const { getElements, getExports } = GemBookPluginElement.devMode
-        ? await import('gem-analyzer')
-        : ((await import(/* webpackIgnore: true */ gemAnalyzer)) as typeof import('gem-analyzer'));
+      const { getElements, getExports } =
+        config.github === 'https://github.com/mantou132/gem'
+          ? await import('gem-analyzer')
+          : ((await import(/* webpackIgnore: true */ gemAnalyzer)) as typeof import('gem-analyzer'));
       const project = new Project({ useInMemoryFileSystem: true });
       const file = project.createSourceFile(this.src, text);
       return { elements: getElements(file), exports: getExports(file) };

packages/gem-book/src/plugins/comment.ts

@@ -1,6 +1,7 @@
 import type { GemBookElement } from '../element';
 
-const url = 'https://jspm.dev/[email protected]';
+const gitalkUrl = 'https://esm.sh/[email protected]';
+const gitalkCSSUrl = 'https://esm.sh/[email protected]/dist/gitalk.css';
 
 customElements.whenDefined('gem-book').then(async () => {
   const { GemBookPluginElement } = customElements.get('gem-book') as typeof GemBookElement;
@@ -17,7 +18,7 @@ customElements.whenDefined('gem-book').then(async () => {
 
     render() {
       return html`
-        <link rel="stylesheet" href="${url}/dist/gitalk.css" />
+        <link rel="stylesheet" href=${gitalkCSSUrl} />
         <div id="comment"></div>
         <style>
           :host {
@@ -70,7 +71,7 @@ customElements.whenDefined('gem-book').then(async () => {
       const ele = this.shadowRoot?.querySelector('#comment');
       if (!ele) return;
       ele.innerHTML = '';
-      const { default: Gitalk } = await import(/* webpackIgnore: true */ url);
+      const { default: Gitalk } = await import(/* webpackIgnore: true */ gitalkUrl);
       const [_, owner, repo] = github ? new URL(github).pathname.split('/') : [];
       new Gitalk({
         clientID: this.clientID,

packages/gem-book/src/plugins/docsearch.ts

@@ -2,8 +2,8 @@ import type { RefObject } from '@mantou/gem';
 
 import type { GemBookElement } from '../element';
 
-const moduleLink = 'https://cdn.skypack.dev/@docsearch/[email protected]';
-const styleLink = 'https://unpkg.com/@docsearch/[email protected]/dist/style.css';
+const moduleLink = 'https://esm.sh/@docsearch/[email protected]';
+const styleLink = 'https://esm.sh/@docsearch/[email protected]/dist/style.css';
 
 customElements.whenDefined('gem-book').then(async () => {
   const { GemBookPluginElement } = customElements.get('gem-book') as typeof GemBookElement;

packages/gem-examples/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@mantou/gem": "^1.7.2",
-    "duoyun-ui": "^1.1.0"
+    "duoyun-ui": "^1.1.2"
   },
   "devDependencies": {
     "@gemjs/config": "^1.6.11",

packages/gem/docs/en/001-guide/README.md

@@ -15,7 +15,7 @@ npm install @mantou/gem
 or use ESM:
 
 ```js
-import * as Gem from 'https://jspm.dev/@mantou/gem';
+import * as Gem from 'https://esm.sh/@mantou/gem';
 ```
 
 or use UNPKG:

packages/gem/docs/zh/001-guide/README.md

@@ -20,7 +20,7 @@ npm install @mantou/gem
 或者使用 ESM：
 
 ```js
-import * as Gem from 'https://jspm.dev/@mantou/gem';
+import * as Gem from 'https://esm.sh/@mantou/gem';
 ```
 
 或者使用 UNPKG：