@symbo.ls/brender 3.4.11 → 3.5.1

package/dist/cjs/render.js

@@ -39,6 +39,61 @@ var import_metadata = require("./metadata.js");
 var import_hydrate = require("./hydrate.js");
 var import_linkedom = require("linkedom");
 const import_meta = {};
+const UIKIT_STUBS = {
+  Box: {},
+  Focusable: {},
+  Block: { display: "block" },
+  Inline: { display: "inline" },
+  Flex: { display: "flex" },
+  InlineFlex: { display: "inline-flex" },
+  Grid: { display: "grid" },
+  InlineGrid: { display: "inline-grid" },
+  Link: {
+    tag: "a",
+    attr: {
+      href: (el) => el.props?.href,
+      target: (el) => el.props?.target,
+      rel: (el) => el.props?.rel
+    }
+  },
+  A: { extends: "Link" },
+  RouteLink: { extends: "Link" },
+  Img: {
+    tag: "img",
+    attr: {
+      src: (el) => {
+        let src = el.props?.src;
+        if (typeof src === "string" && src.includes("{{")) {
+          src = el.call("replaceLiteralsWithObjectFields", src, el.state);
+        }
+        return src;
+      },
+      alt: (el) => el.props?.alt,
+      loading: (el) => el.props?.loading
+    }
+  },
+  Image: { extends: "Img" },
+  Button: { tag: "button" },
+  FocusableComponent: { tag: "button" },
+  Form: { tag: "form" },
+  Input: { tag: "input" },
+  TextArea: { tag: "textarea" },
+  Textarea: { tag: "textarea" },
+  Select: { tag: "select" },
+  Label: { tag: "label" },
+  Iframe: { tag: "iframe" },
+  Video: { tag: "video" },
+  Audio: { tag: "audio" },
+  Canvas: { tag: "canvas" },
+  Span: { tag: "span" },
+  P: { tag: "p" },
+  H1: { tag: "h1" },
+  H2: { tag: "h2" },
+  H3: { tag: "h3" },
+  H4: { tag: "h4" },
+  H5: { tag: "h5" },
+  H6: { tag: "h6" }
+};
 const render = async (data, options = {}) => {
   const { route = "/", state: stateOverrides, context: contextOverrides } = options;
   const { window, document } = (0, import_env.createEnv)();
@@ -78,12 +133,23 @@ const renderElement = async (elementDef, options = {}) => {
   const { window, document } = (0, import_env.createEnv)();
   const body = document.body;
   const { create } = await import("@domql/element");
+  const domqlUtils = await import("@domql/utils");
+  const components = { ...UIKIT_STUBS, ...context.components || {} };
+  const utils = {
+    ...domqlUtils,
+    ...context.utils || {},
+    ...context.functions || {}
+  };
   (0, import_keys.resetKeys)();
-  const element = create(elementDef, { node: body }, "root", {
-    context: { document, window, ...context }
-  });
+  let element;
+  try {
+    element = create(elementDef, { node: body }, "root", {
+      context: { document, window, ...context, components, utils }
+    });
+  } catch (err) {
+  }
   (0, import_keys.assignKeys)(body);
-  const registry = (0, import_keys.mapKeysToElements)(element);
+  const registry = element ? (0, import_keys.mapKeysToElements)(element) : {};
   const html = body.innerHTML;
   return { html, registry, element };
 };
@@ -148,6 +214,138 @@ ${result.html}
 </html>`;
   return { html, route, brKeyCount: result.brKeyCount };
 };
+const LETTER_TO_INDEX = {
+  U: -6,
+  V: -5,
+  W: -4,
+  X: -3,
+  Y: -2,
+  Z: -1,
+  A: 0,
+  B: 1,
+  C: 2,
+  D: 3,
+  E: 4,
+  F: 5,
+  G: 6,
+  H: 7,
+  I: 8,
+  J: 9,
+  K: 10,
+  L: 11,
+  M: 12,
+  N: 13,
+  O: 14,
+  P: 15
+};
+const SPACING_PROPS = /* @__PURE__ */ new Set([
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingBlock",
+  "paddingInline",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginBlock",
+  "marginInline",
+  "marginBlockStart",
+  "marginBlockEnd",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "flexBasis",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "borderWidth",
+  "borderRadius",
+  "outlineWidth",
+  "outlineOffset",
+  "inset",
+  "insetBlock",
+  "insetInline",
+  "boxSize",
+  "round"
+]);
+const resolveSpacingToken = (token, spacingConfig) => {
+  if (!token || typeof token !== "string") return null;
+  if (!spacingConfig) return null;
+  const base = spacingConfig.base || 16;
+  const ratio = spacingConfig.ratio || 1.618;
+  const unit = spacingConfig.unit || "px";
+  const hasSubSequence = spacingConfig.subSequence !== false;
+  if (token.includes(" ")) {
+    const parts = token.split(" ").map((part) => {
+      if (part === "-" || part === "") return part;
+      return resolveSpacingToken(part, spacingConfig) || part;
+    });
+    return parts.join(" ");
+  }
+  if (/^(none|auto|inherit|initial|unset|0)$/i.test(token)) return null;
+  if (/\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|fr|s|ms)$/i.test(token)) return null;
+  if (/^(#|rgb|hsl|var\()/i.test(token)) return null;
+  const isNegative = token.startsWith("-");
+  const abs = isNegative ? token.slice(1) : token;
+  const m = abs.match(/^([A-Z])(\d)?$/i);
+  if (!m) return null;
+  const letter = m[1].toUpperCase();
+  const subStep = m[2] ? parseInt(m[2]) : 0;
+  const idx = LETTER_TO_INDEX[letter];
+  if (idx === void 0) return null;
+  let value = base * Math.pow(ratio, idx);
+  if (subStep > 0 && hasSubSequence) {
+    const next = base * Math.pow(ratio, idx + 1);
+    const diff = next - value;
+    const subRatio = diff / ratio;
+    const first = next - subRatio;
+    const second = value + subRatio;
+    const middle = (first + second) / 2;
+    const subs = ~~next - ~~value > 16 ? [first, middle, second] : [first, second];
+    if (subStep <= subs.length) {
+      value = subs[subStep - 1];
+    }
+  }
+  const rounded = Math.round(value * 100) / 100;
+  const sign = isNegative ? "-" : "";
+  return `${sign}${rounded}${unit}`;
+};
+const SPACING_PROPS_KEBAB = new Set(
+  [...SPACING_PROPS].map((k) => k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()))
+);
+const resolveDSValue = (key, val, ds) => {
+  if (typeof val !== "string") return val;
+  if (CSS_COLOR_PROPS.has(key)) {
+    const colorMap = ds?.color || {};
+    if (colorMap[val]) return colorMap[val];
+  }
+  if (SPACING_PROPS.has(key) || SPACING_PROPS_KEBAB.has(key)) {
+    const spacing = ds?.spacing || {};
+    const resolved = resolveSpacingToken(val, spacing);
+    if (resolved) return resolved;
+  }
+  return val;
+};
 const CSS_COLOR_PROPS = /* @__PURE__ */ new Set([
   "color",
   "background",
@@ -187,41 +385,96 @@ const NON_CSS_PROPS = /* @__PURE__ */ new Set([
   "autofocus",
   "theme",
   "__element",
-  "update"
+  "update",
+  "childrenAs",
+  "childExtends",
+  "childProps",
+  "children"
 ]);
 const camelToKebab = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
 const resolveShorthand = (key, val) => {
-  if (key === "flexAlign" && typeof val === "string") {
+  if (typeof val === "undefined" || val === null) return null;
+  if (key === "flow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", "flex-flow": (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "wrap") {
+    return { display: "flex", "flex-wrap": val };
+  }
+  if ((key === "align" || key === "flexAlign") && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
-    return { display: "flex", "align-items": alignItems, "justify-content": justifyContent };
+    const result = { display: "flex", "align-items": alignItems };
+    if (justifyContent) result["justify-content"] = justifyContent;
+    return result;
   }
   if (key === "gridAlign" && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
-    return { display: "grid", "align-items": alignItems, "justify-content": justifyContent };
+    const result = { display: "grid", "align-items": alignItems };
+    if (justifyContent) result["justify-content"] = justifyContent;
+    return result;
   }
-  if (key === "round" && val) {
+  if (key === "flexFlow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", "flex-flow": (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "flexWrap") {
+    return { display: "flex", "flex-wrap": val };
+  }
+  if (key === "backgroundImage" && typeof val === "string" && !val.startsWith("url(") && !val.startsWith("linear-gradient") && !val.startsWith("radial-gradient") && !val.startsWith("none")) {
+    return { "background-image": `url(${val})` };
+  }
+  if (key === "round" || key === "borderRadius" && val) {
     return { "border-radius": typeof val === "number" ? val + "px" : val };
   }
-  if (key === "boxSize" && val) {
-    return { width: val, height: val };
+  if (key === "boxSize" && typeof val === "string") {
+    const [height, width] = val.split(" ");
+    return { height, width: width || height };
+  }
+  if (key === "widthRange" && typeof val === "string") {
+    const [minWidth, maxWidth] = val.split(" ");
+    return { "min-width": minWidth, "max-width": maxWidth || minWidth };
   }
+  if (key === "heightRange" && typeof val === "string") {
+    const [minHeight, maxHeight] = val.split(" ");
+    return { "min-height": minHeight, "max-height": maxHeight || minHeight };
+  }
+  if (key === "column") return { "grid-column": val };
+  if (key === "columns") return { "grid-template-columns": val };
+  if (key === "templateColumns") return { "grid-template-columns": val };
+  if (key === "row") return { "grid-row": val };
+  if (key === "rows") return { "grid-template-rows": val };
+  if (key === "templateRows") return { "grid-template-rows": val };
+  if (key === "area") return { "grid-area": val };
+  if (key === "template") return { "grid-template": val };
+  if (key === "templateAreas") return { "grid-template-areas": val };
+  if (key === "autoColumns") return { "grid-auto-columns": val };
+  if (key === "autoRows") return { "grid-auto-rows": val };
+  if (key === "autoFlow") return { "grid-auto-flow": val };
+  if (key === "columnStart") return { "grid-column-start": val };
+  if (key === "rowStart") return { "grid-row-start": val };
   return null;
 };
-const resolveInnerProps = (obj, colorMap) => {
+const resolveInnerProps = (obj, ds) => {
   const result = {};
   for (const k in obj) {
     const v = obj[k];
     const expanded = resolveShorthand(k, v);
     if (expanded) {
-      Object.assign(result, expanded);
+      for (const ek in expanded) {
+        result[ek] = resolveDSValue(ek, expanded[ek], ds);
+      }
       continue;
     }
     if (typeof v !== "string" && typeof v !== "number") continue;
-    result[camelToKebab(k)] = CSS_COLOR_PROPS.has(k) && colorMap[v] ? colorMap[v] : v;
+    result[camelToKebab(k)] = resolveDSValue(k, v, ds);
   }
   return result;
 };
-const buildCSSFromProps = (props, colorMap, mediaMap) => {
+const buildCSSFromProps = (props, ds, mediaMap) => {
   const base = {};
   const mediaRules = {};
   const pseudoRules = {};
@@ -230,13 +483,13 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (key.charCodeAt(0) === 64 && typeof val === "object") {
       const bp = mediaMap?.[key.slice(1)];
       if (bp) {
-        const inner = resolveInnerProps(val, colorMap);
+        const inner = resolveInnerProps(val, ds);
         if (Object.keys(inner).length) mediaRules[bp] = inner;
       }
       continue;
     }
     if (key.charCodeAt(0) === 58 && typeof val === "object") {
-      const inner = resolveInnerProps(val, colorMap);
+      const inner = resolveInnerProps(val, ds);
       if (Object.keys(inner).length) pseudoRules[key] = inner;
       continue;
     }
@@ -245,10 +498,12 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (NON_CSS_PROPS.has(key)) continue;
     const expanded = resolveShorthand(key, val);
     if (expanded) {
-      Object.assign(base, expanded);
+      for (const ek in expanded) {
+        base[ek] = resolveDSValue(ek, expanded[ek], ds);
+      }
       continue;
     }
-    base[camelToKebab(key)] = CSS_COLOR_PROPS.has(key) && colorMap[val] ? colorMap[val] : val;
+    base[camelToKebab(key)] = resolveDSValue(key, val, ds);
   }
   return { base, mediaRules, pseudoRules };
 };
@@ -267,8 +522,23 @@ const renderCSSRule = (selector, { base, mediaRules, pseudoRules }) => {
   }
   return lines.join("\n");
 };
+const EXTENDS_CSS = {
+  Flex: { display: "flex" },
+  InlineFlex: { display: "inline-flex" },
+  Grid: { display: "grid" },
+  InlineGrid: { display: "inline-grid" },
+  Block: { display: "block" },
+  Inline: { display: "inline" }
+};
+const getExtendsCSS = (el) => {
+  const exts = el.__ref?.__extends;
+  if (!exts || !Array.isArray(exts)) return null;
+  for (const ext of exts) {
+    if (EXTENDS_CSS[ext]) return EXTENDS_CSS[ext];
+  }
+  return null;
+};
 const extractCSS = (element, ds) => {
-  const colorMap = ds?.color || {};
   const mediaMap = ds?.media || {};
   const animations = ds?.animation || {};
   const rules = [];
@@ -281,7 +551,14 @@ const extractCSS = (element, ds) => {
       const cls = el.node.getAttribute?.("class");
       if (cls && !seen.has(cls)) {
         seen.add(cls);
-        const cssResult = buildCSSFromProps(props, colorMap, mediaMap);
+        const cssResult = buildCSSFromProps(props, ds, mediaMap);
+        const extsCss = getExtendsCSS(el);
+        if (extsCss) {
+          for (const [k, v] of Object.entries(extsCss)) {
+            const kebab = camelToKebab(k);
+            if (!cssResult.base[kebab]) cssResult.base[kebab] = v;
+          }
+        }
         const has = Object.keys(cssResult.base).length || Object.keys(cssResult.mediaRules).length || Object.keys(cssResult.pseudoRules).length;
         if (has) rules.push(renderCSSRule("." + cls.split(" ")[0], cssResult));
         const anim = props.animation || props.animationName;
@@ -315,6 +592,7 @@ const generateResetCSS = (reset) => {
   if (!reset) return "";
   const rules = [];
   for (const [selector, props] of Object.entries(reset)) {
+    if (!props || typeof props !== "object") continue;
     const decls = Object.entries(props).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
     if (decls) rules.push(`${selector} { ${decls}; }`);
   }
@@ -325,6 +603,7 @@ const generateFontLinks = (ds) => {
   const families = ds.font_family || ds.fontFamily || {};
   const fontNames = /* @__PURE__ */ new Set();
   for (const val of Object.values(families)) {
+    if (typeof val !== "string") continue;
     const match = val.match(/'([^']+)'/);
     if (match) fontNames.add(match[1]);
   }

package/dist/esm/env.js

@@ -26,6 +26,29 @@ const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html
     window.scrollTo = () => {
     };
   }
+  const createStorage = () => {
+    const store = {};
+    return {
+      getItem: (k) => store[k] ?? null,
+      setItem: (k, v) => {
+        store[k] = String(v);
+      },
+      removeItem: (k) => {
+        delete store[k];
+      },
+      clear: () => {
+        for (const k in store) delete store[k];
+      },
+      get length() {
+        return Object.keys(store).length;
+      },
+      key: (i) => Object.keys(store)[i] ?? null
+    };
+  };
+  if (!window.localStorage) window.localStorage = createStorage();
+  if (!window.sessionStorage) window.sessionStorage = createStorage();
+  if (!globalThis.localStorage) globalThis.localStorage = window.localStorage;
+  if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage;
   globalThis.window = window;
   globalThis.document = document;
   globalThis.Node = window.Node || globalThis.Node;

package/dist/esm/hydrate.js

@@ -92,6 +92,15 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
     css[key] = resolveValue(key, val, colorMap);
     hasCss = true;
   }
+  const extsCss = getExtendsCSS(el);
+  if (extsCss) {
+    for (const [k, v] of Object.entries(extsCss)) {
+      if (!css[k]) {
+        css[k] = v;
+        hasCss = true;
+      }
+    }
+  }
   if (el.style && typeof el.style === "object") {
     Object.assign(css, el.style);
     hasCss = true;
@@ -190,8 +199,34 @@ const NON_CSS_PROPS = /* @__PURE__ */ new Set([
   "__element",
   "update"
 ]);
+const EXTENDS_CSS = {
+  Flex: { display: "flex" },
+  InlineFlex: { display: "inline-flex" },
+  Grid: { display: "grid" },
+  InlineGrid: { display: "inline-grid" },
+  Block: { display: "block" },
+  Inline: { display: "inline" }
+};
+const getExtendsCSS = (el) => {
+  const exts = el.__ref?.__extends;
+  if (!exts || !Array.isArray(exts)) return null;
+  for (const ext of exts) {
+    if (EXTENDS_CSS[ext]) return EXTENDS_CSS[ext];
+  }
+  return null;
+};
 const resolveShorthand = (key, val) => {
-  if (key === "flexAlign" && typeof val === "string") {
+  if (typeof val === "undefined" || val === null) return null;
+  if (key === "flow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", flexFlow: (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "wrap") {
+    return { display: "flex", flexWrap: val };
+  }
+  if ((key === "align" || key === "flexAlign") && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
     return { display: "flex", alignItems, justifyContent };
   }
@@ -199,12 +234,44 @@ const resolveShorthand = (key, val) => {
     const [alignItems, justifyContent] = val.split(" ");
     return { display: "grid", alignItems, justifyContent };
   }
-  if (key === "round" && val) {
+  if (key === "flexFlow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", flexFlow: (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "flexWrap") {
+    return { display: "flex", flexWrap: val };
+  }
+  if (key === "round" || key === "borderRadius" && val) {
     return { borderRadius: typeof val === "number" ? val + "px" : val };
   }
-  if (key === "boxSize" && val) {
-    return { width: val, height: val };
+  if (key === "boxSize" && typeof val === "string") {
+    const [height, width] = val.split(" ");
+    return { height, width: width || height };
+  }
+  if (key === "widthRange" && typeof val === "string") {
+    const [minWidth, maxWidth] = val.split(" ");
+    return { minWidth, maxWidth: maxWidth || minWidth };
+  }
+  if (key === "heightRange" && typeof val === "string") {
+    const [minHeight, maxHeight] = val.split(" ");
+    return { minHeight, maxHeight: maxHeight || minHeight };
   }
+  if (key === "column") return { gridColumn: val };
+  if (key === "columns") return { gridTemplateColumns: val };
+  if (key === "templateColumns") return { gridTemplateColumns: val };
+  if (key === "row") return { gridRow: val };
+  if (key === "rows") return { gridTemplateRows: val };
+  if (key === "templateRows") return { gridTemplateRows: val };
+  if (key === "area") return { gridArea: val };
+  if (key === "template") return { gridTemplate: val };
+  if (key === "templateAreas") return { gridTemplateAreas: val };
+  if (key === "autoColumns") return { gridAutoColumns: val };
+  if (key === "autoRows") return { gridAutoRows: val };
+  if (key === "autoFlow") return { gridAutoFlow: val };
+  if (key === "columnStart") return { gridColumnStart: val };
+  if (key === "rowStart") return { gridRowStart: val };
   return null;
 };
 const isCSS = (key) => {
@@ -318,11 +385,37 @@ const CSS_PROPERTIES = /* @__PURE__ */ new Set([
   "gridAutoFlow",
   "gridAutoColumns",
   "gridAutoRows",
+  "inset",
+  "inlineSize",
+  "blockSize",
+  "minInlineSize",
+  "maxInlineSize",
+  "minBlockSize",
+  "maxBlockSize",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "marginBlockStart",
+  "marginBlockEnd",
+  "marginInlineStart",
+  "marginInlineEnd",
   "transform",
   "transformOrigin",
   "transition",
   "animation",
+  "animationName",
+  "animationDuration",
   "animationDelay",
+  "animationTimingFunction",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationPlayState",
+  "animationDirection",
+  "gridTemplate",
+  "gridTemplateAreas",
+  "gridColumnStart",
+  "gridRowStart",
   "boxShadow",
   "outline",
   "outlineColor",

package/dist/esm/load.js

@@ -1,13 +1,49 @@
 import { resolve, join } from "path";
-const loadProject = async (projectPath) => {
-  const symbolsDir = resolve(projectPath, "symbols");
-  const tryImport = async (modulePath) => {
+import { existsSync, mkdirSync, writeFileSync, unlinkSync } from "fs";
+import { tmpdir } from "os";
+import { randomBytes } from "crypto";
+const bundleAndImport = async (entryPath) => {
+  if (!existsSync(entryPath)) return null;
+  let esbuild;
+  try {
+    esbuild = await import("esbuild");
+  } catch {
     try {
-      return await import(modulePath);
+      return await import(entryPath);
     } catch {
       return null;
     }
-  };
+  }
+  const outFile = join(tmpdir(), `brender_${randomBytes(8).toString("hex")}.mjs`);
+  try {
+    await esbuild.build({
+      entryPoints: [entryPath],
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      outfile: outFile,
+      write: true,
+      logLevel: "silent",
+      // Mark node builtins as external
+      external: ["fs", "path", "os", "crypto", "url", "http", "https", "stream", "util", "events", "buffer", "child_process", "worker_threads", "net", "tls", "dns", "dgram", "zlib", "assert", "querystring", "string_decoder", "readline", "perf_hooks", "async_hooks", "v8", "vm", "cluster", "inspector", "module", "process", "tty"]
+    });
+    const mod = await import(`file://${outFile}`);
+    return mod;
+  } catch {
+    try {
+      return await import(entryPath);
+    } catch {
+      return null;
+    }
+  } finally {
+    try {
+      unlinkSync(outFile);
+    } catch {
+    }
+  }
+};
+const loadProject = async (projectPath) => {
+  const symbolsDir = resolve(projectPath, "symbols");
   const [
     appModule,
     stateModule,
@@ -21,17 +57,17 @@ const loadProject = async (projectPath) => {
     designSystemModule,
     filesModule
   ] = await Promise.all([
-    tryImport(join(symbolsDir, "app.js")),
-    tryImport(join(symbolsDir, "state.js")),
-    tryImport(join(symbolsDir, "config.js")),
-    tryImport(join(symbolsDir, "dependencies.js")),
-    tryImport(join(symbolsDir, "components", "index.js")),
-    tryImport(join(symbolsDir, "snippets", "index.js")),
-    tryImport(join(symbolsDir, "pages", "index.js")),
-    tryImport(join(symbolsDir, "functions", "index.js")),
-    tryImport(join(symbolsDir, "methods", "index.js")),
-    tryImport(join(symbolsDir, "designSystem", "index.js")),
-    tryImport(join(symbolsDir, "files", "index.js"))
+    bundleAndImport(join(symbolsDir, "app.js")),
+    bundleAndImport(join(symbolsDir, "state.js")),
+    bundleAndImport(join(symbolsDir, "config.js")),
+    bundleAndImport(join(symbolsDir, "dependencies.js")),
+    bundleAndImport(join(symbolsDir, "components", "index.js")),
+    bundleAndImport(join(symbolsDir, "snippets", "index.js")),
+    bundleAndImport(join(symbolsDir, "pages", "index.js")),
+    bundleAndImport(join(symbolsDir, "functions", "index.js")),
+    bundleAndImport(join(symbolsDir, "methods", "index.js")),
+    bundleAndImport(join(symbolsDir, "designSystem", "index.js")),
+    bundleAndImport(join(symbolsDir, "files", "index.js"))
   ]);
   return {
     app: appModule?.default || {},