znode-plugin 0.1.9 → 0.1.11

package/README.md

@@ -248,11 +248,20 @@ package. The store then renders your copy in its place; everything else stays th
 npx znode eject ProductBasicInfo      # or by its slot: npx znode eject product.basicInfo
 ```
 
-It copies the store's file to `src/components/ProductBasicInfo.tsx` (imports turned into the store's `@znode/...`
-aliases), registers it in `src/browser.tsx` under its slot, and prints any npm package the copy needs
-(`npm install zustand@4.5.5`). Edit the copy, then `npm run build` and `npm run dev`. The copy is yours: store fixes to
-the component no longer reach it, so compare it with the store's file after a store upgrade. `npx znode eject` with no
-name lists what can be ejected.
+It copies the store's file to `src/components/ProductBasicInfo.tsx` and registers it in `src/browser.tsx` under its
+slot. On the way:
+
+- **Store imports** become the store's `@znode/...` aliases, or the store barrel that re-exports them
+  (`../../stores/modal` -> `@znode/base-components/stores`).
+- **npm packages** the copy needs are installed at the **store's exact version** (`installed (store versions):
+  zustand@4.5.7`); the ones the store shares (`next-intl`, `lodash`) are not installed: the store's copy is used, and
+  `link-store` gives you their types. `--no-install` only prints the `npm install` line.
+- **Images** it imports from the store (`../../assets/no-image.png`) are copied into `src/images/`. The build ships them
+  with the package and turns the import into `{ src, width, height }`, as Next.js does, so `<Image src={noImage}>` works
+  unchanged. Your own code can import images the same way (`import logo from "../images/logo.png"`).
+
+Edit the copy, then `npm run build` and `npm run dev`. The copy is yours: store fixes to the component no longer reach
+it, so compare it with the store's file after a store upgrade. `npx znode eject` with no name lists what can be ejected.
 
 **The component has no slot yet?** `eject` offers to create one in the **base store** (the store you linked), then ejects:
 

package/lib/next-imports.mjs

@@ -150,6 +150,40 @@ const VALUES = {
 
 const FONT_MODULE = "next/font/google";
 const VIRTUAL = "\0znode-next:";
+
+// Image imports, as Next.js does them (import noImage from "./no-image.png"): the file goes into the package (dist; the
+// store serves a package's files at /api/extensions/files/<file>) and the import becomes { src, width, height }, what
+// next/image takes for a static import, so code written for the store works unchanged.
+const IMAGE = /\.(png|jpe?g|gif|webp|avif|svg|ico)$/i;
+const FILES_URL = "/api/extensions/files";
+
+// the image's size from its header (png, gif, jpeg, svg); 0 when it cannot be read (webp, avif, ico: pass width and
+// height to next/image yourself)
+function imageSize(b, ext) {
+  try {
+    if (ext === ".png" && b.readUInt32BE(0) === 0x89504e47) return { width: b.readUInt32BE(16), height: b.readUInt32BE(20) };
+    if (ext === ".gif" && b.toString("ascii", 0, 3) === "GIF") return { width: b.readUInt16LE(6), height: b.readUInt16LE(8) };
+    if ((ext === ".jpg" || ext === ".jpeg") && b[0] === 0xff && b[1] === 0xd8) {
+      for (let i = 2; i + 9 < b.length; ) {
+        if (b[i] !== 0xff) break;
+        const marker = b[i + 1];
+        if (marker >= 0xc0 && marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(marker)) return { width: b.readUInt16BE(i + 7), height: b.readUInt16BE(i + 5) };
+        i += 2 + b.readUInt16BE(i + 2);
+      }
+    }
+    if (ext === ".svg") {
+      const text = b.toString("utf8");
+      const tag = /<svg\b[^>]*>/i.exec(text)?.[0] || "";
+      const width = /\bwidth=["']([\d.]+)/.exec(tag)?.[1];
+      const height = /\bheight=["']([\d.]+)/.exec(tag)?.[1];
+      const box = /\bviewBox=["'][\d.\s,-]*?([\d.]+)[\s,]+([\d.]+)["']/.exec(tag);
+      return { width: Number(width || box?.[1] || 0), height: Number(height || box?.[2] || 0) };
+    }
+  } catch {
+    // a header too short to read: no size
+  }
+  return { width: 0, height: 0 };
+}
 const CHROME = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36";
 
 // the stand-in module: each name reads the store's module when used, never at load (a server part is also loaded where
@@ -321,11 +355,22 @@ async function transformFonts(code, id, context) {
  * The rollup plugin. part: "server" | "browser"; prefix: "<name>-<version>"; outDir: dist; fonts: collects what
  * next/font/google built (files, css), which the build adds to the package's assets and stylesheet.
  */
-export function znodeNext({ part, prefix, outDir, fonts, store, storeImports = [] }) {
+export function znodeNext({ part, prefix, outDir, fonts, store, storeImports = [], sourceRoot, buildRoot }) {
   return {
     name: "znode-next",
-    resolveId(source) {
+    resolveId(source, importer) {
       if (MODULES[source]) return VIRTUAL + source;
+      // an image the package's own code imports: the build compiles src/ into .build/ (code only), so a relative image
+      // path is looked up next to the source file the compiled one came from
+      if (IMAGE.test(source) && importer && source.startsWith(".")) {
+        const beside = path.resolve(path.dirname(importer), source);
+        if (fs.existsSync(beside)) return beside;
+        if (sourceRoot && buildRoot) {
+          const inSource = path.resolve(sourceRoot, path.relative(buildRoot, path.dirname(importer)), source);
+          if (fs.existsSync(inSource)) return inSource;
+        }
+        this.error(`image "${source}" (imported by ${path.basename(importer)}) not found: put it under src/ (e.g. src/assets/) and import it from there`);
+      }
       if (SHARED_PACKAGES.has(source) || source.startsWith("@znode/") || source.startsWith(STORE_FILE)) {
         if (!store) this.error(`"${source}" is a store module: connect the store first (npm run link-store -- <store repo>), which writes tsconfig.store.json`);
         // a server part imports from the store's server registry (an allow-list: agents, texts and store context, logger,
@@ -356,6 +401,18 @@ export function znodeNext({ part, prefix, outDir, fonts, store, storeImports = [
       return null;
     },
     load(id) {
+      if (IMAGE.test(id) && fs.existsSync(id)) {
+        // one copy per image, named by the package and a hash of its content (all packages' files share the store's
+        // plugin folder); it goes into the package's assets through the fonts list, whose files the build ships
+        const content = fs.readFileSync(id);
+        const hash = crypto.createHash("sha1").update(content).digest("hex").slice(0, 8);
+        const ext = path.extname(id).toLowerCase();
+        const name = `${prefix}-${path.basename(id, path.extname(id)).replace(/[^a-zA-Z0-9_-]/g, "-")}-${hash}${ext}`;
+        fs.writeFileSync(path.join(outDir, name), content);
+        if (!fonts.some((font) => font.files?.includes(name))) fonts.push({ files: [name], css: "" });
+        const { width, height } = imageSize(content, ext);
+        return `export default ${JSON.stringify({ src: `${FILES_URL}/${name}`, width, height })};`;
+      }
       if (!id.startsWith(VIRTUAL)) return null;
       const name = id.slice(VIRTUAL.length);
       if (name.startsWith(STORE)) return { code: storeStandIn(name.slice(STORE.length), part), syntheticNamedExports: "__store" };

package/lib/znode-package.mjs

@@ -49,7 +49,8 @@
 import fs from "node:fs";
 import path from "node:path";
 import { execFileSync, spawnSync } from "node:child_process";
-import { createRequire } from "node:module";
+import { builtinModules, createRequire } from "node:module";
+import { createHash } from "node:crypto";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import vm from "node:vm";
 import { TEMPLATES } from "./templates.mjs";
@@ -235,6 +236,24 @@ function build(target) {
   // the store modules its server part imports (the store's server registry, permission storeServer)
   const serverStoreImports = [];
   const store = linkedStore(dir);
+  // the npm packages its sources import: those the store does not share and the package does not have yet are installed
+  // at the store's version before anything compiles (--no-install: named instead); another version than the store's warns
+  if (store) {
+    const sources = [];
+    const walk = (folder) => {
+      if (!fs.existsSync(folder)) return;
+      for (const entry of fs.readdirSync(folder, { withFileTypes: true })) {
+        const file = path.join(folder, entry.name);
+        if (entry.isDirectory()) walk(file);
+        else if (/\.(tsx?|jsx?|mjs)$/.test(entry.name)) sources.push(file);
+      }
+    };
+    walk(path.join(dir, "src"));
+    const specs = sources.flatMap((file) => npmImportsOf(fs.readFileSync(file, "utf8")));
+    ensureStorePackages(dir, store, specs, { install: !process.argv.includes("--no-install") });
+    const drift = versionDrift(dir, store, specs);
+    if (drift.length) console.log(`warning installed at another version than the store's: ${drift.join(", ")} (npm install --save-exact <pkg>@<store version>)`);
+  }
   // A package with its own tsconfig.json (extending the store's tsconfig.base.json) is checked against the store's real
   // types (every @znode alias, no declarations to write), then compiled file by file without type information, JSX as
   // Next.js does (react/jsx-runtime: the store's). Without one, the package compiles as before (tsc, JSX factory h).
