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

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";
@@ -17,7 +18,7 @@ declare type TypographyConfig<Theme extends ConfigType.Theme<{}>, Media extends
         lineHeight?: ResponsiveValue<Media, Theme["lineHeights"] extends {} ? `$${Extract<keyof Theme["lineHeights"], string>}` | CSS["lineHeight"] : CSS["lineHeight"]>;
     };
 };
-declare type BreakpointArray = {
+export declare type BreakpointArray = {
     key: string;
     min: string | null;
     max: string | null;
@@ -46,6 +47,9 @@ declare type ResponsiveAtom = {
 } & ({
     type: "multiplier";
     value: number;
+} | {
+    type: "percent";
+    value: number;
 } | {
     type: "px";
     value: number;
@@ -58,10 +62,11 @@ declare type ResponsiveAtom = {
 } | {
     type: "undefined";
 });
-declare type ResponsiveAtomCalc = (ResponsiveAtom & {
+export declare type ResponsiveAtomCalc = ResponsiveAtom & {
     defined: boolean;
     breakpoint: string;
     baseBreakpoint: string;
+    lastBreakpoint: string;
     lerping?: {
         fromBP: string | null;
         toBP: string | null;
@@ -71,9 +76,13 @@ declare type ResponsiveAtomCalc = (ResponsiveAtom & {
         maxValue: number;
     };
     concreteValue: number | null;
-})[];
-export declare function parseResponsiveObject(breakpoints: ReturnType<typeof parseBreakpoints>, object: any): ResponsiveAtomCalc;
-export declare function getResponsiveObjectStyles(theme: any, breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, scale?: string, unit?: string): any[];
+};
+export declare function parseResponsiveObject(breakpoints: ReturnType<typeof parseBreakpoints>, object: any): ResponsiveAtomCalc[];
+export declare function getResponsiveObjectStyles(breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, unit?: string): any[];
+export declare function parseResponsiveTokens(theme: any, breakpoints: any): {
+    initialResponsive: any;
+    globalResponsive: any;
+};
 export declare function createStitches<Prefix extends string = "", Media extends {} = {}, Breakpoints extends (keyof Media)[] = [], Theme extends {} = {}, Responsive extends {} = {}, ThemeMap extends {} = DefaultThemeMap, Utils extends {} = {}, Typography extends {} = {}>(config: {
     breakpoints: Breakpoints;
     prefix?: ConfigType.Prefix<Prefix>;

package/style/createStitches.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStitches = exports.getResponsiveObjectStyles = exports.parseResponsiveObject = exports.parseBreakpoints = void 0;
+exports.createStitches = exports.parseResponsiveTokens = exports.getResponsiveObjectStyles = exports.parseResponsiveObject = exports.parseBreakpoints = void 0;
 var react_1 = require("@stitches/react");
 var typeKeyMap = {
     fontSize: "fontSizes",
@@ -146,11 +146,6 @@ function parseGrid(theme, media, grid) {
             "--grid-margin": breakpoint.margin,
             "--grid-col-width": "calc((var(--grid-inner-width) - (".concat(grid.columns - 1, " * var(--grid-gutter))) / ").concat(grid.columns, ")"),
         };
-        // for (let i = 1; i < grid.columns; i++) {
-        //   globalGrid[bpName][
-        //     `--grid-${i}-cols`
-        //   ] = `calc(var(--grid-col-width) * ${i} + var(--grid-gutter) * ${i - 1})`
-        // }
     }
     return { gridVariants: {}, globalGrid: globalGrid };
 }
@@ -166,6 +161,13 @@ function parseResponsiveValue(val) {
                 value: parseFloat(val.replace(/^x/, "")),
             };
         }
+        else if (val.match(/^[0-9\.]+%$/)) {
+            return {
+                lerpStart: false,
+                type: "percent",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
+        }
         else if (val.match(/^[0-9\.]+px$/)) {
             return {
                 lerpStart: false,
@@ -219,7 +221,10 @@ function parseResponsiveObject(breakpoints, object) {
         else if (value.type === "multiplier") {
             concreteValues[bp.key] = value.value * concreteValues[base];
         }
-        result.push(__assign(__assign({}, value), { defined: defined, breakpoint: bp.key, baseBreakpoint: base, lerping: lerpStart
+        else if (value.type === "percent") {
+            concreteValues[bp.key] = value.value;
+        }
+        result.push(__assign(__assign({}, value), { defined: defined, breakpoint: bp.key, lastBreakpoint: lastDefined, baseBreakpoint: base, lerping: lerpStart
                 ? {
                     fromBP: lerpStart,
                     toBP: null,
@@ -242,7 +247,6 @@ function parseResponsiveObject(breakpoints, object) {
             lastBreakpoint = bp.key;
         }
     }
-    console.log("Next BPs", nextBreakpoints);
     result.forEach(function (item, i) {
         if (item.lerping) {
             item.lerping.toBP = nextBreakpoints[i];
@@ -268,14 +272,13 @@ function parseResponsiveObject(breakpoints, object) {
     return result;
 }
 exports.parseResponsiveObject = parseResponsiveObject;
-function getResponsiveObjectStyles(theme, breakpoints, object, varName, scale, unit) {
+function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
     var _a, _b;
     var _c;
     if (unit === void 0) { unit = "px"; }
     // Prescale object
     object = __assign({}, object);
     var parsed = parseResponsiveObject(breakpoints, object);
-    // console.log("Result", object, parsed)
     var globals = {};
     for (var _i = 0, parsed_1 = parsed; _i < parsed_1.length; _i++) {
         var atom = parsed_1[_i];
@@ -291,44 +294,6 @@ function getResponsiveObjectStyles(theme, breakpoints, object, varName, scale, u
                 _b);
         }
     }
-    // console.log("globals", globals)
-    // Util for grabbing the raw value of a token, for lerping
-    // const resolveValue = (value: any) => {
-    //   if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/) && scale) {
-    //     // Single scale
-    //     return theme[scale][value.replace("$", "")]
-    //   } else if (typeof value === "number") {
-    //     return value + "px"
-    //   } else {
-    //     return value
-    //   }
-    // }
-    // const globals2: any = {}
-    // const initial: any = {}
-    // const entries = Object.entries(object)
-    // entries.forEach(([bpName, responsiveValue], i) => {
-    //   globals2[bpName] = {}
-    //   if (Array.isArray(responsiveValue)) {
-    //     responsiveValue = responsiveValue[0]
-    //     // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
-    //     const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
-    //     const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
-    //     if (!nextBreakpoint)
-    //       throw new Error(
-    //         `Cannot create responsive '${varName}' at breakpoint '${bpName}', since it is the last-defined breakpoint. Your last size should be a string/number/token.`
-    //       )
-    //     const maxSize = nextBreakpoint.min
-    //     let responsiveValue2 = (object as any)["@" + nextBreakpoint.key]
-    //     if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
-    //     let size1 = resolveValue(responsiveValue)
-    //     let size2 = resolveValue(responsiveValue2)
-    //     responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
-    //       minSize
-    //     )}) * (${unitless(size2)} - ${unitless(size1)}))`
-    //   }
-    //   globals2[bpName][varName] = responsiveValue
-    // })
-    // console.log(globals, globals2)
     return [globals, (_c = globals["@initial"]) === null || _c === void 0 ? void 0 : _c[varName]];
 }
 exports.getResponsiveObjectStyles = getResponsiveObjectStyles;
@@ -344,8 +309,7 @@ function parseResponsiveTokens(theme, breakpoints) {
         for (var key in theme[scale]) {
             var val = theme[scale][key];
             if (val && typeof val === "object") {
-                var _a = getResponsiveObjectStyles(theme, breakpoints, val, "--" + scale + "-" + key, scale), tokenGlobals = _a[0], initial = _a[1];
-                console.log("TOKEN", tokenGlobals, initial);
+                var _a = getResponsiveObjectStyles(breakpoints, val, "--" + scale + "-" + key), tokenGlobals = _a[0], initial = _a[1];
                 for (var bp in tokenGlobals) {
                     globalResponsive[bp] = __assign(__assign({}, globalResponsive[bp]), tokenGlobals[bp]);
                 }
@@ -358,9 +322,9 @@ function parseResponsiveTokens(theme, breakpoints) {
     }
     return { initialResponsive: initialResponsive, globalResponsive: globalResponsive };
 }
+exports.parseResponsiveTokens = parseResponsiveTokens;
 function createStitches(config) {
     var breakpoints = parseBreakpoints(config.breakpoints, config.media);
-    console.log("PARSED BREAKPOINTS", breakpoints);
     var _a = parseTypography(config.theme, breakpoints, config.typography), typeVariants = _a.typeVariants, globalTypography = _a.globalTypography;
     var _b = parseGrid(config.theme, config.media, config.grid), gridVariants = _b.gridVariants, globalGrid = _b.globalGrid;
     var _c = parseResponsiveTokens(config.responsive, breakpoints), initialResponsive = _c.initialResponsive, globalResponsive = _c.globalResponsive;

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/build/workers/serverless-worker-script.js

@@ -1 +0,0 @@
-"use strict";

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/Pill.js

@@ -1 +0,0 @@
-"use strict";

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

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

package/dev-ui/components/SpacingEditor.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpacingEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var _theme_1 = require("@theme");
-function SpacingEditor() {
-    console.log("CONFIG", _theme_1.config);
-    return (0, jsx_runtime_1.jsx)("div", { children: "Spacing" }, void 0);
-}
-exports.SpacingEditor = SpacingEditor;

package/dev-ui/components/Text.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-var theme_1 = require("../theme");
-exports.Text = (0, theme_1.styled)("div", {
-    variants: {
-        variant: {
-            h1: {
-                fontSize: "$xl",
-            }
-        },
-    },
-});