nuxt-content-assets 1.1.0 → 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,51 +185,117 @@ function removeFolder(path) {
   }
 }
 
-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;
-  let query = void 0;
-  if (hints.length && isImage(srcAbs)) {
-    try {
-      const size = getImageSize(srcAbs);
-      if (hints.includes("attrs")) {
-        width = size.width;
-        height = size.height;
+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);
       }
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
+    }
+  };
+  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 (hints.includes("src") || hints.includes("url")) {
-        query = `width=${size.width}&height=${size.height}`;
+      if (data) {
+        handlers.forEach((callback) => callback(data));
       }
-    } catch (err) {
-      warn(`could not read image "${srcAbs}`);
+    });
+  });
+  return {
+    wss,
+    serve,
+    broadcast,
+    addHandler,
+    close: () => {
+      wss.clients.forEach((client) => client.close());
+      return new Promise((resolve) => wss.close(resolve));
     }
-  }
+  };
+}
+
+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 {
-    width,
-    height,
-    ratio,
-    query
+    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 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) {
@@ -235,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,
@@ -244,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);
       }
@@ -393,34 +553,33 @@ const module = defineNuxtModule({
         };
       }
     }
-    function updateAsset(src) {
-      const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
-      const { width, height, ratio, query } = getAssetSizes(src, imageFlags);
-      assets[srcRel] = {
-        srcRel,
-        srcAttr,
-        width,
-        height,
-        ratio,
-        query
-      };
-      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"));
@@ -435,22 +594,24 @@ 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");
     nuxt.hook("nitro:config", async (config) => {
       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 = []);