vite-plugin-shopify-theme-islands 0.3.0 → 0.4.1

package/README.md

@@ -1,5 +1,9 @@
 # vite-plugin-shopify-theme-islands
 
+[![npm version](https://img.shields.io/npm/v/vite-plugin-shopify-theme-islands)](https://www.npmjs.com/package/vite-plugin-shopify-theme-islands)
+[![npm downloads](https://img.shields.io/npm/dm/vite-plugin-shopify-theme-islands)](https://www.npmjs.com/package/vite-plugin-shopify-theme-islands)
+[![license](https://img.shields.io/npm/l/vite-plugin-shopify-theme-islands)](./LICENSE)
+
 Island architecture for Shopify themes. Lazily hydrate custom elements using loading directives — only load the JavaScript when it's actually needed.
 
 ## Installation
@@ -146,6 +150,7 @@ Directives can be combined — the element will wait for all conditions to be me
 | `directiveVisible` | `string`             | `'client:visible'`          | Attribute name for the visible directive                    |
 | `directiveMedia`   | `string`             | `'client:media'`            | Attribute name for the media directive                      |
 | `directiveIdle`    | `string`             | `'client:idle'`             | Attribute name for the idle directive                       |
+| `debug`            | `boolean`            | `false`                     | Log discovered islands and active directives at startup     |
 
 ### Multiple island directories
 

package/dist/__tests__/plugin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/runtime.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/setup-dom.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -8,5 +8,7 @@ export interface ShopifyThemeIslandsOptions {
     directiveMedia?: string;
     /** Attribute for "load when idle". Default: `'client:idle'` */
     directiveIdle?: string;
+    /** Log discovered islands and generated virtual module. Default: `false` */
+    debug?: boolean;
 }
 export default function shopifyThemeIslands(options?: ShopifyThemeIslandsOptions): Plugin;

package/dist/index.js

@@ -1,11 +1,12 @@
 // src/index.ts
 import { readFileSync, readdirSync } from "node:fs";
 import { join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
 var VIRTUAL_ID = "vite-plugin-shopify-theme-islands/revive";
 var RESOLVED_ID = "\x00" + VIRTUAL_ID;
 var ISLAND_ID = "vite-plugin-shopify-theme-islands/island";
-var runtimePath = new URL("./runtime.js", import.meta.url).pathname;
-var islandPath = new URL("./island.js", import.meta.url).pathname;
+var runtimePath = fileURLToPath(new URL("./runtime.js", import.meta.url));
+var islandPath = fileURLToPath(new URL("./island.js", import.meta.url));
 var ISLAND_IMPORT_RE = /from\s+['"]vite-plugin-shopify-theme-islands\/island['"]/;
 var TS_JS_RE = /\.(ts|js)$/;
 var defaults = {
@@ -56,10 +57,19 @@ function shopifyThemeIslands(options = {}) {
   const directiveVisible = options.directiveVisible ?? defaults.directiveVisible;
   const directiveMedia = options.directiveMedia ?? defaults.directiveMedia;
   const directiveIdle = options.directiveIdle ?? defaults.directiveIdle;
+  const debug = options.debug ?? false;
+  const log = (...args) => {
+    if (debug)
+      console.log("[islands]", ...args);
+  };
   let resolvedDirs = rawDirs;
   let root = process.cwd();
   const islandFiles = new Set;
   let scanned = false;
+  const inDirectory = (file) => resolvedDirs.some((dir) => {
+    const absDir = dir.startsWith(root) ? dir : join(root, dir.replace(/^\//, ""));
+    return file.startsWith(absDir);
+  });
   return {
     name: "vite-plugin-shopify-theme-islands",
     enforce: "pre",
@@ -72,28 +82,45 @@ function shopifyThemeIslands(options = {}) {
         return;
       scanned = true;
       scanForIslandFiles(root, islandFiles);
+      for (const f of islandFiles)
+        if (inDirectory(f))
+          islandFiles.delete(f);
+      if (debug) {
+        log("Scanning directories:", resolvedDirs.map((d) => d + "**/*.{ts,js}").join(", "));
+        log("Directives:", { visible: directiveVisible, media: directiveMedia, idle: directiveIdle });
+        if (islandFiles.size) {
+          log(`Found ${islandFiles.size} island file(s) via mixin import:`);
+          for (const f of islandFiles)
+            log(" ", relative(root, f));
+        }
+      }
     },
     transform(code, id) {
       if (!id.endsWith(".ts") && !id.endsWith(".js"))
         return;
-      if (code.includes("shopify-theme-islands/island") && ISLAND_IMPORT_RE.test(code)) {
+      if (code.includes("shopify-theme-islands/island") && ISLAND_IMPORT_RE.test(code) && !inDirectory(id)) {
         islandFiles.add(id);
+        log("Detected island:", relative(root, id));
       } else {
-        islandFiles.delete(id);
+        if (islandFiles.delete(id))
+          log("Removed island:", relative(root, id));
       }
     },
     watchChange(id, { event }) {
       if (!TS_JS_RE.test(id))
         return;
       if (event === "delete") {
-        islandFiles.delete(id);
+        if (islandFiles.delete(id))
+          log("Removed island (deleted):", relative(root, id));
       } else {
         try {
           const content = readFileSync(id, "utf-8");
-          if (ISLAND_IMPORT_RE.test(content)) {
+          if (ISLAND_IMPORT_RE.test(content) && !inDirectory(id)) {
             islandFiles.add(id);
+            log("Detected island (watchChange):", relative(root, id));
           } else {
-            islandFiles.delete(id);
+            if (islandFiles.delete(id))
+              log("Removed island (watchChange):", relative(root, id));
           }
         } catch {}
       }

package/dist/runtime.js

@@ -37,7 +37,11 @@ function revive(islands, options) {
   const islandMap = new Map;
   for (const [key, loader] of Object.entries(islands)) {
     const tagName = key.split("/").pop().replace(/\.(ts|js)$/, "");
-    if (tagName.includes("-") && !islandMap.has(tagName))
+    if (!tagName.includes("-")) {
+      console.warn(`[islands] Skipping "${key.split("/").pop()}" — filename must contain a hyphen to match a valid custom element tag name (e.g. rename to "${tagName}-island.ts")`);
+      continue;
+    }
+    if (!islandMap.has(tagName))
       islandMap.set(tagName, loader);
   }
   const queued = new Set;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-shopify-theme-islands",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Vite plugin for island architecture in Shopify themes",
   "type": "module",
   "packageManager": "bun@1.3.10",
@@ -23,7 +23,9 @@
     "dist",
     "revive.d.ts"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/runtime.js"
+  ],
   "keywords": [
     "vite",
     "shopify",
@@ -52,12 +54,18 @@
     "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
     "build": "rm -rf dist && bun run build:js && bun run build:types",
     "check": "tsc --noEmit",
-    "prepublishOnly": "bun run build"
+    "prepublishOnly": "bun run build",
+    "test:plugin": "bun test src/__tests__/plugin.test.ts",
+    "test:runtime": "bun test ./src/__tests__/runtime.test.ts",
+    "test": "bun test",
+    "test:watch": "bun test --watch"
   },
   "peerDependencies": {
     "vite": ">=6"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.8.3",
+    "@types/bun": "latest",
     "@types/node": "^25.3.3",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"

package/revive.d.ts

@@ -1 +1 @@
-export {};
+declare module "vite-plugin-shopify-theme-islands/revive" {}