deck-plugin-sdk 1.10.3 → 1.11.1

package/packages.mjs

@@ -1,107 +1,107 @@
-// What a plugin's npm packages need from the build. Shared by Deck's own plugin build
-// (sdk/shim-builder.mjs, which makes the shim) and the SDK's (sdk/build-plugin.mjs), so the two cannot disagree.
-//
-// A plugin is installed as plugin.json and one plugin.js, so everything a package brings has to
-// end up inside that one file: a sidecar image, font or stylesheet would never be installed.
-//
-// "The plugin's own code" is what is under its src/. Anything else is a package, whether it sits
-// in node_modules or is linked in from another folder (`npm install ../my-lib`).
-import { build } from "esbuild";
-import { readFileSync } from "node:fs";
-import { dirname, join, relative, sep } from "node:path";
-
-/** Images and fonts the plugin or a package imports, inlined as data: URLs. */
-export const assetLoaders = Object.fromEntries(
-  [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".bmp", ".ico", ".svg", ".woff", ".woff2", ".ttf", ".otf", ".eot"]
-    .map((ext) => [ext, "dataurl"]),
-);
-
-const under = (path, dir) => !!path && (path + sep).toLowerCase().startsWith((dir + sep).toLowerCase());
-
-/**
- * Whether an import of Deck's shared icons or animation library comes from a package rather than
- * the plugin's own code. The plugin's own imports go to Deck's copies, through a shim that names
- * only the exports its `src/` uses; a package's would find its names missing there, so a package
- * gets the real library, bundled and tree-shaken like any other dependency.
- */
-export const fromPackage = (args, dir) =>
-  (args.path === "lucide-react" || args.path === "framer-motion") && !!args.importer && !under(args.importer, join(dir, "src"));
-
-/** `import "x.css"` with nothing bound: imported for its effect, so it is applied. */
-function importedBare(importer, spec) {
-  let text;
-  try { text = readFileSync(importer, "utf8"); } catch { return false; }
-  const q = spec.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  return new RegExp(`(^|[;\\n])\\s*import\\s*["']${q}["']`).test(text);
-}
-
-/**
- * CSS imported for its effect is applied: CSS a package imports, and CSS any code imports with
- * nothing bound (`import "some-lib/styles.css"`, `import "@fontsource/inter"`). It is bundled
- * with its `@import`s and the images and fonts its `url()`s name, and added to the page as one
- * <style> per file, replaced rather than duplicated when the plugin reloads.
- *
- * `import css from "./x.css"` in the plugin's own code still gives it the text, to inject where and
- * when it wants (the canvas plugin does that with Excalidraw's stylesheet).
- */
-export function packageCss(pluginId, dir) {
-  const src = join(dir, "src");
-  return {
-    name: "deck-package-css",
-    setup(b) {
-      b.onResolve({ filter: /.*/ }, async (args) => {
-        if (args.pluginData?.css || (args.kind !== "import-statement" && args.kind !== "require-call")) return undefined;
-        // The plugin's own code: a bare import, which may name a package whose entry is a
-        // stylesheet (@fontsource/inter). A package's: any import of a .css file.
-        const own = under(args.importer, src);
-        if (!(own ? importedBare(args.importer, args.path) : /\.css$/.test(args.path))) return undefined;
-        const r = await b.resolve(args.path, { kind: args.kind, resolveDir: args.resolveDir, importer: args.importer, pluginData: { css: true } });
-        if (r.errors.length) return { errors: r.errors };
-        if (!/\.css$/.test(r.path)) return undefined;
-        return { path: r.path, namespace: "deck-package-css" };
-      });
-      b.onLoad({ filter: /.*/, namespace: "deck-package-css" }, async (args) => {
-        const out = await build({ entryPoints: [args.path], outfile: "package.css", bundle: true, write: false, minify: true, loader: assetLoaders, logLevel: "silent" });
-        const css = out.outputFiles.find((f) => f.path.endsWith(".css"))?.text ?? "";
-        // Named by where it is inside the project, not on this machine: the bundle is shared.
-        const where = /[\\/]node_modules[\\/]/.test(args.path) ? args.path.replace(/^.*[\\/]node_modules[\\/]/, "") : relative(dir, args.path);
-        const key = `${pluginId}:${where.replace(/\\/g, "/")}`;
-        return {
-          resolveDir: dirname(args.path),
-          loader: "js",
-          contents: `const css = ${JSON.stringify(css)};
-if (typeof document !== "undefined") {
-  const key = ${JSON.stringify(key)};
-  let s = [...document.head.querySelectorAll("style[data-deck-css]")].find((e) => e.dataset.deckCss === key);
-  if (!s) { s = document.createElement("style"); s.dataset.deckCss = key; document.head.appendChild(s); }
-  s.textContent = css;
-}
-export default css;
-`,
-        };
-      });
-    },
-  };
-}
-
-/**
- * `import text from "some/file?raw"` gives a file's contents as a string, the convention Vite
- * uses. What a library needs as text rather than as code: PDF.js's worker, which a plugin starts
- * from a Blob URL because only plugin.js is installed (see the Requests plugin's script worker).
- *
- * `?base64` gives any file's bytes as a base64 string instead: data a library asks for only
- * sometimes (PDF.js's font files and image decoders), decoded when it does rather than every time
- * Deck starts, as a `.wasm` import would be.
- */
-export const rawImports = {
-  name: "deck-raw",
-  setup(b) {
-    b.onResolve({ filter: /\?(raw|base64)$/ }, async (args) => {
-      const as = args.path.endsWith("?raw") ? "text" : "base64";
-      const r = await b.resolve(args.path.replace(/\?(raw|base64)$/, ""), { kind: args.kind, resolveDir: args.resolveDir, importer: args.importer });
-      if (r.errors.length) return { errors: r.errors };
-      return { path: r.path, namespace: "deck-raw", pluginData: { as } };
-    });
-    b.onLoad({ filter: /.*/, namespace: "deck-raw" }, (args) => ({ contents: readFileSync(args.path), loader: args.pluginData?.as === "base64" ? "base64" : "text" }));
-  },
-};
+// What a plugin's npm packages need from the build. Shared by Deck's own plugin build
+// (sdk/shim-builder.mjs, which makes the shim) and the SDK's (sdk/build-plugin.mjs), so the two cannot disagree.
+//
+// A plugin is installed as plugin.json and one plugin.js, so everything a package brings has to
+// end up inside that one file: a sidecar image, font or stylesheet would never be installed.
+//
+// "The plugin's own code" is what is under its src/. Anything else is a package, whether it sits
+// in node_modules or is linked in from another folder (`npm install ../my-lib`).
+import { build } from "esbuild";
+import { readFileSync } from "node:fs";
+import { dirname, join, relative, sep } from "node:path";
+
+/** Images and fonts the plugin or a package imports, inlined as data: URLs. */
+export const assetLoaders = Object.fromEntries(
+  [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".bmp", ".ico", ".svg", ".woff", ".woff2", ".ttf", ".otf", ".eot"]
+    .map((ext) => [ext, "dataurl"]),
+);
+
+const under = (path, dir) => !!path && (path + sep).toLowerCase().startsWith((dir + sep).toLowerCase());
+
+/**
+ * Whether an import of Deck's shared icons or animation library comes from a package rather than
+ * the plugin's own code. The plugin's own imports go to Deck's copies, through a shim that names
+ * only the exports its `src/` uses; a package's would find its names missing there, so a package
+ * gets the real library, bundled and tree-shaken like any other dependency.
+ */
+export const fromPackage = (args, dir) =>
+  (args.path === "lucide-react" || args.path === "framer-motion") && !!args.importer && !under(args.importer, join(dir, "src"));
+
+/** `import "x.css"` with nothing bound: imported for its effect, so it is applied. */
+function importedBare(importer, spec) {
+  let text;
+  try { text = readFileSync(importer, "utf8"); } catch { return false; }
+  const q = spec.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`(^|[;\\n])\\s*import\\s*["']${q}["']`).test(text);
+}
+
+/**
+ * CSS imported for its effect is applied: CSS a package imports, and CSS any code imports with
+ * nothing bound (`import "some-lib/styles.css"`, `import "@fontsource/inter"`). It is bundled
+ * with its `@import`s and the images and fonts its `url()`s name, and added to the page as one
+ * <style> per file, replaced rather than duplicated when the plugin reloads.
+ *
+ * `import css from "./x.css"` in the plugin's own code still gives it the text, to inject where and
+ * when it wants (the canvas plugin does that with Excalidraw's stylesheet).
+ */
+export function packageCss(pluginId, dir) {
+  const src = join(dir, "src");
+  return {
+    name: "deck-package-css",
+    setup(b) {
+      b.onResolve({ filter: /.*/ }, async (args) => {
+        if (args.pluginData?.css || (args.kind !== "import-statement" && args.kind !== "require-call")) return undefined;
+        // The plugin's own code: a bare import, which may name a package whose entry is a
+        // stylesheet (@fontsource/inter). A package's: any import of a .css file.
+        const own = under(args.importer, src);
+        if (!(own ? importedBare(args.importer, args.path) : /\.css$/.test(args.path))) return undefined;
+        const r = await b.resolve(args.path, { kind: args.kind, resolveDir: args.resolveDir, importer: args.importer, pluginData: { css: true } });
+        if (r.errors.length) return { errors: r.errors };
+        if (!/\.css$/.test(r.path)) return undefined;
+        return { path: r.path, namespace: "deck-package-css" };
+      });
+      b.onLoad({ filter: /.*/, namespace: "deck-package-css" }, async (args) => {
+        const out = await build({ entryPoints: [args.path], outfile: "package.css", bundle: true, write: false, minify: true, loader: assetLoaders, logLevel: "silent" });
+        const css = out.outputFiles.find((f) => f.path.endsWith(".css"))?.text ?? "";
+        // Named by where it is inside the project, not on this machine: the bundle is shared.
+        const where = /[\\/]node_modules[\\/]/.test(args.path) ? args.path.replace(/^.*[\\/]node_modules[\\/]/, "") : relative(dir, args.path);
+        const key = `${pluginId}:${where.replace(/\\/g, "/")}`;
+        return {
+          resolveDir: dirname(args.path),
+          loader: "js",
+          contents: `const css = ${JSON.stringify(css)};
+if (typeof document !== "undefined") {
+  const key = ${JSON.stringify(key)};
+  let s = [...document.head.querySelectorAll("style[data-deck-css]")].find((e) => e.dataset.deckCss === key);
+  if (!s) { s = document.createElement("style"); s.dataset.deckCss = key; document.head.appendChild(s); }
+  s.textContent = css;
+}
+export default css;
+`,
+        };
+      });
+    },
+  };
+}
+
+/**
+ * `import text from "some/file?raw"` gives a file's contents as a string, the convention Vite
+ * uses. What a library needs as text rather than as code: PDF.js's worker, which a plugin starts
+ * from a Blob URL because only plugin.js is installed (see the Requests plugin's script worker).
+ *
+ * `?base64` gives any file's bytes as a base64 string instead: data a library asks for only
+ * sometimes (PDF.js's font files and image decoders), decoded when it does rather than every time
+ * Deck starts, as a `.wasm` import would be.
+ */
+export const rawImports = {
+  name: "deck-raw",
+  setup(b) {
+    b.onResolve({ filter: /\?(raw|base64)$/ }, async (args) => {
+      const as = args.path.endsWith("?raw") ? "text" : "base64";
+      const r = await b.resolve(args.path.replace(/\?(raw|base64)$/, ""), { kind: args.kind, resolveDir: args.resolveDir, importer: args.importer });
+      if (r.errors.length) return { errors: r.errors };
+      return { path: r.path, namespace: "deck-raw", pluginData: { as } };
+    });
+    b.onLoad({ filter: /.*/, namespace: "deck-raw" }, (args) => ({ contents: readFileSync(args.path), loader: args.pluginData?.as === "base64" ? "base64" : "text" }));
+  },
+};