nuxt-content-assets 0.7.0 → 0.9.0-beta

package/dist/module.mjs

@@ -1,33 +1,45 @@
 import * as Fs from 'fs';
 import * as Path from 'path';
 import Path__default from 'path';
-import { createResolver, defineNuxtModule, addTemplate } from '@nuxt/kit';
+import { useNuxt, createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit';
+import debounce from 'debounce';
 import getImageSize from 'image-size';
-import { hash } from 'ohash';
-import glob from 'glob';
 import { createStorage } from 'unstorage';
 import githubDriver from 'unstorage/drivers/github';
+import fsDriver from 'unstorage/drivers/fs';
+import { hash } from 'ohash';
+import { listen } from 'listhen';
+import { WebSocketServer, WebSocket } from 'ws';
 
 function matchWords(value) {
   return typeof value === "string" ? value.match(/\w+/g) || [] : [];
 }
+function toPath(key) {
+  return key.replaceAll(":", "/");
+}
+function deKey(path) {
+  return path.replace(/^[^:]+:/, "");
+}
 
-const defaults = {
+const defaults$1 = {
   assetsDir: "/assets/",
   assetsPattern: "[path]/[file]"
 };
-const imageExtensions = matchWords("png jpg jpeg gif svg webp ico");
-const mediaExtensions = matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd");
-const fileExtensions = matchWords("pdf doc docx xls xlsx ppt pptx odp key");
-const extensions = [
-  ...imageExtensions,
-  ...mediaExtensions,
-  ...fileExtensions
-];
+const extensions = {
+  image: matchWords("png jpg jpeg gif svg webp ico"),
+  media: matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
+};
 
 function isImage(path) {
   const ext = Path__default.extname(path).substring(1);
-  return imageExtensions.includes(ext);
+  return extensions.image.includes(ext);
+}
+function isArticle(path) {
+  return /\.mdx?$/.test(path);
+}
+function isAsset(path) {
+  const ext = Path__default.extname(path);
+  return !!ext && ext !== ".DS_Store" && !isArticle(path);
 }
 
 const moduleName = "nuxt-content-assets";
@@ -51,10 +63,18 @@ function writeFile(path, data) {
   createFolder(Path.dirname(path));
   Fs.writeFileSync(path, text, { encoding: "utf8" });
 }
+async function writeBlob(path, data) {
+  const buffer = Buffer.from(await data.arrayBuffer());
+  createFolder(Path.dirname(path));
+  Fs.writeFileSync(path, buffer);
+}
 function copyFile(src, trg) {
   createFolder(Path.dirname(trg));
   Fs.copyFileSync(src, trg);
 }
+function removeFile(src) {
+  Fs.rmSync(src);
+}
 function createFolder(path) {
   Fs.mkdirSync(path, { recursive: true });
 }
@@ -65,6 +85,122 @@ function removeFolder(path) {
   }
 }
 
+function getAssetConfig(srcDir, srcAbs, pattern, 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("style")) {
+        ratio = `${size.width}/${size.height}`;
+      }
+      if (hints.includes("attrs")) {
+        width = size.width;
+        height = size.height;
+      }
+      if (hints.includes("url")) {
+        query = `?width=${width}&height=${height}`;
+      }
+    } catch (err) {
+      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 };
+}
+
+function makeStorage(source, key = "") {
+  const storage = createStorage();
+  const options = typeof source === "string" ? { driver: "fs", base: source } : source;
+  switch (options.driver) {
+    case "fs":
+      storage.mount(key, fsDriver({
+        ...options,
+        ignore: ["[^:]+?\\.md"]
+      }));
+      break;
+    case "github":
+      storage.mount(key, githubDriver({
+        branch: "main",
+        dir: "/",
+        ...options
+      }));
+      break;
+  }
+  return storage;
+}
+function makeSourceManager(key, source, publicPath, callback) {
+  async function onWatch(event, key2) {
+    if (isAsset(key2)) {
+      const path = event === "update" ? await copyItem(key2) : removeItem(key2);
+      if (callback) {
+        callback(event, path);
+      }
+    }
+  }
+  function getRelSrc(key2) {
+    return toPath(key2).replace(/\w+/, "").replace(source.prefix || "", "");
+  }
+  function getAbsSrc(key2) {
+    return Path.join(source.base, getRelSrc(key2));
+  }
+  function getRelTrg(key2) {
+    return Path.join(source.prefix || "", toPath(deKey(key2)));
+  }
+  function getAbsTrg(key2) {
+    return Path.join(publicPath, getRelTrg(key2));
+  }
+  function removeItem(key2) {
+    const absTrg = getAbsTrg(key2);
+    removeFile(absTrg);
+    return absTrg;
+  }
+  async function copyItem(key2) {
+    const absTrg = getAbsTrg(key2);
+    const driver = source.driver;
+    if (driver === "fs") {
+      const absSrc = getAbsSrc(key2);
+      copyFile(absSrc, absTrg);
+    } else if (driver === "github") {
+      try {
+        const data = await storage.getItem(key2);
+        if (data) {
+          data?.constructor.name === "Blob" ? await writeBlob(absTrg, data) : writeFile(absTrg, data);
+        } else {
+          warn(`No data for key "${key2}"`);
+        }
+      } catch (err) {
+        warn(err.message);
+      }
+    }
+    return absTrg;
+  }
+  async function getKeys() {
+    const keys = await storage.getKeys();
+    return keys.filter(isAsset);
+  }
+  async function init() {
+    const keys = await getKeys();
+    const paths = [];
+    for (const key2 of keys) {
+      const path = await copyItem(key2);
+      paths.push(path);
+    }
+    return paths;
+  }
+  const storage = makeStorage(source, key);
+  storage.watch(onWatch);
+  return {
+    storage,
+    init,
+    keys: getKeys
+  };
+}
+
 const replacers = {
   key: (src) => Path__default.dirname(src).split("/").filter((e) => e).shift() || "",
   path: (src) => Path__default.dirname(src),
@@ -89,67 +225,107 @@ function interpolatePattern(pattern, src, warn = false) {
   }));
 }
 
