nuxt-content-assets 0.7.0 → 0.9.0-alpha

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

@@ -0,0 +1,77 @@
+import { useRuntimeConfig } from "#app";
+const plugin = "[Content Assets]";
+const logger = {
+  // eslint-disable-next-line no-console
+  log: (...args) => console.log(plugin, ...args),
+  // eslint-disable-next-line no-console
+  warn: (...args) => console.warn(plugin, ...args)
+};
+let ws;
+export function useSocket(channel, callback) {
+  if (!window.WebSocket) {
+    logger.warn("Unable to hot-reload images, your browser does not support WebSocket");
+    return;
+  }
+  const onOpen = () => logger.log("WS connected!");
+  const onError = (e) => {
+    switch (e.code) {
+      case "ECONNREFUSED":
+        connect(true);
+        break;
+      default:
+        logger.warn("WS Error:", e);
+        break;
+    }
+  };
+  const onClose = (e) => {
+    if (e.code === 1e3 || e.code === 1005) {
+      logger.log("WS closed!");
+    } else {
+      connect(true);
+    }
+  };
+  const onMessage = (message) => {
+    try {
+      const data = JSON.parse(message.data);
+      if (channel === data.channel) {
+        return callback(data);
+      }
+    } catch (err) {
+      logger.warn("Error parsing message:", message.data);
+    }
+  };
+  const send = (data) => {
+    if (ws) {
+      ws.send(JSON.stringify({ channel, data }));
+    }
+  };
+  const connect = (retry = false) => {
+    if (retry) {
+      logger.log("WS reconnecting..");
+      setTimeout(connect, 1e3);
+      return;
+    }
+    if (ws) {
+      try {
+        ws.close();
+      } catch (err) {
+      }
+      ws = void 0;
+    }
+    const url = useRuntimeConfig().public.sockets?.wsUrl;
+    if (url) {
+      const wsUrl = `${url}ws`;
+      logger.log(`watching for image updates on ${wsUrl}`);
+      ws = new WebSocket(wsUrl);
+      ws.onopen = onOpen;
+      ws.onmessage = onMessage;
+      ws.onerror = onError;
+      ws.onclose = onClose;
+    }
+  };
+  connect();
+  return {
+    connect,
+    send
+  };
+}

package/dist/runtime/services/sockets/server.d.ts

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

@@ -0,0 +1,78 @@
+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/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;

package/dist/runtime/services/sources.mjs

@@ -1,39 +1,92 @@
-import * as Fs from "fs";
 import * as Path from "path";
-import glob from "glob";
 import { createStorage } from "unstorage";
 import githubDriver from "unstorage/drivers/github";
-export async function getGithubAssets(key, source, tempPath, extensions) {
+import fsDriver from "unstorage/drivers/fs";
+import { warn, isAsset, toPath, removeFile, copyFile, writeBlob, writeFile, deKey } from "../utils/index.mjs";
+export 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 paths;
+  return storage;
 }
-export function getFsAssets(path, extensions) {
-  const pattern = `${path}/**/*.{${extensions.join(",")}}`;
-  return glob.globSync(pattern) || [];
+export 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
+  };
 }

package/dist/runtime/utils/assert.d.ts

@@ -3,14 +3,18 @@
  */
 export declare function isRelative(path: string): boolean;
 /**
- * Test path for image extension
+ * Test path or id for image extension
  */
 export declare function isImage(path: string): boolean;
 /**
- * Test path for asset extension
+ * Test path or id is markdown
+ */
+export declare function isArticle(path: string): boolean;
+/**
+ * Test path or id is asset
  */
 export declare function isAsset(path: string): boolean;
 /**
- * Test if value is a valid asset
+ * Test if value is a relative asset
  */
 export declare function isValidAsset(value?: string): boolean;

package/dist/runtime/utils/assert.mjs

@@ -1,15 +1,18 @@
 import Path from "path";
