eddev 0.2.0-beta.13 → 0.2.0-beta.17

package/build/get-webpack-config.js

@@ -332,6 +332,7 @@ function getWebpackConfig(opts) {
                         DEFINES["process.BLOCK_MANIFEST_FILE"] = JSON.stringify(ALIAS["@manifest/blocks"]);
                     }
                     DEFINES["process.devUI"] = config.devUI === "enabled";
+                    DEFINES["process.serverlessEndpoint"] = "window.SERVERLESS_ENDPOINT";
                     if (isBrowser) {
                         DEFINES["process.env.themePath"] = "window.THEME_PATH || ".concat(DEFINES["process.env.themePath"]);
                     }

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

@@ -65,15 +65,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -88,6 +79,7 @@ var manifest_blocks_1 = require("../manifests/manifest-blocks");
 var promises_1 = require("fs/promises");
 var manifest_views_1 = require("../manifests/manifest-views");
 var getRepoName_1 = require("../../utils/getRepoName");
+var updateEnvFile_1 = require("../../utils/updateEnvFile");
 function requireConfig(dir) {
     var configPath = (0, path_1.resolve)(dir, "ed.config.json");
     return require(configPath);
@@ -95,7 +87,7 @@ function requireConfig(dir) {
 function createNextApp(opts) {
     var _a;
     return __awaiter(this, void 0, void 0, function () {
-        var isVercel, serverlessDirectory, sendSignal, repoName, port;
+        var isVercel, serverlessDirectory, sendSignal, repoName, assetPaths, port;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -123,9 +115,10 @@ function createNextApp(opts) {
                     _b.sent();
                     _b.label = 5;
                 case 5:
-                    if (!!isVercel) return [3 /*break*/, 9];
+                    assetPaths = ((_a = requireConfig(opts.baseDirectory).serverless) === null || _a === void 0 ? void 0 : _a.themeAssets) || [];
+                    if (!!isVercel) return [3 /*break*/, 11];
                     // Sync important files during development, as they change
-                    return [4 /*yield*/, syncFiles(opts.baseDirectory, serverlessDirectory, __spreadArray([
+                    return [4 /*yield*/, syncFiles(opts.baseDirectory, serverlessDirectory, [
                             "blocks/**/*",
                             "components/**/*",
                             "hooks/**/*",
@@ -137,8 +130,8 @@ function createNextApp(opts) {
                             "types.views.ts",
                             "types.blocks.ts",
                             "utils/**/*",
-                            "ed.config.json"
-                        ], (((_a = requireConfig(opts.baseDirectory).serverless) === null || _a === void 0 ? void 0 : _a.devAssets) || []), true))
+                            "ed.config.json",
+                        ])
                         // Also sync APIs into the APIs folder
                     ];
                 case 6:
@@ -146,46 +139,76 @@ function createNextApp(opts) {
                     _b.sent();
                     // Also sync APIs into the APIs folder
                     return [4 /*yield*/, syncFiles(opts.baseDirectory, (0, path_1.join)(serverlessDirectory, "pages/"), ["api/**/*"])
-                        // And public folder
+                        // Sync the public folder
                     ];
                 case 7:
                     // Also sync APIs into the APIs folder
                     _b.sent();
-                    // And public folder
-                    return [4 /*yield*/, syncFiles((0, path_1.join)(opts.baseDirectory, "assets"), (0, path_1.join)(serverlessDirectory, "public/wp-content/themes/".concat(repoName.repoName, "/assets")), ["**/*"])];
+                    if (!assetPaths.length) return [3 /*break*/, 9];
+                    return [4 /*yield*/, syncFiles(opts.baseDirectory, (0, path_1.join)(serverlessDirectory, "public/wp-content/themes/".concat(repoName.repoName)), assetPaths)];
                 case 8:
-                    // And public folder
                     _b.sent();
                     _b.label = 9;
-                case 9:
-                    if (!!isVercel) return [3 /*break*/, 11];
-                    sendSignal({ code: "packaging" });
-                    return [4 /*yield*/, updatePackages(serverlessDirectory)];
+                case 9: 
+                // Sync favicon
+                return [4 /*yield*/, syncFiles((0, path_1.join)(opts.baseDirectory), (0, path_1.join)(serverlessDirectory, "public/"), ["favicon.ico"])];
                 case 10:
+                    // Sync favicon
                     _b.sent();
-                    _b.label = 11;
+                    return [3 /*break*/, 15];
                 case 11:
+                    if (!assetPaths.length) return [3 /*break*/, 13];
+                    return [4 /*yield*/, copyFiles(opts.baseDirectory, (0, path_1.join)(serverlessDirectory, "public/wp-content/themes/".concat(repoName.repoName)), assetPaths)];
+                case 12:
+                    _b.sent();
+                    _b.label = 13;
+                case 13: 
+                // Sync favicon
+                return [4 /*yield*/, copyFiles((0, path_1.join)(opts.baseDirectory), (0, path_1.join)(serverlessDirectory, "public/"), ["favicon.ico"])];
+                case 14:
+                    // Sync favicon
+                    _b.sent();
+                    _b.label = 15;
+                case 15:
+                    if (!!isVercel) return [3 /*break*/, 17];
+                    sendSignal({ code: "packaging" });
+                    return [4 /*yield*/, updatePackages(serverlessDirectory)];
+                case 16:
+                    _b.sent();
+                    _b.label = 17;
+                case 17:
                     sendSignal({ code: "compiling" });
                     // Create manifests
-                    initManifests(serverlessDirectory, opts.dev);
-                    if (!opts.dev) return [3 /*break*/, 14];
-                    return [4 /*yield*/, getPort(3000)];
-                case 12:
+                    return [4 /*yield*/, initManifests(serverlessDirectory, opts.dev)
+                        // Start
+                    ];
+                case 18:
+                    // Create manifests
+                    _b.sent();
+                    if (!opts.dev) return [3 /*break*/, 21];
+                    return [4 /*yield*/, getPort(3000)
+                        // Write the endpoint URL to .env
+                    ];
+                case 19:
                     port = _b.sent();
+                    // Write the endpoint URL to .env
+                    (0, updateEnvFile_1.updateEnvFile)({
+                        DEBUG_SERVERLESS_ENDPOINT: "http://localhost:".concat(port),
+                    }, opts.baseDirectory);
                     sendSignal({ code: "url", url: "http://127.0.0.1:".concat(port) });
-                    return [4 /*yield*/, devNext(serverlessDirectory, port)
-                        // await runScript(serverlessDirectory, "dev")
-                    ];
-                case 13:
+                    // await devNext(serverlessDirectory, port)
+                    return [4 /*yield*/, runScript(serverlessDirectory, ["dev", "--port", String(port)])];
+                case 20:
+                    // await devNext(serverlessDirectory, port)
                     _b.sent();
-                    return [3 /*break*/, 16];
-                case 14:
-                    if (!opts.build) return [3 /*break*/, 16];
-                    return [4 /*yield*/, runScript(serverlessDirectory, "build")];
-                case 15:
+                    return [3 /*break*/, 23];
+                case 21:
+                    if (!opts.build) return [3 /*break*/, 23];
+                    return [4 /*yield*/, runScript(serverlessDirectory, ["build"])];
+                case 22:
                     _b.sent();
-                    _b.label = 16;
-                case 16: return [2 /*return*/];
+                    _b.label = 23;
+                case 23: return [2 /*return*/];
             }
         });
     });
@@ -261,7 +284,7 @@ function updatePackagesFile(sourceFolder, targetFolder) {
             targetPackageFile = (0, path_1.resolve)(targetFolder, "package.json");
             sourcePackage = require(sourcePackageFile);
             targetPackage = require(targetPackageFile);
-            mergedPackage = __assign(__assign({}, targetPackage), { dependencies: __assign(__assign({}, (sourcePackage.dependencies || {})), (targetPackage.dependencies || {})), devDependencies: __assign(__assign({}, (sourcePackage.devDependencies || {})), (targetPackage.devDependencies || {})) });
+            mergedPackage = __assign(__assign({}, targetPackage), { dependencies: __assign(__assign({}, (targetPackage.dependencies || {})), (sourcePackage.dependencies || {})), devDependencies: __assign(__assign({}, (targetPackage.devDependencies || {})), (sourcePackage.devDependencies || {})) });
             (0, fs_extra_1.writeJSON)(targetPackageFile, mergedPackage, {
                 spaces: 2,
             });
@@ -269,6 +292,20 @@ function updatePackagesFile(sourceFolder, targetFolder) {
         });
     });
 }
+function copyFiles(sourceFolder, targetFolder, patterns) {
+    return __awaiter(this, void 0, void 0, function () {
+        var files;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, Promise.all(patterns.map(function (pattern) { return (0, glob_promise_1.default)((0, path_1.resolve)(sourceFolder, pattern)); }))];
+                case 1:
+                    files = (_a.sent()).flat();
+                    console.log("Files are", files);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
 function syncFiles(sourceFolder, targetFolder, patterns) {
     return __awaiter(this, void 0, void 0, function () {
         var _this = this;
@@ -303,45 +340,30 @@ function syncFiles(sourceFolder, targetFolder, patterns) {
         });
     });
 }
-function devNext(dir, port) {
-    return __awaiter(this, void 0, void 0, function () {
-        var createServer, parse, next, app, handle;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("http")); })];
-                case 1:
-                    createServer = (_a.sent()).createServer;
-                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("url")); })];
-                case 2:
-                    parse = (_a.sent()).parse;
-                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("next")); })];
-                case 3:
-                    next = (_a.sent()).default;
-                    app = next({
-                        dev: true,
-                        dir: dir,
-                        minimalMode: true,
-                        customServer: true,
-                        port: port,
-                    });
-                    handle = app.getRequestHandler();
-                    app.prepare().then(function () {
-                        console.log("http://127.0.0.1:".concat(port));
-                        createServer(function (req, res) {
-                            handle(req, res, parse(req.url || "", true));
-                        }).listen(app.port);
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function runScript(dir, script) {
+// async function devNext(dir: string, port: number) {
+//   const { createServer } = await import("http")
+//   const { parse } = await import("url")
+//   const { default: next } = await import("next")
+//   const app = next({
+//     dev: true,
+//     dir: dir,
+//     minimalMode: true,
+//     customServer: true,
+//     port: port,
+//   })
+//   const handle = app.getRequestHandler()
+//   app.prepare().then(() => {
+//     createServer((req, res) => {
+//       handle(req, res, parse(req.url || "", true))
+//     }).listen(app.port)
+//   })
+// }
+function runScript(dir, args) {
     var _a, _b;
     return __awaiter(this, void 0, void 0, function () {
         var proc;
         return __generator(this, function (_c) {
-            proc = (0, child_process_1.spawn)("yarn", [script], {
+            proc = (0, child_process_1.spawn)("yarn", args, {
                 cwd: dir,
             });
             (_a = proc.stdout) === null || _a === void 0 ? void 0 : _a.pipe(process.stdout);
@@ -397,17 +419,17 @@ function initManifests(dir, dev) {
 function getPort(port) {
     if (port === void 0) { port = 3000; }
     return __awaiter(this, void 0, void 0, function () {
-        var createServer, p;
+        var createServer;
         var _this = this;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("http")); })];
                 case 1:
                     createServer = (_a.sent()).createServer;
-                    for (p = port; p < port + 100; p++) { }
                     return [4 /*yield*/, new Promise(function (resolve) {
                             var server = createServer();
-                            server.listen(port, function () {
+                            server.listen(port, "127.0.0.1");
+                            server.on("listening", function () {
                                 server.once("close", function () {
                                     resolve(port);
                                 });

package/cli/cli.js

@@ -38,8 +38,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var commander_1 = require("commander");
 var create_next_app_1 = require("../build/serverless/create-next-app");
-var build_dev_1 = require("./build.dev");
-var build_prod_1 = require("./build.prod");
 var setup_1 = require("./setup");
 var program = new commander_1.Command();
 program.version("0.0.1");
@@ -51,7 +49,8 @@ program
     .option("-m, --mode <mode>", 'Defaults to all modes, but use "frontend", "admin" or "codegen" to run in just one mode', undefined)
     .option("--verbose", "Enables log retention", false)
     .action(function (options) {
-    (0, build_dev_1.devCommand)({
+    var devCommand = require("./build.dev").devCommand;
+    devCommand({
         serverless: options.serverless,
         mode: options.mode,
         retainLog: options.verbose,
@@ -69,7 +68,8 @@ program
         });
     }
     else {
-        (0, build_prod_1.prodCommand)({
+        var prodCommand = require("./build.prod").prodCommand;
+        prodCommand({
             serverless: options.serverless,
         });
     }

package/components/PageHead.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/PageHead.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/PageMeta.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/PageMeta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/PageMeta.monolith.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/PageMeta.monolith.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/ServerlessPageMeta.d.ts

@@ -0,0 +1 @@
+export declare function PageMeta(): any;

package/components/ServerlessPageMeta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/config/config-schema.d.ts

@@ -6,44 +6,49 @@ export declare const EDConfigSchema: z.ZodObject<{
         uploads: z.ZodEnum<["proxy", "remote"]>;
         plugins: z.ZodEnum<["proxy", "remote"]>;
         theme: z.ZodEnum<["proxy", "copy", "remote"]>;
-        devAssets: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        themeAssets: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
         apiOnly: z.ZodOptional<z.ZodBoolean>;
+        endpoints: z.ZodRecord<z.ZodString, z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     }, {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     }>>;
     devUI: z.ZodEnum<["disabled", "enabled"]>;
 }, "strip", z.ZodTypeAny, {
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }, {
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }>;

package/config/config-schema.js

@@ -10,8 +10,9 @@ exports.EDConfigSchema = zod_1.z.object({
         uploads: zod_1.z.enum(["proxy", "remote"]),
         plugins: zod_1.z.enum(["proxy", "remote"]),
         theme: zod_1.z.enum(["proxy", "copy", "remote"]),
-        devAssets: zod_1.z.array(zod_1.z.string()).optional(),
+        themeAssets: zod_1.z.array(zod_1.z.string()).optional(),
         apiOnly: zod_1.z.boolean().optional(),
+        endpoints: zod_1.z.record(zod_1.z.string(), zod_1.z.string()),
     })
         .optional(),
     devUI: zod_1.z.enum(["disabled", "enabled"]),

package/config/get-config.d.ts

@@ -1,35 +1,38 @@
 export declare function getEDConfig(dir?: string): import("zod").SafeParseReturnType<{
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }, {
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }>;
 export declare function getEDConfigUnwrapped(dir?: string): {
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 };

package/config/parse-config.d.ts

@@ -1,23 +1,25 @@
 export declare function parseConfig(config: any): import("zod").SafeParseReturnType<{
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }, {
     $schema?: string | undefined;
     serverless?: {
-        devAssets?: string[] | undefined;
+        themeAssets?: string[] | undefined;
         apiOnly?: boolean | undefined;
         enabled: boolean;
         uploads: "proxy" | "remote";
         plugins: "proxy" | "remote";
         theme: "proxy" | "remote" | "copy";
+        endpoints: Record<string, string>;
     } | undefined;
     devUI: "disabled" | "enabled";
 }>;

package/dev-ui/components/BreakpointIndicator.js

@@ -34,7 +34,7 @@ function BreakpointIndicator() {
     var maxSize = parseFloat(_theme_1.breakpoints[_theme_1.breakpoints.length - 1].min);
     var _a = (0, usePersistState_1.usePersistState)("breakpoint_indicator", false), expanded = _a[0], setExpanded = _a[1];
     if (!expanded) {
-        return ((0, jsx_runtime_1.jsx)(Simple, __assign({ onClick: function () { return setExpanded(true); }, css: colors[bpState.index % colors.length] }, { children: (0, jsx_runtime_1.jsxs)(Text_1.Text, __assign({ variant: "monoBold" }, { children: ["@", bpState.name] }), void 0) }), void 0));
+        return ((0, jsx_runtime_1.jsx)(Simple, __assign({ onClick: function () { return setExpanded(true); }, css: colors[bpState.index % colors.length] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: bpState.name }), void 0) }), void 0));
     }
     return ((0, jsx_runtime_1.jsx)(Expanded, __assign({ onClick: function () { return setExpanded(false); } }, { children: (0, jsx_runtime_1.jsxs)(Items, { children: [_theme_1.breakpoints.map(function (bp, index) {
                     return ((0, jsx_runtime_1.jsx)(Item, __assign({ css: __assign(__assign({}, colors[index % colors.length]), { $$offset: parseFloat(bp.min) / maxSize, $$size: bp.max ? (parseFloat(bp.max) - parseFloat(bp.min)) / maxSize : 0 }), last: index === _theme_1.breakpoints.length - 1, active: bpState.name === bp.key }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: "".concat(bp.min, " - ").concat(bp.max || "∞"), nowrap: true, offset: 3 }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoTiny", align: "left" }, { children: bp.key }), void 0) }), void 0) }), index));

package/dev-ui/components/DevUI.d.ts

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

package/dev-ui/components/DevUI.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DevUI = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var usePersistState_1 = require("../hooks/usePersistState");
@@ -17,7 +16,7 @@ function DevUI() {
                     setPanel(panel);
                 }, extras: (0, jsx_runtime_1.jsx)(BreakpointIndicator_1.BreakpointIndicator, {}, void 0) }, void 0), open && PanelComponent && ((0, jsx_runtime_1.jsx)(PanelPosition, { children: (0, jsx_runtime_1.jsx)(PanelComponent, {}, void 0) }, void 0))] }, void 0));
 }
-exports.DevUI = DevUI;
+exports.default = DevUI;
 var PanelPosition = (0, theme_1.styled)("div", {
     position: "fixed",
     left: "0px",

package/dev-ui/components/atoms/Text.d.ts

@@ -1,5 +1,5 @@
 export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    variant?: "mono" | "h1" | "monoBold" | "monoTiny" | undefined;
+    variant?: "h1" | "mono" | "monoBold" | "monoTiny" | undefined;
     align?: "left" | "right" | "center" | undefined;
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     space: {

package/dev-ui/hooks/usePersistState.js

@@ -4,6 +4,9 @@ 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) {
         try {

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

@@ -1,4 +1,5 @@
-export declare const styled: <Type extends import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements | import("react").ComponentType<any>, Composers extends (string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> | {
+/// <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: {
@@ -41,7 +42,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
     transitions: {
         default: string;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>(type: Type, ...composers: { [K in keyof Composers]: Composers[K] extends string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>(type: Type, ...composers: { [K in keyof Composers]: Composers[K] extends string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
     variants?: {
         [x: string]: {
             [x: string]: CSS;
@@ -93,7 +94,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
     transitions: {
         default: string;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>, css: <Composers extends (string | import("@stitches/react/types/util").Function | import("react").ExoticComponent<any> | import("react").JSXElementConstructor<any> | {
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>, css: <Composers extends (string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function | {
     [name: string]: unknown;
 })[], CSS = import("@stitches/react/types/css-util").CSS<{}, {
     space: {
@@ -136,7 +137,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
     transitions: {
         default: string;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>(...composers: { [K in keyof Composers]: Composers[K] extends string | import("@stitches/react/types/util").Function | import("react").ExoticComponent<any> | import("react").JSXElementConstructor<any> ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>(...composers: { [K in keyof Composers]: Composers[K] extends string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
     variants?: {
         [x: string]: {
             [x: string]: CSS;

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.13",
+  "version": "0.2.0-beta.17",
   "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",
@@ -71,12 +75,14 @@
     "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",
@@ -93,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,7 +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;
@@ -9,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

package/serverless-template/_utils/fetch-wp.ts

@@ -0,0 +1,16 @@
+import { Agent } from "https"
+
+// Used to allow self-signed certificates
+const agent = new Agent({
+  rejectUnauthorized: false,
+})
+
+export const fetchWP: typeof fetch = async (url, opts) => {
+  // TODO — basic auth via env variable
+  // https://stackoverflow.com/questions/43842793/basic-authentication-with-fetch
+  return fetch(url, {
+    ...opts,
+    // @ts-ignore
+    agent: url.includes("https") ? agent : undefined,
+  })
+}

package/serverless-template/global.d.ts

@@ -4,6 +4,7 @@ declare global {
       browser: boolean
       serverless: boolean
       dev: boolean
+      devUI: boolean
     }
   }
 }

package/serverless-template/next.config.js

@@ -55,6 +55,8 @@ module.exports = (() => {
 
       define.definitions["process.env.themePath"] = JSON.stringify(themePath)
       define.definitions["process.themePath"] = JSON.stringify(themePath)
+      define.definitions["process.devUI"] = settings.devUI === "enabled"
+      define.definitions["process.serverlessEndpoint"] = JSON.stringify("/")
       // config.plugins.push(
       //   new DefinePlugin({
       //     "process.serverless": "true",

package/serverless-template/pages/_app.tsx

@@ -5,6 +5,8 @@ import { NextRouter } from "eddev/components/NextRouter"
 import { ServerlessAppDataProvider } from "eddev/utils/serverlessAppContext"
 import { useMemo } from "react"
 import { useRouter } from "next/router"
+import { DevUILoader } from "eddev/dev-ui/loader"
+import { PageMeta } from "../_utils/PageMeta"
 
 function MyApp({ Component, pageProps }: AppProps) {
   if (!pageProps.appData) return <div />
@@ -19,9 +21,14 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   const View = manifest[pageProps.view]
 
+  // console.log("PAGE", pageProps)
+
   return (
     <ServerlessAppDataProvider value={appData}>
       <NextRouter data={pageProps} path={route.pathname}>
+        {pageProps?.meta?.head && <PageMeta {...pageProps?.meta?.head} />}
+        {pageProps?.meta?.footer && <PageMeta {...pageProps?.meta?.footer} />}
+        {process.devUI && <DevUILoader />}
         <App>
           <View {...viewProps} />
         </App>

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";
@@ -656,7 +657,7 @@ export declare function createStitches<Prefix extends string = "", Media extends
     } & { [Scale_4 in keyof (Theme & { [Scale_1 in keyof Responsive]: { [T_1 in keyof Responsive[Scale_1]]: string; }; })]: { [Token_2 in keyof (Theme & { [Scale_1 in keyof Responsive]: { [T_1 in keyof Responsive[Scale_1]]: string; }; })[Scale_4]]: import("@stitches/react/types/theme").Token<Extract<Token_2, string | number>, string, Extract<Scale_4, string | void>, "">; }; };
     reset: () => void;
     getCssText: () => string;
-    css: <Composers extends (string | import("@stitches/react/types/util").Function | import("react").ExoticComponent<any> | import("react").JSXElementConstructor<any> | {
+    css: <Composers extends (string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function | {
         [name: string]: unknown;
     })[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
         initial: "";
@@ -779,7 +780,7 @@ export declare function createStitches<Prefix extends string = "", Media extends
             gridColumn: string;
             "--grid-columns": number;
         };
-    }>>(...composers: { [K_1 in keyof Composers]: Composers[K_1] extends string | import("@stitches/react/types/util").Function | import("react").ExoticComponent<any> | import("react").JSXElementConstructor<any> ? Composers[K_1] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
+    }>>(...composers: { [K_1 in keyof Composers]: Composers[K_1] extends string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function ? Composers[K_1] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
         variants?: {
             [x: string]: {
                 [x: string]: CSS_1;
@@ -793,7 +794,7 @@ export declare function createStitches<Prefix extends string = "", Media extends
     } & CSS_1 & { [K2 in keyof Composers[K_1]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
         initial: "";
     } & Media, CSS_1>;
-    styled: <Type extends import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements | import("react").ComponentType<any>, Composers_1 extends (string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> | {
+    styled: <Type extends import("react").ComponentType<any> | keyof JSX.IntrinsicElements | import("@stitches/react/types/util").Function, Composers_1 extends (string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function | {
         [name: string]: unknown;
     })[], CSS_2 = import("@stitches/react/types/css-util").CSS<{
         initial: "";
@@ -916,7 +917,7 @@ export declare function createStitches<Prefix extends string = "", Media extends
             gridColumn: string;
             "--grid-columns": number;
         };
-    }>>(type: Type, ...composers: { [K_2 in keyof Composers_1]: Composers_1[K_2] extends string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> ? Composers_1[K_2] : import("@stitches/react/types/stitches").RemoveIndex<CSS_2> & {
+    }>>(type: Type, ...composers: { [K_2 in keyof Composers_1]: Composers_1[K_2] extends string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function ? Composers_1[K_2] : import("@stitches/react/types/stitches").RemoveIndex<CSS_2> & {
         variants?: {
             [x: string]: {
                 [x: string]: CSS_2;

package/utils/updateEnvFile.d.ts

@@ -0,0 +1 @@
+export declare function updateEnvFile(data: Record<string, string | number>, directory?: string): Promise<void>;

package/utils/updateEnvFile.js

@@ -0,0 +1,76 @@
+"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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateEnvFile = void 0;
+var fs_1 = require("fs");
+var promises_1 = require("fs/promises");
+var path_1 = require("path");
+function updateEnvFile(data, directory) {
+    if (directory === void 0) { directory = process.cwd(); }
+    return __awaiter(this, void 0, void 0, function () {
+        var path, contents, lines, key;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    path = (0, path_1.join)(directory, ".env");
+                    if (!(0, fs_1.existsSync)(path)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, (0, promises_1.readFile)(path, "utf8")];
+                case 1:
+                    contents = (_a.sent()).toString();
+                    lines = contents.split(/\n/g);
+                    lines = lines.filter(function (line) {
+                        for (var key in data) {
+                            if (line.startsWith("".concat(key, "="))) {
+                                return false;
+                            }
+                        }
+                        return true;
+                    });
+                    for (key in data) {
+                        lines.push("".concat(key, "=").concat(data[key]));
+                    }
+                    return [4 /*yield*/, (0, promises_1.writeFile)(path, lines.join("\n"))];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.updateEnvFile = updateEnvFile;

package/dev-ui/components/BreakpointList.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-declare type Props = {
-    renderBreakpoint: (breakpoint: string, index: number) => ReactNode;
-};
-export declare function BreakpointList(props: Props): JSX.Element;
-export {};

package/dev-ui/components/BreakpointList.js

@@ -1,38 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BreakpointList = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore
-var _theme_1 = require("@theme");
-var theme_1 = require("../theme");
-function BreakpointList(props) {
-    var breakpoints = __spreadArray(["initial"], _theme_1.originalConfig.breakpoints, true);
-    return ((0, jsx_runtime_1.jsx)(Row, { children: breakpoints.map(function (breakpoint, index) {
-            return (0, jsx_runtime_1.jsx)(Cell, { children: props.renderBreakpoint(breakpoint, index) }, void 0);
-        }) }, void 0));
-}
-exports.BreakpointList = BreakpointList;
-var Row = (0, theme_1.styled)("div", {
-    display: "flex",
-});
-var Cell = (0, theme_1.styled)("div", {
-    flex: "1 1 auto",
-    width: "100px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderLeft: "1px solid $colors$bgHoverLight",
-    borderBottom: "1px solid $colors$bgHoverLight",
-    "&:hover": {
-    // backgroundColor: "$bgHoverLight",
-    },
-});

package/dev-ui/components/ResponsiveScaleHeader.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { BreakpointArray, ResponsiveAtomCalc } from "../../style";
-declare type Props = {
-    editableRange?: boolean;
-    editableValues?: boolean;
-    showBreakpointName?: boolean;
-    showValues?: boolean;
-    showRange?: boolean;
-    data: ResponsiveAtomCalc;
-    breakpoints: BreakpointArray;
-};
-export declare function ResponsiveScaleEditor(props: Props): JSX.Element;
-export declare const RESPONSIVE_COLUMN_WIDTH = "100px";
-export declare const RESPONSIVE_ROW_HEIGHT = "25px";
-export {};

package/dev-ui/components/ResponsiveScaleHeader.js

@@ -1,51 +0,0 @@
-"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.RESPONSIVE_ROW_HEIGHT = exports.RESPONSIVE_COLUMN_WIDTH = exports.ResponsiveScaleEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var theme_1 = require("../theme");
-var NumberField_1 = require("./atoms/NumberField");
-var ResponsiveLerpControl_1 = require("./ResponsiveLerpControl");
-var Text_1 = require("./atoms/Text");
-var ToggleButton_1 = require("./atoms/ToggleButton");
-function ResponsiveScaleEditor(props) {
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.data.length } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, { children: props.data.map(function (item, i) {
-                    return ((0, jsx_runtime_1.jsx)(Col, __assign({ css: { textAlign: "center" } }, { children: (0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { checked: item.defined, onChange: function (checked) { }, label: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ as: "span", variant: "monoBold" }, { children: item.breakpoint }), void 0) }, void 0) }), void 0));
-                }) }, void 0)), props.showRange && (0, jsx_runtime_1.jsx)(ResponsiveLerpControl_1.ResponsiveLerpControl, { data: props.data }, void 0), props.showValues && ((0, jsx_runtime_1.jsx)(Row, { children: props.data.map(function (item, i) {
-                    return ((0, jsx_runtime_1.jsx)(Col, { children: (0, jsx_runtime_1.jsx)(Start, { children: item.type === "px" ? (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { suffix: "px", value: item.value, onChange: function () { } }, void 0) : null }, void 0) }, void 0));
-                }) }, void 0))] }), void 0));
-}
-exports.ResponsiveScaleEditor = ResponsiveScaleEditor;
-exports.RESPONSIVE_COLUMN_WIDTH = "100px";
-exports.RESPONSIVE_ROW_HEIGHT = "25px";
-var Wrapper = (0, theme_1.styled)("div", {
-    position: "relative",
-    width: "calc(".concat(exports.RESPONSIVE_COLUMN_WIDTH, " * $$total)"),
-});
-var Row = (0, theme_1.styled)("div", {
-    display: "flex",
-});
-var Col = (0, theme_1.styled)("div", {
-    position: "relative",
-    width: exports.RESPONSIVE_COLUMN_WIDTH,
-    height: exports.RESPONSIVE_ROW_HEIGHT,
-    boxSizing: "border-box",
-    borderLeft: "1px solid $colors$bgHover",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-});
-var Start = (0, theme_1.styled)("div", {
-    position: "absolute",
-    left: 2,
-});