@harpy-js/core 0.4.7 → 0.4.9

package/dist/client/use-i18n.d.ts

@@ -1,7 +1,6 @@
 interface UseI18nReturn {
-    switchLocale: (locale: string) => void;
-    getCurrentLocale: () => string | null;
-    buildUrl: (path: string, locale?: string) => string;
+    switchLocale: (locale: string) => Promise<void>;
+    isLoading: boolean;
 }
 export declare function useI18n(): UseI18nReturn;
 export {};

package/dist/client/use-i18n.js

@@ -1,64 +1,47 @@
 "use strict";
-"use client";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useI18n = useI18n;
 const react_1 = require("react");
 function useI18n() {
-    (0, react_1.useEffect)(() => {
-        if (typeof window !== "undefined" &&
-            !window.__HARPY_I18N_INITIALIZED__) {
-            window.__HARPY_I18N_INITIALIZED__ = true;
-            const script = document.createElement("script");
-            script.textContent = `
-        (function() {
-          if (window.__HARPY_I18N_NAV_INSTALLED__) return;
-          window.__HARPY_I18N_NAV_INSTALLED__ = true;
-          
-          document.addEventListener('click', function(e) {
-            var target = e.target;
-            while (target && target.tagName !== 'A') {
-              target = target.parentElement;
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const switchLocale = async (locale) => {
+        if (typeof window === 'undefined')
+            return;
+        setIsLoading(true);
+        try {
+            console.log('[useI18n] Switching locale to:', locale);
+            const formData = new URLSearchParams();
+            formData.append('locale', locale);
+            formData.append('redirect', window.location.pathname + window.location.search);
+            const response = await fetch('/api/i18n/switch-locale', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: formData.toString(),
+                redirect: 'manual',
+            });
+            console.log('[useI18n] Response status:', response.status);
+            if (response.type === 'opaqueredirect' || response.status === 302 || response.status === 0) {
+                window.location.reload();
+            }
+            else if (response.ok || response.redirected) {
+                window.location.reload();
             }
-            if (target && target.tagName === 'A' && target.href) {
-              var url = new URL(target.href, window.location.origin);
-              var currentLang = new URLSearchParams(window.location.search).get('lang');
-              if (currentLang && url.origin === window.location.origin && !url.searchParams.has('lang')) {
-                url.searchParams.set('lang', currentLang);
-                target.href = url.toString();
-              }
+            else {
+                console.error('[useI18n] Unexpected response:', response.status);
+                window.location.reload();
             }
-          });
-        })();
-      `;
-            document.head.appendChild(script);
         }
-    }, []);
-    const switchLocale = (locale) => {
-        if (typeof window === "undefined")
-            return;
-        const url = new URL(window.location.href);
-        url.searchParams.set("lang", locale);
-        window.location.href = url.toString();
-    };
-    const getCurrentLocale = () => {
-        if (typeof window === "undefined")
-            return null;
-        const url = new URL(window.location.href);
-        return url.searchParams.get("lang");
-    };
-    const buildUrl = (path, locale) => {
-        if (typeof window === "undefined")
-            return path;
-        const currentLocale = locale || getCurrentLocale();
-        if (!currentLocale)
-            return path;
-        const url = new URL(path, window.location.origin);
-        url.searchParams.set("lang", currentLocale);
-        return url.pathname + url.search;
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : String(err);
+            console.error('[useI18n] Error:', errorMsg);
+            window.location.reload();
+        }
     };
     return {
         switchLocale,
-        getCurrentLocale,
-        buildUrl,
+        isLoading,
     };
 }

package/dist/core/jsx.engine.d.ts

@@ -1,9 +1,4 @@
 import { NestFastifyApplication } from "@nestjs/platform-fastify";
-import * as React from "react";
-import { MetaOptions } from "../decorators/jsx.decorator";
-export interface JsxLayoutProps {
-    children: React.ReactNode;
-    meta?: MetaOptions;
-}
-export type JsxLayout = (props: JsxLayoutProps) => React.ReactElement;
+import { JsxLayout, JsxLayoutProps, PageProps } from "../types/jsx.types";
+export type { JsxLayout, JsxLayoutProps, PageProps };
 export declare function withJsxEngine(app: NestFastifyApplication, defaultLayout: JsxLayout): void;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { StaticAssetsController } from "./core/static-assets.controller";
 export { JsxRender } from "./decorators/jsx.decorator";
 export { WithLayout } from "./decorators/layout.decorator";
 export type { MetaOptions, RenderOptions } from "./decorators/jsx.decorator";