-import { extensions, imageExtensions } from "../options.mjs";
+import { extensions } from "../options.mjs";
 export function isRelative(path) {
   return !(path.startsWith("http") || Path.isAbsolute(path));
 }
 export function isImage(path) {
   const ext = Path.extname(path).substring(1);
-  return imageExtensions.includes(ext);
+  return extensions.image.includes(ext);
+}
+export function isArticle(path) {
+  return /\.mdx?$/.test(path);
 }
 export function isAsset(path) {
-  const ext = Path.extname(path).substring(1);
-  return extensions.includes(ext);
+  const ext = Path.extname(path);
+  return !!ext && ext !== ".DS_Store" && !isArticle(path);
 }
 export function isValidAsset(value) {
   return typeof value === "string" && isAsset(value) && isRelative(value);

package/dist/runtime/utils/fs.d.ts

@@ -1,4 +1,7 @@
+export declare function readFile(path: string, asJson?: boolean): any;
 export declare function writeFile(path: string, data: null | string | number | boolean | object): void;
+export declare function writeBlob(path: string, data: object): Promise<void>;
 export declare function copyFile(src: string, trg: string): void;
+export declare function removeFile(src: string): void;
 export declare function createFolder(path: string): void;
 export declare function removeFolder(path: string): void;

package/dist/runtime/utils/fs.mjs

@@ -1,14 +1,26 @@
 import * as Path from "path";
 import * as Fs from "fs";
+export function readFile(path, asJson = false) {
+  const text = Fs.readFileSync(path, { encoding: "utf8" });
+  return asJson ? JSON.parse(text) : text;
+}
 export function writeFile(path, data) {
   const text = typeof data === "object" ? JSON.stringify(data, null, "  ") : String(data);
   createFolder(Path.dirname(path));
   Fs.writeFileSync(path, text, { encoding: "utf8" });
 }
+export async function writeBlob(path, data) {
+  const buffer = Buffer.from(await data.arrayBuffer());
+  createFolder(Path.dirname(path));
+  Fs.writeFileSync(path, buffer);
+}
 export function copyFile(src, trg) {
   createFolder(Path.dirname(trg));
   Fs.copyFileSync(src, trg);
 }
+export function removeFile(src) {
+  Fs.rmSync(src);
+}
 export function createFolder(path) {
   Fs.mkdirSync(path, { recursive: true });
 }

package/dist/runtime/utils/string.d.ts

@@ -2,3 +2,6 @@
  * Get matched words from a string
  */
 export declare function matchWords(value?: string): string[];
+export declare function toPath(key: string): string;
+export declare function toKey(path: string): any;
+export declare function deKey(path: string): string;

package/dist/runtime/utils/string.mjs

@@ -1,3 +1,12 @@
 export function matchWords(value) {
   return typeof value === "string" ? value.match(/\w+/g) || [] : [];
 }
+export function toPath(key) {
+  return key.replaceAll(":", "/");
+}
+export function toKey(path) {
+  return path.replaceAll("/", ":");
+}
+export function deKey(path) {
+  return path.replace(/^[^:]+:/, "");
+}

package/dist/runtime/watcher.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/watcher.mjs

@@ -0,0 +1,18 @@
+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);
+          }
+        });
+      }
+    });
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "0.7.0",
+  "version": "0.9.0-alpha",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",
@@ -31,12 +31,16 @@
     "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",
     "image-size": "^1.0.2",
+    "listhen": "^1.0.4",
     "ohash": "^1.0.0",
     "unist-util-visit": "^4.1.2",
-    "unstorage": "^1.4.1"
+    "unstorage": "^1.4.1",
+    "ws": "^8.13.0"
   },
   "peerDependencies": {
     "@nuxt/content": "latest"
@@ -47,6 +51,8 @@
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/schema": "^3.3.2",
     "@nuxt/test-utils": "^3.3.2",
+    "@types/debounce": "^1.2.1",
+    "@types/ws": "^8.5.4",
     "changelogen": "^0.5.1",
     "eslint": "^8.36.0",
     "nuxt": "^3.3.2",