@skafform/vite-plugin 0.1.3 → 0.1.5

package/base.css

@@ -42,6 +42,7 @@
 
   /* Mise en page */
   --skafform-navbar-height:   60px;
+  --skafform-page-gutter:     40px;
 }
 
 html, body {

package/dist/index.js

@@ -9,6 +9,10 @@ var VIRTUAL_SERVER_INIT = "virtual:skafform/server-init";
 var RESOLVED_SERVER_INIT = "\0virtual:skafform/server-init";
 var VIRTUAL_ADMIN_SECTIONS = "virtual:skafform/admin-sections";
 var RESOLVED_ADMIN_SECTIONS = "\0virtual:skafform/admin-sections";
+var VIRTUAL_WIDGET_REGISTRY = "virtual:skafform/widget-registry";
+var RESOLVED_WIDGET_REGISTRY = "\0virtual:skafform/widget-registry";
+var VIRTUAL_WIDGET_LOADERS = "virtual:skafform/widget-loaders";
+var RESOLVED_WIDGET_LOADERS = "\0virtual:skafform/widget-loaders";
 var norm = (p) => p.replace(/\\/g, "/");
 function loadBrickIndex(root) {
   const bricksDir = resolve(root, "bricks");
@@ -85,13 +89,81 @@ function skafform() {
 ${vars}
 }`;
   }
+  const TAILWIND_TOKEN_MAP = {
+    "primary": "--color-primary",
+    "primary-fg": "--color-primary-fg",
+    "primary-hover": "--color-primary-hover",
+    "background": "--color-background",
+    "foreground": "--color-foreground",
+    "muted": "--color-muted",
+    "muted-fg": "--color-muted-fg",
+    "border": "--color-border",
+    "border-subtle": "--color-border-subtle",
+    "error": "--color-error",
+    "font": "--font-sans",
+    "font-heading": "--font-heading",
+    "font-body": "--font-body",
+    "font-size-xs": "--text-xs",
+    "font-size-sm": "--text-sm",
+    "font-size-base": "--text-base",
+    "font-size-lg": "--text-lg",
+    "font-size-xl": "--text-xl",
+    "font-size-2xl": "--text-2xl",
+    "radius": "--radius",
+    "radius-sm": "--radius-sm",
+    "radius-md": "--radius-md",
+    "radius-lg": "--radius-lg",
+    "radius-full": "--radius-full",
+    "shadow-sm": "--shadow-sm",
+    "shadow-md": "--shadow-md",
+    "shadow-lg": "--shadow-lg"
+  };
+  function generateTailwindTheme(tokens) {
+    const lines = [];
+    for (const key of Object.keys(tokens)) {
+      const twVar = TAILWIND_TOKEN_MAP[key];
+      if (twVar) lines.push(`  ${twVar}: var(--skafform-${key});`);
+    }
+    if (lines.length === 0) return "";
+    return `@theme inline {
+${lines.join("\n")}
+}`;
+  }
+  function generateDarkTokensCss(darkTokens, lightTokens) {
+    const entries = Object.entries(darkTokens);
+    if (entries.length === 0) return "";
+    const darkVars = entries.map(([k, v]) => `    --skafform-${k}: ${v};`).join("\n");
+    const classVars = entries.map(([k, v]) => `  --skafform-${k}: ${v};`).join("\n");
+    const lightVars = entries.filter(([k]) => k in lightTokens).map(([k]) => `  --skafform-${k}: ${lightTokens[k]};`).join("\n");
+    return [
+      `@media (prefers-color-scheme: dark) {
+  :root {
+${darkVars}
+  }
+}`,
+      `.dark {
+${classVars}
+}`,
+      lightVars ? `.light {
+${lightVars}
+}` : ""
+    ].filter(Boolean).join("\n");
+  }
   function getCssString() {
     const themeJson = getThemeJson(config.theme);
     const themeCssPath = resolve(root, `themes/${config.theme}/styles/theme.css`);
     const base = readCss(baseCssPath);
     const theme = existsSync(themeCssPath) ? readCss(themeCssPath) : "";
     const tokens = generateTokensCss(themeJson.tokens ?? {});
-    return base + "\n" + theme + (tokens ? "\n" + tokens : "");
+    const dark = themeJson.tokens_dark ? generateDarkTokensCss(themeJson.tokens_dark, themeJson.tokens ?? {}) : "";
+    const css = base + "\n" + theme + (tokens ? "\n" + tokens : "") + (dark ? "\n" + dark : "");
+    if (config.tailwind) {
+      const tailwindTheme = generateTailwindTheme(themeJson.tokens ?? {});
+      return `@import "tailwindcss";
+
+` + css + (tailwindTheme ? "\n" + tailwindTheme : "");
+    }
+    return css;
   }
   return {
     name: "skafform",
@@ -110,6 +182,8 @@ ${vars}
       if (id === VIRTUAL_CONFIG) return RESOLVED_CONFIG;
       if (id === VIRTUAL_SERVER_INIT) return RESOLVED_SERVER_INIT;
       if (id === VIRTUAL_ADMIN_SECTIONS) return RESOLVED_ADMIN_SECTIONS;
+      if (id === VIRTUAL_WIDGET_REGISTRY) return RESOLVED_WIDGET_REGISTRY;
+      if (id === VIRTUAL_WIDGET_LOADERS) return RESOLVED_WIDGET_LOADERS;
       if (id.startsWith(".") && importer) {
         const themeDir = norm(resolve(root, `themes/${config.theme}`));
         const componentsDir = themeDir + "/components";
@@ -133,7 +207,8 @@ ${vars}
         const themeJson = getThemeJson(config.theme);
         return `export default ${JSON.stringify({
           ...config,
-          customize: { ...themeJson.customize ?? {}, ...config.customize ?? {} }
+          customize: { ...themeJson.customize ?? {}, ...config.customize ?? {} },
+          fonts: themeJson.fonts ?? []
         })}`;
       }
       if (id === RESOLVED_ADMIN_SECTIONS) {
@@ -147,6 +222,74 @@ ${vars}
         }
         return `export default ${JSON.stringify(sections)}`;
       }
+      if (id === RESOLVED_WIDGET_REGISTRY) {
+        const bricksConfig = getBricksConfig();
+        if (!bricksConfig) return "export const widgetRegistry = {}";
+        const zones = {};
+        for (const [brickName, brick] of Object.entries(bricksConfig.bricks ?? {})) {
+          for (const widget of brick.widgets ?? []) {
+            if (!zones[widget.zone]) zones[widget.zone] = [];
+            zones[widget.zone].push({ brick: brickName, component: widget.component });
+          }
+        }
+        for (const widgets of Object.values(zones)) {
+          widgets.sort((a, b) => a.brick.localeCompare(b.brick));
+        }
+        const imports = [];
+        const entries = [];
+        let i = 0;
+        for (const [zone, widgets] of Object.entries(zones)) {
+          const items = [];
+          for (const w of widgets) {
+            const absPath = norm(resolve(root, w.component));
+            const basename = absPath.split("/").pop().replace(/\.[^.]+$/, "");
+            const varName = `wr_${i++}`;
+            imports.push(`import * as ${varName} from ${JSON.stringify(absPath)}`);
+            items.push(`    { brick: ${JSON.stringify(w.brick)}, basename: ${JSON.stringify(basename)}, Component: ${varName}.default }`);
+          }
+          entries.push(`  ${JSON.stringify(zone)}: [
+${items.join(",\n")}
+  ]`);
+        }
+        return [
+          ...imports,
+          `export const widgetRegistry = {
+${entries.join(",\n")}
+}`
+        ].join("\n");
+      }
+      if (id === RESOLVED_WIDGET_LOADERS) {
+        const bricksConfig = getBricksConfig();
+        if (!bricksConfig) return "export async function runWidgetLoaders() { return {} }";
+        const widgets = [];
+        let i = 0;
+        for (const [brickName, brick] of Object.entries(bricksConfig.bricks ?? {})) {
+          for (const widget of brick.widgets ?? []) {
+            const absPath = norm(resolve(root, widget.component));
+            const basename = absPath.split("/").pop().replace(/\.[^.]+$/, "");
+            const key = `${widget.zone}:${brickName}:${basename}`;
+            widgets.push({ key, absPath, varName: `wl_${i++}` });
+          }
+        }
+        if (widgets.length === 0) {
+          return "export async function runWidgetLoaders() { return {} }";
+        }
+        return [
+          ...widgets.map((w) => `import * as ${w.varName} from ${JSON.stringify(w.absPath)}`),
+          `const _loaders = [`,
+          ...widgets.map((w) => `  { key: ${JSON.stringify(w.key)}, fn: ${w.varName}.loader ?? null },`),
+          `]`,
+          `export async function runWidgetLoaders(request) {`,
+          `  const results = {}`,
+          `  await Promise.all(`,
+          `    _loaders.filter(w => w.fn !== null).map(async ({ key, fn }) => {`,
+          `      try { results[key] = await fn({ request }) } catch { results[key] = null }`,
+          `    })`,
+          `  )`,
+          `  return results`,
+          `}`
+        ].join("\n");
+      }
       if (id === RESOLVED_SERVER_INIT) {
         const bricksConfig = getBricksConfig();
         if (!bricksConfig) return "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skafform/vite-plugin",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "exports": {
     ".": {
@@ -13,6 +13,10 @@
     "base.css",
     "types.d.ts"
   ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"