nuxt-content-assets 0.9.0-alpha → 0.9.0-beta

package/README.md

@@ -43,7 +43,7 @@ Almost as much as being in the sea!
 <video src="media/seaside.mp4"></video>
 ```
 
-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).  
+The module [processes assets](#how-it-works) and serves them together with your content, adding features such as [image sizing](#image-sizing) and [live-reload](#live-reload).  
 
 ## Demo
 
@@ -95,7 +95,7 @@ Use relative paths anywhere within your documents:
 <video src="media/video.mp4" />
 ```
 
-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
 ---
@@ -110,11 +110,11 @@ images:
 These values can then be passed to components:
 
 ```markdown
-::gallery{:data="images"}
+::ImageGallery{:data="images"}
 ::
 ```
 
-See the [Demo](demo/content/recipes/index.md) for a component example.
+See the Demo for [markup](demo/content/recipes/index.md) and [Demo](demo/components/content/ImageGallery.vue) examples.
 
 ### Live reload
 
@@ -154,13 +154,13 @@ Nuxt Content Assets works by serving a _copy_ of your assets using [Nitro](https
 
 When Nuxt builds, the following happens:
 
-- all content sources are scanned for valid assets
+- 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
+- any relative asset paths are rewritten as absolute
 - 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:
+Note that in the rewriting phase, only specific tags and attributes are targeted :
 
 ```html
 <a href="...">

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.9.0-alpha"
+  "version": "0.9.0-beta"
 }

package/dist/module.mjs

@@ -1,15 +1,15 @@
 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 { listen } from 'listhen';
+import { WebSocketServer, WebSocket } from 'ws';
 
 function matchWords(value) {
   return typeof value === "string" ? value.match(/\w+/g) || [] : [];
@@ -228,41 +228,66 @@ function interpolatePattern(pattern, src, warn = false) {
 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 broker = makeChannelBroker(ws);
 const defaults = {
   port: {
     port: 4001,
@@ -271,11 +296,12 @@ const defaults = {
   hostname: "localhost",
   showURL: false
 };
-function useSocketServer(nuxt, channel, onMessage) {
+async function setupSocketServer(channel, handler) {
+  const nuxt = useNuxt();
   nuxt.hook("nitro:init", async (nitro) => {
-    if (!initialized) {
-      initialized = true;
+    if (!nuxt._socketServer) {
       const { server, url } = await listen(() => "Nuxt Sockets", defaults);
+      nuxt._socketServer = server;
       server.on("upgrade", ws.serve);
       nitro.options.runtimeConfig.public.sockets = {
         wsUrl: url.replace("http", "ws")
@@ -288,16 +314,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;
 }
@@ -332,7 +358,7 @@ const module = defineNuxtModule({
     if (nuxt.options.content) {
       (_b = nuxt.options.content).ignores || (_b.ignores = []);
     }
-    nuxt.options.content?.ignores.push("^((?!(md|json|yaml|csv)).)*$");
+    nuxt.options.content?.ignores.push("^((?!(mdx?|json|ya?ml|csv)).)*$");
     const output = options.output || defaults$1.assetsDir;
     const matches = output.match(/([^[]+)(.*)?/);
     const assetsPattern = (matches ? matches[2] : "") || defaults$1.assetsPattern;
@@ -353,8 +379,8 @@ const module = defineNuxtModule({
         };
       }
     }
-    addPlugin(resolve("./runtime/watcher"));
-    const socket = nuxt.options.dev ? useSocketServer(nuxt, "content-assets") : null;
+    addPlugin(resolve("./runtime/sockets/plugin"));
+    const socket = nuxt.options.dev ? await setupSocketServer("content-assets") : null;
     function removeAsset(src) {
       const srcRel = Path.relative(publicPath, src);
       delete assets[srcRel];
@@ -382,9 +408,9 @@ const module = defineNuxtModule({
       return srcAttr;
     }
     function watchAsset(event, absTrg) {
-      const srcAttr = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
+      const src = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
       if (socket) {
-        socket.send({ event: "update", src: srcAttr });
+        socket.send({ event, src });
       }
     }
     const saveAssets = debounce(() => {

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,35 @@ 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) => {
+      if (typeof handler === "function") {
+        handler(data);
+      }
+    });
   };
   const send = (data) => {
     if (ws) {
-      ws.send(JSON.stringify({ channel, data }));
+      ws.send(JSON.stringify(data));
     }
   };
   const connect = (retry = false) => {
@@ -61,7 +66,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 +74,13 @@ export function useSocket(channel, callback) {
       ws.onclose = onClose;
     }
   };
-  connect();
+  if (!ws) {
+    connect();
+  }
   return {
-    connect,
-    send
+    send,
+    addHandler(callback) {
+      handlers.push(callback);
+    }
   };
 }

package/dist/runtime/sockets/plugin.mjs

@@ -0,0 +1,22 @@
+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(`img[src^="${src}"]`).forEach((el) => {
+            const img = el;
+            img.style.opacity = isUpdate ? "1" : "0.2";
+            if (isUpdate) {
+              img.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "0.9.0-alpha",
+  "version": "0.9.0-beta",
   "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);
-          }
-        });
-      }
-    });
-  }
-});