nuxt-content-assets 0.9.0-alpha → 0.10.0

package/README.md

@@ -40,10 +40,10 @@ I loved being in the mountains.
 
 Almost as much as being in the sea!
 
-<video src="media/seaside.mp4"></video>
+:video{src="media/seaside.mp4"}
 ```
 
-The module supports a variety of [common tags](#how-it-works) and has additional goodies such as [image sizing](#image-sizing) and [live-reload](#live-reload).  
+At build time the module [collates and serves](#how-it-works) assets and content together.
 
 ## Demo
 
@@ -82,8 +82,6 @@ export default defineNuxtConfig({
 
 Run the dev server or build and local assets should now be served alongside markdown content.
 
-See the [How it works](#how-it-works) section for more information.
-
 ## Usage
 
 ### Overview
@@ -91,15 +89,24 @@ See the [How it works](#how-it-works) section for more information.
 Use relative paths anywhere within your documents:
 
 ```mdx
+Images
 ![image](image.jpg)
-<video src="media/video.mp4" />
+
+Links
+[link](docs/article.txt)
+
+Elements / components
+:video{src="media/video.mp4"}
+
+HTML
+<iframe src="media/example.html" />
 ```
 
-Relative paths can be defined in frontmatter, as long as they are the only value:
+Relative paths can be defined in frontmatter – as long as they are the only value:
 
 ```mdx
 ---
-title: Portfolio Item 1
+title: Portfolio
 images:
   - assets/image-1.jpg
   - assets/image-2.jpg
@@ -110,27 +117,32 @@ images:
 These values can then be passed to components:
 
 ```markdown
-::gallery{:data="images"}
-::
+:image-gallery{:data="images"}
 ```
 
-See the [Demo](demo/content/recipes/index.md) for a component example.
+See the Demo for [markup](demo/content/advanced/gallery.md) and [component](demo/components/content/ContentGallery.vue) examples.
 
 ### Live reload
 
-From version `0.9.0-alpha` assets are watched and live-reloaded!
+In development, the module watches for asset additions, moves and deletes, and will update the browser live.
 
-Any additions, moves or deletes, or modifications to image content will be updated in the browser automatically.
+If you delete an asset, it will be greyed out in the browser until you replace the file or modify the path to it.
+
+If you edit an image, video, embed or iframe source, the content will update immediately, which is useful if you're looking to get that design just right!
 
 ### Image sizing
 
