fullstacked 0.12.1-1330 → 0.12.1-1355

package/fullstacked_modules/auto_update/index.ts

@@ -0,0 +1,66 @@
+import git from "../git";
+import { Button } from "@fullstacked/ui";
+import { SnackBar } from "../components/snackbar";
+import packages from "../packages";
+import build from "../build";
+
+let lastUpdateCheck = 0;
+const updateCheckDelay = 1000 * 10; // 10sec;
+let updating = false;
+let disabled = false;
+
+export function disableAutoUpdate() {
+    disabled = true;
+}
+export function enableAutoUpdate() {
+    disabled = false;
+}
+
+async function checkForUpdates() {
+    window.requestAnimationFrame(checkForUpdates);
+
+    const now = Date.now();
+    if (disabled || now - lastUpdateCheck < updateCheckDelay || updating) {
+        return;
+    }
+
+    lastUpdateCheck = now;
+
+    if ((await git.pull()) !== git.PullResponse.DID_PULL) {
+        return;
+    }
+
+    let preventReload = false;
+    const preventReloadButton = Button({
+        text: "Stop"
+    });
+    preventReloadButton.onclick = () => {
+        preventReload = true;
+        snackbar.dismiss();
+    };
+
+    const snackbar = SnackBar({
+        message: "Project has updated. Rebuilding...",
+        button: preventReloadButton
+    });
+    console.log("ICICI2");
+
+    updating = true;
+    update().then(() => {
+        updating = false;
+        snackbar.dismiss();
+
+        if (preventReload) return;
+        window.location.reload();
+    });
+}
+if (await git.hasGit()) {
+    checkForUpdates();
+}
+
+async function update() {
+    console.log("ICICI1");
+    await packages.installQuick();
+    console.log("ICICI");
+    return build.buildProject();
+}

package/fullstacked_modules/bridge/index.ts

@@ -8,14 +8,7 @@ import { BridgeElectron } from "./platform/electron";
 import { BridgeNode, initCallbackNode } from "./platform/node";
 import { BridgeWasm } from "./platform/wasm";
 import { BridgeWindows, initRespondWindows } from "./platform/windows";
-import git from "../git";
-import esbuild from "../esbuild";
-import { SnackBar } from "../components/snackbar";
-import { Button } from "@fullstacked/ui";
 import { serializeArgs } from "./serialization";
