Use CDN files on website (#18545)

2025-12-30 14:14:17 +08:00
1 parent 38745522e3
commit f19a0581c7
@@ -26,6 +26,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
+          node-version: "24"
          cache: "yarn"

      - name: Install Dependencies
@@ -26,18 +26,6 @@
    <link rel="icon" href="/icon.png" />
    <link rel="apple-touch-icon" href="/icon.png" />

-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"
-      integrity="sha512-7O5pXpc0oCRrxk8RUfDYFgn0nO1t+jLuIOQdOMRp4APB7uZ4vSjspzp5y6YDtDs4VzUSTbWzBFZ/LKJhnyFOKw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"
-      integrity="sha512-qtX0GLM3qX8rxJN1gyDfcnMFFrKvixfoEOwbBib9VafR5vbChV5LeE5wSI/x+IlCkTY5ZFddFDCCfaVJJNnuKQ=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
    <link rel="stylesheet" href="./playground/playground.css" />

    <!-- Google tag (gtag.js) -->
@@ -25,15 +25,15 @@
    "@codemirror/lint": "6.9.2",
    "@codemirror/state": "6.5.3",
    "@codemirror/view": "6.39.4",
-    "@docusaurus/core": "3.9.2",
    "@docusaurus/preset-classic": "3.9.2",
    "@lezer/highlight": "1.2.3",
    "@mdx-js/react": "3.1.1",
    "@sandhose/prettier-animated-logo": "1.0.3",
-    "@types/react": "19.2.7",
+    "clipboard": "2.0.11",
    "clsx": "2.1.1",
    "cm6-graphql": "0.2.1",
    "graphql": "16.12.0",
+    "lz-string": "1.5.0",
    "prism-react-renderer": "2.4.1",
    "react": "19.2.1",
    "react-dom": "19.2.1",
@@ -42,9 +42,11 @@
    "vue": "3.5.25"
  },
  "devDependencies": {
+    "@docusaurus/core": "3.9.2",
    "@docusaurus/faster": "3.9.2",
    "@docusaurus/module-type-aliases": "3.9.2",
    "@docusaurus/types": "3.9.2",
+    "@types/react": "19.2.7",
    "@vitejs/plugin-vue": "6.0.2",
    "@vitejs/plugin-vue-jsx": "5.1.2",
    "concurrently": "9.2.1",
@@ -1,7 +1,6 @@
+import ClipboardJS from "clipboard";
 import { onMounted, reactive, ref } from "vue";

-const { ClipboardJS } = window;
-
 export const Button = (props, { slots, attrs }) => (
  <button type="button" class="btn" {...attrs}>
    {slots.default()}
@@ -137,6 +137,8 @@ function setup(props, { emit }) {
      }
    }

+    const lang = await getLanguageExtension(props.mode);
+
    const state = EditorState.create({
      doc: props.value || "",
      extensions: [
@@ -152,7 +154,7 @@ function setup(props, { emit }) {
        props.autoCloseBrackets ? closeBrackets() : undefined,
        props.matchBrackets ? bracketMatching() : undefined,

-        languageExt.of(await getLanguageExtension(props.mode)),
+        languageExt.of(lang),
        editorTheme.of(
          theme.value === "dark" ? catppuccinMocha : catppuccinLatte,
        ),
@@ -1,4 +1,4 @@
-const { LZString } = window;
+import LZString from "lz-string";

 export function read() {
  const hash = document.location.hash.slice(1);
@@ -14,30 +14,6 @@ toolbox.precache([
  ...packageFiles,
  "https://cdnjs.cloudflare.com/ajax/libs/sw-toolbox/3.6.0/sw-toolbox.js",

-  // CodeMirror; keep this in sync with website/pages/playground/index.html
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/fold/foldgutter.min.css",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/jsx/jsx.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/css/css.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/display/placeholder.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/display/rulers.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/search/searchcursor.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/comment/comment.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/wrap/hardwrap.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/fold/foldcode.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/fold/foldgutter.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/fold/brace-fold.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/sublime.min.js",
-
-  "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js",
-
  // Images
  "/prettier.png",
 ]);
@@ -1,12 +1,20 @@
+import fs from "node:fs/promises";
+import module from "node:module";
 import vitePluginVue from "@vitejs/plugin-vue";
 import vitePluginVueJsx from "@vitejs/plugin-vue-jsx";
 import { visualizer as rollupPluginVisualizer } from "rollup-plugin-visualizer";
 import { defineConfig } from "vite";
+import packageJson from "./package.json" with { type: "json" };

 const IS_PRODUCTION = process.env.NODE_ENV === "production";
 const IS_CI = Boolean(process.env.CI);
+const OUT_DIRECTORY = "./static/playground/";
+const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set([
+  "cm6-graphql",
+  "@docusaurus/preset-classic",
+]);

-export default defineConfig({
+export default defineConfig(async () => ({
  base: IS_PRODUCTION ? "/playground/" : undefined,
  publicDir: IS_PRODUCTION ? undefined : "./static/",
  plugins: [
@@ -14,10 +22,84 @@ export default defineConfig({
    vitePluginVueJsx(),
    IS_CI || !IS_PRODUCTION
      ? undefined
-      : rollupPluginVisualizer({ filename: "./static/playground/report.html" }),
+      : rollupPluginVisualizer({
+          filename: `${OUT_DIRECTORY}bundle-report.html`,
+        }),
  ].filter(Boolean),
+  resolve: {
+    alias: await buildCdnAlias(),
+  },
  build: {
-    outDir: "./static/playground/",
+    outDir: OUT_DIRECTORY,
    minify: IS_CI,
  },
-});
+}));
+
+async function buildCdnAlias() {
+  // if (!IS_PRODUCTION) {
+  //   return;
+  // }
+
+  return Object.fromEntries(
+    await Promise.all(
+      Object.keys(packageJson.dependencies)
+        .filter((name) => !DEPENDENCIES_EXCLUDE_FROM_CDN.has(name))
+        .map(async (name) => [name, await getPackageCdnUrl(name)]),
+    ),
+  );
+}
+
+async function getPackageCdnUrl(name) {
+  const version = packageJson.dependencies[name];
+  const url = new URL(`https://esm.sh/${name}@${version}`);
+  let deps = await getPackageDependencies(name, import.meta.url);
+
+  deps = deps
+    // Exclude self
+    .filter((dependency) => dependency.name !== name)
+    // Sort alphabetically
+    .toSorted(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
+
+  if (deps.length > 0) {
+    url.searchParams.set(
+      "deps",
+      deps.map(({ name, version }) => `${name}@${version}`).join(","),
+    );
+  }
+
+  return url;
+}
+
+async function getPackageJson(name, base) {
+  const packageJsonUrl = module.findPackageJSON(name, base);
+
+  return {
+    url: packageJsonUrl,
+    packageJson: JSON.parse(await fs.readFile(packageJsonUrl, "utf8")),
+  };
+}
+
+async function getPackageDependenciesWithoutCache(name, base) {
+  const { url, packageJson } = await getPackageJson(name, base);
+  const dependencies = [{ name, version: packageJson.version }];
+  for (const name of Object.keys(packageJson.dependencies ?? {})) {
+    dependencies.push(...(await getPackageDependencies(name, url)));
+  }
+  return dependencies;
+}
+
+const cache = new Map();
+function getPackageDependencies(name, base) {
+  // We don't need deps from `vue`
+  if (name === "vue") {
+    return [];
+  }
+
+  const cacheKey = JSON.stringify({ name, base });
+
+  if (!cache.has(cacheKey)) {
+    cache.set(cacheKey, getPackageDependenciesWithoutCache(name, base));
+  }
+
+  return cache.get(cacheKey);
+}
@@ -6121,6 +6121,17 @@ __metadata:
  languageName: node
  linkType: hard

+"clipboard@npm:2.0.11":
+  version: 2.0.11
+  resolution: "clipboard@npm:2.0.11"
+  dependencies:
+    good-listener: "npm:^1.2.2"
+    select: "npm:^1.1.2"
+    tiny-emitter: "npm:^2.0.0"
+  checksum: 10/929e92c5667d53cb3beb9482d2e6fe7612588fb3c08982a6001a65ea306b38cd462412a902a7ced75dac3c2eac2e075f5d4be1297e0bf1a9e891e10bb7150b47
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^8.0.1":
  version: 8.0.1
  resolution: "cliui@npm:8.0.1"
@@ -6864,6 +6875,13 @@ __metadata:
  languageName: node
  linkType: hard

+"delegate@npm:^3.1.2":
+  version: 3.2.0
+  resolution: "delegate@npm:3.2.0"
+  checksum: 10/d943058fe05897228b158cbd1bab05164df28c8f54127873231d6b03b0a5acc1b3ee1f98ac70ccc9b79cd84aa47118a7de111fee2923753491583905069da27d
+  languageName: node
+  linkType: hard
+
 "depd@npm:2.0.0, depd@npm:~2.0.0":
  version: 2.0.0
  resolution: "depd@npm:2.0.0"
@@ -8038,6 +8056,15 @@ __metadata:
  languageName: node
  linkType: hard

+"good-listener@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "good-listener@npm:1.2.2"
+  dependencies:
+    delegate: "npm:^3.1.2"
+  checksum: 10/14a755ad2eeb5ca65b98359438a0bd0ed0ae27304913b1f0866e1424fdff957133644d455d03178fbcb0f83d2cdaae414cc9cbdfebf4bd04a690854cd4a657ee
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1, gopd@npm:^1.2.0":
  version: 1.2.0
  resolution: "gopd@npm:1.2.0"
@@ -9438,6 +9465,15 @@ __metadata:
  languageName: node
  linkType: hard

+"lz-string@npm:1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 10/e86f0280e99a8d8cd4eef24d8601ddae15ce54e43ac9990dfcb79e1e081c255ad24424a30d78d2ad8e51a8ce82a66a930047fed4b4aa38c6f0b392ff9300edfc
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.21":
  version: 0.30.21
  resolution: "magic-string@npm:0.30.21"
@@ -12836,10 +12872,12 @@ __metadata:
    "@types/react": "npm:19.2.7"
    "@vitejs/plugin-vue": "npm:6.0.2"
    "@vitejs/plugin-vue-jsx": "npm:5.1.2"
+    clipboard: "npm:2.0.11"
    clsx: "npm:2.1.1"
    cm6-graphql: "npm:0.2.1"
    concurrently: "npm:9.2.1"
    graphql: "npm:16.12.0"
+    lz-string: "npm:1.5.0"
    prism-react-renderer: "npm:2.4.1"
    react: "npm:19.2.1"
    react-dom: "npm:19.2.1"
@@ -12983,6 +13021,13 @@ __metadata:
  languageName: node
  linkType: hard

+"select@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "select@npm:1.1.2"
+  checksum: 10/4346151e94f226ea6131e44e68e6d837f3fdee64831b756dd657cc0b02f4cb5107f867cb34a1d1216ab7737d0bf0645d44546afb030bbd8d64e891f5e4c4814e
+  languageName: node
+  linkType: hard
+
 "selfsigned@npm:^2.4.1":
  version: 2.4.1
  resolution: "selfsigned@npm:2.4.1"
@@ -13730,6 +13775,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tiny-emitter@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "tiny-emitter@npm:2.1.0"
+  checksum: 10/75633f4de4f47f43af56aff6162f25b87be7efc6f669fda256658f3c3f4a216f23dc0d13200c6fafaaf1b0c7142f0201352fb06aec0b77f68aea96be898f4516
+  languageName: node
+  linkType: hard
+
 "tiny-invariant@npm:^1.0.2":
  version: 1.3.3
  resolution: "tiny-invariant@npm:1.3.3"