eddev 0.2.0-beta.1 → 0.2.0-beta.10

package/serverless-template/_utils/fetch-wordpress-props.ts

@@ -1,15 +1,39 @@
+import config from "./ed-config"
+
+const settings = config.serverless
+
 export async function fetchWordpressProps(pathname: string) {
   const origin = (process.env.SITE_URL as string).replace(/\/$/, "")
   pathname = pathname.replace(/(^\/|\/$)/g, "")
-
-  let response = await fetch(origin + "/" + pathname + "/?_props=all")
+  const propsURL = origin + ("/" + pathname + "/?_props=all").replace(/\/+/, "/")
+  console.log("Fetching", propsURL)
+  let response = await fetch(propsURL)
   let text = await response.text()
 
   // Convert absolute site URL details to relative paths
-  // console.log("WAS", text)
-  console.log("REPLACING", origin)
-  text = text.replaceAll(origin, "")
-  console.log("NOW", text)
+  text = text.replace(new RegExp(origin.replace(/(http|https)/, `https?`) + "([a-z0-9-_./]+)", "g"), (url) => {
+    const path = url.replace(/https?:\/\/[a-z0-9\-\_\.]+/, "")
+    if (path.startsWith("/wp-content/uploads/")) {
+      if (settings?.uploads === "proxy") {
+        return path
+      } else if (settings?.uploads === "remote") {
+        return url
+      }
+    } else if (path.startsWith("/wp-content/themes/")) {
+      if (settings?.uploads === "proxy") {
+        return path
+      } else if (settings?.uploads === "remote") {
+        return url
+      }
+    } else if (path.startsWith("/wp-content/plugins/")) {
+      if (settings?.uploads === "proxy") {
+        return path
+      } else if (settings?.uploads === "remote") {
+        return url
+      }
+    }
+    return url
+  })
 
   return JSON.parse(text)
 }

package/serverless-template/next.config.js

@@ -1,58 +1,69 @@
 const withTM = require("next-transpile-modules")
 const { resolve } = require("path")
 const { DefinePlugin } = require("webpack")
+const settings = require("./ed.config.json")
+const { getRepoName } = require("eddev/utils/getRepoName")
 
-// console.log("PATH", process.cwd().replace(/\.serverless/, ""))
+module.exports = (() => {
+  const cwd = process.cwd()
+  const REPO_NAME = getRepoName(cwd.replace(/\/\.serverless/, "")).repoName
 
-module.exports = {}
+  return withTM(["eddev"])({
+    rewrites() {
+      return {
+        afterFiles: [
+          settings.serverless.uploads === "proxy" && {
+            source: "/wp-content/uploads/:path*",
+            destination: process.env.SITE_URL + "/wp-content/uploads/:path*",
+          },
+          settings.serverless.plugin === "proxy" && {
+            source: "/wp-content/plugins/:path*",
+            destination: process.env.SITE_URL + "/wp-content/plugins/:path*",
+          },
+          settings.serverless.theme === "proxy" && {
+            source: "/wp-content/themes/:path*",
+            destination: process.env.SITE_URL + "/wp-content/themes/:path*",
+          },
+        ].filter(Boolean),
+      }
+    },
+    typescript: {
+      ignoreBuildErrors: true,
+    },
+    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "@manifest/views": resolve(cwd, "manifest_views.ts"),
+        "@manifest/blocks": resolve(cwd, "manifest_blocks.ts"),
+        "@theme": resolve(cwd, "theme.css.tsx"),
+        "@wordpress/components": resolve(cwd, "null.ts"),
+        "@wordpress/element": resolve(cwd, "null.ts"),
+        "@wordpress/blocks": resolve(cwd, "null.ts"),
+        "@wordpress/utils": resolve(cwd, "null.ts"),
+        "@wordpress/data": resolve(cwd, "null.ts"),
+        "@wordpress/hooks": resolve(cwd, "null.ts"),
+        "@wordpress/block-editor": resolve(cwd, "null.ts"),
+      }
+      // config.defines["process.dev"] = isDev ? "true" : "false"
+      const define = config.plugins.find((plugin) => plugin instanceof DefinePlugin)
+      define.definitions["process.serverless"] = "true"
+      define.definitions["process.admin"] = "false"
+      define.definitions["process.dev"] = process.env.NODE_ENV === "development"
 
-module.exports = withTM(["eddev"])({
-  async rewrites() {
-    return {
-      afterFiles: [
-        {
-          source: "/wp-content/uploads/:path*",
-          destination: process.env.SITE_URL + "/wp-content/uploads/:path*",
-        },
-      ],
-    }
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
-    const cwd = process.cwd()
-    console.log(resolve(cwd, "manifest_blocks.ts"))
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@manifest/views": resolve(cwd, "manifest_views.ts"),
-      "@manifest/blocks": resolve(cwd, "manifest_blocks.ts"),
-      // "@components/*": resolve(cwd, "components/*"),
-      // "@views/*": resolve(cwd, "views/*"),
-      // "@hooks/*": resolve(cwd, "hooks/*"),
-      // "@queries/*": resolve(cwd, "hooks/queries/*"),
-      "@theme": resolve(cwd, "theme.css.tsx"),
-      "@wordpress/components": resolve(cwd, "null.ts"),
-      "@wordpress/element": resolve(cwd, "null.ts"),
-      "@wordpress/blocks": resolve(cwd, "null.ts"),
-      "@wordpress/utils": resolve(cwd, "null.ts"),
-      "@wordpress/data": resolve(cwd, "null.ts"),
-      "@wordpress/hooks": resolve(cwd, "null.ts"),
-      "@wordpress/block-editor": resolve(cwd, "null.ts"),
-    }
-    // config.defines["process.dev"] = isDev ? "true" : "false"
-    const define = config.plugins.find((plugin) => plugin instanceof DefinePlugin)
-    define.definitions["process.serverless"] = "true"
-    define.definitions["process.admin"] = "false"
-    define.definitions["process.dev"] = process.env.NODE_ENV === "development"
-    // config.plugins.push(
-    //   new DefinePlugin({
-    //     "process.serverless": "true",
-    //     "process.admin": "false",
-    //     // "process.env.themePath": JSON.stringify(`/wp-content/themes/${opts.themeName}`),
-    //     // "process.themePath": JSON.stringify(`/wp-content/themes/${opts.themeName}`),
-    //   })
-    // )
-    return config
-  },
-})
+      const themePath =
+        (settings.serverless.theme === "remote" ? process.env.SITE_URL : "") + "/wp-content/themes/" + REPO_NAME
+
+      define.definitions["process.env.themePath"] = JSON.stringify(themePath)
+      define.definitions["process.themePath"] = JSON.stringify(themePath)
+      // config.plugins.push(
+      //   new DefinePlugin({
+      //     "process.serverless": "true",
+      //     "process.admin": "false",
+      //     // "process.env.themePath": JSON.stringify(`/wp-content/themes/${opts.themeName}`),
+      //     // "process.themePath": JSON.stringify(`/wp-content/themes/${opts.themeName}`),
+      //   })
+      // )
+      return config
+    },
+  })
+})()