-import { buildSASS } from "../esbuild/sass";
-import fs from "../fs";
-import packages from "../packages";
 
 export type Bridge = (
     payload: Uint8Array,
@@ -60,56 +53,6 @@ switch (platform) {
 console.log("FullStacked");
 bridge(new Uint8Array([0]));
 
-let lastUpdateCheck = 0;
-const updateCheckDelay = 1000 * 10; // 10sec;
-let updating = false;
-async function checkForUpdates() {
-    window.requestAnimationFrame(checkForUpdates);
-
-    const now = Date.now();
-    if (now - lastUpdateCheck < updateCheckDelay || updating) {
-        return;
-    }
-
-    lastUpdateCheck = now;
-
-    if ((await git.pull()) !== git.PullResponse.DID_PULL) {
-        return;
-    }
-
-    let preventReload = false;
-    const preventReloadButton = Button({
-        text: "Stop"
-    });
-    preventReloadButton.onclick = () => {
-        preventReload = true;
-        snackbar.dismiss();
-    };
-
-    const snackbar = SnackBar({
-        message: "Project has updated. Rebuilding...",
-        button: preventReloadButton
-    });
-
-    updating = true;
-    update().then(() => {
-        updating = false;
-        snackbar.dismiss();
-
-        if (preventReload) return;
-        window.location.reload();
-    });
-}
-if (await git.hasGit()) {
-    checkForUpdates();
-}
-
-async function update() {
-    await packages.installQuick();
-    await buildSASS(fs);
-    return esbuild.build();
-}
-
 // 40
 function setTitle(title: string) {
     const payload = new Uint8Array([40, ...serializeArgs([title])]);
@@ -125,3 +68,5 @@ setInterval(() => {
     }
     lastTitleSeen = document.title;
 }, 500);
+
+import("../auto_update");

package/fullstacked_modules/{esbuild/esbuild.ts → build/build.ts}

@@ -1,47 +1,48 @@
 import { Project } from "../../editor/types";
-import { toByteArray } from "../base64";
 import { bridge } from "../bridge";
 import {
-    deserializeArgs,
     getLowestKeyIdAvailable,
     serializeArgs
 } from "../bridge/serialization";
 import type { Message } from "esbuild";
 import core_message from "../core_message";
+import { buildSASS } from "./sass";
+import fs from "../fs";
 
-// 55
-export function version(): Promise<string> {
-    const payload = new Uint8Array([55]);
-    return bridge(payload, ([str]) => str);
-}
+core_message.addListener("build-style", async (messageStr) => {
+    console.log(messageStr)
+    const { id, entryPoint, projectId } = JSON.parse(messageStr);
+    const result = await buildSASS(entryPoint, {
+        canonicalize: (filePath) => new URL(filePath, "file://"),
+        load: (url) => fs.readFile(projectId + url.pathname, { encoding: "utf8" })
+    })
+    bridge(new Uint8Array([58, ...serializeArgs([id, JSON.stringify(result)])]))
+});
 
-let addedListener = false;
 const activeBuilds = new Map<
     number,
     { project: Project; resolve: (buildErrors: Message[]) => void }
 >();
 
 function buildResponse(buildResult: string) {
-    const responseData = toByteArray(buildResult);
-    const [id, errorsStr] = deserializeArgs(responseData);
+    const { id, errors } = JSON.parse(buildResult);
     const activeBuild = activeBuilds.get(id);
 
-    if (!errorsStr) {
+    if (!errors) {
         activeBuild.resolve([]);
     } else {
-        const errors = JSON.parse(errorsStr);
-        const messages = errors?.map(uncapitalizeKeys).map((error) => ({
+        const messages = errors.map(uncapitalizeKeys).map((error) => ({
             ...error,
             location: error.location
                 ? {
-                      ...error.location,
-                      file: error.location.file.includes(activeBuild.project.id)
-                          ? activeBuild.project.id +
-                            error.location.file
-                                .split(activeBuild.project.id)
-                                .pop()
-                          : error.location.file
-                  }
+                    ...error.location,
+                    file: error.location.file.includes(activeBuild.project.id)
+                        ? activeBuild.project.id +
+                        error.location.file
+                            .split(activeBuild.project.id)
+                            .pop()
+                        : error.location.file
+                }
                 : null
         }));
         activeBuild.resolve(messages);
@@ -49,21 +50,23 @@ function buildResponse(buildResult: string) {
 
     activeBuilds.delete(id);
 }
+core_message.addListener("build", buildResponse);
 
-// 56
-export function build(project?: Project): Promise<Message[]> {
-    if (!addedListener) {
-        core_message.addListener("build", buildResponse);
-        addedListener = true;
-    }
+// 55
+export function esbuildVersion(): Promise<string> {
+    const payload = new Uint8Array([55]);
+    return bridge(payload, ([str]) => str);
+}
 
+// 56
+export function buildProject(project?: Project): Promise<Message[]> {
     const args: any[] = project ? [project.id] : [];
 
     const buildId = getLowestKeyIdAvailable(activeBuilds);
     args.push(buildId);
 
     const payload = new Uint8Array([56, ...serializeArgs(args)]);
-
+    
     return new Promise((resolve) => {
         activeBuilds.set(buildId, {
             project,

package/fullstacked_modules/build/index.ts

@@ -0,0 +1,3 @@
+import * as build from "./build";
+export default build;
+export * from "./build";

package/fullstacked_modules/build/sass.ts

@@ -0,0 +1,55 @@
+import * as sass from "sass";
+
+export async function buildSASS(
+    entryPoint: string,
+    opts: {
+        canonicalize: (filePath: string) => URL | Promise<URL>;
+        load: (url: URL) => string | Promise<string>;
+    }
+) {
+    try {
+        const { css } = await sass.compileStringAsync(await opts.load(await opts.canonicalize(entryPoint)), {
+            syntax: entryPoint.endsWith(".sass")
+                        ? "indented"
+                        : entryPoint.endsWith(".scss")
+                            ? "scss"
+                            : "css",
+            importer: {
+                load: async (url) => ({
+                    syntax: url.pathname.endsWith(".sass")
+                        ? "indented"
+                        : url.pathname.endsWith(".scss")
+                            ? "scss"
+                            : "css",
+                    contents: await opts.load(url)
+                }),
+                canonicalize: opts.canonicalize
+            }
+        });
+        return {
+            css,
+            errors: []
+        };
+    } catch (e) {
+        console.log(e);
+        const File = e.span.url?.pathname;
+        const Line = e.span.start.line + 1;
+        const Column = e.span.start.column;
+        const Length = e.span.text.length;
+        return {
+            css: "",
+            errors: [
+                {
+                    Location: {
+                        File,
+                        Line,
+                        Column,
+                        Length,
+                        Namespace: "SASS"
+                    },
+                    Text: e.message
+                }
+            ]
+        };
+    }
+}

package/fullstacked_modules/components/snackbar.css

@@ -1 +1,54 @@
-.snack-bars-container{display:flex;flex-direction:column;gap:10px;position:fixed;bottom:0;left:0;z-index:100;padding:0 20px 20px;align-items:flex-start;width:100%;pointer-events:none;text-align:left;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-size:16px;max-width:450px}@media(max-width: 450px){.snack-bars-container{align-items:center}}.snack-bars-container .snack-bar{pointer-events:all;background-color:#404958;border-radius:5px;color:#fff;min-height:42px;max-width:100%;width:max-content;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 10px;box-shadow:0px 4px 10px rgba(21,23,27,.6)}.snack-bars-container .snack-bar>div:first-child{padding:5px 0;width:100%;overflow-wrap:break-word}
+/* 
+This file must follow the figma defined spacing components
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=6-49
+*/
+/* 
+This file must follow the figma local color styles
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
+*/
+/* 
+This file must follow the figma local text styles
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
+*/
+.snack-bars-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  padding: 0 20px 20px;
+  align-items: flex-start;
+  width: 100%;
+  pointer-events: none;
+  text-align: left;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  max-width: 450px;
+}
+@media (max-width: 450px) {
+  .snack-bars-container {
+    align-items: center;
+  }
+}
+.snack-bars-container .snack-bar {
+  pointer-events: all;
+  background-color: #404958;
+  border-radius: 5px;
+  color: #ffffff;
+  min-height: 42px;
+  max-width: 100%;
+  width: max-content;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 5px 10px;
+  box-shadow: 0px 4px 10px rgba(21, 23, 27, 0.6);
+}
+.snack-bars-container .snack-bar > div:first-child {
+  padding: 5px 0;
+  width: 100%;
+  overflow-wrap: break-word;
+}

package/fullstacked_modules/components/snackbar.scss

@@ -0,0 +1,52 @@
+@use "../../node_modules/@fullstacked/ui/values/spacing.scss";
+@use "../../node_modules/@fullstacked/ui/values/colors.scss";
+@use "../../node_modules/@fullstacked/ui/values/typography.scss";
+
+.snack-bars-container {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$small;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    padding: 0 spacing.$medium spacing.$medium;
+    align-items: flex-start;
+    width: 100%;
+    pointer-events: none;
+    text-align: left;
+    font-family: typography.$fonts;
+    font-size: typography.$medium;
+
+    max-width: 450px;
+    @media (max-width: 450px) {
+        align-items: center;
+    }
+
+    .snack-bar {
+        pointer-events: all;
+
+        background-color: colors.$gray-dark;
+        border-radius: spacing.$x-small;
+        color: colors.$light;
+
+        min-height: 42px;
+        max-width: 100%;
+        width: max-content;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: spacing.$small;
+
+        padding: spacing.$x-small spacing.$small;
+
+        box-shadow: 0px 4px 10px colors.opacity(colors.$dark, 60);
+
+        > div:first-child {
+            padding: spacing.$x-small 0;
+            width: 100%;
+            overflow-wrap: break-word;
+        }
+    }
+}