npm - @lolyjs/core - Versions diffs - 0.3.0-alpha.6 → 0.4.0-alpha.0 - Mend

@lolyjs/core 0.3.0-alpha.6 → 0.4.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +88 -0
package/dist/{bootstrap-BfGTMUkj.d.mts → bootstrap-B6W6XoI5.d.mts} +6 -0
package/dist/{bootstrap-BfGTMUkj.d.ts → bootstrap-B6W6XoI5.d.ts} +6 -0
package/dist/cli.cjs +2969 -977
package/dist/cli.cjs.map +1 -1
package/dist/cli.mjs +2936 -949
package/dist/cli.mjs.map +1 -1
package/dist/index.cjs +3159 -937
package/dist/index.cjs.map +1 -1
package/dist/index.d.mts +1 -1
package/dist/index.d.ts +1 -1
package/dist/index.mjs +3136 -920
package/dist/index.mjs.map +1 -1
package/dist/react/cache.cjs.map +1 -1
package/dist/react/cache.mjs.map +1 -1
package/dist/react/components.cjs +16 -0
package/dist/react/components.cjs.map +1 -1
package/dist/react/components.d.mts +40 -2
package/dist/react/components.d.ts +40 -2
package/dist/react/components.mjs +15 -0
package/dist/react/components.mjs.map +1 -1
package/dist/react/hooks.cjs +24 -0
package/dist/react/hooks.cjs.map +1 -1
package/dist/react/hooks.d.mts +49 -1
package/dist/react/hooks.d.ts +49 -1
package/dist/react/hooks.mjs +22 -0
package/dist/react/hooks.mjs.map +1 -1
package/dist/react/themes.cjs +0 -169
package/dist/react/themes.cjs.map +1 -1
package/dist/react/themes.d.mts +18 -11
package/dist/react/themes.d.ts +18 -11
package/dist/react/themes.mjs +0 -159
package/dist/react/themes.mjs.map +1 -1
package/dist/runtime.cjs +268 -24
package/dist/runtime.cjs.map +1 -1
package/dist/runtime.d.mts +2 -2
package/dist/runtime.d.ts +2 -2
package/dist/runtime.mjs +255 -15
package/dist/runtime.mjs.map +1 -1
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -1376,6 +1376,94 @@ export default function Navigation() {
 }
 ```
+### 🎨 Global Theme API
+Loly provides a global theme system that works without React Context, using BroadcastChannel for cross-tab synchronization. The theme is automatically applied to the `<body>` element on the server, and you can update it from anywhere in your application using the global API.
+**Usage:**
+```tsx
+// In any client component or vanilla JavaScript
+export default function ThemeSwitch() {
+  const handleToggle = () => {
+    const current = window.loly?.theme?.get() || "light";
+    const next = current === "dark" ? "light" : "dark";
+    window.loly?.theme?.set(next);
+  };
+  return <button onClick={handleToggle}>Toggle Theme</button>;
+}
+```
+**Reading the theme:**
+```tsx
+// Get current theme
+const currentTheme = window.loly?.theme?.get(); // "light" | "dark"
+// Or read from body class (SSR-safe)
+const themeFromDOM = document.body.classList.contains("dark") ? "dark" : "light";
+```
+**Server-side theme:**
+The theme is automatically applied to the `<body>` element on the server. You can pass the theme from your layout server hook:
+```tsx
+// app/layout.server.hook.ts
+import type { ServerLoader } from "@lolyjs/core";
+export const getServerSideProps: ServerLoader = async (ctx) => {
+  // Get theme from cookie, user preference, etc.
+  const theme = ctx.req.cookies?.theme || "light";
+  return {
+    props: {},
+    metadata: {
+      // Theme is automatically applied to body via inline script
+    },
+  };
+};
+```
+**Key Features:**
+- ✅ **No React Context required** - Works with server components
+- ✅ **Cross-tab synchronization** - Uses BroadcastChannel
+- ✅ **SSR-safe** - Theme applied on server to prevent flash
+- ✅ **Cookie persistence** - Theme preference saved automatically
+- ✅ **Simple API** - `window.loly.theme.set()` and `window.loly.theme.get()`
+**React hook example (optional):**
+```tsx
+import { useEffect, useState } from "react";
+function useTheme() {
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    if (typeof window === "undefined") return "light";
+    return window.loly?.theme?.get() || "light";
+  });
+  useEffect(() => {
+    const channel = new BroadcastChannel("loly_theme_channel");
+    channel.onmessage = (event) => {
+      if (event.data?.theme) {
+        setTheme(event.data.theme);
+      }
+    };
+    return () => channel.close();
+  }, []);
+  const changeTheme = (newTheme: "light" | "dark") => {
+    window.loly?.theme?.set(newTheme);
+    setTheme(newTheme);
+  };
+  return { theme, changeTheme };
+}
+```
 ---
 ## Configuration

package/dist/{bootstrap-BfGTMUkj.d.mts → bootstrap-B6W6XoI5.d.mts} RENAMED Viewed

@@ -33,6 +33,12 @@ declare global {
 type ClientLoadedComponents = {
     Page: React.ComponentType<any>;
     layouts: React.ComponentType<any>[];
+    isPageClientComponent?: boolean;
+    isLayoutClientComponent?: boolean[];
+    clientComponentFilePaths?: {
+        page?: string;
+        layouts?: (string | undefined)[];
+    };
 };
 type ClientRouteLoaded = {
     pattern: string;

package/dist/{bootstrap-BfGTMUkj.d.ts → bootstrap-B6W6XoI5.d.ts} RENAMED Viewed

@@ -33,6 +33,12 @@ declare global {
 type ClientLoadedComponents = {
     Page: React.ComponentType<any>;
     layouts: React.ComponentType<any>[];
+    isPageClientComponent?: boolean;
+    isLayoutClientComponent?: boolean[];
+    clientComponentFilePaths?: {
+        page?: string;
+        layouts?: (string | undefined)[];
+    };
 };
 type ClientRouteLoaded = {
     pattern: string;