nuxt-content-assets 0.7.0 → 0.9.0-alpha

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 { 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 { WebSocketServer } from 'ws';
+import { listen } from 'listhen';
 
 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,30 +85,6 @@ function removeFolder(path) {
   }
 }
 
-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 getAssetConfig(srcDir, srcAbs, pattern, hints) {
   let width = void 0;
   let height = void 0;
@@ -111,45 +107,199 @@ 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 };
 }
 
-async function getGithubAssets(key, source, tempPath, extensions) {
+function makeStorage(source, key = "") {
   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);
+  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;
   }
-  return paths;
+  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
+  };
 }
-function getFsAssets(path, extensions) {
-  const pattern = `${path}/**/*.{${extensions.join(",")}}`;
-  return glob.globSync(pattern) || [];
+
+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 });
+    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
+};
+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;
 }
 
 const resolve = createResolver(import.meta.url).resolve;
@@ -162,9 +312,7 @@ const module = defineNuxtModule({
     }
   },
   defaults: {
-    output: `${defaults.assetsDir}/${defaults.assetsPattern}`,
-    extensions: "",
-    additionalExtensions: "",
+    output: `${defaults$1.assetsDir}/${defaults$1.assetsPattern}`,
     imageSize: "",
     debug: false
   },
@@ -174,37 +322,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("^((?!(md|json|yaml|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 +353,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/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;
     }
-    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 srcAttr = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
+      if (socket) {
+        socket.send({ event: "update", src: srcAttr });
       }
+    }
+    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/sockets/client.d.ts

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

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

@@ -0,0 +1,9 @@
+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

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