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

@lolyjs/core 0.3.0-alpha.5 → 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 +162 -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 +3362 -867
package/dist/cli.cjs.map +1 -1
package/dist/cli.mjs +3442 -952
package/dist/cli.mjs.map +1 -1
package/dist/index.cjs +3622 -897
package/dist/index.cjs.map +1 -1
package/dist/index.d.mts +27 -1
package/dist/index.d.ts +27 -1
package/dist/index.mjs +3598 -879
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 +138 -5
package/dist/react/components.cjs.map +1 -1
package/dist/react/components.d.mts +58 -6
package/dist/react/components.d.ts +58 -6
package/dist/react/components.mjs +138 -6
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 +4 -2

package/README.md CHANGED Viewed

@@ -43,6 +43,7 @@ Loly is a full-stack React framework that combines the simplicity of file-based
 - 🛡️ **Security First** - Built-in rate limiting, validation, sanitization, and security headers
 - ⚡ **Performance** - Fast bundling with Rspack and optimized code splitting
 - 📦 **Full ESM Support** - Native ES modules with top-level await, dynamic imports, and `import.meta.url`
+- 🖼️ **Image Optimization** - Automatic image optimization with WebP/AVIF support, lazy loading, and responsive images
 ---
@@ -848,6 +849,79 @@ export default {
 } satisfies Partial<FrameworkConfig>;
 ```
+### 🖼️ Image Optimization
+Loly includes a powerful image optimization system similar to Next.js Image, with automatic optimization, lazy loading, responsive images, and remote image support.
+**Basic Usage:**
+```tsx
+import { Image } from "@lolyjs/core/components";
+export default function MyPage() {
+  return (
+    <Image
+      src="/assets/hero.jpg"
+      alt="Hero image"
+      width={800}
+      height={600}
+    />
+  );
+}
+```
+**Remote Images:**
+```tsx
+<Image
+  src="https://images.unsplash.com/photo-123"
+  alt="Photo"
+  width={1200}
+  height={800}
+  quality={85}
+  format="webp"
+/>
+```
+**Features:**
+- ✅ Automatic optimization (resize, compress, format conversion)
+- ✅ Modern formats (WebP, AVIF)
+- ✅ Lazy loading by default
+- ✅ Responsive images with automatic srcset
+- ✅ Remote image support (with domain whitelist)
+- ✅ Cache optimization
+- ✅ CLS prevention
+**Configuration:**
+Configure allowed remote domains in `loly.config.ts`:
+```tsx
+import type { FrameworkConfig } from "@lolyjs/core";
+export default {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+      {
+        protocol: "https",
+        hostname: "**.unsplash.com", // Wildcard for subdomains
+      },
+    ],
+    formats: ["image/webp", "image/avif"],
+    quality: 75,
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+} satisfies Partial<FrameworkConfig>;
+```
+For complete documentation, see [Image Optimization Documentation](https://github.com/MenvielleValen/loly-framework/blob/main/docs/17-image-optimization.md).
 ### 🔌 API Routes
 Create RESTful APIs with flexible middleware support:
@@ -1302,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;