eddev 0.2.0-beta.12 → 0.2.0-beta.16

package/dev-ui/components/panels/TypographyEditor.js

@@ -0,0 +1,88 @@
+"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.TypographyEditor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+var style_1 = require("../../../style");
+var usePersistState_1 = require("../../hooks/usePersistState");
+var icons_1 = require("../../icons");
+var theme_1 = require("../../theme");
+var Button_1 = require("../atoms/Button");
+var Spacer_1 = require("../atoms/Spacer");
+var Text_1 = require("../atoms/Text");
+var PanelWrapper_1 = require("../PanelWrapper");
+function TypographyEditor() {
+    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.typography; }), values = _a[0], setValues = _a[1];
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    var _b = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog"), previewText = _b[0], setPreviewText = _b[1];
+    var reset = function () {
+        setValues(_theme_1.originalConfig.typography);
+        setPreviewText("The quick brown fox jumps over the lazy dog");
+    };
+    // const stylesheet = useStylesheet("spacing")
+    // useEffect(() => {
+    //   stylesheet.set(spaceToCSS(values))
+    // }, [values])
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                        // navigator.clipboard.writeText(spaceToJSON(values))
+                    } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                        // navigator.clipboard.readText().then((text) => {
+                        //   try {
+                        //     const data = JSON.parse(text)
+                        //     setValues(data)
+                        //   } catch (err) {
+                        //     alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
+                        //   }
+                        // })
+                    } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: Object.entries(values).map(function (_a, index) {
+                var name = _a[0], settings = _a[1];
+                return ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: name }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(Details, { children: (0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
+                                    setPreviewText(e.currentTarget.value);
+                                } }, void 0) }, void 0)] }, index));
+            }) }, void 0) }), void 0));
+}
+exports.TypographyEditor = TypographyEditor;
+var TypographyItem = (0, theme_1.styled)("div", {
+    borderBottom: "1px solid $colors$bgLineStrong",
+    display: "flex",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+});
+var Meta = (0, theme_1.styled)("div", {
+    width: "200px",
+    flex: "0 0 auto",
+});
+var Wrapper = (0, theme_1.styled)("div", {
+    maxHeight: "500px",
+    overflowY: "auto",
+});
+var Details = (0, theme_1.styled)("div", {
+    flex: "1 1 auto",
+});
+var Preview = (0, _theme_1.styled)("input", {
+    appearance: "none",
+    backgroundColor: "transparent",
+    borderLeft: 0,
+    borderRight: 0,
+    borderTop: "1px solid #555555",
+    borderBottom: "1px solid #555555",
+    outline: "0",
+    color: "#ffffff",
+    padding: "0px 6px",
+    borderRadius: "0",
+    width: "100%",
+    marginBottom: "8px",
+});

package/dev-ui/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+declare type Result = {
+    name: string;
+    index: number;
+    progress: number;
+    offset: number;
+    width: number;
+    bpMin: number;
+    bpMax: number;
+};
+export declare function useBreakpoint(): Result;
+export {};

package/dev-ui/hooks/useBreakpoint.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+// @ts-ignore
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+function useBreakpoint() {
+    // const [value, setValue] = useState(["initial", -1, 0] as [string, number, number])
+    var _a = (0, react_1.useState)({
+        name: "initial",
+        index: -1,
+        progress: 0,
+        offset: 0,
+        width: 0,
+        bpMin: 0,
+        bpMax: 0,
+    }), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handle = function () {
+            var width = window.innerWidth;
+            var result = {
+                name: "initial",
+                index: 0,
+                offset: window.innerWidth,
+                progress: window.innerWidth / _theme_1.breakpoints[0].max,
+                width: window.innerWidth,
+                bpMin: 0,
+                bpMax: _theme_1.breakpoints[0].max,
+            };
+            for (var index in _theme_1.breakpoints) {
+                var bp = _theme_1.breakpoints[index];
+                var key = bp.key;
+                var media = _theme_1.config.media[key];
+                if (!media.includes("min-width") || !media)
+                    continue;
+                if (window.matchMedia(media).matches) {
+                    result.name = key;
+                    result.index = Number(index);
+                    result.offset = width - parseFloat(bp.min);
+                    result.progress = result.offset / (parseFloat(bp.max) - parseFloat(bp.min));
+                    result.bpMin = bp.min;
+                    result.bpMax = bp.max;
+                }
+                else {
+                    break;
+                }
+            }
+            setValue(result);
+            // if (breakpoint !== value[0]) {
+            // setValue([breakpoint, matchedIndex, progress])
+            // }
+        };
+        handle();
+        window.addEventListener("resize", handle);
+        return function () { return window.removeEventListener("resize", handle); };
+    }, []);
+    return value;
+}
+exports.useBreakpoint = useBreakpoint;