-export type { JsxLayout, JsxLayoutProps } from "./core/jsx.engine";
+export type { JsxLayout, JsxLayoutProps, PageProps } from "./types/jsx.types";
 export { RouterModule } from "./core/router.module";
 export { NavigationService } from "./core/navigation.service";
 export { AutoRegisterModule } from "./core/auto-register.module";

package/dist/types/jsx.types.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { MetaOptions } from "../decorators/jsx.decorator";
+export interface PageProps {
+    [key: string]: any;
+}
+export interface JsxLayoutProps {
+    children: React.ReactNode;
+    meta?: MetaOptions;
+}
+export type JsxLayout = (props: JsxLayoutProps) => React.ReactElement;

package/dist/types/jsx.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harpy-js/core",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Harpy - A powerful NestJS + React/JSX SSR framework with automatic hydration and i18n support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/client/use-i18n.ts

@@ -1,111 +1,90 @@
 /**
  * React hook for i18n locale switching (Client-side only)
  *
- * This hook provides a simple way to switch locales from any component
- * (buttons, dropdowns, selects, etc.)
- *
- * The hook updates the URL with the selected locale and reloads the page.
- * The server-side interceptor will automatically set the cookie based on the URL.
- *
- * When used in a component, it automatically injects the language-aware navigation script.
+ * This hook provides a Next.js-style server action pattern for locale switching.
+ * It posts form data to the server, which sets the locale cookie and returns
+ * a redirect URL. Then we navigate to that URL to reload with the new locale.
  *
  * @example
  * ```tsx
  * import { useI18n } from '@harpy-js/core/client';
  *
  * function MyComponent() {
- *   const { switchLocale } = useI18n();
- *   return <button onClick={() => switchLocale('fr')}>French</button>;
+ *   const { switchLocale, isLoading } = useI18n();
+ *   return (
+ *     <>
+ *       <button onClick={() => switchLocale('fr')} disabled={isLoading}>
+ *         {isLoading ? 'Loading...' : 'French'}
+ *       </button>
+ *     </>
+ *   );
  * }
  * ```
  */
 
-"use client";
+'use client';
 