@@ -295,7 +314,8 @@ function build(target) {
         `  input: ${JSON.stringify(compiled)},`,
         `  output: { file: ${JSON.stringify(path.join(out, target))}, format: "es", sourcemap: true },`,
         `  plugins: [`,
-        `    znodeNext({ part: ${JSON.stringify(part)}, prefix: ${JSON.stringify(prefix)}, outDir: ${JSON.stringify(out)}, fonts, store, storeImports }),`,
+        // sourceRoot / buildRoot: an image a compiled file imports is found next to its source file (src/ -> .build/)
+        `    znodeNext({ part: ${JSON.stringify(part)}, prefix: ${JSON.stringify(prefix)}, outDir: ${JSON.stringify(out)}, fonts, store, storeImports, sourceRoot: ${JSON.stringify(path.dirname(path.join(dir, entry)))}, buildRoot: ${JSON.stringify(tmp)} }),`,
         `    { name: "fonts-out", writeBundle() { fs.writeFileSync(${JSON.stringify(fontsFile)}, JSON.stringify(fonts)); fs.writeFileSync(${JSON.stringify(storeImportsFile)}, JSON.stringify(storeImports)); } },`,
         `  ],`,
         `};`,
@@ -311,9 +331,10 @@ function build(target) {
 
   // styles: concatenated into one stylesheet, after the fonts next/font/google built; assets (fonts, images) keep their
   // names, which the stylesheet refers to
-  if (manifest.styles?.length || fonts.length) {
+  // (the fonts list also carries the images the code imports, with no CSS: next-imports.mjs)
+  if (manifest.styles?.length || fonts.some((font) => font.css)) {
     const css = [
-      ...fonts.map((font) => font.css),
+      ...fonts.map((font) => font.css).filter(Boolean),
       ...(manifest.styles || []).flatMap((pattern) => glob(dir, pattern)).map((file) => fs.readFileSync(file, "utf8")),
     ].join("\n");
     files.styles = [`${prefix}.css`];
@@ -551,7 +572,10 @@ function create(kind, name, dir) {
     fs.mkdirSync(path.dirname(full), { recursive: true });
     fs.writeFileSync(full, typeof content === "string" ? content : JSON.stringify(content, null, 2) + "\n");
   }
-  if (kind !== "content") fs.copyFileSync(path.join(HERE, "..", "types", "extension-api.d.ts"), path.join(target, "src", "extension-api.d.ts"));
+  if (kind !== "content") {
+    // the API types, with the image-import types they reference
+    for (const file of ["extension-api.d.ts", "images.d.ts"]) fs.copyFileSync(path.join(HERE, "..", "types", file), path.join(target, "src", file));
+  }
   console.log(`created ${kind} ${name} in ${target}`);
   console.log("  next: fill in label, publisher and description in znode-package.json, then run its build-and-upload.sh");
 }
@@ -704,12 +728,134 @@ function linkStore(storeRepo, project = ".") {
   const options = config.compilerOptions || {};
   const toSlash = (value) => value.split(path.sep).join("/");
   const file = path.resolve(project, "tsconfig.store.json");
+  // the npm packages the store shares at runtime (next-intl, lodash, ...): never installed in the package (the build uses
+  // the store's copy), so their types come from the store's own node_modules, at the store's version
+  const repo = path.dirname(base);
+  const sharedPaths = {};
+  for (const pkg of storeSharedPackages(repo)) {
+    const types = path.join(repo, "node_modules", "@types", pkg.replace(/^@/, "").replace("/", "__"));
+    const dir = path.join(repo, "node_modules", pkg);
+    if (fs.existsSync(path.join(types, "package.json"))) sharedPaths[pkg] = [toSlash(types)];
+    else if (fs.existsSync(path.join(dir, "package.json"))) {
+      sharedPaths[pkg] = [toSlash(dir)];
+      sharedPaths[`${pkg}/*`] = [`${toSlash(dir)}/*`];
+    }
+  }
   const linked = {
     extends: "znode-plugin/tsconfig.json",
-    compilerOptions: { baseUrl: toSlash(path.resolve(path.dirname(base), options.baseUrl || ".")), paths: options.paths || {} },
+    compilerOptions: { baseUrl: toSlash(path.resolve(repo, options.baseUrl || ".")), paths: { ...sharedPaths, ...(options.paths || {}) } },
   };
   fs.writeFileSync(file, JSON.stringify(linked, null, 2) + "\n");
-  console.log(`linked ${file} to ${base} (${Object.keys(linked.compilerOptions.paths).length} store aliases)`);
+  const shared = Object.keys(sharedPaths).filter((key) => !key.endsWith("/*"));
+  console.log(
+    `linked ${file} to ${base} (${Object.keys(options.paths || {}).length} store aliases${shared.length ? `; types of the packages the store shares: ${shared.join(", ")}` : ""})`
+  );
+}
+
+// ---- the store's npm packages: shared at runtime, or installed in the package at the store's version -------------------
+// react, react-dom, next and @znode/* are the store's at runtime (stand-ins, never bundled); so are the store's shared
+// packages (its registry's sharedPackages: next-intl, lodash, ...). Any other npm package a package imports is bundled
+// into it, so it must be installed in the package: at the version the store has installed, so a copied store component
+// behaves as it does in the store. Installed exactly (no ^), from the npm registry, by eject and by build.
+const RUNTIME_PROVIDED = /^(react|react-dom|next|@znode)(\/|$)/;
+const DEFAULT_SHARED = ["lodash", "next-intl"];
+const packageNameOf = (spec) => (spec.startsWith("@") ? spec.split("/").slice(0, 2).join("/") : spec.split("/")[0]);
+
+function storeSharedPackages(root) {
+  for (const name of ["store-module-registry.json", "store-server-module-registry.json"]) {
+    const file = path.join(root, "packages/extensions", name);
+    try {
+      const list = readJson(file).sharedPackages;
+      if (Array.isArray(list) && list.length) return list.map(String);
+    } catch {
+      // no registry, or one from before sharedPackages: the default list
+    }
+  }
+  return DEFAULT_SHARED;
+}
+
+// the version the store has installed (its node_modules), else its package.json range without ^ / ~
+function storePackageVersion(root, pkg) {
+  try {
+    return readJson(path.join(root, "node_modules", pkg, "package.json")).version;
+  } catch {
+    try {
+      const manifest = readJson(path.join(root, "package.json"));
+      const range = { ...(manifest.devDependencies || {}), ...(manifest.dependencies || {}) }[pkg];
+      return range ? range.replace(/^[\^~]/, "") : null;
+    } catch {
+      return null;
+    }
+  }
+}
+
+const installedIn = (project, pkg) => fs.existsSync(path.join(project, "node_modules", pkg, "package.json"));
+
+// the npm packages code imports (bare specifiers, type-only imports included: their types are needed too)
+const npmImportsOf = (code) =>
+  [...code.matchAll(/(?:^|[^\w$.])(?:import|export)\s*(?:[^"';]*?\s+from\s*)?["']([^"'.][^"']*)["']|import\(\s*["']([^"'.][^"']*)["']\s*\)/g)]
+    .map((match) => match[1] || match[2])
+    .filter((spec) => !spec.startsWith("node:") && !builtinModules.includes(packageNameOf(spec)));
+
+/**
+ * The npm packages `specs` need in the package at `project`: the store's runtime and shared packages are left out, the
+ * others not installed yet are installed at the store's version (with their @types package when the store has one), or
+ * only named when install is false. Returns what was done, for the caller's message.
+ */
+function ensureStorePackages(project, store, specs, { install = true } = {}) {
+  const root = store.root;
+  const shared = new Set(storeSharedPackages(root));
+  const wanted = new Map();
+  const typesWanted = new Map();
+  const notInStore = new Set();
+  const sharedUsed = new Set();
+  for (const pkg of new Set(specs.map(packageNameOf))) {
+    if (RUNTIME_PROVIDED.test(pkg)) continue;
+    if (shared.has(pkg)) {
+      sharedUsed.add(pkg);
+      continue;
+    }
+    if (installedIn(project, pkg)) continue;
+    const version = storePackageVersion(root, pkg);
+    if (!version) {
+      notInStore.add(pkg);
+      continue;
+    }
+    wanted.set(pkg, `${pkg}@${version}`);
+    const typesName = `@types/${pkg.replace(/^@/, "").replace("/", "__")}`;
+    const typesVersion = fs.existsSync(path.join(root, "node_modules", typesName, "package.json")) ? storePackageVersion(root, typesName) : null;
+    if (typesVersion && !installedIn(project, typesName)) typesWanted.set(typesName, `${typesName}@${typesVersion}`);
+  }
+  const run = (args) => spawnSync(process.platform === "win32" ? "npm.cmd" : "npm", args, { cwd: project, stdio: "inherit", shell: process.platform === "win32" });
+  let installed = [];
+  if (wanted.size) {
+    const list = [...wanted.values()];
+    if (install) {
+      console.log(`installing the store's versions: ${list.join(" ")}`);
+      const result = run(["install", "--save-exact", "--no-audit", "--no-fund", ...list]);
+      if (result.status !== 0) fail(`npm install failed: run it yourself in ${project}: npm install --save-exact ${list.join(" ")}`);
+      if (typesWanted.size) run(["install", "--save-dev", "--save-exact", "--no-audit", "--no-fund", ...typesWanted.values()]);
+      installed = [...list, ...typesWanted.values()];
+    } else {
+      console.log(`needs the store's versions (not installed: --no-install): npm install --save-exact ${list.join(" ")}`);
+      if (typesWanted.size) console.log(`  and its types: npm install --save-dev --save-exact ${[...typesWanted.values()].join(" ")}`);
+    }
+  }
+  for (const pkg of notInStore) console.log(`warning "${pkg}" is not a dependency of the store: install it yourself (npm install ${pkg})`);
+  return { installed, shared: [...sharedUsed], notInStore: [...notInStore] };
+}
+
+// packages installed in the package at another version than the store's (after a store upgrade): a warning, the store's
+// version is what its components were written against
+function versionDrift(project, store, specs) {
+  const drift = [];
+  for (const pkg of new Set(specs.map(packageNameOf))) {
+    if (RUNTIME_PROVIDED.test(pkg) || !installedIn(project, pkg)) continue;
+    const mine = readJson(path.join(project, "node_modules", pkg, "package.json")).version;
+    const theirs = fs.existsSync(path.join(store.root, "node_modules", pkg, "package.json")) ? storePackageVersion(store.root, pkg) : null;
+    if (theirs && mine !== theirs) drift.push(`${pkg} ${mine} (store: ${theirs})`);
+  }
+  return drift;
 }
 
 // ---- eject: a store component copied into the package, in place of the store's, through its slot ----------------
@@ -779,8 +925,45 @@ function ejectableComponents(root) {
   return found.sort((a, b) => a.name.localeCompare(b.name));
 }
 
-// a store file's import path as the package can import it: the store alias that maps to that file, without extension
-function storeAlias(store, absolute) {
+// a store image a copied file imports (../../assets/no-image.png): copied into the package's src/images (not src/assets,
+// which a package ships as it is: an imported image is shipped by the build, which turns the import into
+// { src, width, height }), and the import's new path from the copy
+const STORE_ASSET = /\.(png|jpe?g|gif|webp|avif|svg|ico)$/i;
+function copyStoreAsset(project, absolute, copyFile) {
+  if (!fs.existsSync(absolute)) return null;
+  const assets = path.join(project, "src", "images");
+  fs.mkdirSync(assets, { recursive: true });
+  const content = fs.readFileSync(absolute);
+  let local = path.join(assets, path.basename(absolute));
+  // another image with the same name already there: this one gets a hash in its name
+  if (fs.existsSync(local) && !fs.readFileSync(local).equals(content)) {
+    const ext = path.extname(absolute);
+    local = path.join(assets, `${path.basename(absolute, ext)}-${createHash("sha1").update(content).digest("hex").slice(0, 6)}${ext}`);
+  }
+  if (!fs.existsSync(local)) fs.writeFileSync(local, content);
+  const spec = path.relative(path.dirname(copyFile), local).split(path.sep).join("/");
+  return { spec: spec.startsWith(".") ? spec : `./${spec}`, file: path.relative(project, local).split(path.sep).join("/") };
+}
+
+// a store file that re-exports `target` (export * from / export { … } from), followed through nested barrels
+function reExports(barrel, target, seen = new Set()) {
+  if (!barrel || seen.has(barrel) || !fs.existsSync(barrel)) return false;
+  seen.add(barrel);
+  const asFile = (base) =>
+    [base, `${base}.ts`, `${base}.tsx`, path.join(base, "index.ts"), path.join(base, "index.tsx")].find((file) => fs.existsSync(file) && fs.statSync(file).isFile());
+  for (const match of fs.readFileSync(barrel, "utf8").matchAll(/export\s*(?:\*|\{[^}]*\})\s*from\s*["'](\.{1,2}\/[^"']+)["']/g)) {
+    const file = asFile(path.resolve(path.dirname(barrel), match[1]));
+    if (!file) continue;
+    if (file.split(path.sep).join("/").replace(/\.(tsx?|jsx?)$/, "").replace(/\/index$/, "") === target) return true;
+    if (reExports(file, target, seen)) return true;
+  }
+  return false;
+}
+
+// a store file's import path as the package can import it: the store alias that maps to that file, without extension;
+// else, for named imports (statement: the import's text up to its path), an exact alias whose barrel re-exports the file
+// (".../stores/modal" -> "@znode/base-components/stores"): export * does not carry a default, so a default import is not
+function storeAlias(store, absolute, { statement = "" } = {}) {
   const target = absolute.split(path.sep).join("/").replace(/\.(tsx?|jsx?)$/, "").replace(/\/index$/, "");
   let best = null;
   const norm = (value) => path.resolve(store.root, value).split(path.sep).join("/").replace(/\.(tsx?|jsx?)$/, "").replace(/\/index$/, "");
@@ -795,7 +978,14 @@ function storeAlias(store, absolute) {
       if (target.startsWith(prefix) && (!best || prefix.length > best.prefix.length)) best = { prefix, alias: alias.slice(0, -1) };
     }
   }
-  return best ? best.alias + target.slice(best.prefix.length) : null;
+  if (best) return best.alias + target.slice(best.prefix.length);
+  const namedOnly = /^import\s*(?:type\s+)?\{/.test(statement.trim()) || /^export\s/.test(statement.trim());
+  if (!namedOnly) return null;
+  for (const [alias, targets] of Object.entries(store.paths)) {
+    if (alias.endsWith("/*") || !alias.startsWith("@znode/")) continue;
+    if (targets.some((pattern) => reExports(path.resolve(store.root, pattern), target))) return alias;
+  }
+  return null;
 }
 
 // a question on the terminal (only asked when stdin is a terminal); one line reader for the whole run, so answers
@@ -838,10 +1028,19 @@ function ejectRouteCopy(project, s, store) {
   text = text.replace(new RegExp(`^(async\\s+)?function\\s+${s.base}\\s*\\(`, "m"), (whole, isAsync) => `export ${isAsync || ""}function ${name}(`);
   // relative imports become the store's aliases (the package lives elsewhere)
   const warnings = [];
-  text = text.replace(/((?:from|import)\s*\(?\s*["'])(\.{1,2}\/[^"']+)(["'])/g, (whole, before, spec, after) => {
-    const alias = storeAlias(store, path.resolve(path.dirname(storeFile), spec));
+  text = text.replace(/((?:from|import)\s*\(?\s*["'])(\.{1,2}\/[^"']+)(["'])/g, (whole, before, spec, after, offset, source) => {
+    // a store image: copied into src/images, imported from there (the build ships it)
+    if (STORE_ASSET.test(spec)) {
+      const asset = copyStoreAsset(project, path.resolve(path.dirname(storeFile), spec), path.join(project, "src", "server", "pages", `${name}.tsx`));
+      if (!asset) {
+        warnings.push(`image ${spec}: not found in the store; add it under src/images and import it from there`);
+        return whole;
+      }
+      return `${before}${asset.spec}${after}`;
+    }
+    const alias = storeAlias(store, path.resolve(path.dirname(storeFile), spec), { statement: source.slice(source.lastIndexOf("import", offset), offset) });
     if (!alias) {
-      warnings.push(`import ${spec}: no store alias for it; change it by hand`);
+      warnings.push(`import ${spec}: no store alias for it (nor a store barrel that re-exports its names); change it by hand`);
       return whole;
     }
     return `${before}${alias}${after}`;
@@ -886,7 +1085,7 @@ function ejectRouteCopy(project, s, store) {
   return { text, warnings };
 }
 
-function ejectServerSlot(project, s, force, store) {
+function ejectServerSlot(project, s, force, store, noInstall = false) {
   const name = s.page;
   const out = path.join(project, "src", "server", "pages", `${name}.tsx`);
   if (fs.existsSync(out) && !force) fail(`${path.relative(project, out)} exists: delete it or run znode eject ${name} --force`);
@@ -896,6 +1095,9 @@ function ejectServerSlot(project, s, force, store) {
     fs.writeFileSync(out, text);
     console.log(`ejected ${name} (a copy of ${s.files[0]}, server slot "${s.name}") -> ${path.relative(project, out)}`);
     registerServerSlot(project, s, name);
+    const deps = ensureStorePackages(project, store, npmImportsOf(text), { install: !noInstall });
+    if (deps.installed.length) console.log(`installed (store versions): ${deps.installed.join(", ")}`);
+    if (deps.shared.length) console.log(`shared by the store (not installed; types from the linked store): ${deps.shared.join(", ")}`);
     for (const warning of warnings) console.log(`warning ${warning}`);
     console.log(`\nNext: edit ${path.relative(project, out)}, then npm run build (it names any store import a server part cannot use) and npm run dev.`);
     return;
@@ -954,7 +1156,7 @@ function registerServerSlot(project, s, name) {
   console.log(`registered "${s.name}": ${local} in src/server.tsx (serverSlots)`);
 }
 
-async function eject(name, force, { slot: slotArg, yes } = {}) {
+async function eject(name, force, { slot: slotArg, yes, noInstall } = {}) {
   const project = path.resolve(".");
   if (!fs.existsSync(path.join(project, MANIFEST))) fail(`run znode eject in a package folder (the one with ${MANIFEST})`);
   const store = linkedStore(project);
@@ -980,7 +1182,7 @@ async function eject(name, force, { slot: slotArg, yes } = {}) {
   let c = find(components);
   if (!c) {
     const server = findServer();
-    if (server) return ejectServerSlot(project, server, force, store);
+    if (server) return ejectServerSlot(project, server, force, store, noInstall);
   }
   if (!c) {
     // no slot hands this component over yet: offer to create one in the base store (what znode create-slot does), then eject
@@ -1012,7 +1214,7 @@ async function eject(name, force, { slot: slotArg, yes } = {}) {
       const server = findServer();
       if (server) {
         console.log("");
-        return ejectServerSlot(project, server, force, store);
+        return ejectServerSlot(project, server, force, store, noInstall);
       }
       fail(`the slot "${slot}" was created, but ${name} is still not found as ejectable; check the store diff`);
     }
@@ -1022,17 +1224,28 @@ async function eject(name, force, { slot: slotArg, yes } = {}) {
   const out = path.join(project, "src", "components", `${c.name}.tsx`);
   if (fs.existsSync(out) && !force) fail(`${path.relative(project, out)} exists: delete it or run znode eject ${c.name} --force`);
   const warnings = [];
+  // the store images the copy imports, copied into src/images
+  const copiedAssets = new Set();
   let text = fs.readFileSync(c.file, "utf8");
   // relative imports become the store's aliases (the package lives elsewhere); a style file stays the store's
-  text = text.replace(/((?:from|import)\s*\(?\s*["'])(\.{1,2}\/[^"']+)(["'])/g, (whole, before, spec, after) => {
+  text = text.replace(/((?:from|import)\s*\(?\s*["'])(\.{1,2}\/[^"']+)(["'])/g, (whole, before, spec, after, offset, source) => {
     const absolute = path.resolve(path.dirname(c.file), spec);
     if (/\.(s?css)$/.test(spec)) {
       warnings.push(`style import ${spec}: kept out of the copy; the store's own stylesheet is loaded where the store renders it, add your CSS to src/styles/`);
       return `${before}${spec}${after}`;
     }
-    const alias = storeAlias(store, fs.existsSync(absolute) || /\.\w+$/.test(spec) ? absolute : absolute);
+    if (STORE_ASSET.test(spec)) {
+      const asset = copyStoreAsset(project, absolute, out);
+      if (!asset) {
+        warnings.push(`image ${spec}: not found in the store; add it under src/images and import it from there`);
+        return whole;
+      }
+      copiedAssets.add(asset.file);
+      return `${before}${asset.spec}${after}`;
+    }
+    const alias = storeAlias(store, absolute, { statement: source.slice(source.lastIndexOf("import", offset), offset) });
     if (!alias) {
-      warnings.push(`import ${spec}: no store alias for it; change it by hand`);
+      warnings.push(`import ${spec}: no store alias for it (nor a store barrel that re-exports its names); change it by hand`);
       return whole;
     }
     return `${before}${alias}${after}`;
@@ -1050,33 +1263,13 @@ async function eject(name, force, { slot: slotArg, yes } = {}) {
   fs.mkdirSync(path.dirname(out), { recursive: true });
   fs.writeFileSync(out, text);
   console.log(`ejected ${c.name} -> ${path.relative(project, out)}`);
+  if (copiedAssets.size) console.log(`copied the store's images it imports: ${[...copiedAssets].join(", ")} (shipped with the package)`);
 
-  // npm packages the copy imports that this package does not have (react, next and the store's @znode modules come from
-  // the store): install them at the store's version, so the types match and the build finds them
-  const PROVIDED = /^(react|react-dom|next|next-intl|@znode)(\/|$)/;
-  const storePackage = (() => {
-    try {
-      return readJson(path.join(store.root, "package.json"));
-    } catch {
-      return {};
-    }
-  })();
-  const storeDeps = { ...(storePackage.devDependencies || {}), ...(storePackage.dependencies || {}) };
-  const missing = new Map();
-  for (const m of text.matchAll(/(?:from|import)\s*\(?\s*["']([^."'/][^"']*)["']/g)) {
-    const spec = m[1];
-    if (PROVIDED.test(spec)) continue;
-    const pkg = spec.startsWith("@") ? spec.split("/").slice(0, 2).join("/") : spec.split("/")[0];
-    try {
-      createRequire(path.join(project, "package.json")).resolve(`${pkg}/package.json`);
-    } catch {
-      missing.set(pkg, storeDeps[pkg] ? `${pkg}@${storeDeps[pkg].replace(/^[\^~]/, "")}` : pkg);
-    }
-  }
-  if (missing.size) {
-    console.log(`\nThe copy imports npm packages this package does not have (bundled into the package when it builds):`);
-    console.log(`  npm install ${[...missing.values()].join(" ")}`);
-  }
+  // npm packages the copy imports: the store's shared ones are used from the store (types through link-store), the others
+  // are installed in this package at the store's version (bundled into the package when it builds)
+  const deps = ensureStorePackages(project, store, npmImportsOf(text), { install: !noInstall });
+  if (deps.installed.length) console.log(`installed (store versions): ${deps.installed.join(", ")}`);
+  if (deps.shared.length) console.log(`shared by the store (not installed; types from the linked store): ${deps.shared.join(", ")}`);
 
   // register the copy under the slot in src/browser.tsx
   const browser = path.join(project, "src", "browser.tsx");
@@ -1518,7 +1711,11 @@ if (command === "eject") {
   // eject <Name> [--force] [--slot <area.name>] [--yes]: --slot / --yes create a missing slot without asking
   const slotAt = args.indexOf("--slot");
   const name = args.find((arg, index) => index > 0 && !arg.startsWith("-") && !(slotAt >= 0 && index === slotAt + 1));
-  await eject(name, args.includes("--force"), { slot: slotAt >= 0 ? args[slotAt + 1] : undefined, yes: args.includes("--yes") || args.includes("-y") });
+  await eject(name, args.includes("--force"), {
+    slot: slotAt >= 0 ? args[slotAt + 1] : undefined,
+    yes: args.includes("--yes") || args.includes("-y"),
+    noInstall: args.includes("--no-install"),
+  });
   process.exit(0);
 }
 if (command === "link-store") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "znode-plugin",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Build, check, pack and deploy Znode runtime plugins and themes: the SDK behind every create-znode-plugin project.",
   "license": "UNLICENSED",
   "type": "module",

package/types/extension-api.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="./images.d.ts" />
 // Znode runtime extension API, version 1: what a theme, plugin or widget package builds against.
 // A package imports nothing from the webstore; everything comes in through these hooks and the browser host.
 

package/types/images.d.ts

@@ -0,0 +1,40 @@
+// Image imports in a package, as in a Next.js app: import noImage from "./no-image.png". The build ships the file with the
+// package and the import is { src, width, height } (what next/image takes for a static import; width and height are 0
+// for webp, avif and ico: pass them to next/image yourself).
+interface IZnodeStaticImage {
+  src: string;
+  width: number;
+  height: number;
+}
+declare module "*.png" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.jpg" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.jpeg" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.gif" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.webp" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.avif" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.ico" {
+  const image: IZnodeStaticImage;
+  export default image;
+}
+declare module "*.svg" {
+  const image: IZnodeStaticImage;
+  export default image;
+}