nuxt-content-assets 1.1.1 → 1.2.0

package/README.md

@@ -283,6 +283,8 @@ If they do, then the attribute or property is rewritten with the absolute path.
 
 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.
 
+In development, file watching propagates asset changes to the public folder, updates related cached content, and notifies the browser via web sockets to refresh any loaded images. 
+
 ## Development
 
 Should you wish to develop the project, the scripts are:

package/dist/module.d.ts

@@ -1,8 +1,26 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    /**
+     * Image size hints
+     *
+     * @example 'attrs style url'
+     * @default 'style'
+     */
     imageSize?: string | string[] | false;
-    contentExtensions: string | string[];
+    /**
+     * List of content extensions; anything else as an asset
+     *
+     * @example 'md'
+     * @default 'md csv ya?ml json'
+     */
+    contentExtensions?: string | string[];
+    /**
+     * Display debug messages
+     *
+     * @example true
+     * @default false
+     */
     debug?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,8 +1,9 @@
 {
-  "name": "nuxt-content-assets",
-  "configKey": "contentAssets",
+  "moduleName": "nuxt-content-assets",
+  "moduleKey": "contentAssets",
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "1.1.1"
+  "name": "nuxt-content-assets",
+  "version": "1.2.0"
 }

package/dist/module.mjs