-import { useEffect } from "react";
+import { useState } from 'react';
 
 interface UseI18nReturn {
-  switchLocale: (locale: string) => void;
-  getCurrentLocale: () => string | null;
-  buildUrl: (path: string, locale?: string) => string;
+  switchLocale: (locale: string) => Promise<void>;
+  isLoading: boolean;
 }
 
 export function useI18n(): UseI18nReturn {
-  // Register that this component uses i18n, so the navigation script gets injected
-  useEffect(() => {
-    // Mark that i18n is being used in this render
-    if (
-      typeof window !== "undefined" &&
-      !(window as any).__HARPY_I18N_INITIALIZED__
-    ) {
-      (window as any).__HARPY_I18N_INITIALIZED__ = true;
-
-      // Inject language-aware navigation script
-      const script = document.createElement("script");
-      script.textContent = `
-        (function() {
-          if (window.__HARPY_I18N_NAV_INSTALLED__) return;
-          window.__HARPY_I18N_NAV_INSTALLED__ = true;
-          
-          document.addEventListener('click', function(e) {
-            var target = e.target;
-            while (target && target.tagName !== 'A') {
-              target = target.parentElement;
-            }
-            if (target && target.tagName === 'A' && target.href) {
-              var url = new URL(target.href, window.location.origin);
-              var currentLang = new URLSearchParams(window.location.search).get('lang');
-              if (currentLang && url.origin === window.location.origin && !url.searchParams.has('lang')) {
-                url.searchParams.set('lang', currentLang);
-                target.href = url.toString();
-              }
-            }
-          });
-        })();
-      `;
-      document.head.appendChild(script);
-    }
-  }, []);
+  const [isLoading, setIsLoading] = useState(false);
 
   /**
-   * Switch to a new locale by updating the URL and reloading the page
+   * Switch to a new locale by posting to the server endpoint
+   * The server will set the locale cookie and return a redirect URL
    */
-  const switchLocale = (locale: string): void => {
-    if (typeof window === "undefined") return;
+  const switchLocale = async (locale: string): Promise<void> => {
+    if (typeof window === 'undefined') return;
 
-    const url = new URL(window.location.href);
-    url.searchParams.set("lang", locale);
-    window.location.href = url.toString();
-  };
+    setIsLoading(true);
 
-  /**
-   * Get the current locale from the URL
-   */
-  const getCurrentLocale = (): string | null => {
-    if (typeof window === "undefined") return null;
+    try {
+      console.log('[useI18n] Switching locale to:', locale);
 
-    const url = new URL(window.location.href);
-    return url.searchParams.get("lang");
-  };
+      // Create FormData to send as application/x-www-form-urlencoded
+      const formData = new URLSearchParams();
+      formData.append('locale', locale);
+      formData.append('redirect', window.location.pathname + window.location.search);
 
-  /**
-   * Build a URL with the current locale preserved
-   * Useful for navigation links that should maintain the language
-   */
-  const buildUrl = (path: string, locale?: string): string => {
-    if (typeof window === "undefined") return path;
+      const response = await fetch('/api/i18n/switch-locale', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: formData.toString(),
+        redirect: 'manual', // Don't follow redirects automatically
+      });
 
-    const currentLocale = locale || getCurrentLocale();
-    if (!currentLocale) return path;
+      console.log('[useI18n] Response status:', response.status);
 
-    const url = new URL(path, window.location.origin);
-    url.searchParams.set("lang", currentLocale);
-    return url.pathname + url.search;
+      // Server will return 302 redirect, which fetch sees as status 0 with 'opaqueredirect' type
+      // Or it might return the redirect URL in the response body
+      if (response.type === 'opaqueredirect' || response.status === 302 || response.status === 0) {
+        // Cookie is set, just reload the current page
+        window.location.reload();
+      } else if (response.ok || response.redirected) {
+        // If we got a response, reload
+        window.location.reload();
+      } else {
+        console.error('[useI18n] Unexpected response:', response.status);
+        // Try to reload anyway since cookie might be set
+        window.location.reload();
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error('[useI18n] Error:', errorMsg);
+      // Even on error, try to reload in case cookie was set
+      window.location.reload();
+    }
   };
 
   return {
     switchLocale,
-    getCurrentLocale,
-    buildUrl,
+    isLoading,
   };
 }

package/src/core/jsx.engine.ts

@@ -3,17 +3,18 @@ import { FastifyReply } from "fastify";
 import * as React from "react";
 import { renderToPipeableStream, renderToString } from "react-dom/server";
 import { MetaOptions, RenderOptions } from "../decorators/jsx.decorator";
+import {
+  JsxLayout,
+  JsxLayoutProps,
+  PageProps,
+} from "../types/jsx.types";
 import { hydrationContext, initializeHydrationContext } from "./hydration";
 import { getChunkPath, getHydrationManifest } from "./hydration-manifest";
 import { LiveReloadController } from "./live-reload.controller";
 import { StaticAssetsController } from "./static-assets.controller";
 
-export interface JsxLayoutProps {
-  children: React.ReactNode;
-  meta?: MetaOptions;
-}
-
-export type JsxLayout = (props: JsxLayoutProps) => React.ReactElement;
+// Export types for use in applications
+export type { JsxLayout, JsxLayoutProps, PageProps };
 
 // Cache for component-to-chunk path mappings (loaded once at startup)
 const chunkPathCache = new Map<string, string>();

package/src/index.ts

@@ -15,7 +15,7 @@ export type { MetaOptions, RenderOptions } from "./decorators/jsx.decorator";
 // Consumers should import i18n types and modules from that package.
 
 // Types
-export type { JsxLayout, JsxLayoutProps } from "./core/jsx.engine";
+export type { JsxLayout, JsxLayoutProps, PageProps } from "./types/jsx.types";
 export { RouterModule } from "./core/router.module";
 export { NavigationService } from "./core/navigation.service";
 export { AutoRegisterModule } from "./core/auto-register.module";

package/src/types/jsx.types.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { MetaOptions } from "../decorators/jsx.decorator";
+
+/**
+ * Base props interface for all page components.
+ * Extend this interface to add custom props to your pages.
+ *
+ * @example
+ * interface HomePage extends PageProps {
+ *   items: string[];
+ *   user?: User;
+ * }
+ */
+export interface PageProps {
+  [key: string]: any;
+}
+
+/**
+ * Props interface for layout components.
+ * Layouts receive the page content as children and optional metadata.
+ */
+export interface JsxLayoutProps {
+  children: React.ReactNode;
+  meta?: MetaOptions;
+}
+
+/**
+ * Type for layout component functions.
+ */
+export type JsxLayout = (props: JsxLayoutProps) => React.ReactElement;