-function getAssetConfig(srcDir, srcAbs, pattern, 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("style")) {
-        ratio = `${size.width}/${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("attrs")) {
-        width = size.width;
-        height = 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("url")) {
-        query = `?width=${width}&height=${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));
     }
-  }
-  const srcRel = Path.basename(srcDir) + srcAbs.substring(srcDir.length);
-  const srcAttr = interpolatePattern(pattern, srcRel);
-  const id = srcRel.replaceAll("/", ":");
-  return { id, srcRel, srcAttr, width, height, ratio, query };
+  };
 }
 
-async function getGithubAssets(key, source, tempPath, extensions) {
-  const storage = createStorage();
-  storage.mount(key, githubDriver({
-    repo: source.repo,
-    branch: source.branch || "main",
-    dir: source.dir || "/",
-    ttl: source.ttl || 600
-  }));
-  const rx = new RegExp(`.${extensions.join("|")}$`);
-  const keys = await storage.getKeys();
-  const assetKeys = keys.filter((key2) => rx.test(key2));
-  const assetItems = await Promise.all(assetKeys.map(async (id) => {
-    const data = await storage.getItem(id);
-    return { id, data };
-  }));
-  const prefix = source.prefix || "";
-  const paths = [];
-  for (const { id, data } of assetItems) {
-    if (data) {
-      const path = id.replaceAll(":", "/");
-      const absPath = Path.join(tempPath, path.replace(key, `${key}/${prefix}`));
-      const absFolder = Path.dirname(absPath);
-      const buffer = data.constructor.name === "Blob" ? Buffer.from(await data.arrayBuffer()) : typeof data === "object" ? JSON.stringify(data, null, "  ") : String(data);
-      Fs.mkdirSync(absFolder, { recursive: true });
-      Fs.writeFileSync(absPath, buffer);
-      paths.push(absPath);
+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 paths;
+  });
+  return {
+    broadcast,
+    addHandler
+  };
 }