@@ -2,14 +2,15 @@ import * as Fs from 'fs';
 import * as Path from 'path';
 import Path__default from 'path';
 import { useNuxt, createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit';
-import debounce from 'debounce';
-import getImageSize from 'image-size';
-import { createStorage } from 'unstorage';
+import { visit, SKIP, CONTINUE } from 'unist-util-visit';
+import { listen } from 'listhen';
+import { WebSocketServer, WebSocket } from 'ws';
 import githubDriver from 'unstorage/drivers/github';
 import fsDriver from 'unstorage/drivers/fs';
+import { createStorage } from 'unstorage';
+import getImageSize from 'image-size';
+import debounce from 'debounce';
 import 'ohash';
-import { listen } from 'listhen';
-import { WebSocketServer, WebSocket } from 'ws';
 
 function matchTokens(value) {
   let tokens = [];
@@ -33,22 +34,16 @@ function deKey(path) {
   return path.replace(/^[^:]+:/, "");
 }
 
-const defaults = {
-  // inject image size into the rendered html
-  imageSize: "style",
-  // treat these extensions as content
-  contentExtensions: "md csv ya?ml json",
-  // output debug messages
-  debug: false
-};
 const extensions = {
   // 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 makeIgnores(extensions2) {
+  const matched = matchTokens(extensions2);
+  const ignored = matched.join("|");
+  return `[^:]+\\.(?!(${ignored})$)`;
 }
 
 function removeQuery(path) {
@@ -68,6 +63,73 @@ function isAsset(path) {
   return !isArticle(path);
 }
 
+function walk(node, callback, filter) {
+  function visit(node2, callback2, parent, key) {
+    if (filter) {
+      const result = filter(node2, key);
+      if (result === false) {
+        return;
+      }
+    }
+    if (Array.isArray(node2)) {
+      node2.forEach((value, index) => {
+        visit(value, callback2, node2, index);
+      });
+    } else if (isObject(node2)) {
+      Object.keys(node2).forEach((key2) => {
+        visit(node2[key2], callback2, node2, key2);
+      });
+    } else {
+      callback2(node2, parent, key);
+    }
+  }
+  visit(node, callback, { node }, "node");
+}
+function isObject(data) {
+  return data && typeof data === "object" && !Array.isArray(data);
+}
+
+function walkMeta(content, callback) {
+  walk(content, callback, (value, key) => !(String(key).startsWith("_") || key === "body"));
+}
+function walkBody(content, callback) {
+  visit(content.body, (node) => node.type === "element", (node) => {
+    const { tag, props } = node;
+    const excluded = tags.exclude.includes(tag);
+    if (excluded) {
+      return SKIP;
+    }
+    const included = tags.include.includes(tag);
+    if (included || !props) {
+      return CONTINUE;
+    }
+    callback(node);
+  });
+}
+const tags = {
+  // unlikely to contain assets
+  exclude: matchTokens({
+    container: "pre code code-inline",
+    formatting: "acronym abbr address bdi bdo big center cite del dfn font ins kbd mark meter progress q rp rt ruby s samp small strike sub sup time tt u var wbr",
+    headers: "h1 h2 h3 h4 h5 h6",
+    controls: "input textarea button select optgroup option label legend datalist output",
+    media: "map area canvas svg",
+    other: "style script noscript template",
+    empty: "hr br"
+  }),
+  // may contain assets
+  include: matchTokens({
+    content: "main header footer section article aside details dialog summary data object nav blockquote div span p",
+    table: "table caption th tr td thead tbody tfoot col colgroup",
+    media: "figcaption figure picture",
+    form: "form fieldset",
+    list: "ul ol li dir dl dt dd",
+    formatting: "strong b em i"
+  }),
+  // assets
+  assets: "a img audio source track video embed"
+};
+
 const label = "[content-assets]";
 function log(...data) {
   console.info(label, ...data);
@@ -82,6 +144,20 @@ ${items.map((item) => `   - ${item}`).join("\n")}
 `);
 }
 
+function buildQuery(...expr) {
+  const output = expr.map((expr2) => expr2.replace(/^[?&]+|&+$/g, "")).filter((s) => s);
+  if (output.length) {
+    const [first, ...rest] = output;
+    const isParam = (expr2) => /^[^?]+=[^=]+$/.test(expr2);
+    return !isParam(first) ? rest.length > 0 ? first + (first.includes("?") ? "&" : "?") + rest.join("&") : first : "?" + output.join("&");
+  }
+  return "";
+}
+
+function readFile(path, asJson = false) {
+  const text = Fs.readFileSync(path, { encoding: "utf8" });
+  return asJson ? JSON.parse(text) : text;
+}
 function writeFile(path, data) {
   const text = typeof data === "object" ? JSON.stringify(data, null, "  ") : String(data);
   createFolder(Path.dirname(path));
@@ -109,32 +185,117 @@ function removeFolder(path) {
   }
 }
 
-function getAssetPaths(srcDir, srcAbs) {
-  const srcRel = Path.relative(srcDir, srcAbs);
-  const srcAttr = "/" + srcRel;
-  const id = srcRel.replaceAll("/", ":");
+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) => {
+    data = JSON.stringify(data);
+    for (const client of wss.clients) {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(data);
+      }
+    }
+  };
+  const handlers = [];
+  const addHandler = (callback) => {
+    handlers.push(callback);
+  };
+  wss.on("connection", (socket) => {
+    socket.addEventListener("message", (event) => {
+      let data;
+      try {
+        data = JSON.parse(event.data || "{}");
+      } catch (err) {
+      }
+      if (data) {
+        handlers.forEach((callback) => callback(data));
+      }
+    });
+  });
   return {
-    id,
-    srcRel,
-    srcAttr
+    wss,
+    serve,
+    broadcast,
+    addHandler,
+    close: () => {
+      wss.clients.forEach((client) => client.close());
+      return new Promise((resolve) => wss.close(resolve));
+    }
   };
 }
-function getAssetSizes(srcAbs) {
-  if (isImage(srcAbs)) {
-    try {
-      return getImageSize(srcAbs);
-    } catch (err) {
-      warn(`could not read image "${srcAbs}`);
+
+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();
+const broker = makeChannelBroker(ws);
+async function setupSocketServer(channel, handler) {
+  const nuxt = useNuxt();
+  nuxt.hook("nitro:init", async (nitro) => {
+    if (!nuxt._socketServer) {
+      const defaults = nuxt.options.runtimeConfig.content.watch.ws;
+      const port = defaults.port.port;
+      const { server, url } = await listen(() => "Nuxt Content Assets", {
+        hostname: defaults.hostname,
+        port: {
+          port: port + 1,
+          portRange: [
+            port + 1,
+            port + 40
+          ]
+        },
+        showURL: false
+      });
+      nuxt._socketServer = server;
+      server.on("upgrade", ws.serve);
+      const wsUrl = url.replace("http", "ws");
+      log(`Websocket listening on "${wsUrl}"`);
+      nitro.options.runtimeConfig.public.sockets = {
+        wsUrl
+      };
+      nitro.hooks.hook("close", async () => {
+        await ws.close();
+        await server.close();
+      });
     }
+  });
+  const instance = {
+    send(data) {
+      broker.broadcast(channel, data);
+      return this;
+    },
+    addHandler(callback) {
+      broker.addHandler(channel, callback);
+      return this;
+    }
+  };
+  if (handler) {
+    instance.addHandler(handler);
   }
-  return {};
+  return instance;
 }
 
 function isAssetId(id) {
   const path = toPath(id);
   return !isExcluded(path) && isAsset(path);
 }
-function makeStorage(source, key = "") {
+function makeSourceStorage(source, key = "") {
   const storage = createStorage();
   const options = typeof source === "string" ? { driver: "fs", base: source } : source;
   switch (options.driver) {
@@ -216,7 +377,7 @@ function makeSourceManager(key, source, publicPath, callback) {
     }
     return paths;
   }
-  const storage = makeStorage(source, key);
+  const storage = makeSourceStorage(source, key);
   storage.watch(onWatch);
   return {
     storage,
@@ -225,141 +386,159 @@ function makeSourceManager(key, source, publicPath, callback) {
   };
 }
 
-const moduleName = "nuxt-content-assets";
-const moduleKey = "contentAssets";
-
-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) => {
-    data = JSON.stringify(data);
-    for (const client of wss.clients) {
-      if (client.readyState === WebSocket.OPEN) {
-        client.send(data);
-      }
+function makeAssetsManager(publicPath) {
+  const indexKey = "assets.json";
+  const storage = makeSourceStorage(Path.join(publicPath, ".."));
+  storage.watch(async (event, key) => {
+    if (event === "update" && key === indexKey) {
+      await load();
     }
-  };
-  const handlers = [];
-  const addHandler = (callback) => {
-    handlers.push(callback);
-  };
-  wss.on("connection", (socket) => {
-    socket.addEventListener("message", (event) => {
-      let data;
-      try {
-        data = JSON.parse(event.data || "{}");
-      } catch (err) {
-      }
-      if (data) {
-        handlers.forEach((callback) => callback(data));
-      }
-    });
   });
-  return {
-    wss,
-    serve,
-    broadcast,
-    addHandler,
-    close: () => {
-      wss.clients.forEach((client) => client.close());
-      return new Promise((resolve) => wss.close(resolve));
+  const assets = {};
+  async function load() {
+    const data = await storage.getItem(indexKey);
+    Object.assign(assets, data || {});
+  }
+  const save = debounce(function() {
+    storage.setItem(indexKey, assets);
+  }, 50);
+  function resolveAsset(content, relAsset, registerContent = false) {
+    const srcDir = Path.dirname(content._file);
+    const srcAsset = Path.join(srcDir, relAsset);
+    const asset = assets[srcAsset];
+    if (asset && registerContent) {
+      const { _id } = content;
+      if (!asset.content.includes(_id)) {
+        asset.content.push(_id);
+        save();
+      }
+    }
+    return asset || {};
+  }
+  function setAsset(path) {
+    const { srcRel, srcAttr } = getAssetPaths(publicPath, path);
+    const { width, height } = getAssetSize(path);
+    const oldAsset = assets[srcRel];
+    const newAsset = {
+      srcAttr,
+      content: oldAsset?.content || [],
+      width,
+      height
+    };
+    assets[srcRel] = newAsset;
+    save();
+    return newAsset;
+  }
+  function getAsset(path) {
+    const { srcRel } = getAssetPaths(publicPath, path);
+    return srcRel ? { ...assets[srcRel] } : void 0;
+  }
+  function removeAsset(path) {
+    const { srcRel } = getAssetPaths(publicPath, path);
+    const asset = assets[srcRel];
+    if (asset) {
+      delete assets[srcRel];
+      save();
     }
+    return asset;
+  }
+  void load();
+  return {
+    setAsset,
+    getAsset,
+    removeAsset,
+    resolveAsset
   };
 }
-
-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));
-    }
-  });
+function getAssetPaths(srcDir, srcAbs) {
+  const srcRel = Path.relative(srcDir, srcAbs);
+  const srcAttr = "/" + srcRel;
   return {
-    broadcast,
-    addHandler
+    srcRel,
+    srcAttr
   };
 }
-const ws = createWebSocket();
-const broker = makeChannelBroker(ws);
-async function setupSocketServer(channel, handler) {
-  const nuxt = useNuxt();
-  nuxt.hook("nitro:init", async (nitro) => {
-    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);
-      const wsUrl = url.replace("http", "ws");
-      log(`Websocket listening on "${wsUrl}"`);
-      nitro.options.runtimeConfig.public.sockets = {
-        wsUrl
-      };
-      nitro.hooks.hook("close", async () => {
-        await ws.close();
-        await server.close();
-      });
+function getAssetSize(srcAbs) {
+  if (isImage(srcAbs)) {
+    try {
+      return getImageSize(srcAbs);
+    } catch (err) {
+      warn(`could not read image "${srcAbs}`);
+    }
+  }
+  return {};
+}
+
+function rewriteContent(path, asset) {
+  const { parsed } = readFile(path, true);
+  const { srcAttr, width, height } = asset;
+  walkMeta(parsed, (value, parent, key) => {
+    if (value.startsWith(srcAttr)) {
+      parent[key] = parent[key].replace(/width=\d+&height=\d+/, `width=${width}&height=${height}`);
     }
   });
-  const instance = {
-    send(data) {
-      broker.broadcast(channel, data);
-      return this;
-    },
-    addHandler(callback) {
-      broker.addHandler(channel, callback);
-      return this;
+  walkBody(parsed, function(node) {
+    const { tag, props } = node;
+    if (tag === "img" && props?.src?.startsWith(srcAttr)) {
+      props.src = buildQuery(srcAttr, `time=${Date.now()}`);
+      if (props.width) {
+        props.width = width;
+      }
+      if (props.height) {
+        props.height = height;
+      }
+      if (props.style) {
+        const ratio = `${width}/${height}`;
+        if (typeof props.style === "string") {
+          props.style = props.style.replace(/aspect-ratio: \d+\/\d+/, `aspect-ratio: ${ratio}`);
+        } else if (props.style.aspectRatio) {
+          props.style.aspectRatio = ratio;
+        }
+      }
     }
-  };
-  if (handler) {
-    instance.addHandler(handler);
-  }
-  return instance;
+  });
+  writeFile(path, { module: true, parsed });
+  return parsed;
 }
 
 const resolve = createResolver(import.meta.url).resolve;
+const meta = {
+  moduleName: "nuxt-content-assets",
+  moduleKey: "contentAssets",
+  compatibility: {
+    nuxt: "^3.0.0"
+  }
+};
+const defaults = {
+  imageSize: "style",
+  contentExtensions: "md csv ya?ml json",
+  debug: false
+};
 const module = defineNuxtModule({
-  meta: {
-    name: moduleName,
-    configKey: moduleKey,
-    compatibility: {
-      nuxt: "^3.0.0"
-    }
-  },
+  meta,
   defaults,
   async setup(options, nuxt) {
     var _a, _b;
-    const pluginPath = resolve("./runtime/plugin");
     const buildPath = nuxt.options.buildDir;
-    const cachePath = Path.join(buildPath, "content-assets");
-    const publicPath = Path.join(cachePath, "public");
-    const indexPath = Path.join(cachePath, "assets.json");
+    const assetsPath = Path.join(buildPath, "content-assets");
+    const publicPath = Path.join(assetsPath, "public");
+    const contentPath = Path.join(buildPath, "content-cache/parsed");
     if (options.debug) {
       log("Removing cache folders...");
     }
     removeFolder(Path.join(buildPath, "content-cache"));
-    removeFolder(cachePath);
-    (_a = nuxt.options).content || (_a.content = {});
-    if (nuxt.options.content) {
-      (_b = nuxt.options.content).ignores || (_b.ignores = []);
+    removeFolder(assetsPath);
+    const { contentExtensions } = options;
+    if (contentExtensions) {
+      (_a = nuxt.options).content || (_a.content = {});
+      if (nuxt.options.content) {
+        (_b = nuxt.options.content).ignores || (_b.ignores = []);
+      }
+      const ignores = makeIgnores(contentExtensions);
+      nuxt.options.content?.ignores.push(ignores);
     }
-    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) => {
+    const sources = Array.from(nuxt.options._layers).map((layer) => layer.config?.content?.sources).reduce((output, sources2) => {
       if (sources2) {
         Object.assign(output, sources2);
       }
@@ -374,31 +553,33 @@ const module = defineNuxtModule({
         };
       }
     }
-    function updateAsset(src) {
-      const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
-      const { width, height } = getAssetSizes(src);
-      assets[srcRel] = {
-        srcAttr,
-        width,
-        height
-      };
-      saveAssets();
-      return 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 = {};
+    const assets = makeAssetsManager(publicPath);
     function onAssetChange(event, absTrg) {
-      const src = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
-      if (socket) {
-        socket.send({ event, src });
+      let src = "";
+      let width;
+      let height;
+      if (event === "update") {
+        const oldAsset = isImage(absTrg) && imageFlags.length ? assets.getAsset(absTrg) : null;
+        const newAsset = assets.setAsset(absTrg);
+        width = newAsset.width;
+        height = newAsset.height;
+        if (oldAsset) {
+          if (oldAsset.width !== newAsset.width || oldAsset.height !== newAsset.height) {
+            newAsset.content.forEach(async (id) => {
+              const path = Path.join(contentPath, toPath(id));
+              rewriteContent(path, newAsset);
+            });
+          }
+        }
+        src = newAsset.srcAttr;
+      } else {
+        const asset = assets.removeAsset(absTrg);
+        if (asset) {
+          src = asset.srcAttr;
+        }
+      }
+      if (src && socket) {
+        socket.send({ event, src, width, height });
       }
     }
     addPlugin(resolve("./runtime/sockets/plugin"));
@@ -413,15 +594,16 @@ const module = defineNuxtModule({
     nuxt.hook("build:before", async function() {
       for (const [key, manager] of Object.entries(managers)) {
         const paths = await manager.init();
-        paths.forEach((path) => updateAsset(path));
+        paths.forEach((path) => assets.setAsset(path));
         if (options.debug) {
           list(`Copied "${key}" assets`, paths.map((path) => Path.relative(publicPath, path)));
         }
       }
     });
+    const pluginPath = resolve("./runtime/content/plugin");
     const makeVar = (name, value) => `export const ${name} = ${JSON.stringify(value)};`;
     const virtualConfig = [
-      makeVar("cachePath", cachePath),
+      makeVar("publicPath", publicPath),
       makeVar("imageFlags", imageFlags),
       makeVar("debug", options.debug)
     ].join("\n");
@@ -429,7 +611,7 @@ const module = defineNuxtModule({
       config.plugins || (config.plugins = []);
       config.plugins.push(pluginPath);
       config.virtual || (config.virtual = {});
-      config.virtual[`#${moduleName}`] = () => {
+      config.virtual[`#${meta.moduleName}`] = () => {
         return virtualConfig;
       };
       config.publicAssets || (config.publicAssets = []);