-The module can prevent content jumps by optionally writing image size information to generated `<img>` tags:
+You can [configure](#image-size) the module to add image size attributes to generated `<img>` tags:
 
 ```html
-<img src="/image.jpg?width=640&height=480" width="640" height="480" style="aspect-ratio:640/480">
+<img src="/image.jpg"
+     style="aspect-ratio:640/480"
+     width="640"
+     height="480"
+>
 ```
 
-If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can hook into these values via the `$attrs` property:
+If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can [hook into these values](demo/components/temp/ProseImg.vue) via the `$attrs` property:
 
 ```vue
 <template>
@@ -146,51 +158,32 @@ export default {
 </script>
 ```
 
-For more information see the [configuration](#image-size) section and [Demo](demo/components/temp/ProseImg.vue) for an example.
-
-## How it works
-
-Nuxt Content Assets works by serving a _copy_ of your assets using [Nitro](https://nitro.unjs.io/guide/assets#custom-server-assets).
-
-When Nuxt builds, the following happens:
-
-- all content sources are scanned for valid assets
-- found assets are copied to a temporary build folder
-- relative paths in markdown are rewritten to point at this folder
-- metadata such as image size is written to a lookup file
-- finally, Nitro serves the folder for public access
-
-Note only specific tags and attributes are targeted in the parsing phase for rewriting:
+If you pass [frontmatter](demo/content/advanced/gallery.md) to [custom components](demo/components/content/ContentImage.vue) set the `'url'` configuration option to encode size in the URL:
 
-```html
-<a href="...">
-<img src="...">
-<video src="...">
-<audio src="...">
-<source src="...">
-<embed src="...">
-<iframe src="...">
+```
+:image-gallery={:data="images"}
 ```
 
 ## Configuration
 
-You can configure the module like so:
+The module can be configured in your Nuxt configuration file:
 
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  'content-assets': {    
-    // use aspect-ratio rather than attributes
+  contentAssets: {    
+    // inject image sizes into the rendered html
     imageSize: 'style',
     
-    // print debug messages to the console
+    // treat these extensions as content
+    contentExtensions: 'mdx? csv ya?ml json',
+    
+    // output debug messages
     debug: true,
   }
 })
 ```
 
-Note that from version `0.9.0-alpha` the `output` location is no longer configurable; images are copied relative to their original locations. 
-
 ### Image size
 
 You can add one or more image size hints to the generated images:
@@ -203,11 +196,11 @@ You can add one or more image size hints to the generated images:
 
 Pick from the following switches:
 
-| Switch  | What it does                                                                 |
-|---------|------------------------------------------------------------------------------|
-| `style` | Adds `style="aspect-ratio:..."` to any `<img>` tag                           |
-| `attrs` | Adds `width` and `height` attributes to any `<img>` tag                      |
-| `url`   | Adds the `?width=...&height=...` query string to image frontmatter variables |
+| Switch  | What it does                                                 |
+| ------- | ------------------------------------------------------------ |
+| `style` | Adds `style="aspect-ratio:..."` to any `<img>` tag           |
+| `attrs` | Adds `width` and `height` attributes to any `<img>` tag      |
+| `url`   | Adds a `?width=...&height=...` query string to image paths in frontmatter |
 
 Note: if you add `attrs` only, include the following CSS in your app:
 
@@ -218,6 +211,18 @@ img {
 }
 ```
 
+### Content extensions
+
+This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:
+
+```
+mdx? csv ya?ml json
+```
+
+This way, you can use any **other** file type as an asset, without needing to explicitly configure extensions.
+
+Generally, you shouldn't need to touch this setting.
+
 ### Debug
 
 If you want to see what the module does as it runs, set `debug` to true:
@@ -228,6 +233,16 @@ If you want to see what the module does as it runs, set `debug` to true:
 }
 ```
 
+## How it works
+
+When Nuxt builds, the module scans all content sources for assets, copies them to an accessible public assets folder, and indexes path and image metadata.
+
+After Nuxt Content has run the parsed content is traversed, and both element attributes and frontmatter properties are checked to see if they resolve to the indexed asset paths.
+
+If they do, then the attribute or property is rewritten with the absolute path. If the asset is an image, then the element or path is optionally updated with size attributes or size query string.
+
+Finally, Nitro serves the site, and any requests made to the transformed asset paths should be picked up and the *copied* asset served by the browser.
+
 ## Development
 
 Should you wish to develop the project, the scripts are:

package/dist/module.d.ts

@@ -1,8 +1,8 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
-    output?: string;
-    imageSize?: string;
+    imageSize?: string | string[];
+    contentExtensions: string | string[];
     debug?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-content-assets",
-  "configKey": "content-assets",
+  "configKey": "contentAssets",
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.9.0-alpha"
+  "version": "0.10.0"
 }

package/dist/module.mjs

@@ -1,18 +1,21 @@
 import * as Fs from 'fs';
 import * as Path from 'path';
 import Path__default from 'path';
-import { createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit';
+import { useNuxt, createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit';
 import debounce from 'debounce';
 import getImageSize from 'image-size';
 import { createStorage } from 'unstorage';
 import githubDriver from 'unstorage/drivers/github';
 import fsDriver from 'unstorage/drivers/fs';
-import { hash } from 'ohash';
-import { WebSocketServer } from 'ws';
+import 'ohash';
 import { listen } from 'listhen';
+import { WebSocketServer, WebSocket } from 'ws';
 
-function matchWords(value) {
-  return typeof value === "string" ? value.match(/\w+/g) || [] : [];
+function matchTokens(value) {
+  const tokens = typeof value === "string" ? value.match(/[^\s,|]+/g) || [] : Array.isArray(value) ? value.filter((value2) => typeof value2 === "string").reduce((output, input) => {
+    return [...output, ...matchTokens(input)];
+  }, []) : [];
+  return Array.from(new Set(tokens));
 }
 function toPath(key) {
   return key.replaceAll(":", "/");
@@ -21,14 +24,23 @@ function deKey(path) {
   return path.replace(/^[^:]+:/, "");
 }
 
-const defaults$1 = {
-  assetsDir: "/assets/",
-  assetsPattern: "[path]/[file]"
+const defaults = {
+  // inject image size into the rendered html
+  imageSize: "attrs",
+  // treat these extensions as content
+  contentExtensions: "mdx? csv ya?ml json",
+  // output debug messages
+  debug: false
 };
 const extensions = {
-  image: matchWords("png jpg jpeg gif svg webp ico"),
-  media: matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
+  // used to get image size
+  image: matchTokens("png jpg jpeg gif svg webp ico"),
+  // unused for now
+  media: matchTokens("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
 };
+function getIgnores(extensions2) {
+  return `^((?!(${matchTokens(extensions2).join("|")})).)*$`;
+}
 
 function isImage(path) {
   const ext = Path__default.extname(path).substring(1);
@@ -43,7 +55,7 @@ function isAsset(path) {
 }
 
 const moduleName = "nuxt-content-assets";
-const moduleKey = "content-assets";
+const moduleKey = "contentAssets";
 
 function log(...data) {
   console.info(`[${moduleKey}]`, ...data);
@@ -85,7 +97,17 @@ function removeFolder(path) {
   }
 }
 
-function getAssetConfig(srcDir, srcAbs, pattern, hints) {
+function getAssetPaths(srcDir, srcAbs) {
+  const srcRel = Path.relative(srcDir, srcAbs);
+  const srcAttr = "/" + srcRel;
+  const id = srcRel.replaceAll("/", ":");
+  return {
+    id,
+    srcRel,
+    srcAttr
+  };
+}
+function getAssetSizes(srcAbs, hints) {
   let width = void 0;
   let height = void 0;
   let ratio = void 0;
@@ -107,10 +129,12 @@ function getAssetConfig(srcDir, srcAbs, pattern, hints) {
       warn(`could not read image "${srcAbs}`);
     }
   }
-  const srcRel = Path.relative(srcDir, srcAbs);
-  const srcAttr = "/" + srcRel;
-  const id = srcRel.replaceAll("/", ":");
-  return { id, srcRel, srcAttr, width, height, ratio, query };
+  return {
+    width,
+    height,
+    ratio,
+    query
+  };
 }
 
 function makeStorage(source, key = "") {
@@ -201,81 +225,80 @@ function makeSourceManager(key, source, publicPath, callback) {
   };
 }
 
-const replacers = {
-  key: (src) => Path__default.dirname(src).split("/").filter((e) => e).shift() || "",
-  path: (src) => Path__default.dirname(src),
-  folder: (src) => Path__default.dirname(src).replace(/[^/]+\//, ""),
-  file: (src) => Path__default.basename(src),
-  name: (src) => Path__default.basename(src, Path__default.extname(src)),
-  extname: (src) => Path__default.extname(src),
-  ext: (src) => Path__default.extname(src).substring(1),
-  hash: (src) => hash({ src })
-};
-function interpolatePattern(pattern, src, warn = false) {
-  return Path__default.join(pattern.replace(/\[\w+]/g, (match) => {
-    const name = match.substring(1, match.length - 1);
-    const fn = replacers[name];
-    if (fn) {
-      return fn(src);
-    }
-    if (warn) {
-      log(`Unknown output token ${match}`, true);
-    }
-    return match;
-  }));
-}
-
 function createWebSocket() {
   const wss = new WebSocketServer({ noServer: true });
   const serve = (req, socket = req.socket, head = "") => wss.handleUpgrade(req, socket, head, (client) => wss.emit("connection", client, req));
-  const broadcast = (data, channel = "*") => {
-    data = JSON.stringify({ channel, data });
+  const broadcast = (data) => {
+    data = JSON.stringify(data);
     for (const client of wss.clients) {
-      try {
+      if (client.readyState === WebSocket.OPEN) {
         client.send(data);
-      } catch (err) {
       }
     }
   };
   const handlers = [];
-  const onMessage = (channel, callback) => {
-    handlers.push({ channel, callback });
+  const addHandler = (callback) => {
+    handlers.push(callback);
   };
-  wss.on("connection", (client) => {
-    client.addEventListener("message", (event) => {
+  wss.on("connection", (socket) => {
+    socket.addEventListener("message", (event) => {
+      let data;
       try {
-        const { channel, data } = JSON.parse(event.data || "{}");
-        handlers.filter((handler) => handler.channel === channel || handler.channel === "*").forEach((handler) => handler.callback(data));
+        data = JSON.parse(event.data || "{}");
       } catch (err) {
       }
+      if (data) {
+        handlers.forEach((callback) => callback(data));
+      }
     });
   });
   return {
     wss,
     serve,
     broadcast,
-    onMessage,
+    addHandler,
     close: () => {
       wss.clients.forEach((client) => client.close());
       return new Promise((resolve) => wss.close(resolve));
     }
   };
 }
+
+function isObject(data) {
+  return data && typeof data === "object" && !Array.isArray(data);
+}
+function makeChannelBroker(ws2) {
+  const handlers = [];
+  const broadcast = (channel, data) => {
+    ws2.broadcast({ channel, data });
+  };
+  const addHandler = (channel, callback) => {
+    handlers.push({ channel, callback });
+  };
+  ws2.addHandler(function(message) {
+    if (isObject(message)) {
+      const { channel } = message;
+      handlers.filter((handler) => handler.channel === channel || handler.channel === "*").forEach((handler) => handler.callback(message));
+    }
+  });
+  return {
+    broadcast,
+    addHandler
+  };
+}
 const ws = createWebSocket();
-let initialized = false;
-const defaults = {
-  port: {
-    port: 4001,
-    portRange: [4001, 4040]
-  },
-  hostname: "localhost",
-  showURL: false
-};
-function useSocketServer(nuxt, channel, onMessage) {
+const broker = makeChannelBroker(ws);
+async function setupSocketServer(channel, handler) {
+  const nuxt = useNuxt();
   nuxt.hook("nitro:init", async (nitro) => {
-    if (!initialized) {
-      initialized = true;
-      const { server, url } = await listen(() => "Nuxt Sockets", defaults);
+    if (!nuxt._socketServer) {
+      const defaults = nuxt.options.runtimeConfig.content.watch.ws;
+      const { server, url } = await listen(() => "Nuxt Content Assets", {
+        port: defaults.port.port + 1,
+        hostname: defaults.hostname,
+        showURL: false
+      });
+      nuxt._socketServer = server;
       server.on("upgrade", ws.serve);
       nitro.options.runtimeConfig.public.sockets = {
         wsUrl: url.replace("http", "ws")
@@ -288,16 +311,16 @@ function useSocketServer(nuxt, channel, onMessage) {
   });
   const instance = {
     send(data) {
-      ws.broadcast(data, channel);
+      broker.broadcast(channel, data);
       return this;
     },
-    onMessage(callback) {
-      ws.onMessage(channel, callback);
+    addHandler(callback) {
+      broker.addHandler(channel, callback);
       return this;
     }
   };
-  if (onMessage) {
-    instance.onMessage(onMessage);
+  if (handler) {
+    instance.addHandler(handler);
   }
   return instance;
 }
@@ -311,11 +334,7 @@ const module = defineNuxtModule({
       nuxt: "^3.0.0"
     }
   },
-  defaults: {
-    output: `${defaults$1.assetsDir}/${defaults$1.assetsPattern}`,
-    imageSize: "",
-    debug: false
-  },
+  defaults,
   async setup(options, nuxt) {
     var _a, _b;
     const pluginPath = resolve("./runtime/plugin");
@@ -332,17 +351,14 @@ const module = defineNuxtModule({
     if (nuxt.options.content) {
       (_b = nuxt.options.content).ignores || (_b.ignores = []);
     }
-    nuxt.options.content?.ignores.push("^((?!(md|json|yaml|csv)).)*$");
-    const output = options.output || defaults$1.assetsDir;
-    const matches = output.match(/([^[]+)(.*)?/);
-    const assetsPattern = (matches ? matches[2] : "") || defaults$1.assetsPattern;
-    interpolatePattern(assetsPattern, "", true);
-    const imageFlags = matchWords(options.imageSize);
-    const sources = nuxt.options._layers.map((layer) => layer.config?.content?.sources).reduce((output2, sources2) => {
+    const ignores = getIgnores(options.contentExtensions);
+    nuxt.options.content?.ignores.push(ignores);
+    const imageFlags = matchTokens(options.imageSize);
+    const sources = nuxt.options._layers.map((layer) => layer.config?.content?.sources).reduce((output, sources2) => {
       if (sources2) {
-        Object.assign(output2, sources2);
+        Object.assign(output, sources2);
       }
-      return output2;
+      return output;
     }, {});
     if (Object.keys(sources).length === 0 || !sources.content) {
       const content = nuxt.options.srcDir + "/content";
@@ -353,23 +369,9 @@ const module = defineNuxtModule({
         };
       }
     }
-    addPlugin(resolve("./runtime/watcher"));
-    const socket = nuxt.options.dev ? useSocketServer(nuxt, "content-assets") : null;
-    function removeAsset(src) {
-      const srcRel = Path.relative(publicPath, src);
-      delete assets[srcRel];
-      saveAssets();
-      return "/" + srcRel;
-    }
     function updateAsset(src) {
-      const {
-        srcRel,
-        srcAttr,
-        width,
-        height,
-        ratio,
-        query
-      } = getAssetConfig(publicPath, src, assetsPattern, imageFlags);
+      const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
+      const { width, height, ratio, query } = getAssetSizes(src, imageFlags);
       assets[srcRel] = {
         srcRel,
         srcAttr,
@@ -381,22 +383,30 @@ const module = defineNuxtModule({
       saveAssets();
       return srcAttr;
     }
-    function watchAsset(event, absTrg) {
-      const srcAttr = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
-      if (socket) {
-        socket.send({ event: "update", src: srcAttr });
-      }
+    function removeAsset(src) {
+      const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
+      delete assets[srcRel];
+      saveAssets();
+      return srcAttr;
     }
     const saveAssets = debounce(() => {
       writeFile(indexPath, assets);
     }, 50);
     const assets = {};
+    function onAssetChange(event, absTrg) {
+      const src = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
+      if (socket) {
+        socket.send({ event, src });
+      }
+    }
+    addPlugin(resolve("./runtime/sockets/plugin"));
+    const socket = nuxt.options.dev ? await setupSocketServer("content-assets") : null;
     const managers = {};
     for (const [key, source] of Object.entries(sources)) {
       if (options.debug) {
         log(`Creating source "${key}"`);
       }
-      managers[key] = makeSourceManager(key, source, publicPath, watchAsset);
+      managers[key] = makeSourceManager(key, source, publicPath, onAssetChange);
     }
     nuxt.hook("build:before", async function() {
       for (const [key, manager] of Object.entries(managers)) {
@@ -408,7 +418,6 @@ const module = defineNuxtModule({
       }
     });
     const virtualConfig = [
-      // `export const assets = ${JSON.stringify(assets, null, '  ')}`,
       `export const cachePath = '${cachePath}'`
     ].join("\n");
     nuxt.hook("nitro:config", async (config) => {

package/dist/runtime/config.d.ts

@@ -1,2 +1,2 @@
 export declare const moduleName = "nuxt-content-assets";
-export declare const moduleKey = "content-assets";
+export declare const moduleKey = "contentAssets";

package/dist/runtime/config.mjs

@@ -1,2 +1,2 @@
 export const moduleName = "nuxt-content-assets";
-export const moduleKey = "content-assets";
+export const moduleKey = "contentAssets";

package/dist/runtime/options.d.ts

@@ -1,9 +1,10 @@
 export declare const defaults: {
-    assetsDir: string;
-    assetsPattern: string;
+    imageSize: string;
+    contentExtensions: string;
+    debug: boolean;
 };
-export declare const tags: string[];
 export declare const extensions: {
     image: string[];
     media: string[];
 };
+export declare function getIgnores(extensions: string | string[]): string;

package/dist/runtime/options.mjs

@@ -1,10 +1,18 @@
-import { matchWords } from "./utils/string.mjs";
+import { matchTokens } from "./utils/string.mjs";
 export const defaults = {
-  assetsDir: "/assets/",
-  assetsPattern: "[path]/[file]"
+  // inject image size into the rendered html
+  imageSize: "attrs",
+  // treat these extensions as content
+  contentExtensions: "mdx? csv ya?ml json",
+  // output debug messages
+  debug: false
 };
-export const tags = ["img", "video", "audio", "source", "embed", "iframe", "a"];
 export const extensions = {
-  image: matchWords("png jpg jpeg gif svg webp ico"),
-  media: matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
+  // used to get image size
+  image: matchTokens("png jpg jpeg gif svg webp ico"),
+  // unused for now
+  media: matchTokens("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
 };
+export function getIgnores(extensions2) {
+  return `^((?!(${matchTokens(extensions2).join("|")})).)*$`;
+}

package/dist/runtime/plugin.mjs

@@ -1,7 +1,6 @@
 import Path from "path";
 import { visit } from "unist-util-visit";
 import { deKey, isValidAsset, toPath, walk } from "./utils/index.mjs";
-import { tags } from "./options.mjs";
 import { cachePath } from "#nuxt-content-assets";
 import { makeStorage } from "./services/index.mjs";
 async function updateAssets() {
@@ -32,11 +31,14 @@ const plugin = async (nitro) => {
           }
         }
       }, filter);
-      visit(file.body, (n) => tags.includes(n.tag), (node) => {
-        if (node.props.src) {
-          const { srcAttr, width, height, ratio } = getAsset(srcDoc, node.props.src);
+      visit(file.body, (node) => node.type === "element", (node) => {
+        for (const [prop, value] of Object.entries(node.props)) {
+          if (typeof value !== "string") {
+            return;
+          }
+          const { srcAttr, width, height, ratio } = getAsset(srcDoc, value);
           if (srcAttr) {
-            node.props.src = srcAttr;
+            node.props[prop] = srcAttr;
             if (width && height) {
               node.props.width = width;
               node.props.height = height;
@@ -44,12 +46,7 @@ const plugin = async (nitro) => {
             if (ratio) {
               node.props.style = `aspect-ratio:${ratio}`;
             }
-          }
-        } else if (node.tag === "a") {
-          if (node.props.href) {
-            const { srcAttr } = getAsset(srcDoc, node.props.href);
-            if (srcAttr) {
-              node.props.href = srcAttr;
+            if (node.tag === "a" && !node.props.target) {
               node.props.target = "_blank";
             }
           }

package/dist/runtime/services/assets.d.ts

@@ -8,11 +8,25 @@ export type AssetConfig = {
     query?: string;
 };
 /**
- * Get config for asset
+ * Parse asset paths from absolute path
  *
  * @param srcDir    The absolute path to the asset's source folder
  * @param srcAbs    The absolute path to the asset itself
- * @param pattern   The user-defined pattern to create the public src attribute
+ */
+export declare function getAssetPaths(srcDir: string, srcAbs: string): {
+    id: any;
+    srcRel: string;
+    srcAttr: string;
+};
+/**
+ * Get asset image sizes
+ *
+ * @param srcAbs    The absolute path to the asset itself
  * @param hints     A list of named image size hints, i.e. 'style', 'attrs', etc
  */
-export declare function getAssetConfig(srcDir: string, srcAbs: string, pattern: string, hints: string[]): AssetConfig;
+export declare function getAssetSizes(srcAbs: string, hints: string[]): {
+    width: number | undefined;
+    height: number | undefined;
+    ratio: string | undefined;
+    query: string | undefined;
+};

package/dist/runtime/services/assets.mjs

@@ -1,7 +1,17 @@
 import * as Path from "path";
 import getImageSize from "image-size";
 import { isImage, warn } from "../utils/index.mjs";
-export function getAssetConfig(srcDir, srcAbs, pattern, hints) {
+export function getAssetPaths(srcDir, srcAbs) {
+  const srcRel = Path.relative(srcDir, srcAbs);
+  const srcAttr = "/" + srcRel;
+  const id = srcRel.replaceAll("/", ":");
+  return {
+    id,
+    srcRel,
+    srcAttr
+  };
+}
+export function getAssetSizes(srcAbs, hints) {
   let width = void 0;
   let height = void 0;
   let ratio = void 0;
@@ -23,8 +33,10 @@ export function getAssetConfig(srcDir, srcAbs, pattern, hints) {
       warn(`could not read image "${srcAbs}`);
     }
   }
-  const srcRel = Path.relative(srcDir, srcAbs);
-  const srcAttr = "/" + srcRel;
-  const id = srcRel.replaceAll("/", ":");
-  return { id, srcRel, srcAttr, width, height, ratio, query };
+  return {
+    width,
+    height,
+    ratio,
+    query
+  };
 }

package/dist/runtime/sockets/composable.d.ts

@@ -0,0 +1,2 @@
+import { Callback, SocketInstance } from '../../types';
+export declare function useSockets(channel: string, callback?: Callback): Promise<SocketInstance | null>;

package/dist/runtime/sockets/composable.mjs

@@ -0,0 +1,12 @@
+import { useRuntimeConfig } from "#imports";
+export function useSockets(channel, callback) {
+  const url = useRuntimeConfig().public.sockets?.wsUrl;
+  return new Promise(function(resolve) {
+    if (process.client && url) {
+      return import("./setup").then(({ setupSocketClient }) => {
+        return resolve(setupSocketClient(channel, callback));
+      });
+    }
+    resolve(null);
+  });
+}

package/dist/runtime/sockets/factory.d.ts

@@ -0,0 +1,5 @@
+import { Callback } from '../../types';
+export declare function createWebSocket(): {
+    send: (data: any) => void;
+    addHandler(callback: Callback): void;
+} | null;

package/dist/runtime/{services/sockets/composable.mjs → sockets/factory.mjs}

@@ -7,10 +7,10 @@ const logger = {
   warn: (...args) => console.warn(plugin, ...args)
 };
 let ws;
-export function useSocket(channel, callback) {
+export function createWebSocket() {
   if (!window.WebSocket) {
-    logger.warn("Unable to hot-reload images, your browser does not support WebSocket");
-    return;
+    logger.warn("Your browser does not support WebSocket");
+    return null;
   }
   const onOpen = () => logger.log("WS connected!");
   const onError = (e) => {
@@ -19,30 +19,31 @@ export function useSocket(channel, callback) {
         connect(true);
         break;
       default:
-        logger.warn("WS Error:", e);
+        logger.warn("Socket error:", e);
         break;
     }
   };
   const onClose = (e) => {
     if (e.code === 1e3 || e.code === 1005) {
-      logger.log("WS closed!");
+      logger.log("Socket closed");
     } else {
       connect(true);
     }
   };
+  const handlers = [];
   const onMessage = (message) => {
+    let data;
     try {
-      const data = JSON.parse(message.data);
-      if (channel === data.channel) {
-        return callback(data);
-      }
+      data = JSON.parse(message.data);
     } catch (err) {
       logger.warn("Error parsing message:", message.data);
+      return;
     }
+    handlers.forEach((handler) => handler(data));
   };
   const send = (data) => {
     if (ws) {
-      ws.send(JSON.stringify({ channel, data }));
+      ws.send(JSON.stringify(data));
     }
   };
   const connect = (retry = false) => {
@@ -61,7 +62,7 @@ export function useSocket(channel, callback) {
     const url = useRuntimeConfig().public.sockets?.wsUrl;
     if (url) {
       const wsUrl = `${url}ws`;
-      logger.log(`watching for image updates on ${wsUrl}`);
+      logger.log(`Running on ${wsUrl}`);
       ws = new WebSocket(wsUrl);
       ws.onopen = onOpen;
       ws.onmessage = onMessage;
@@ -69,9 +70,15 @@ export function useSocket(channel, callback) {
       ws.onclose = onClose;
     }
   };
-  connect();
+  if (!ws) {
+    connect();
+  }
   return {
-    connect,
-    send
+    send,
+    addHandler(callback) {
+      if (typeof callback === "function") {
+        handlers.push(callback);
+      }
+    }
   };
 }

package/dist/runtime/sockets/plugin.mjs

@@ -0,0 +1,21 @@
+import { defineNuxtPlugin } from "#imports";
+import { useSockets } from "./composable.mjs";
+export default defineNuxtPlugin(async () => {
+  if (process.client) {
+    const sockets = await useSockets("content-assets");
+    if (sockets) {
+      sockets.addHandler(({ data }) => {
+        const { event, src } = data;
+        if (src) {
+          const isUpdate = event === "update";
+          document.querySelectorAll(`:is(img, video, source, embed, iframe):where([src^="${src}"])`).forEach((el) => {
+            el.style.opacity = isUpdate ? "1" : "0.2";
+            if (isUpdate) {
+              el.setAttribute("src", `${src}?${(/* @__PURE__ */ new Date()).getTime()}`);
+            }
+          });
+        }
+      });
+    }
+  }
+});

package/dist/runtime/sockets/setup.d.ts

@@ -0,0 +1,2 @@
+import { Callback, SocketInstance } from '../../types';
+export declare function setupSocketClient(channel: string, callback?: Callback): SocketInstance | null;

package/dist/runtime/sockets/setup.mjs

@@ -0,0 +1,26 @@
+import { createWebSocket } from "./factory.mjs";
+const client = createWebSocket();
+export function setupSocketClient(channel, callback) {
+  const instance = {
+    addHandler(callback2) {
+      if (client && typeof callback2 === "function") {
+        client.addHandler((data) => {
+          if (data.channel === channel) {
+            return callback2(data);
+          }
+        });
+      }
+      return this;
+    },
+    send(data) {
+      if (client) {
+        client.send({ channel, data });
+      }
+      return this;
+    }
+  };
+  if (callback) {
+    instance.addHandler(callback);
+  }
+  return instance;
+}

package/dist/runtime/utils/string.d.ts

@@ -1,7 +1,9 @@
 /**
- * Get matched words from a string
+ * Get matched tokens (words, expressions) from a string or an array of possible strings
+ *
+ * Tokens may be separated by space, comma or pipe
  */
-export declare function matchWords(value?: string): string[];
+export declare function matchTokens(value?: string | unknown[]): string[];
 export declare function toPath(key: string): string;
 export declare function toKey(path: string): any;
 export declare function deKey(path: string): string;

package/dist/runtime/utils/string.mjs

@@ -1,5 +1,8 @@
-export function matchWords(value) {
-  return typeof value === "string" ? value.match(/\w+/g) || [] : [];
+export function matchTokens(value) {
+  const tokens = typeof value === "string" ? value.match(/[^\s,|]+/g) || [] : Array.isArray(value) ? value.filter((value2) => typeof value2 === "string").reduce((output, input) => {
+    return [...output, ...matchTokens(input)];
+  }, []) : [];
+  return Array.from(new Set(tokens));
 }
 export function toPath(key) {
   return key.replaceAll(":", "/");

package/dist/types.d.ts

@@ -2,8 +2,8 @@
 import { ModuleOptions } from './module'
 
 declare module '@nuxt/schema' {
-  interface NuxtConfig { ['content-assets']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['content-assets']?: ModuleOptions }
+  interface NuxtConfig { ['contentAssets']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['contentAssets']?: ModuleOptions }
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "0.9.0-alpha",
+  "version": "0.10.0",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",
@@ -31,7 +31,6 @@
     "release:dry": "npm run lint && npm run test && npm run build && npm publish --dry-run"
   },
   "dependencies": {
-    "@davestewart/nuxt-sockets": "^0.1.0",
     "@nuxt/kit": "^3.3.2",
     "debounce": "^1.2.1",
     "glob": "^9.3.2",

package/dist/runtime/services/sockets/client.d.ts

@@ -1,2 +0,0 @@
-import { Callback } from '../../utils';
-export declare function useSocketClient(channel: string, onMessage: Callback): void;

package/dist/runtime/services/sockets/client.mjs

@@ -1,9 +0,0 @@
-import { useRuntimeConfig } from "#imports";
-export function useSocketClient(channel, onMessage) {
-  const url = useRuntimeConfig().public.sockets?.wsUrl;
-  if (process.client && url) {
-    import("./composable").then(({ useSocket }) => {
-      useSocket(channel, onMessage);
-    });
-  }
-}

package/dist/runtime/services/sockets/composable.d.ts

@@ -1,4 +0,0 @@
-export declare function useSocket(channel: string, callback: (data: any) => void): {
-    connect: (retry?: boolean) => void;
-    send: (data: any) => void;
-} | undefined;

package/dist/runtime/services/sockets/server.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="ws" />
-/// <reference types="node" />
-import type { IncomingMessage } from 'http';
-import { Nuxt } from '@nuxt/schema';
-export type Callback = (data: any) => void;
-export type Handler = {
-    channel: string;
-    callback: Callback;
-};
-/**
- * WebSocket server useful for live content reload.
- */
-export declare function createWebSocket(): {
-    wss: import("ws").Server<import("ws").WebSocket>;
-    serve: (req: IncomingMessage, socket?: import("net").Socket, head?: any) => void;
-    broadcast: (data: any, channel?: string) => void;
-    onMessage: (channel: string, callback: Callback) => void;
-    close: () => Promise<unknown>;
-};
-export declare function useSocketServer(nuxt: Nuxt, channel: string, onMessage?: Callback): {
-    send(data: any): any;
-    onMessage(callback: Callback): any;
-};

package/dist/runtime/services/sockets/server.mjs

@@ -1,78 +0,0 @@
-import { WebSocketServer } from "ws";
-import { listen } from "listhen";
-export function createWebSocket() {
-  const wss = new WebSocketServer({ noServer: true });
-  const serve = (req, socket = req.socket, head = "") => wss.handleUpgrade(req, socket, head, (client) => wss.emit("connection", client, req));
-  const broadcast = (data, channel = "*") => {
-    data = JSON.stringify({ channel, data });
-    for (const client of wss.clients) {
-      try {
-        client.send(data);
-      } catch (err) {
-      }
-    }
-  };
-  const handlers = [];
-  const onMessage = (channel, callback) => {
-    handlers.push({ channel, callback });
-  };
-  wss.on("connection", (client) => {
-    client.addEventListener("message", (event) => {
-      try {
-        const { channel, data } = JSON.parse(event.data || "{}");
-        handlers.filter((handler) => handler.channel === channel || handler.channel === "*").forEach((handler) => handler.callback(data));
-      } catch (err) {
-      }
-    });
-  });
-  return {
-    wss,
-    serve,
-    broadcast,
-    onMessage,
-    close: () => {
-      wss.clients.forEach((client) => client.close());
-      return new Promise((resolve) => wss.close(resolve));
-    }
-  };
-}
-const ws = createWebSocket();
-let initialized = false;
-const defaults = {
-  port: {
-    port: 4001,
-    portRange: [4001, 4040]
-  },
-  hostname: "localhost",
-  showURL: false
-};
-export function useSocketServer(nuxt, channel, onMessage) {
-  nuxt.hook("nitro:init", async (nitro) => {
-    if (!initialized) {
-      initialized = true;
-      const { server, url } = await listen(() => "Nuxt Sockets", defaults);
-      server.on("upgrade", ws.serve);
-      nitro.options.runtimeConfig.public.sockets = {
-        wsUrl: url.replace("http", "ws")
-      };
-      nitro.hooks.hook("close", async () => {
-        await ws.close();
-        await server.close();
-      });
-    }
-  });
-  const instance = {
-    send(data) {
-      ws.broadcast(data, channel);
-      return this;
-    },
-    onMessage(callback) {
-      ws.onMessage(channel, callback);
-      return this;
-    }
-  };
-  if (onMessage) {
-    instance.onMessage(onMessage);
-  }
-  return instance;
-}

package/dist/runtime/watcher.mjs

@@ -1,18 +0,0 @@
-import { defineNuxtPlugin } from "#imports";
-import { useSocketClient } from "./services/sockets/client.mjs";
-export default defineNuxtPlugin(async () => {
-  if (process.client) {
-    void useSocketClient("content-assets", ({ data }) => {
-      const { event, src } = data;
-      if (src) {
-        const isUpdate = event === "update";
-        document.querySelectorAll(`img[src^="${src}"]`).forEach((img) => {
-          img.style.opacity = isUpdate ? "1" : "0.2";
-          if (isUpdate) {
-            img.setAttribute("src", src);
-          }
-        });
-      }
-    });
-  }
-});