package/dev-ui/hooks/usePersistState.js

@@ -4,9 +4,17 @@ exports.usePersistState = void 0;
 var react_1 = require("react");
 var get = function (id, fallback) {
     if (fallback === void 0) { fallback = undefined; }
+    if (typeof localStorage === "undefined") {
+        return fallback;
+    }
     var value = localStorage.getItem("devui_" + id);
     if (value !== null) {
-        return JSON.parse(value);
+        try {
+            return JSON.parse(value);
+        }
+        catch (err) {
+            return fallback;
+        }
     }
     else {
         return fallback;

package/dev-ui/hooks/useStylesheet.d.ts

@@ -0,0 +1,4 @@
+export declare function useStylesheet(id: string): {
+    clear(): void;
+    set(value: string): void;
+};

package/dev-ui/hooks/useStylesheet.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStylesheet = void 0;
+var react_1 = require("react");
+function useStylesheet(id) {
+    var _a = (0, react_1.useState)(null), element = _a[0], setElement = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (!element) {
+            var style = document.getElementById("devui-" + id);
+            if (!style) {
+                style = document.createElement("style");
+                style.id = "devui-" + id;
+                document.body.appendChild(style);
+            }
+            setElement(style);
+        }
+    }, [element]);
+    return {
+        clear: function () {
+            if (element) {
+                element.innerHTML = "";
+            }
+        },
+        set: function (value) {
+            if (element) {
+                element.innerHTML = value;
+            }
+        },
+    };
+}
+exports.useStylesheet = useStylesheet;

package/dev-ui/icons.d.ts

@@ -9,3 +9,7 @@ export declare const close: JSX.Element;
 export declare const check: JSX.Element;
 export declare const checkEmpty: JSX.Element;
 export declare const checkFilled: JSX.Element;
+export declare const line: JSX.Element;
+export declare const copy: JSX.Element;
+export declare const paste: JSX.Element;
+export declare const trash: JSX.Element;

package/dev-ui/icons.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkFilled = exports.checkEmpty = exports.check = exports.close = exports.share = exports.code = exports.structure = exports.ruler = exports.typography = exports.bolt = void 0;
+exports.trash = exports.paste = exports.copy = exports.line = exports.checkFilled = exports.checkEmpty = exports.check = exports.close = exports.share = exports.code = exports.structure = exports.ruler = exports.typography = exports.bolt = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 exports.bolt = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M11,21h-1l1-7H6.74c0,0,3.68-6.46,6.26-11h1l-1,7h4.28L11,21z" }, void 0) }, void 0)] }), void 0));
 exports.typography = ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z" }, void 0) }), void 0));
@@ -23,3 +23,7 @@ exports.close = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3
 exports.check = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }, void 0)] }), void 0));
 exports.checkEmpty = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 5v14H5V5h14m2-2H3v18h18V3z" }, void 0)] }), void 0));
 exports.checkFilled = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M21 3H3v18h18V3zM10 17l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }, void 0)] }), void 0));
+exports.line = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24", x: "0" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56 C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9 c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07 l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z" }, void 0) }, void 0) }, void 0)] }), void 0));
+exports.copy = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }, void 0)] }), void 0));
+exports.paste = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }, void 0)] }), void 0));
+exports.trash = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6 21h12V7H6v14zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }, void 0)] }), void 0));

package/dev-ui/index.d.ts

@@ -1 +1 @@
-export { DevUI } from "./components/DevUI";
+export * from "./components/DevUI";

package/dev-ui/index.js

@@ -1,5 +1,13 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DevUI = void 0;
-var DevUI_1 = require("./components/DevUI");
-Object.defineProperty(exports, "DevUI", { enumerable: true, get: function () { return DevUI_1.DevUI; } });
+__exportStar(require("./components/DevUI"), exports);

package/dev-ui/loader.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DevUILoader(): JSX.Element | null;