-function getFsAssets(path, extensions) {
-  const pattern = `${path}/**/*.{${extensions.join(",")}}`;
-  return glob.globSync(pattern) || [];
+const ws = createWebSocket();
+const broker = makeChannelBroker(ws);
+const defaults = {
+  port: {
+    port: 4001,
+    portRange: [4001, 4040]
+  },
+  hostname: "localhost",
+  showURL: false
+};
+async function setupSocketServer(channel, handler) {
+  const nuxt = useNuxt();
+  nuxt.hook("nitro:init", async (nitro) => {
+    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")
+      };
+      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;
 }
 
 const resolve = createResolver(import.meta.url).resolve;
@@ -162,9 +338,7 @@ const module = defineNuxtModule({
     }
   },
   defaults: {
-    output: `${defaults.assetsDir}/${defaults.assetsPattern}`,
-    extensions: "",
-    additionalExtensions: "",
+    output: `${defaults$1.assetsDir}/${defaults$1.assetsPattern}`,
     imageSize: "",
     debug: false
   },
@@ -174,37 +348,22 @@ const module = defineNuxtModule({
     const buildPath = nuxt.options.buildDir;
     const cachePath = Path.join(buildPath, "content-assets");
     const publicPath = Path.join(cachePath, "public");
-    const tempPath = Path.resolve("node_modules/.nuxt-content-assets");
-    const dump = (name, data) => {
-      const path = `${cachePath}/debug/${name}.json`;
-      log(`Dumping "${Path.relative("", path)}"`);
-      writeFile(path, data);
-    };
+    const indexPath = Path.join(cachePath, "assets.json");
     if (options.debug) {
       log("Removing cache folders...");
     }
     removeFolder(Path.join(buildPath, "content-cache"));
     removeFolder(cachePath);
-    removeFolder(tempPath);
     (_a = nuxt.options).content || (_a.content = {});
     if (nuxt.options.content) {
       (_b = nuxt.options.content).ignores || (_b.ignores = []);
     }
-    const output = options.output || defaults.assetsDir;
+    nuxt.options.content?.ignores.push("^((?!(mdx?|json|ya?ml|csv)).)*$");
+    const output = options.output || defaults$1.assetsDir;
     const matches = output.match(/([^[]+)(.*)?/);
-    const assetsDir = matches ? matches[1].replace(/^\/*/, "/").replace(/\/*$/, "") : defaults.assetsDir;
-    const assetsPattern = (matches ? matches[2] : "") || defaults.assetsPattern;
+    const assetsPattern = (matches ? matches[2] : "") || defaults$1.assetsPattern;
     interpolatePattern(assetsPattern, "", true);
     const imageFlags = matchWords(options.imageSize);
-    if (options.extensions?.trim()) {
-      extensions.splice(0, extensions.length, ...matchWords(options.extensions));
-    } else if (options.additionalExtensions) {
-      extensions.push(...matchWords(options.additionalExtensions));
-    }
-    if (options.debug) {
-      log("Preparing sources...");
-    }
-    const assets = {};
     const sources = nuxt.options._layers.map((layer) => layer.config?.content?.sources).reduce((output2, sources2) => {
       if (sources2) {
         Object.assign(output2, sources2);
@@ -220,92 +379,71 @@ const module = defineNuxtModule({
         };
       }
     }
-    for (const [key, source] of Object.entries(sources)) {
-      const { driver } = source;
-      let srcDir = "";
-      let paths = [];
-      switch (driver) {
-        case "fs":
-          paths = getFsAssets(source.base, extensions);
-          srcDir = source.base;
-          break;
-        case "github":
-          paths = await getGithubAssets(key, source, tempPath, extensions);
-          srcDir = Path.join(tempPath, key);
-          break;
-      }
-      if (options.debug) {
-        log(`Prepared ${paths.length} paths for source "${key}"`);
-      }
-      if (paths.length) {
-        paths.forEach((src) => {
-          const {
-            id,
-            srcRel,
-            srcAttr,
-            width,
-            height,
-            ratio,
-            query
-          } = getAssetConfig(srcDir, src, assetsPattern, imageFlags);
-          nuxt.options.content.ignores.push(id);
-          const trg = Path.join(publicPath, assetsDir, srcAttr);
-          assets[srcRel] = {
-            src,
-            trg,
-            config: {
-              srcAttr: Path.join(assetsDir, srcAttr),
-              width,
-              height,
-              ratio,
-              query
-            }
-          };
-        });
-      }
+    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];
+      saveAssets();
+      return "/" + srcRel;
     }
-    nuxt.hook("build:before", function() {
-      if (options.debug) {
-        dump("assets", assets);
+    function updateAsset(src) {
+      const {
+        srcRel,
+        srcAttr,
+        width,
+        height,
+        ratio,
+        query
+      } = getAssetConfig(publicPath, src, assetsPattern, imageFlags);
+      assets[srcRel] = {
+        srcRel,
+        srcAttr,
+        width,
+        height,
+        ratio,
+        query
+      };
+      saveAssets();
+      return srcAttr;
+    }
+    function watchAsset(event, absTrg) {
+      const src = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
+      if (socket) {
+        socket.send({ event, src });
       }
+    }
+    const saveAssets = debounce(() => {
+      writeFile(indexPath, assets);
+    }, 50);
+    const assets = {};
+    const managers = {};
+    for (const [key, source] of Object.entries(sources)) {
       if (options.debug) {
-        log(`Copying ${Object.keys(assets).length} assets...`);
-      }
-      const copied = [];
-      const failed = [];
-      for (const [key, { src, trg }] of Object.entries(assets)) {
-        if (Fs.existsSync(src)) {
-          copyFile(src, trg);
-          copied.push(key);
-        } else {
-          failed.push(key);
-        }
+        log(`Creating source "${key}"`);
       }
-      if (options.debug) {
-        if (copied.length) {
-          list("Copied", copied);
-        }
-        if (failed.length) {
-          list("Failed to copy", failed);
+      managers[key] = makeSourceManager(key, source, publicPath, watchAsset);
+    }
+    nuxt.hook("build:before", async function() {
+      for (const [key, manager] of Object.entries(managers)) {
+        const paths = await manager.init();
+        paths.forEach((path) => updateAsset(path));
+        if (options.debug) {
+          list(`Copied "${key}" assets`, paths.map((path) => Path.relative(publicPath, path)));
         }
       }
     });
-    const nitroAssets = Object.entries(assets).reduce((output2, [key, value]) => {
-      output2[key] = value.config;
-      return output2;
-    }, {});
     const virtualConfig = [
-      `export const assets = ${JSON.stringify(nitroAssets, null, "  ")}`
+      // `export const assets = ${JSON.stringify(assets, null, '  ')}`,
+      `export const cachePath = '${cachePath}'`
     ].join("\n");
-    nuxt.options.alias[`#${moduleName}`] = addTemplate({
-      filename: `${moduleName}.mjs`,
-      getContents: () => virtualConfig
-    }).dst;
     nuxt.hook("nitro:config", async (config) => {
       config.plugins || (config.plugins = []);
       config.plugins.push(pluginPath);
       config.virtual || (config.virtual = {});
-      config.virtual[`#${moduleName}`] = virtualConfig;
+      config.virtual[`#${moduleName}`] = () => {
+        return virtualConfig;
+      };
       config.publicAssets || (config.publicAssets = []);
       config.publicAssets.push({
         dir: publicPath

package/dist/runtime/options.d.ts

@@ -2,8 +2,8 @@ export declare const defaults: {
     assetsDir: string;
     assetsPattern: string;
 };
-export declare const imageExtensions: string[];
-export declare const mediaExtensions: string[];
-export declare const fileExtensions: string[];
-export declare const extensions: string[];
 export declare const tags: string[];
+export declare const extensions: {
+    image: string[];
+    media: string[];
+};

package/dist/runtime/options.mjs

@@ -3,12 +3,8 @@ export const defaults = {
   assetsDir: "/assets/",
   assetsPattern: "[path]/[file]"
 };
-export const imageExtensions = matchWords("png jpg jpeg gif svg webp ico");
-export const mediaExtensions = matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd");
-export const fileExtensions = matchWords("pdf doc docx xls xlsx ppt pptx odp key");
-export const extensions = [
-  ...imageExtensions,
-  ...mediaExtensions,
-  ...fileExtensions
-];
 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")
+};

package/dist/runtime/plugin.mjs

@@ -1,8 +1,20 @@
 import Path from "path";
 import { visit } from "unist-util-visit";
-import { isValidAsset, walk } from "./utils/index.mjs";
+import { deKey, isValidAsset, toPath, walk } from "./utils/index.mjs";
 import { tags } from "./options.mjs";
-import { assets } from "#nuxt-content-assets";
+import { cachePath } from "#nuxt-content-assets";
+import { makeStorage } from "./services/index.mjs";
+async function updateAssets() {
+  assets = await storage.getItem("assets.json");
+}
+const storage = makeStorage(cachePath);
+storage.watch(async (event, key) => {
+  if (event === "update" && key === "assets.json") {
+    await updateAssets();
+  }
+});
+let assets = {};
+void updateAssets();
 function getAsset(srcDoc, relAsset) {
   const srcAsset = Path.join(Path.dirname(srcDoc), relAsset);
   return assets[srcAsset] || {};
@@ -10,7 +22,7 @@ function getAsset(srcDoc, relAsset) {
 const plugin = async (nitro) => {
   nitro.hooks.hook("content:file:afterParse", async (file) => {
     if (file._id.endsWith(".md")) {
-      const srcDoc = file._id.split(":").join("/");
+      const srcDoc = toPath(deKey(file._id));
       const filter = (value, key) => !(String(key).startsWith("_") || key === "body");
       walk(file, (value, parent, key) => {
         if (isValidAsset(value)) {

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

@@ -1,5 +1,5 @@
 export type AssetConfig = {
-    id: string;
+    id?: string;
     srcRel: string;
     srcAttr: string;
     width?: number;

package/dist/runtime/services/assets.mjs

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

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

@@ -1,10 +1,22 @@
-type GithubOptions = {
-    repo: string;
-    branch?: string;
-    dir?: string;
-    prefix?: string;
-    ttl?: number;
-};
-export declare function getGithubAssets(key: string, source: GithubOptions, tempPath: string, extensions: string[]): Promise<string[]>;
-export declare function getFsAssets(path: string, extensions: string[]): string[];
-export {};
+import { WatchEvent, Storage } from 'unstorage';
+import { MountOptions } from '@nuxt/content';
+/**
+ * Make a Storage instance
+ */
+export declare function makeStorage(source: MountOptions | string, key?: string): Storage;
+export interface SourceManager {
+    storage: Storage;
+    init: () => Promise<string[]>;
+    keys: () => Promise<string[]>;
+}
+/**
+ * Make a SourceManager instance
+ *
+ * Each Source Manager is responsible for mirroring source files to the public folder
+ *
+ * @param key
+ * @param source
+ * @param publicPath
+ * @param callback
+ */
+export declare function makeSourceManager(key: string, source: MountOptions, publicPath: string, callback?: (event: WatchEvent, path: string) => void): SourceManager;