proteum 1.0.2 → 2.0.0-1

package/client/dev/hmr.ts

@@ -0,0 +1,65 @@
+type TDevEvent = { type: 'reload'; reason: 'server' | 'manual' | 'client' };
+
+const devEventsPath = '/__proteum_hmr';
+let reloadPending = false;
+let source: EventSource | null = null;
+
+const delay = (timeout: number) => new Promise<void>((resolve) => window.setTimeout(resolve, timeout));
+
+const buildDevEventsUrl = () => {
+    if (typeof window === 'undefined') return null;
+    if (PROTEUM_DEV_EVENT_PORT === null) return null;
+
+    const hostname = window.location.hostname || 'localhost';
+    return `${window.location.protocol}//${hostname}:${PROTEUM_DEV_EVENT_PORT}${devEventsPath}`;
+};
+
+const waitForServer = async () => {
+    for (let attempt = 0; attempt < 40; attempt += 1) {
+        try {
+            const response = await fetch(`/ping?ts=${Date.now()}`, { cache: 'no-store' });
+            if (response.ok) return;
+        } catch (error) {}
+
+        await delay(250);
+    }
+};
+
+const requestReload = async () => {
+    if (reloadPending) return;
+    reloadPending = true;
+    source?.close();
+    source = null;
+
+    try {
+        await waitForServer();
+    } finally {
+        window.location.reload();
+    }
+};
+
+const handleEvent = (_event: TDevEvent) => {
+    void requestReload();
+};
+
+const devEventsUrl = buildDevEventsUrl();
+
+if (devEventsUrl && typeof EventSource !== 'undefined') {
+    source = new EventSource(devEventsUrl);
+
+    source.onmessage = (event) => {
+        try {
+            const payload = JSON.parse(event.data) as TDevEvent;
+            handleEvent(payload);
+        } catch (error) {
+            console.warn('[hmr] Failed to parse dev event payload.', error);
+        }
+    };
+
+    source.onerror = () => {
+        // EventSource reconnects automatically. Transient disconnects are expected
+        // during rebuilds and page reloads, so warning here would be mostly noise.
+    };
+} else {
+    console.warn('[hmr] Dev event stream is unavailable in this environment.');
+}

package/client/global.d.ts

@@ -1,5 +1,5 @@
 declare global {
     interface Window {
-        dev?: boolean
+        dev?: boolean;
     }
-}
+}

package/client/hooks.ts

@@ -9,14 +9,11 @@ export { default as useScript } from '@client/hooks/useScript';*/
 
 // Utils
 export const Switch = (val: string | number, options: { [cle: string]: ComponentChild }) => {
-    return (val in options) ? options[val] : null;
-}
+    return val in options ? options[val] : null;
+};
 
-export const useState = <TData extends TObjetDonnees>(initial: TData): [
-    TData,
-    (data: Partial<TData>) => void
-] => {
+export const useState = <TData extends TObjetDonnees>(initial: TData): [TData, (data: Partial<TData>) => void] => {
     const [state, setState] = React.useState<TData>(initial);
-    const setPartialState = (data: Partial<TData>) => setState(current => ({ ...current, ...data }));
-    return [state, setPartialState]
-}
+    const setPartialState = (data: Partial<TData>) => setState((current) => ({ ...current, ...data }));
+    return [state, setPartialState];
+};

package/client/index.ts

@@ -2,5 +2,6 @@ import Application from '@/client';
 
 const app = new Application();
 app.app = app;
+window.app = app;
 
-app.start();
+app.start();

package/client/islands/index.ts

@@ -0,0 +1,7 @@
+export { default as useDeferredModule } from './useDeferredModule';
+export type {
+    TDeferredModuleLoader,
+    TDeferredModuleOptions,
+    TDeferredModuleResult,
+    TDeferredModuleStrategy,
+} from './useDeferredModule';

package/client/islands/useDeferredModule.ts