package/serverless-template/pages/_document.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import NextDocument, { Html, Head, Main, NextScript } from "next/document"
+import { getCssText } from "@theme"
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

package/utils/getRepoName.d.ts

@@ -1,4 +1,4 @@
-export declare function getRepoName(dir: string): Promise<{
+export declare function getRepoName(dir: string): {
     repoName: string | undefined;
     themeName: string;
-}>;
+};

package/utils/getRepoName.js

@@ -1,62 +1,16 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRepoName = void 0;
-var git_remote_origin_url_1 = __importDefault(require("git-remote-origin-url"));
+var git_repo_name_1 = __importDefault(require("git-repo-name"));
 var path_1 = __importDefault(require("path"));
 function getRepoName(dir) {
-    var _a;
-    return __awaiter(this, void 0, void 0, function () {
-        var info;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, (0, git_remote_origin_url_1.default)(dir)];
-                case 1:
-                    info = _b.sent();
-                    return [2 /*return*/, {
-                            repoName: (_a = info.match(/([^\/]+).git$/)) === null || _a === void 0 ? void 0 : _a[1],
-                            themeName: path_1.default.basename(dir),
-                        }];
-            }
-        });
-    });
+    var info = git_repo_name_1.default.sync(dir);
+    return {
+        repoName: info || "",
+        themeName: path_1.default.basename(dir),
+    };
 }
 exports.getRepoName = getRepoName;

package/fields/ImageWell.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    previewSize: string;
-    value: number;
-    onChange: (value: number | null) => void;
-};
-export declare function ImageWell(props: Props): JSX.Element;
-export {};

package/fields/ImageWell.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageWell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@stitches/react");
-var react_2 = require("react");
-function ImageWell(props) {
-    var _a = (0, react_2.useState)(null), selectedImage = _a[0], setSelectedImage = _a[1];
-    var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
-    (0, react_2.useEffect)(function () {
-        if (props.value) {
-            var cancelled = false;
-            setImageIsLoading(true);
-            fetch("/wp-json/ed/v1/media/" + Number(props.value))
-                .then(function (response) { return response.json(); })
-                .then(function (image) {
-                setImageIsLoading(false);
-                setSelectedImage(image);
-            });
-        }
-    }, [props.value]);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedImage ? ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage.sizes[props.previewSize] || selectedImage.sizes["thumbnail"] }, void 0) }, void 0)) : null, (0, jsx_runtime_1.jsx)(Toolbar, { children: selectedImage || imageIsLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button, { children: "Remove" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "Edit" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "View" }, void 0)] }, void 0)) : null }, void 0)] }, void 0));
-}
-exports.ImageWell = ImageWell;
-var Wrapper = (0, react_1.styled)("div", {
-    position: "relative",
-    display: "block",
-    width: "100%",
-    border: "1px solid #aaaaaa",
-});
-var ImageContainer = (0, react_1.styled)("div", {
-    padding: "4px",
-    img: {
-        maxWidth: "100%",
-    },
-});
-var spin = (0, react_1.keyframes)({
-    from: {
-        transform: "rotate(0deg)",
-    },
-    to: {
-        transform: "rotate(360deg)",
-    },
-});
-var Spinner = (0, react_1.styled)("div", {
-    display: "block",
-    width: "32px",
-    height: "32px",
-    border: "4px solid transparent",
-    borderTop: "currentColor",
-    animation: "".concat(spin, " 1s linear infinite"),
-});
-var Loading = (0, react_1.styled)("div", {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: "8px",
-});
-var Toolbar = (0, react_1.styled)("div", {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    padding: "4px",
-});