fullstacked 0.12.2-1382 → 0.12.2-1407

package/fullstacked_modules/@types/connect/index.d.ts

@@ -12,17 +12,17 @@ declare module "connect" {
         on(callback: DataChannelRawCallback): void;
         off(callback: DataChannelRawCallback): void;
     };
-    export default function connect(
+    export declare function connect(
         name: string,
         port: number,
         host?: string,
         raw?: false,
     ): Promise<DataChannel>;
-    export default function connect(
+    export declare function connect(
         name: string,
         port: number,
         host: string,
         raw: true,
     ): Promise<DataChannelRaw>;
-    export {};
+    export default connect;
 }

package/fullstacked_modules/@types/style/index.d.ts

@@ -0,0 +1,54 @@
+declare module "style" {
+    import CSS from "csstype";
+    export declare const propertiesDefaultingToPx: {
+        readonly padding: true;
+        readonly paddingTop: true;
+        readonly paddingRight: true;
+        readonly paddingBottom: true;
+        readonly paddingLeft: true;
+        readonly margin: true;
+        readonly marginTop: true;
+        readonly marginRight: true;
+        readonly marginBottom: true;
+        readonly marginLeft: true;
+        readonly width: true;
+        readonly minWidth: true;
+        readonly maxWidth: true;
+        readonly height: true;
+        readonly minHeight: true;
+        readonly maxHeight: true;
+        readonly top: true;
+        readonly right: true;
+        readonly bottom: true;
+        readonly left: true;
+        readonly gap: true;
+        readonly fontSize: true;
+        readonly borderRadius: true;
+        readonly borderTopLeftRadius: true;
+        readonly borderTopRightRadius: true;
+        readonly borderBottomLeftRadius: true;
+        readonly borderBottomRightRadius: true;
+        readonly outlineOffset: true;
+    };
+    export type CSSProperties =
+        | {
+              [property in keyof CSS.Properties]: property extends keyof typeof propertiesDefaultingToPx
+                  ? number | CSS.Properties[property]
+                  : CSS.Properties[property];
+          }
+        | {
+              [child: string]: CSSProperties;
+          };
+    export declare const createClass: (
+        name: string,
+        cssProperties: CSSProperties,
+    ) => string;
+    export declare const createGlobalStyle: (
+        cssProperties: CSSProperties,
+    ) => void;
+    declare const style: {
+        createClass: (name: string, cssProperties: CSSProperties) => string;
+        createGlobalStyle: (cssProperties: CSSProperties) => void;
+    };
+    export default style;
+}

package/fullstacked_modules/auto_update.ts

@@ -26,7 +26,8 @@ async function checkForUpdates() {
 
     lastUpdateCheck = now;
 
-    if ((await git.pull()) !== git.PullResponse.DID_PULL) {
+    const pullResponse = await git.pull();
+    if (pullResponse !== git.PullResponse.DID_PULL) {
         return;
     }
 

package/fullstacked_modules/build/index.ts

@@ -9,14 +9,32 @@ import core_message from "../core_message";
 import { buildSASS } from "./sass";
 import fs from "../fs";
 
+async function buildStyle(projectId: string, entrypoint: string) {
+    const modulePath = projectId ? `/${projectId}/${entrypoint}` : entrypoint;
+    const contents = await fs.readFile(modulePath);
+    const urlObj = URL.createObjectURL(
+        new Blob([contents as Uint8Array<ArrayBuffer>], {
+            type: "text/javascript"
+        })
+    );
+    const css = (await import(urlObj)).exportStyles();
+    URL.revokeObjectURL(urlObj);
+    return {
+        css,
+        errors: []
+    };
+}
+
 core_message.addListener("build-style", async (messageStr) => {
     const { id, entryPoint, projectId } = JSON.parse(messageStr);
-    const result = await buildSASS(entryPoint, {
-        projectId,
-        canonicalize: (filePath) => new URL(filePath, "file://"),
-        load: (url) =>
-            fs.readFile(projectId + url.pathname, { encoding: "utf8" })
-    });
+    const result = entryPoint.endsWith(".js")
+        ? await buildStyle(projectId, entryPoint)
+        : await buildSASS(entryPoint, {
+              projectId,
+              canonicalize: (filePath) => new URL(filePath, "file://"),
+              load: (url) =>
+                  fs.readFile(projectId + url.pathname, { encoding: "utf8" })
+          });
     bridge(
         new Uint8Array([58, ...serializeArgs([id, JSON.stringify(result)])])
     );

package/fullstacked_modules/components/snackbar.s.ts

@@ -0,0 +1,96 @@
+import style from "style";
+
+const spacing = {
+    xs: 5,
+    s: 10,
+    m: 20,
+    l: 30
+};
+
+const colors = {
+    blue: {
+        main: "#007aff",
+        accent: "#04b8ec",
+        dark: "#1e293b"
+    },
+    dark: "#15171b",
+    red: "#ff453a",
+    green: "#30d158",
+    yellow: "#ffcc00",
+    light: "#ffffff",
+    gray: {
+        main: "#8c929b",
+        dark: "#404958"
+    },
+    overlay: "#15171b99"
+};
+
+function opacity(color: string, opacity: number) {
+    return `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5), 16)}, ${opacity / 100})`;
+}
+
+const typography = {
+    h1: 36,
+    h2: 30,
+    h3: 24,
+    m: 16,
+    s: 12,
+    xs: 9
+};
+
+const fontFamily =
+    'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
+
+export const snackBarClass = "snack-bar";
+
+export const snackBarsContainerClass = style.createClass(
+    "snack-bars-container",
+    {
+        display: "flex",
+        flexDirection: "column",
+        gap: spacing.s,
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        zIndex: 100,
+        padding: `0 ${spacing.m} ${spacing.m}`,
+        alignItems: "flex-start",
+        width: "100%",
+        pointerEvents: "none",
+        textAlign: "left",
+        fontFamily,
+        fontSize: typography.m,
+        maxWidth: 450,
+
+        [`@media (max-width: 450px)`]: {
+            alignItems: "center"
+        },
+
+        [`.${snackBarClass}`]: {
+            pointerEvents: "all",
+
+            backgroundColor: colors.gray.dark,
+            borderRadius: spacing.xs,
+            color: colors.light,
+
+            minHeight: 42,
+            maxWidth: "100%",
+            width: "max-content",
+
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: spacing.s,
+
+            padding: `${spacing.xs} ${spacing.s}`,
+
+            boxShadow: `0px 4px 10px ${opacity(colors.dark, 60)}`,
+
+            ["> div:first-child"]: {
+                padding: `${spacing.xs} 0`,
+                width: "100%",
+                overflowWrap: "break-word"
+            }
+        }
+    }
+);

package/fullstacked_modules/components/snackbar.ts

@@ -4,6 +4,7 @@ https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=415-3655
 */
 
 import type { Button } from "@fullstacked/ui";
+import { snackBarClass, snackBarsContainerClass } from "./snackbar.s";
 
 type SnackBarOpt = {
     message: string;
@@ -16,12 +17,12 @@ let snackBarsContainer: HTMLDivElement;
 export function SnackBar(opts: SnackBarOpt) {
     if (!snackBarsContainer) {
         snackBarsContainer = document.createElement("div");
-        snackBarsContainer.classList.add("snack-bars-container");
+        snackBarsContainer.classList.add(snackBarsContainerClass);
         document.body.append(snackBarsContainer);
     }
 
     const container = document.createElement("div");
-    container.classList.add("snack-bar");
+    container.classList.add(snackBarClass);
 
     const text = document.createElement("div");
     text.innerHTML = opts.message;

package/fullstacked_modules/connect.ts

@@ -38,19 +38,19 @@ type ChannelRaw = {
 const channels = new Map<string, Channel | ChannelRaw>();
 
 // 20
-export default function connect(
+export function connect(
     name: string,
     port: number,
     host?: string,
     raw?: false
 ): Promise<DataChannel>;
-export default function connect(
+export function connect(
     name: string,
     port: number,
     host: string,
     raw: true
 ): Promise<DataChannelRaw>;
-export default function connect(
+export function connect(
     name: string,
     port: number,
     host = "localhost",
@@ -123,3 +123,5 @@ function send(channelId: string, data: Uint8Array) {
 
     return bridge(payload);
 }
+
+export default connect;

package/fullstacked_modules/git.ts

@@ -5,17 +5,22 @@ import { Project } from "./../editor/types";
 
 const pullPromises = new Map<
     string,
-    ((pullResponse: PullResponse) => void)[]
+    {
+        resolve: (p: PullResponse) => void;
+        reject: (p: PullResponse) => void;
+    }[]
 >();
 let addedListener = false;
 function setListenerOnce() {
     if (addedListener) return;
 
     core_message.addListener("git-pull", (message) => {
-        const { url, data, finished } = JSON.parse(message);
+        const { url, data, error, finished } = JSON.parse(message);
         if (!finished) return;
         const promises = pullPromises.get(url);
-        promises?.forEach((resolve) => resolve(data));
+        promises?.forEach(({ resolve, reject }) =>
+            error ? reject(data) : resolve(data)
+        );
         pullPromises.delete(url);
     });
     addedListener = true;
@@ -109,8 +114,8 @@ export async function pull(project?: Project): Promise<PullResponse> {
         pullPromises.set(url, p);
     }
 
-    return new Promise((resolve) => {
-        p.push(resolve);
+    return new Promise((resolve, reject) => {
+        p.push({ resolve, reject });
         bridge(payload);
     });
 }