@@ -0,0 +1,199 @@
+import React from 'react';
+
+export type TDeferredModuleLoader<TModule> = () => Promise<TModule>;
+
+export type TDeferredModuleStrategy = 'immediate' | 'idle' | 'visible';
+
+export type TDeferredModuleOptions = {
+    enabled?: boolean;
+    when?: TDeferredModuleStrategy;
+    timeoutMs?: number;
+    rootMargin?: string;
+    cache?: boolean;
+};
+
+export type TDeferredModuleResult<TModule> = {
+    value?: TModule;
+    error?: unknown;
+    isLoaded: boolean;
+    isLoading: boolean;
+    load: () => Promise<TModule>;
+    ref: (node: HTMLElement | null) => void;
+};
+
+type TDeferredModuleEntry<TModule> = {
+    status: 'idle' | 'loading' | 'loaded' | 'error';
+    promise?: Promise<TModule>;
+    value?: TModule;
+    error?: unknown;
+};
+
+const moduleCache = new WeakMap<TDeferredModuleLoader<unknown>, TDeferredModuleEntry<unknown>>();
+
+const getModuleEntry = <TModule>(
+    loader: TDeferredModuleLoader<TModule>,
+    cacheEnabled: boolean,
+): TDeferredModuleEntry<TModule> | undefined => {
+    if (!cacheEnabled) return undefined;
+
+    return moduleCache.get(loader) as TDeferredModuleEntry<TModule> | undefined;
+};
+
+const setModuleEntry = <TModule>(
+    loader: TDeferredModuleLoader<TModule>,
+    entry: TDeferredModuleEntry<TModule>,
+    cacheEnabled: boolean,
+) => {
+    if (!cacheEnabled) return;
+
+    moduleCache.set(loader as TDeferredModuleLoader<unknown>, entry as TDeferredModuleEntry<unknown>);
+};
+
+const getInitialState = <TModule>(loader: TDeferredModuleLoader<TModule>, cacheEnabled: boolean) => {
+    const entry = getModuleEntry(loader, cacheEnabled);
+
+    return {
+        value: entry?.value,
+        error: entry?.error,
+        isLoaded: entry?.status === 'loaded',
+        isLoading: entry?.status === 'loading',
+    };
+};
+
+export default function useDeferredModule<TModule>(
+    loader: TDeferredModuleLoader<TModule>,
+    {
+        enabled = true,
+        when = 'immediate',
+        timeoutMs = 1000,
+        rootMargin = '200px',
+        cache = true,
+    }: TDeferredModuleOptions = {},
+): TDeferredModuleResult<TModule> {
+    const mountedRef = React.useRef(true);
+    const [targetNode, setTargetNode] = React.useState<HTMLElement | null>(null);
+    const [state, setState] = React.useState(() => getInitialState(loader, cache));
+
+    React.useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+
+    React.useEffect(() => {
+        setState(getInitialState(loader, cache));
+    }, [loader, cache]);
+
+    const ref = React.useCallback(
+        (node: HTMLElement | null) => {
+            if (when !== 'visible') return;
+            setTargetNode(node);
+        },
+        [when],
+    );
+
+    const load = React.useCallback(async () => {
+        const cachedEntry = getModuleEntry(loader, cache);
+
+        if (cachedEntry?.status === 'loaded') {
+            if (mountedRef.current)
+                setState({ value: cachedEntry.value, error: undefined, isLoaded: true, isLoading: false });
+
+            return cachedEntry.value as TModule;
+        }
+
+        if (cachedEntry?.status === 'loading' && cachedEntry.promise) {
+            if (mountedRef.current) setState((current) => ({ ...current, isLoading: true }));
+
+            return cachedEntry.promise;
+        }
+
+        const promise = loader();
+        const nextEntry: TDeferredModuleEntry<TModule> = { status: 'loading', promise };
+
+        setModuleEntry(loader, nextEntry, cache);
+
+        if (mountedRef.current) setState((current) => ({ ...current, error: undefined, isLoading: true }));
+
+        try {
+            const value = await promise;
+            setModuleEntry(loader, { status: 'loaded', value }, cache);
+
+            if (mountedRef.current) setState({ value, error: undefined, isLoaded: true, isLoading: false });
+
+            return value;
+        } catch (error) {
+            setModuleEntry(loader, { status: 'error', error }, cache);
+
+            if (mountedRef.current) setState({ value: undefined, error, isLoaded: false, isLoading: false });
+
+            throw error;
+        }
+    }, [cache, loader]);
+
+    React.useEffect(() => {
+        if (!enabled || state.isLoaded || state.isLoading) return;
+
+        if (when === 'immediate') {
+            void load();
+            return;
+        }
+
+        if (when === 'idle') {
+            if (typeof window === 'undefined') return;
+
+            let cancelled = false;
+
+            if ('requestIdleCallback' in window) {
+                const idleId = window.requestIdleCallback(
+                    () => {
+                        if (!cancelled) void load();
+                    },
+                    { timeout: timeoutMs },
+                );
+
+                return () => {
+                    cancelled = true;
+                    window.cancelIdleCallback(idleId);
+                };
+            }
+
+            const timeoutId = setTimeout(() => {
+                if (!cancelled) void load();
+            }, timeoutMs);
+
+            return () => {
+                cancelled = true;
+                clearTimeout(timeoutId);
+            };
+        }
+
+        if (when === 'visible') {
+            if (typeof window === 'undefined' || !targetNode) return;
+
+            if (typeof IntersectionObserver === 'undefined') {
+                void load();
+                return;
+            }
+
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    const isVisible = entries.some((entry) => entry.isIntersecting);
+                    if (!isVisible) return;
+
+                    observer.disconnect();
+                    void load();
+                },
+                { rootMargin },
+            );
+
+            observer.observe(targetNode);
+
+            return () => observer.disconnect();
+        }
+    }, [enabled, load, rootMargin, state.isLoaded, state.isLoading, targetNode, timeoutMs, when]);
+
+    return { ...state, load, ref };
+}