package/dev-ui/loader.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevUILoader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var dynamic_1 = require("../dynamic");
+var usePersistState_1 = require("./hooks/usePersistState");
+var DevUI = (0, dynamic_1.dynamic)(function () { return Promise.resolve().then(function () { return __importStar(require("./components/DevUI")); }); }, { ssr: false });
+function DevUILoader() {
+    var _a = (0, usePersistState_1.usePersistState)("enable_devui", process.dev || (typeof window !== "undefined" && window["ENABLE_DEV_UI"])), render = _a[0], setRender = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (document.location.search.includes("activate-dev-ui")) {
+            setRender(true);
+        }
+    }, []);
+    if (render) {
+        return (0, jsx_runtime_1.jsx)(DevUI, {}, void 0);
+    }
+    else {
+        return null;
+    }
+}
+exports.DevUILoader = DevUILoader;

package/dev-ui/panels.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEV_UI_PANELS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var PageDataDebugger_1 = require("./components/panels/PageDataDebugger");
 var SpacingEditor_1 = require("./components/panels/SpacingEditor");
+var TypographyEditor_1 = require("./components/panels/TypographyEditor");
 var icons_1 = require("./icons");
 var TempComponent = function () {
     return (0, jsx_runtime_1.jsx)("div", { children: "Test" }, void 0);
@@ -11,7 +13,7 @@ exports.DEV_UI_PANELS = {
     typography: {
         label: "Typography",
         icon: icons_1.typography,
-        component: TempComponent,
+        component: TypographyEditor_1.TypographyEditor,
     },
     spacing: {
         label: "Spacing",
@@ -21,11 +23,11 @@ exports.DEV_UI_PANELS = {
     page: {
         label: "Page Data",
         icon: icons_1.code,
-        component: TempComponent,
-    },
-    structure: {
-        label: "Page Structure",
-        icon: icons_1.structure,
-        component: TempComponent,
+        component: PageDataDebugger_1.PageDataDebugger,
     },
+    // structure: {
+    //   label: "Page Structure",
+    //   icon: structure,
+    //   component: TempComponent,
+    // },
 };

package/dev-ui/theme.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 export declare const styled: <Type extends import("react").ComponentType<any> | keyof JSX.IntrinsicElements | import("@stitches/react/types/util").Function, Composers extends (string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function | {
     [name: string]: unknown;
 })[], CSS = import("@stitches/react/types/css-util").CSS<{}, {
     space: {
+        smallButtonHeight: string;
         buttonHeight: string;
         0: string;
         1: string;
@@ -15,6 +17,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         bg: string;
         bgHover: string;
         bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: string;
         fg: string;
         fgFaded: string;
     };
@@ -49,6 +55,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
 } & CSS & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, import("@stitches/react/types/css-util").CSS<{}, {
     space: {
+        smallButtonHeight: string;
         buttonHeight: string;
         0: string;
         1: string;
@@ -62,6 +69,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         bg: string;
         bgHover: string;
         bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: string;
         fg: string;
         fgFaded: string;
     };
@@ -87,6 +98,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     [name: string]: unknown;
 })[], CSS = import("@stitches/react/types/css-util").CSS<{}, {
     space: {
+        smallButtonHeight: string;
         buttonHeight: string;
         0: string;
         1: string;
@@ -100,6 +112,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         bg: string;
         bgHover: string;
         bgHoverLight: string;
+        bgLine: string;
+        bgLineStrong: string;
+        button: string;
+        buttonHover: string;
         fg: string;
         fgFaded: string;
     };

package/dev-ui/theme.js

@@ -6,6 +6,7 @@ var react_1 = require("@stitches/react");
 exports.styled = (_a = (0, react_1.createStitches)({
     theme: {
         space: {
+            smallButtonHeight: "22px",
             buttonHeight: "26px",
             0: "4px",
             1: "8px",
@@ -16,9 +17,13 @@ exports.styled = (_a = (0, react_1.createStitches)({
             6: "48px",
         },
         colors: {
-            bg: "#222222",
-            bgHover: "#444444",
+            bg: "#111111",
+            bgHover: "#333333",
             bgHoverLight: "#333333",
+            bgLine: "#1a1a1a",
+            bgLineStrong: "#222222",
+            button: "#333333",
+            buttonHover: "#555555",
             fg: "#ffffff",
             fgFaded: "#aaaaaa",
         },

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/entry/Root.js

@@ -34,11 +34,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
 var views_1 = __importStar(require("@manifest/views"));
 var react_1 = require("react");
-var dev_ui_1 = require("../dev-ui");
 var routing_1 = require("../routing");
+var loader_1 = require("../dev-ui/loader");
 function Root() {
     var route = (0, routing_1.useRoute)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [process.devUI ? (0, jsx_runtime_1.jsx)(dev_ui_1.DevUI, {}, void 0) : null, (0, jsx_runtime_1.jsx)(views_1.App, { children: (0, jsx_runtime_1.jsx)(routing_1.Switch, { children: Object.entries(views_1.default).map(function (_a) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [process.devUI && (0, jsx_runtime_1.jsx)(loader_1.DevUILoader, {}, void 0), (0, jsx_runtime_1.jsx)(views_1.App, { children: (0, jsx_runtime_1.jsx)(routing_1.Switch, { children: Object.entries(views_1.default).map(function (_a) {
                         var _b, _c;
                         var name = _a[0], Component = _a[1];
                         return ((0, jsx_runtime_1.jsx)(routing_1.Route, __assign({ match: function (route) { var _a; return ((_a = route.data) === null || _a === void 0 ? void 0 : _a.view) === name; } }, { children: (0, jsx_runtime_1.jsx)(Component, __assign({}, (_c = (_b = route.data) === null || _b === void 0 ? void 0 : _b.viewData) === null || _c === void 0 ? void 0 : _c.data), void 0) }), name));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.16",
   "main": "./index.js",
   "license": "MIT",
   "bin": {
@@ -50,6 +50,10 @@
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
     "@stitches/core": "^1.2.6",
     "@stitches/react": "^1.2.6",
+    "@trpc/client": "^9.19.0",
+    "@trpc/next": "^9.19.0",
+    "@trpc/react": "^9.19.0",
+    "@trpc/server": "^9.19.0",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "chalk": "^4.1.2",
@@ -67,15 +71,18 @@
     "glob": "^7.1.7",
     "glob-promise": "^4.2.0",
     "graphql": "^15.5.3",
+    "immer": "^9.0.12",
     "ink": "^3.2.0",
     "inquirer": "^8.1.2",
     "mini-css-extract-plugin": "^2.2.2",
+    "next": "^12.1.0",
     "next-transpile-modules": "^9.0.0",
     "postcss-loader": "^6.1.1",
     "qs": "^6.10.1",
     "react-error-overlay": "^6.0.9",
     "react-inspector": "^5.1.1",
     "react-merge-refs": "^1.1.0",
+    "react-query": "^3.34.16",
     "react-refresh": "^0.10.0",
     "rimraf": "^3.0.2",
     "swr": "^1.0.1",
@@ -92,6 +99,10 @@
     "zustand": "^3.5.10"
   },
   "peerDependencies": {
+    "@trpc/client": "^9.19.0",
+    "@trpc/next": "^9.19.0",
+    "@trpc/react": "^9.19.0",
+    "@trpc/server": "^9.19.0",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0"
   }

package/serverless/create-rpc-client.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 export declare function createRPCClient(): {
     Provider: ({ client, queryClient, children, isPrepass, ssrContext, }: {
-        queryClient: QueryClient;
+        queryClient: import("react-query").QueryClient;
         client: import("@trpc/react").TRPCClient<import("@trpc/server").AnyRouter<any>>;
         children: import("react").ReactNode;
         isPrepass?: boolean | undefined;
@@ -8,25 +9,13 @@ export declare function createRPCClient(): {
     }) => JSX.Element;
     createClient: (opts: import("@trpc/react").CreateTRPCClientOptions<import("@trpc/server").AnyRouter<any>>) => import("@trpc/react").TRPCClient<import("@trpc/server").AnyRouter<any>>;
     useContext: () => import("@trpc/react/dist/declarations/src/internals/context").TRPCContextState<import("@trpc/server").AnyRouter<any>, unknown>;
-    useQuery: <TPath extends string>(pathAndInput: [TPath, (null | undefined)?], opts?: import("@trpc/react").UseTRPCQueryOptions<TPath, unknown, any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>> | undefined) => UseQueryResult<{ [TPath_1 in keyof TRouter["_def"]["queries"]]: {
-        input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
-        output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
-    }; }[TPath_2]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
-    useMutation: <TPath_1 extends string>(path: TPath_1 | [TPath_1], opts?: import("@trpc/react").UseTRPCMutationOptions<unknown, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>, any> | undefined) => UseMutationResult<{ [TPath_3 in keyof TRouter["_def"]["mutations"]]: {
-        input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_3]>;
-        output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_3]["call"]>>;
-    }; }[TPath_1_1]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>, { [TPath_3 in keyof TRouter["_def"]["mutations"]]: {
-        input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_3]>;
-        output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_3]["call"]>>;
-    }; }[TPath_1_1]["input"], unknown>;
+    useQuery: <TPath extends string>(pathAndInput: [TPath, (null | undefined)?], opts?: import("@trpc/react").UseTRPCQueryOptions<TPath, unknown, any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>> | undefined) => import("react-query").UseQueryResult<any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>>;
+    useMutation: <TPath_1 extends string>(path: TPath_1 | [TPath_1], opts?: import("@trpc/react").UseTRPCMutationOptions<unknown, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>, any> | undefined) => import("react-query").UseMutationResult<any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>, unknown, unknown>;
     useSubscription: <TPath_2 extends string, TOutput extends any>(pathAndInput: [TPath_2, (null | undefined)?], opts: {
         enabled?: boolean | undefined;
         onError?: ((err: import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>) => void) | undefined;
         onNext: (data: TOutput) => void;
     }) => void;
-    useDehydratedState: (client: import("@trpc/react").TRPCClient<import("@trpc/server").AnyRouter<any>>, trpcState: any) => any;
-    useInfiniteQuery: <TPath_3 extends never>(pathAndInput: [path: TPath_3, input: Omit<unknown, "cursor">], opts?: import("@trpc/react").UseTRPCInfiniteQueryOptions<TPath_3, Omit<unknown, "cursor">, any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>> | undefined) => UseInfiniteQueryResult<{ [TPath_1 in keyof TRouter["_def"]["queries"]]: {
-        input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
-        output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
-    }; }[TPath_3_1]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
+    useDehydratedState: (client: import("@trpc/react").TRPCClient<import("@trpc/server").AnyRouter<any>>, trpcState: import("react-query").DehydratedState | undefined) => import("react-query").DehydratedState | undefined;
+    useInfiniteQuery: <TPath_3 extends never>(pathAndInput: [path: TPath_3, input: Omit<unknown, "cursor">], opts?: import("@trpc/react").UseTRPCInfiniteQueryOptions<TPath_3, Omit<unknown, "cursor">, any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>> | undefined) => import("react-query").UseInfiniteQueryResult<any, import("@trpc/react").TRPCClientErrorLike<import("@trpc/server").AnyRouter<any>>>;
 };

package/serverless-template/_utils/PageMeta.tsx

@@ -0,0 +1,44 @@
+import { ParsedRouteTags } from "eddev/routing/remoteProps"
+import Head from "next/head"
+import { Fragment } from "react"
+
+type Props = ParsedRouteTags
+
+export function PageMeta(props: Props) {
+  console.log("Meta", props)
+  return (
+    <Head>
+      {props.title?.map((tag, i) => (
+        <title key={"title" + i}>{tag.__code}</title>
+      ))}
+      {props.style?.map((tag, i) => {
+        return (
+          <style
+            key={"style" + i}
+            className={tag["class"]}
+            type={tag.type}
+            id={tag.id}
+            dangerouslySetInnerHTML={{ __html: tag.__code }}
+          />
+        )
+      })}
+      {props.script?.map((tag, i) => {
+        return (
+          <script
+            key={"script" + i}
+            className={tag["class"]}
+            type={tag.type}
+            id={tag.id}
+            dangerouslySetInnerHTML={{ __html: tag.__code }}
+          />
+        )
+      })}
+      {props.meta?.map((tag, i) => {
+        return <meta key={"meta" + i} {...tag} />
+      })}
+      {props.link?.map((tag, i) => {
+        return <link key={"link" + i} {...tag} />
+      })}
+    </Head>
+  )
+}

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

@@ -1,18 +1,25 @@
 import config from "./ed-config"
+import { fetchWP } from "./fetch-wp"
 
 const settings = config.serverless
 
 export async function fetchWordpressProps(pathname: string) {
+  // Determine the URL for fetching
   const origin = (process.env.SITE_URL as string).replace(/\/$/, "")
   pathname = pathname.replace(/(^\/|\/$)/g, "")
   const propsURL = origin + ("/" + pathname + "/?_props=all").replace(/\/+/, "/")
-  console.log("Fetching", propsURL)
-  let response = await fetch(propsURL)
+
+  console.log("Fetching props", propsURL)
+
+  // Make the request
+  let response = await fetchWP(propsURL, {})
+
+  // Convert to text, rather than JSON — so we can do find-and-replace
   let text = await response.text()
 
   // Convert absolute site URL details to relative paths
   text = text.replace(new RegExp(origin.replace(/(http|https)/, `https?`) + "([a-z0-9-_./]+)", "g"), (url) => {
-    const path = url.replace(/https?:\/\/[a-z0-9\-\_\.]+/, "")
+    const path = url.replace(/https?:\/\/[^\/]+/, "")
     if (path.startsWith("/wp-content/uploads/")) {
       if (settings?.uploads === "proxy") {
         return path