eddev 0.2.0-beta.0 → 0.2.0-beta.4

package/build/serverless/create-next-app.d.ts

@@ -1,6 +1,7 @@
 declare type Options = {
     baseDirectory: string;
     dev: boolean;
+    build: boolean;
 };
 export declare function createNextApp(opts: Options): Promise<void>;
 export {};

package/build/serverless/create-next-app.js

@@ -106,12 +106,18 @@ function createNextApp(opts) {
                     _a.sent();
                     // Create manifests
                     initManifests(serverlessDirectory, opts.dev);
-                    // Start
+                    if (!opts.dev) return [3 /*break*/, 7];
                     return [4 /*yield*/, runScript(serverlessDirectory, "dev")];
                 case 6:
-                    // Start
                     _a.sent();
-                    return [2 /*return*/];
+                    return [3 /*break*/, 9];
+                case 7:
+                    if (!opts.build) return [3 /*break*/, 9];
+                    return [4 /*yield*/, runScript(serverlessDirectory, "build")];
+                case 8:
+                    _a.sent();
+                    _a.label = 9;
+                case 9: return [2 /*return*/];
             }
         });
     });
@@ -216,6 +222,7 @@ function syncFiles(sourceFolder, targetFolder) {
                         "types.graphql.ts",
                         "types.views.ts",
                         "types.blocks.ts",
+                        "utils",
                     ];
                     return [4 /*yield*/, Promise.all(links.map(function (file) {
                             var src = (0, path_1.resolve)(sourceFolder, file);

package/cli/cli.js

@@ -66,6 +66,16 @@ program
         serverless: options.serverless,
     });
 });
+program
+    .command("vercel-build")
+    .description("Create and build a Next.js project in .serverless")
+    .action(function (options) {
+    (0, create_next_app_1.createNextApp)({
+        baseDirectory: process.cwd(),
+        dev: false,
+        build: true,
+    });
+});
 program
     .command("next")
     .description("Create a Next.js project in .serverless")
@@ -73,6 +83,7 @@ program
     (0, create_next_app_1.createNextApp)({
         baseDirectory: process.cwd(),
         dev: true,
+        build: false,
     });
 });
 program

package/components/NextRouter.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { RouteData } from "../routing/remoteProps";
+declare type Props = {
+    children: ReactNode;
+    path: string;
+    data: RouteData;
+};
+export declare function NextRouter({ children, path, data }: Props): JSX.Element;
+export {};

package/components/NextRouter.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextRouter = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var routing_1 = require("../routing");
+var router_1 = require("next/router");
+function NextRouter(_a) {
+    var children = _a.children, path = _a.path, data = _a.data;
+    var route = (0, router_1.useRouter)();
+    return ((0, jsx_runtime_1.jsx)(routing_1.RouterRoot, __assign({ url: path, data: data, onNavigateRequest: function (url) {
+            route.push(url);
+            // setPendingUrl({ popped: false, url })
+        }, onPreload: function (url) {
+            // if (isSameOrigin(url)) {
+            //   fetchProps(url)
+            // }
+        }, onNavigated: function () {
+            // if (pending && typeof pending.scrollPosition === "number") {
+            //   setScrollPosition({ value: pending.scrollPosition })
+            // } else {
+            //   setScrollPosition({ value: 0 })
+            // }
+        } }, { children: children }), void 0));
+}
+exports.NextRouter = NextRouter;

