nuxt-content-assets 0.7.0 → 0.9.0-beta

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/sockets/composable.d.ts

@@ -0,0 +1,2 @@
+import { Callback, SocketInstance } from '../../types';
+export declare function useSockets(channel: string, callback?: Callback): Promise<SocketInstance | null>;

package/dist/runtime/sockets/composable.mjs

@@ -0,0 +1,12 @@
+import { useRuntimeConfig } from "#imports";
+export function useSockets(channel, callback) {
+  const url = useRuntimeConfig().public.sockets?.wsUrl;
+  return new Promise(function(resolve) {
+    if (process.client && url) {
+      return import("./setup").then(({ setupSocketClient }) => {
+        return resolve(setupSocketClient(channel, callback));
+      });
+    }
+    resolve(null);
+  });
+}

package/dist/runtime/sockets/factory.d.ts

@@ -0,0 +1,5 @@
+import { Callback } from '../../types';
+export declare function createWebSocket(): {
+    send: (data: any) => void;
+    addHandler(callback: Callback): void;
+} | null;

package/dist/runtime/sockets/factory.mjs

@@ -0,0 +1,86 @@
+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 createWebSocket() {
+  if (!window.WebSocket) {
+    logger.warn("Your browser does not support WebSocket");
+    return null;
+  }
+  const onOpen = () => logger.log("WS connected!");
+  const onError = (e) => {
+    switch (e.code) {
+      case "ECONNREFUSED":
+        connect(true);
+        break;
+      default:
+        logger.warn("Socket error:", e);
+        break;
+    }
+  };
+  const onClose = (e) => {
+    if (e.code === 1e3 || e.code === 1005) {
+      logger.log("Socket closed");
+    } else {
+      connect(true);
+    }
+  };
+  const handlers = [];
+  const onMessage = (message) => {
+    let data;
+    try {
+      data = JSON.parse(message.data);
+    } catch (err) {
+      logger.warn("Error parsing message:", message.data);
+      return;
+    }
+    handlers.forEach((handler) => {
+      if (typeof handler === "function") {
+        handler(data);
+      }
+    });
+  };
+  const send = (data) => {
+    if (ws) {
+      ws.send(JSON.stringify(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(`Running on ${wsUrl}`);
+      ws = new WebSocket(wsUrl);
+      ws.onopen = onOpen;
+      ws.onmessage = onMessage;
+      ws.onerror = onError;
+      ws.onclose = onClose;
+    }
+  };
+  if (!ws) {
+    connect();
+  }
+  return {
+    send,
+    addHandler(callback) {
+      handlers.push(callback);
+    }
+  };
+}

package/dist/runtime/sockets/plugin.d.ts

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

package/dist/runtime/sockets/plugin.mjs

@@ -0,0 +1,22 @@
+import { defineNuxtPlugin } from "#imports";
+import { useSockets } from "./composable.mjs";
+export default defineNuxtPlugin(async () => {
+  if (process.client) {
+    const sockets = await useSockets("content-assets");
+    if (sockets) {
+      sockets.addHandler(({ data }) => {
+        const { event, src } = data;
+        if (src) {
+          const isUpdate = event === "update";
+          document.querySelectorAll(`img[src^="${src}"]`).forEach((el) => {
+            const img = el;
+            img.style.opacity = isUpdate ? "1" : "0.2";
+            if (isUpdate) {
+              img.setAttribute("src", `${src}?${(/* @__PURE__ */ new Date()).getTime()}`);
+            }
+          });
+        }
+      });
+    }
+  }
+});

package/dist/runtime/sockets/setup.d.ts

@@ -0,0 +1,2 @@
+import { Callback, SocketInstance } from '../../types';
+export declare function setupSocketClient(channel: string, callback?: Callback): SocketInstance | null;

package/dist/runtime/sockets/setup.mjs

@@ -0,0 +1,26 @@
+import { createWebSocket } from "./factory.mjs";
+const client = createWebSocket();
+export function setupSocketClient(channel, callback) {
+  const instance = {
+    addHandler(callback2) {
+      if (client && typeof callback2 === "function") {
+        client.addHandler((data) => {
+          if (data.channel === channel) {
+            return callback2(data);
+          }
+        });
+      }
+      return this;
+    },
+    send(data) {
+      if (client) {
+        client.send({ channel, data });
+      }
+      return this;
+    }
+  };
+  if (callback) {
+    instance.addHandler(callback);
+  }
+  return instance;
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "0.7.0",
+  "version": "0.9.0-beta",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",
@@ -32,11 +32,14 @@
   },
   "dependencies": {
     "@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 +50,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",