package/client/pages/_layout/index.tsx

@@ -13,31 +13,23 @@ import { ClientContext } from '@/client/context';
 // Core components
 
 // Resources
-import "./index.less";
+import './index.less';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default function App ({ context, menu }: { 
-    context: ClientContext,
-    menu: ComponentChild
-}) {
-
+export default function App({ context, menu }: { context: ClientContext; menu?: ComponentChild }) {
     const { Router, page, toast } = context;
 
     return (
         <div id="internaLlayout">
-
             <div class="center row al-fill">
-
                 <RouterComponent service={Router} />
-                
             </div>
         </div>
-    )
-}
+    );
+}

package/client/pages/useHeader.tsx

@@ -9,42 +9,35 @@ import useContext from '@/client/context';
 - TYPES
 ----------------------------------*/
 export type Props = {
-    id?: string,
-    focus?: boolean,
-    jail?: boolean,
-    error?: boolean,
+    id?: string;
+    focus?: boolean;
+    jail?: boolean;
+    error?: boolean;
 
-    title: string,
-    subtitle?: string,
-    description?: string,
-}
+    title: string;
+    subtitle?: string;
+    description?: string;
+};
 
 /*----------------------------------
 - HOOK
 ----------------------------------*/
 export default ({ id, title, subtitle, focus, jail, description }: Props) => {
-
     let { page } = useContext();
 
     // page est supposé ne pas être undefined
-    if (!page)
-        return;
+    if (!page) return;
 
     // SEO Title
     page.title = title;
-    if (subtitle !== undefined)
-        page.title += ' | ' + subtitle;
+    if (subtitle !== undefined) page.title += ' | ' + subtitle;
 
     // SEO Description
-    if (description !== undefined)
-        page.description = description;
+    if (description !== undefined) page.description = description;
 
     page.bodyId = page.bodyId || id || '';
 
-    if (focus)
-        page.bodyClass.add('focus');
+    if (focus) page.bodyClass.add('focus');
 
-    if (jail)
-        page.bodyClass.add('jail');
-    
-}
+    if (jail) page.bodyClass.add('jail');
+};

package/client/router.ts

@@ -0,0 +1,27 @@
+import type Router from '@client/services/router';
+
+const getRouter = (): Router => {
+    if (typeof window === 'undefined') {
+        throw new Error(`Client router is not available on the server.`);
+    }
+
+    const router = (window.app as (Record<string, unknown> & { Router?: Router }) | undefined)?.Router;
+    if (!router) {
+        throw new Error(`Client router was accessed before the application booted.`);
+    }
+
+    return router;
+};
+
+const ClientRouter = new Proxy({} as Router, {
+    get(_target, property) {
+        const value = getRouter()[property as keyof Router];
+        return typeof value === 'function' ? value.bind(getRouter()) : value;
+    },
+    set(_target, property, value) {
+        ((getRouter() as unknown) as Record<PropertyKey, unknown>)[property] = value;
+        return true;
+    },
+}) as Router;
+
+export default ClientRouter;

