next-tinacms-dos 0.1.0 → 0.1.1

package/README.md

@@ -23,8 +23,8 @@ You need some credentials provided by Digital Ocean Space to set this up properl
 Add the following variables to an `.env` file.
 
 ```
-NEXT_PUBLIC_SPACE_ENDPOINT=<Your Digital Ocean Space Endpoint>
-NEXT_PUBLIC_SPACE_NAME=<Your Digital Ocean Space Name>
+NEXT_PUBLIC_SPACE_ENDPOINT=<Your Digital Ocean Space Endpoint: ex. https://fra1.digitaloceanspaces.com>
+NEXT_PUBLIC_SPACE_NAME=<Your Digital Ocean Space Name: ex. my-space>
 NEXT_PUBLIC_SPACE_KEY=<Your Digital Ocean Space access key>
 SPACE_SECRET_KEY=<Your Digital Ocean Space access secret>
 ```
@@ -41,7 +41,6 @@ This is also where we can update our `mediaOptions` on the cms object.
 import dynamic from "next/dynamic";
 import { TinaEditProvider } from "tinacms/dist/edit-state";
 import { Layout } from "../components/layout";
-import { TinaCloudDOSMediaStore } from "next-tinacms-dos";
 const TinaCMS = dynamic(() => import("tinacms"), { ssr: false });
 
 const App = ({ Component, pageProps }) => {
@@ -86,7 +85,7 @@ const App = ({ Component, pageProps }) => {
 
 ## Set up API routes
 
-Set up a new API route in the `pages` directory of your Next.js app, e.g. `pages/api/media`.
+Set up a new API route in the `pages` directory of your Next.js app, e.g. `pages/api/dos/[...media].ts`.
 Then add a new catch all API route for media.
 
 Call `createMediaHandler` to set up routes and connect your instance of the Media Store to your Digital Ocean Space.
@@ -97,7 +96,7 @@ The `authorized` key will make it so only authorized users within Tina Cloud can
 
 
 ```
-//[...media].tsx
+// pages/api/dos/[...media].ts
 
 import {
   mediaHandlerConfig,

package/dist/handlers.js

@@ -0,0 +1,172 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+
+// src/handlers.ts
+__export(exports, {
+  createMediaHandler: () => createMediaHandler,
+  mediaHandlerConfig: () => mediaHandlerConfig
+});
+var import_client_s3 = __toModule(require("@aws-sdk/client-s3"));
+var import_path = __toModule(require("path"));
+var import_fs = __toModule(require("fs"));
+var import_multer = __toModule(require("multer"));
+var import_util = __toModule(require("util"));
+var mediaHandlerConfig = {
+  api: {
+    bodyParser: false
+  }
+};
+var createMediaHandler = (config, options) => {
+  const client = new import_client_s3.S3Client(config.config);
+  const bucket = config.bucket;
+  const cdnUrl = (options == null ? void 0 : options.cdnUrl) || config.config.endpoint.toString().replace(/http(s|):\/\//i, `https://${bucket}.`);
+  return async (req, res) => {
+    const isAuthorized = await config.authorized(req, res);
+    if (!isAuthorized) {
+      res.status(401).json({ message: "sorry this user is unauthorized" });
+      return;
+    }
+    switch (req.method) {
+      case "GET":
+        return listMedia(req, res, client, bucket, cdnUrl);
+      case "POST":
+        return uploadMedia(req, res, client, bucket);
+      case "DELETE":
+        return deleteAsset(req, res, client, bucket);
+      default:
+        res.end(404);
+    }
+  };
+};
+async function uploadMedia(req, res, client, bucket) {
+  const upload = (0, import_util.promisify)((0, import_multer.default)({
+    storage: import_multer.default.diskStorage({
+      directory: (req2, file, cb) => {
+        cb(null, "/tmp");
+      },
+      filename: (req2, file, cb) => {
+        cb(null, file.originalname);
+      }
+    })
+  }).single("file"));
+  await upload(req, res);
+  const { directory } = req.body;
+  let prefix = directory.replace(/^\//, "").replace(/\/$/, "");
+  if (prefix)
+    prefix = prefix + "/";
+  const filePath = req.file.path;
+  const blob = import_fs.default.readFileSync(filePath);
+  const params = {
+    Bucket: bucket,
+    Key: prefix + import_path.default.basename(filePath),
+    Body: blob,
+    ACL: "public-read"
+  };
+  const command = new import_client_s3.PutObjectCommand(params);
+  const result = await client.send(command);
+  res.json(result);
+}
+async function listMedia(req, res, client, bucket, cdnUrl) {
+  var _a;
+  try {
+    const {
+      directory = "",
+      limit = 500,
+      offset
+    } = req.query;
+    let prefix = directory.replace(/^\//, "").replace(/\/$/, "");
+    if (prefix)
+      prefix = prefix + "/";
+    const params = {
+      Bucket: bucket,
+      Delimiter: "/",
+      Prefix: prefix,
+      Marker: offset == null ? void 0 : offset.toString(),
+      MaxKeys: directory && !offset ? +limit + 1 : +limit
+    };
+    const command = new import_client_s3.ListObjectsCommand(params);
+    const response = await client.send(command);
+    const items = [];
+    (_a = response.CommonPrefixes) == null ? void 0 : _a.forEach(({ Prefix }) => items.push({
+      id: Prefix,
+      type: "dir",
+      filename: import_path.default.basename(Prefix),
+      directory: import_path.default.dirname(Prefix)
+    }));
+    items.push(...(response.Contents || []).filter((file) => file.Key !== prefix).map(getDOSToTinaFunc(cdnUrl)));
+    res.json({
+      items,
+      offset: response.NextMarker
+    });
+  } catch (e) {
+    res.status(500);
+    const message = findErrorMessage(e);
+    res.json({ e: message });
+  }
+}
+var findErrorMessage = (e) => {
+  if (typeof e == "string")
+    return e;
+  if (e.message)
+    return e.message;
+  if (e.error && e.error.message)
+    return e.error.message;
+  return "an error occurred";
+};
+async function deleteAsset(req, res, client, bucket) {
+  const { media } = req.query;
+  const [, objectKey] = media;
+  const params = {
+    Bucket: bucket,
+    Key: objectKey
+  };
+  const command = new import_client_s3.DeleteObjectCommand(params);
+  try {
+    const data = await client.send(command);
+    res.json(data);
+  } catch (err) {
+    res.status(500).json({
+      message: err.message || "Something went wrong"
+    });
+  }
+}
+function getDOSToTinaFunc(cdnUrl) {
+  return function dosToTina(file) {
+    const filename = import_path.default.basename(file.Key);
+    const directory = import_path.default.dirname(file.Key) + "/";
+    return {
+      id: file.Key,
+      filename,
+      directory,
+      src: cdnUrl + "/" + file.Key,
+      previewSrc: cdnUrl + "/" + file.Key,
+      type: "file"
+    };
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createMediaHandler,
+  mediaHandlerConfig
+});

package/dist/index.js

@@ -1,172 +1,137 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-
-// src/handlers.ts
-__export(exports, {
-  createMediaHandler: () => createMediaHandler,
-  mediaHandlerConfig: () => mediaHandlerConfig
-});
-var import_client_s3 = __toModule(require("@aws-sdk/client-s3"));
-var import_path = __toModule(require("path"));
-var import_fs = __toModule(require("fs"));
-var import_multer = __toModule(require("multer"));
-var import_util = __toModule(require("util"));
-var mediaHandlerConfig = {
-  api: {
-    bodyParser: false
-  }
-};
-var createMediaHandler = (config, options) => {
-  const client = new import_client_s3.S3Client(config.config);
-  const bucket = config.bucket;
-  const cdnUrl = (options == null ? void 0 : options.cdnUrl) || config.config.endpoint.toString().replace(/http(s|):\/\//i, `https://${bucket}.`);
-  return async (req, res) => {
-    const isAuthorized = await config.authorized(req, res);
-    if (!isAuthorized) {
-      res.status(401).json({ message: "sorry this user is unauthorized" });
-      return;
-    }
-    switch (req.method) {
-      case "GET":
-        return listMedia(req, res, client, bucket, cdnUrl);
-      case "POST":
-        return uploadMedia(req, res, client, bucket);
-      case "DELETE":
-        return deleteAsset(req, res, client, bucket);
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["next-tinacms-dos"] = {}, global.NOOP));
+})(this, function(exports2, toolkit) {
+  "use strict";
+  const E_DEFAULT = new toolkit.MediaListError({
+    title: "An Error Occurred",
+    message: "Something went wrong fetching your media from Digital Ocean Space.",
+    docsLink: "https://tina.io/packages/next-tinacms-dos"
+  });
+  const E_UNAUTHORIZED = new toolkit.MediaListError({
+    title: "Unauthorized",
+    message: "You don't have access to this resource.",
+    docsLink: "https://tina.io/packages/next-tinacms-dos"
+  });
+  const E_CONFIG = new toolkit.MediaListError({
+    title: "Missing Credentials",
+    message: "Unable to connect to Digital Ocean Space because one or more environment variables are missing.",
+    docsLink: "https://tina.io/docs/media-dos/"
+  });
+  const E_KEY_FAIL = new toolkit.MediaListError({
+    title: "Bad Credentials",
+    message: "Unable to connect to Digital Ocean Space because one or more environment variables are misconfigured.",
+    docsLink: "https://tina.io/docs/media-dos/"
+  });
+  const E_BAD_ROUTE = new toolkit.MediaListError({
+    title: "Bad Route",
+    message: "The Digital Ocean Space API route is missing or misconfigured.",
+    docsLink: "https://tina.io/packages/next-tinacms-dos/#set-up-api-routes"
+  });
+  const interpretErrorMessage = (message) => {
+    switch (message) {
+      case "Must supply cloud_name":
+      case "Must supply api_key":
+      case "Must supply api_secret":
+        return E_CONFIG;
+      case "unknown api_key":
+        return E_KEY_FAIL;
       default:
-        res.end(404);
+        return E_DEFAULT;
     }
   };
-};
-async function uploadMedia(req, res, client, bucket) {
-  const upload = (0, import_util.promisify)((0, import_multer.default)({
-    storage: import_multer.default.diskStorage({
-      directory: (req2, file, cb) => {
-        cb(null, "/tmp");
-      },
-      filename: (req2, file, cb) => {
-        cb(null, file.originalname);
+  class DOSMediaStore {
+    constructor() {
+      this.fetchFunction = (input, init) => {
+        return fetch(input, init);
+      };
+      this.accept = "text/*,  application/*, image/*";
+      this.previewSrc = (publicId) => {
+        if (typeof publicId === "string")
+          return publicId;
+        return publicId.previewSrc;
+      };
+      this.parse = (img) => {
+        return img.src;
+      };
+    }
+    async persist(media) {
+      let newFiles = [];
+      for (const item of media) {
+        const { file, directory } = item;
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("directory", directory);
+        formData.append("filename", file.name);
+        const res = await this.fetchFunction(`/api/dos/media`, {
+          method: "POST",
+          body: formData
+        });
+        if (res.status != 200) {
+          const responseData = await res.json();
+          throw new Error(responseData.message);
+        }
+        const fileRes = await res.json();
+        await new Promise((resolve) => {
+          setTimeout(resolve, 2e3);
+        });
+        const parsedRes = {
+          type: "file",
+          id: fileRes.public_id,
+          filename: fileRes.original_filename,
+          directory: "/",
+          previewSrc: fileRes.url
+        };
+        newFiles.push(parsedRes);
       }
-    })
-  }).single("file"));
-  await upload(req, res);
-  const { directory } = req.body;
-  let prefix = directory.replace(/^\//, "").replace(/\/$/, "");
-  if (prefix)
-    prefix = prefix + "/";
-  const filePath = req.file.path;
-  const blob = import_fs.default.readFileSync(filePath);
-  const params = {
-    Bucket: bucket,
-    Key: prefix + import_path.default.basename(filePath),
-    Body: blob,
-    ACL: "public-read"
-  };
-  const command = new import_client_s3.PutObjectCommand(params);
-  const result = await client.send(command);
-  res.json(result);
-}
-async function listMedia(req, res, client, bucket, cdnUrl) {
-  var _a;
-  try {
-    const {
-      directory = "",
-      limit = 500,
-      offset
-    } = req.query;
-    let prefix = directory.replace(/^\//, "").replace(/\/$/, "");
-    if (prefix)
-      prefix = prefix + "/";
-    const params = {
-      Bucket: bucket,
-      Delimiter: "/",
-      Prefix: prefix,
-      Marker: offset == null ? void 0 : offset.toString(),
-      MaxKeys: directory && !offset ? +limit + 1 : +limit
-    };
-    const command = new import_client_s3.ListObjectsCommand(params);
-    const response = await client.send(command);
-    const items = [];
-    (_a = response.CommonPrefixes) == null ? void 0 : _a.forEach(({ Prefix }) => items.push({
-      id: Prefix,
-      type: "dir",
-      filename: import_path.default.basename(Prefix),
-      directory: import_path.default.dirname(Prefix)
-    }));
-    items.push(...(response.Contents || []).filter((file) => file.Key !== prefix).map(getDOSToTinaFunc(cdnUrl)));
-    res.json({
-      items,
-      offset: response.NextMarker
-    });
-  } catch (e) {
-    res.status(500);
-    const message = findErrorMessage(e);
-    res.json({ e: message });
+      return newFiles;
+    }
+    async delete(media) {
+      await this.fetchFunction(`/api/dos/media/${encodeURIComponent(media.id)}`, {
+        method: "DELETE"
+      });
+    }
+    async list(options) {
+      const query = this.buildQuery(options);
+      const response = await this.fetchFunction("/api/dos/media" + query);
+      if (response.status == 401) {
+        throw E_UNAUTHORIZED;
+      }
+      if (response.status == 404) {
+        throw E_BAD_ROUTE;
+      }
+      if (response.status >= 500) {
+        const { e } = await response.json();
+        const error = interpretErrorMessage(e);
+        throw error;
+      }
+      const { items, offset } = await response.json();
+      return {
+        items: items.map((item) => item),
+        nextOffset: offset
+      };
+    }
+    buildQuery(options) {
+      const params = Object.keys(options).filter((key) => options[key] !== "" && options[key] !== void 0).map((key) => `${key}=${options[key]}`).join("&");
+      return `?${params}`;
+    }
   }
-}
-var findErrorMessage = (e) => {
-  if (typeof e == "string")
-    return e;
-  if (e.message)
-    return e.message;
-  if (e.error && e.error.message)
-    return e.error.message;
-  return "an error occurred";
-};
-async function deleteAsset(req, res, client, bucket) {
-  const { media } = req.query;
-  const [, objectKey] = media;
-  const params = {
-    Bucket: bucket,
-    Key: objectKey
-  };
-  const command = new import_client_s3.DeleteObjectCommand(params);
-  try {
-    const data = await client.send(command);
-    res.json(data);
-  } catch (err) {
-    res.status(500).json({
-      message: err.message || "Something went wrong"
-    });
+  class TinaCloudDOSMediaStore extends DOSMediaStore {
+    constructor(client) {
+      super();
+      this.client = client;
+      this.fetchFunction = async (input, init) => {
+        try {
+          const url = input.toString();
+          const query = `${url.includes("?") ? "&" : "?"}clientID=${client.clientId}`;
+          const res = client.fetchWithToken(url + query, init);
+          return res;
+        } catch (error) {
+          console.error(error);
+        }
+      };
+    }
   }
-}
-function getDOSToTinaFunc(cdnUrl) {
-  return function dosToTina(file) {
-    const filename = import_path.default.basename(file.Key);
-    const directory = import_path.default.dirname(file.Key) + "/";
-    return {
-      id: file.Key,
-      filename,
-      directory,
-      src: cdnUrl + "/" + file.Key,
-      previewSrc: cdnUrl + "/" + file.Key,
-      type: "file"
-    };
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createMediaHandler,
-  mediaHandlerConfig
+  exports2.DOSMediaStore = DOSMediaStore;
+  exports2.TinaCloudDOSMediaStore = TinaCloudDOSMediaStore;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-tinacms-dos",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -21,8 +21,8 @@
     "multer": "1.4.2"
   },
   "devDependencies": {
-    "@tinacms/toolkit": "0.57.0",
-    "@tinacms/scripts": "0.51.0",
+    "@tinacms/toolkit": "0.57.1",
+    "@tinacms/scripts": "0.51.1",
     "@types/crypto-js": "^3.1.47",
     "@types/js-cookie": "^2.2.6",
     "@types/node": "^13.13.1",
@@ -32,7 +32,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "styled-components": "^5.2.0",
-    "tinacms": "0.0.0-20220818181559",
+    "tinacms": "0.69.2",
     "typescript": "4.3.5"
   },
   "peerDependencies": {
@@ -41,7 +41,7 @@
     "react-dom": ">=16.14",
     "react-is": "^16.13.1 || <18.0.0",
     "styled-components": "*",
-    "tinacms": ">=0.0.0-20220818181559"
+    "tinacms": ">=0.50.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"