package/dynamic/dynamic-component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const dynamic: {
     <Props, Module = import("@loadable/component").DefaultComponent<Props>>(loadFn: (props: Props) => Promise<Module>, options: import("@loadable/component").OptionsWithResolver<Props, Module>): import("@loadable/component").LoadableComponent<Props>;
     <Props_1>(loadFn: (props: Props_1) => Promise<import("@loadable/component").DefaultComponent<Props_1>>, options?: import("@loadable/component").OptionsWithoutResolver<Props_1> | undefined): import("@loadable/component").LoadableComponent<Props_1>;

package/fields/ImageWell.d.ts

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.0-beta.4",
   "main": "./index.js",
   "license": "MIT",
   "bin": {
@@ -26,6 +26,7 @@
     "@types/url-parse": "^1.4.4",
     "@types/webpack-dev-server": "^3.11.2",
     "csstype": "^3.0.9",
+    "next": "^12.0.10",
     "react-html-props": "^1.0.32"
   },
   "dependencies": {

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

@@ -0,0 +1,16 @@
+export async function fetchWordpressProps(pathname: string) {
+  const origin = (process.env.SITE_URL as string).replace(/\/$/, "")
+  pathname = pathname.replace(/(^\/|\/$)/g, "")
+
+  const propsURL = origin + ("/" + pathname + "/?_props=all").replace(/\/+/, "/")
+  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, propsURL, response.status, response.statusText)
+  text = text.replaceAll(origin, "")
+  console.log("NOW", text)
+
+  return JSON.parse(text)
+}

package/serverless-template/next.config.js

@@ -7,6 +7,16 @@ const { DefinePlugin } = require("webpack")
 module.exports = {}
 
 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,
   },

package/serverless-template/pages/[...slug].tsx

@@ -1,20 +1,19 @@
+import { GetStaticPathsResult, GetStaticPropsContext, GetStaticPropsResult } from "next"
+import { fetchWordpressProps } from "../_utils/fetch-wordpress-props"
+
 export default function Home(props: any) {
   return <div>{JSON.stringify(props)}</div>
 }
 
-export async function getStaticPaths() {
+export async function getStaticPaths(): Promise<GetStaticPathsResult> {
   return {
-    // paths: [{ params: { slug: ["tees"] } }],
     paths: [],
     fallback: true,
   }
 }
 
-export async function getStaticProps({ params }: any) {
-  console.log("Params", params, process.env.SITE_URL + "/" + params.slug.join("/") + "/?_props=all")
-  const response = await fetch(process.env.SITE_URL + "/" + params.slug.join("/") + "/?_props=all")
-  const result = await response.json()
-  console.log("Result is", result)
+export async function getStaticProps({ params }: GetStaticPropsContext): Promise<GetStaticPropsResult<any>> {
+  const result = await fetchWordpressProps((params?.slug as string[]).join("/"))
   return {
     props: result,
   }

package/serverless-template/pages/_app.tsx

@@ -1,10 +1,10 @@
 import type { AppProps } from "next/app"
 import { App } from "@manifest/views"
 import manifest from "@manifest/views"
+import { NextRouter } from "eddev/components/NextRouter"
 import { ServerlessAppDataProvider } from "eddev/utils/serverlessAppContext"
 import { useMemo } from "react"
-
-console.log("FF", ServerlessAppDataProvider)
+import { useRouter } from "next/router"
 
 function MyApp({ Component, pageProps }: AppProps) {
   if (!pageProps.appData) return <div />
@@ -13,15 +13,21 @@ function MyApp({ Component, pageProps }: AppProps) {
     return pageProps.appData.data
   }, [])
 
+  const route = useRouter()
+
   const viewProps = pageProps?.viewData?.data
 
   const View = manifest[pageProps.view]
 
+  console.log("ROUTE", pageProps, route.pathname)
+
   return (
     <ServerlessAppDataProvider value={appData}>
-      <App>
-        <View {...viewProps} />
-      </App>
+      <NextRouter data={pageProps} path={route.pathname}>
+        <App>
+          <View {...viewProps} />
+        </App>
+      </NextRouter>
     </ServerlessAppDataProvider>
   )
 }

package/serverless-template/pages/index.tsx

@@ -1,10 +1,11 @@
+import { fetchWordpressProps } from "../_utils/fetch-wordpress-props"
+
 export default function Home() {
   return <div>Test</div>
 }
 
 export async function getStaticProps({ params }: any) {
-  const response = await fetch(process.env.SITE_URL + "/?_props=all")
-  const result = await response.json()
+  const result = await fetchWordpressProps("/")
   return {
     props: result,
   }

package/style/createStitches.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DefaultThemeMap } from "@stitches/react";
 import { ConfigType } from "@stitches/core/types/config";
 import { Properties as CSS } from "csstype";

package/build/prepare-next.d.ts

@@ -1 +0,0 @@
-export declare function prepareNextDirectory(): void;

package/build/prepare-next.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareNextDirectory = void 0;
-function prepareNextDirectory() { }
-exports.prepareNextDirectory = prepareNextDirectory;