package/client/services/router/components/Link.tsx

@@ -7,40 +7,47 @@ import React from 'react';
 import type { ComponentChild } from 'preact';
 import { history } from '../request/history';
 
-export const shouldOpenNewTab = (url: string, target?: string) => url && (
-    target !== undefined
-    ||
-    !['/', '#'].includes(url[0])
-    || 
-    url.startsWith('//')
-)
+export const shouldOpenNewTab = (url: string, target?: string) =>
+    url && (target !== undefined || !['/', '#'].includes(url[0]) || url.startsWith('//'));
 
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
 // Simple link
-export const Link = ({ to, ...props }: { 
-    to: string,
-    children?: ComponentChild,
-    class?: string,
-    className?: string
-} & React.HTMLProps<HTMLAnchorElement>) => {
+export const Link = ({
+    to,
+    children,
+    class: classNameAttr,
+    className,
+    onClick,
+    target,
+    ...props
+}: {
+    to: string;
+    children?: ComponentChild;
+    class?: string;
+    className?: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+    const openNewTab = shouldOpenNewTab(to, typeof target === 'string' ? target : undefined);
+    const resolvedTarget = openNewTab ? '_blank' : target;
 
-    const openNewTab = shouldOpenNewTab(to, props.target);
-
-    // External = open in new tab by default
-    if (openNewTab)
-        props.target = '_blank';
-    // Otherwise, propagate to the router
-    else 
-        props.onClick = (e) => {
+    const handleClick: React.MouseEventHandler<HTMLAnchorElement> | undefined = openNewTab
+        ? onClick
+        : (e) => {
             history?.push(to);
             e.preventDefault();
-            return false
-        }
+            return false;
+        };
 
     return (
-        <a {...props} href={to} />
-    )
-
-}
+        <a
+            {...props}
+            href={to}
+            target={resolvedTarget}
+            onClick={handleClick}
+            class={classNameAttr ?? className}
+        >
+            {children}
+        </a>
+    );
+};

package/client/services/router/components/Page.tsx

@@ -15,19 +15,15 @@ import type Page from '../response/page';
 ----------------------------------*/
 
 export default ({ page }: { page: Page }) => {
-
     /*----------------------------------
     - CONTEXT
     ----------------------------------*/
     const context = useContext();
 
     // Bind data
-    const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( page.data || {});
+    const [apiData, setApiData] = React.useState<{ [k: string]: any } | null>(page.data || {});
     page.setAllData = setApiData;
-    const fullData = {
-        ...context.data,
-        ...apiData
-    }
+    const fullData = { ...context.data, ...apiData };
 
     // Temporary fix: context.page may not be updated at this stage
     //  Seems to be the case when we change page, but still same page component with different data
@@ -38,18 +34,14 @@ export default ({ page }: { page: Page }) => {
 
     // Page component has not changed, but data were updated (ex: url parameters change)
     React.useEffect(() => {
-
         setApiData(page.data);
-
     }, [page.data]);
 
+    const rendererProps = { ...context, ...fullData } as Parameters<NonNullable<typeof page.renderer>>[0];
+
     /*----------------------------------
     - RENDER
     ----------------------------------*/
     //  Make request parameters and api data accessible from the page component
-    return page.renderer ? (
-
-        <page.renderer {...context} />
-        
-    ) : <>Renderer missing</>
-}
+    return page.renderer ? <page.renderer {...rendererProps} /> : <>Renderer missing</>;
+};

package/client/services/router/components/router.ssr.tsx

@@ -0,0 +1,36 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import useContext from '@/client/context';
+
+// Specific
+import type ClientRouter from '..';
+import PageComponent from './Page';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type TProps = { service?: ClientRouter; loaderComponent?: React.ComponentType<{ isLoading: boolean }> };
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+export default function RouterComponent({ service: _clientRouter, loaderComponent: _loaderComponent }: TProps) {
+    const context = useContext();
+    const currentPage = context.page;
+
+    if (!currentPage) return null;
+
+    return (
+        <PageComponent
+            page={currentPage as Parameters<typeof PageComponent>[0]['page']}
+            key={currentPage.chunkId === undefined ? undefined : 'page_' + currentPage.chunkId}
+        />
+    );
+}