jopijs 0.0.1

package/src/@ui/components.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {_usePage} from "./hooks.tsx";
+
+//region Composite
+
+type CompositeRenderer = (name: string) => React.ReactElement;
+
+function defaultCompositeRenderer() {
+    return <></>;
+}
+
+function resolveCompositeRenderer(): CompositeRenderer {
+    let bound = (globalThis as any)["_JOPI_COMPOSITE_RENDERER_"];
+    if (bound) return bound as CompositeRenderer;
+    return defaultCompositeRenderer;
+}
+
+/**
+ * -- Do not use --
+ * Allows the server part to hook the composite renderer used.
+ */
+export function _setCompositeRenderer(r: CompositeRenderer) {
+    gCompositeRenderer = r;
+}
+
+/**
+ * This component allows inserting the value of a 'composite'.
+ * A composite is an extension point for your UI, it allows
+ * inserting a thing into a region of your UI by extending his
+ * content through plugins.
+ *
+ * Composites are not defined through API!!!
+ * When declaring a module, the engine scans your folder uiComposites.
+ *
+ * Example:
+ * `/modules/myModule/uiComposite/page.logInError/extA.extension.tsx`
+ * - `page.logInError` is the name of the composite you extend.
+ * - `extA` is the name of the extension point (it has no usage).
+ *
+ * Inside `extA.extension.tsx` the default export is the component to insert.
+ */
+export function Composite({name}: {name: string}) {
+    if (!gCompositeRenderer) gCompositeRenderer = resolveCompositeRenderer();
+    return gCompositeRenderer(name);
+}
+
+let gCompositeRenderer: CompositeRenderer|undefined;
+
+//endregion

package/src/@ui/cssModules.tsx

@@ -0,0 +1,27 @@
+// noinspection JSUnusedGlobalSymbols
+
+import React from "react";
+
+export type HandlerBundleExternalCss = (importMeta: any, cssFilePath: string) => void;
+
+export function setHandler_bundleExternalCss(listener: HandlerBundleExternalCss) {
+    gHandler_bundleExternalCss = listener;
+}
+
+export const CssModule: React.FC<{module: any}> = ({module}) => {
+    return <style>{module.__CSS__}</style>;
+};
+
+export interface UseCssModuleContextProps {
+    jopiUseCssModule?: Record<string, any>;
+}
+
+export function getCssModuleStyle(cssModule: undefined | Record<string, string>): string {
+    return cssModule ? cssModule.__CSS__ : "";
+}
+
+export function mustBundleExternalCss(importMeta: any, cssFilePath: string) {
+    gHandler_bundleExternalCss(importMeta, cssFilePath);
+}
+
+let gHandler_bundleExternalCss: HandlerBundleExternalCss = () => {};

package/src/@ui/hooks.tsx

@@ -0,0 +1,95 @@
+// noinspection JSUnusedGlobalSymbols
+
+import React, {useEffect} from "react";
+import {PageContext, PageController, PageController_ExposePrivate} from "./pageController.ts";
+import {CssModule, type UseCssModuleContextProps} from "./cssModules.tsx";
+import * as jk_events from "jopi-toolkit/jk_events";
+
+/**
+ * Allow getting a reference to the PageController.
+ * **USING IT MUST BE AVOIDED** since it's a technical item.
+ * It's the reason of the underscore.
+ */
+export function _usePage<T = any>(): PageController<T> {
+    let res = React.useContext(PageContext) as PageController<T>;
+
+    // Not wrapped inside a PageContext?
+    if (!res) {
+        res = new PageController<T>(true);
+    }
+
+    return res;
+}
+
+/**
+ * Allows setting the page title.
+ * @param title
+ */
+export function usePageTitle(title: string) {
+    const page = React.useContext(PageContext) as PageController;
+    if (page) page.setPageTitle(title);
+}
+
+export function useCssModule(cssModule: undefined | Record<string, string>) {
+    if (!cssModule) return;
+
+    // Not a real CSS Module?
+    const fileHash = cssModule.__FILE_HASH__;
+    if (!fileHash) return;
+
+    const ctx = _usePage<UseCssModuleContextProps>();
+
+    // Will allow knowing if the module is already inserted for this page.
+    if (!ctx.data.jopiUseCssModule) ctx.data.jopiUseCssModule = {};
+
+    // Not already added? Then add it.
+    if (fileHash && !ctx.data.jopiUseCssModule[fileHash]) {
+        ctx.data.jopiUseCssModule![fileHash] = true;
+
+        // Will allow inlining the style inside the page.
+        ctx.addToBodyBegin(fileHash, <CssModule key={fileHash} module={cssModule}/>);
+    }
+}
+
+/**
+ * Is a subset of JopiRequest, with only browser-side compatible items.
+ */
+export interface ServerRequestInstance {
+    urlParts?: Record<string, any>;
+    urlInfos: URL;
+    customData: any;
+
+    user_getJwtToken(): string | undefined;
+
+    headers: Headers;
+    cookie_reqHasCookie(name: string, value?: string): boolean;
+    cookie_getReqCookie(name: string): string | undefined;
+}
+
+export function useServerRequest(): ServerRequestInstance {
+    let page = _usePage();
+    return (page as PageController_ExposePrivate).getServerRequest();
+}
+
+/**
+ * Allows listening to an event, and automatically
+ * unregister when the component unmount.
+ */
+export function useEvent(evenName: string|string[], listener: (data: any) => void) {
+    useEffect(() => {
+        if (evenName instanceof Array) {
+            evenName.forEach(e => {
+                jk_events.addListener(e, listener);
+            });
+
+            return () => {
+                evenName.forEach(e => {
+                    jk_events.removeListener(e, listener);
+                });
+            }
+        }
+
+        jk_events.addListener(evenName, listener);
+        return () => { jk_events.removeListener(evenName, listener) };
+    }, [evenName, listener]);
+}

package/src/@ui/index.ts

@@ -0,0 +1,13 @@
+import {isBrowser} from "jopi-toolkit/jk_what";
+
+export * from "./tools.ts";
+export * from "./pageController.ts";
+export * from "./cssModules.tsx";
+
+export * from "./components.tsx";
+export * from "./hooks.tsx";
+export * from "./modules.ts";
+export * from "./objectRegistry.ts";
+
+export const isBrowserSide = isBrowser;
+export const isServerSide = !isBrowser;

package/src/@ui/internal.ts

@@ -0,0 +1,12 @@
+import type {ComponentAliasDef} from "./modules.ts";
+import {PageContext, PageController} from "./pageController.ts";
+import React from "react";
+
+export const gComponentAlias: Record<string, ComponentAliasDef> = {};
+
+export function getDefaultPageController(): PageController {
+    if (!gDefaultPageController) gDefaultPageController = new PageController();
+    return gDefaultPageController!;
+}
+
+let gDefaultPageController: PageController|undefined;

package/src/@ui/modules.ts

@@ -0,0 +1,100 @@
+// noinspection JSUnusedGlobalSymbols
+
+import * as jk_events from "jopi-toolkit/jk_events";
+import {type UiUserInfos} from "./tools.ts";
+import React from "react";
+import {isServerSide} from "jopi-toolkit/jk_what";
+import {type IsObjectRegistry} from "./objectRegistry.ts";
+import {getDefaultPageController} from "./internal.ts";
+
+export interface ModuleInitContext_Host {
+    objectRegistry: IsObjectRegistry;
+
+    getCurrentURL(): URL;
+    getUserInfos(): UiUserInfos|undefined;
+    mustRemoveTrailingSlashs: boolean;
+
+    events: jk_events.EventGroup;
+}
+
+export interface ComponentAliasDef {
+    alias: string;
+    component: React.ComponentType<any>;
+}
+
+type UiInitializer = () => void;
+
+/**
+ * This class is what is sent as the default export function
+ * of your module `uiInit.tsx`. It allows configuring things
+ * allowing your plugin to initialize your UI.
+ * 
+ * * On the server side, it's executed for each page.
+ * * On the browser side, it's executed for each browser refresh.
+ */
+export class ModuleInitContext {
+    public readonly objectRegistry: IsObjectRegistry;
+    public readonly events: jk_events.EventGroup;
+    public readonly isBrowserSide: boolean = !isServerSide;
+    protected readonly host: ModuleInitContext_Host;
+
+    constructor(host?: ModuleInitContext_Host) {
+        if (!host) host = getDefaultPageController();
+        this.host = host;
+
+        this.objectRegistry = host.objectRegistry;
+        this.events = host.events;
+
+        this.initialize();
+    }
+
+    protected initialize() {
+        // Will be overridden.
+    }
+
+    getCurrentURL(): URL {
+        return this.host.getCurrentURL();
+    }
+
+    addUiInitializer(priority: UiInitializer|jk_events.EventPriority, initializer?: UiInitializer|undefined) {
+        this.events.addListener("app.init.ui", priority, initializer);
+    }
+
+    getUserInfos(): UiUserInfos|undefined {
+        return this.host.getUserInfos();
+    }
+
+    getUserRoles(): string[] {
+        let userInfos = this.getUserInfos();
+        if (!userInfos) return [];
+        return userInfos.roles || [];
+    }
+
+    userHasRoles(roles: string[]): boolean {
+        if (roles.length === 0) return true;
+
+        let userInfos = this.getUserInfos();
+        if (!userInfos) return false;
+
+        let userRoles = userInfos.roles;
+        if (!userRoles) return false;
+
+        return !!roles.every(role => userRoles.includes(role));
+    }
+
+    ifUserHasRoles(roles: string[], f: (userInfos: UiUserInfos) => void): void {
+        if (this.userHasRoles(roles)) {
+            f(this.getUserInfos()!);
+        }
+    }
+
+    ifUserLoggedIn(f: (userInfos: UiUserInfos) => void) {
+        let userInfos = this.getUserInfos();
+        if (!userInfos) return;
+        return f(userInfos);
+    }
+
+    ifNotUserLoggedIn(f: () => Promise<void>) {
+        if (!this.getUserInfos()) f();
+    }
+}

package/src/@ui/objectRegistry.ts

@@ -0,0 +1,50 @@
+export interface IsObjectRegistry {
+    getObject<T>(name: string): T|undefined;
+    registerObject(name: string, instance: any): void;
+    addObjectBuilder<T>(name: string, builder: () => T): void;
+}
+
+interface ObjectRegistryEntry {
+    builder?: () => any;
+    instance?: any;
+}
+
+export class ObjectRegistry implements IsObjectRegistry {
+    private readonly r: Record<string, ObjectRegistryEntry> = {};
+
+    getObject<T>(name: string): T|undefined {
+        let entry = this.r[name];
+        if (!entry) return undefined;
+
+        if (entry.instance!==undefined) return entry.instance as T;
+
+        if (entry.builder) {
+            entry.instance = entry.builder();
+            return entry.instance as T;
+        }
+
+        return undefined;
+    }
+
+    registerObject(name: string, instance: any): void {
+        let entry = this.r[name];
+        if (!entry) this.r[name] = entry = {};
+        entry.instance = instance;
+    }
+
+    addObjectBuilder<T>(name: string, builder: () => T): void {
+        let entry = this.r[name];
+        if (!entry) this.r[name] = entry = {};
+        entry.builder = builder;
+    }
+}
+
+export function getDefaultObjectRegistry(): IsObjectRegistry {
+    if (!gObjectRegistry) {
+        return gObjectRegistry = new ObjectRegistry();
+    }
+
+    return gObjectRegistry;
+}
+
+let gObjectRegistry: ObjectRegistry|undefined;

package/src/@ui/pageController.ts

@@ -0,0 +1,203 @@
+// noinspection JSUnusedGlobalSymbols
+
+import React from "react";
+import {type ServerRequestInstance} from "./hooks.tsx";
+import {decodeJwtToken, decodeUserInfosFromCookie, isUserInfoCookieUpdated, deleteCookie, type UiUserInfos} from "./tools.ts";
+import * as jk_events from "jopi-toolkit/jk_events";
+import type {ModuleInitContext_Host} from "./modules.ts";
+import {isServerSide} from "jopi-toolkit/jk_what";
+import {getDefaultObjectRegistry, type IsObjectRegistry, ObjectRegistry} from "./objectRegistry.ts";
+
+export interface PageOptions {
+    pageTitle?: string;
+    head?: React.ReactNode[];
+    bodyBegin?: React.ReactNode[];
+    bodyEnd?: React.ReactNode[];
+
+    htmlProps?: Record<string, any>;
+    bodyProps?: Record<string, any>;
+    headProps?: Record<string, any>;
+}
+
+/**
+ * Page controller is an object that can be accessed
+ * from any React component from the `_usePage`hook.
+ */
+export class PageController<T = any> implements ModuleInitContext_Host {
+    private readonly isServerSide: boolean = isServerSide;
+    private readonly usedKeys = new Set<String>();
+    protected state: PageOptions;
+    protected serverRequest?: ServerRequestInstance;
+    protected userInfos?: UiUserInfos;
+
+    public readonly events = isServerSide ? jk_events.newEventGroup() : jk_events.defaultEventGroup;
+    public readonly objectRegistry: IsObjectRegistry = isServerSide ? new ObjectRegistry() : getDefaultObjectRegistry();
+
+    constructor(public readonly isDetached = false, public readonly mustRemoveTrailingSlashs: boolean = false, options?: PageOptions) {
+        options = options || {};
+
+        this.state = {...options};
+    }
+
+    /**
+     * Allow storing custom data inside the page context.
+     */
+    data: T = {} as unknown as T;
+
+    //region ModuleInitContext_Host
+
+    /**
+     * Return the current page url.
+     * For server-side: correspond to the url of the request.
+     * For browser-side: is the navigateur url.
+     */
+    public getCurrentURL(): URL {
+        if (this.serverRequest) {
+            return this.serverRequest.urlInfos;
+        }
+
+        return new URL(window.location.href);
+    }
+
+    public getUserInfos(): UiUserInfos|undefined {
+        if (isServerSide) return this.userInfos;
+
+        if (!this.userInfos) {
+            this.userInfos = decodeUserInfosFromCookie();
+        }
+
+        return this.userInfos;
+    }
+
+    //endregion
+
+    //region Page options (header/props/...)
+
+    public addToHeader(key: string, entry: React.ReactNode) {
+        if (this.isServerSide) {
+            if (!this.checkKey("h" + key)) return this;
+            if (!this.state.head) this.state.head = [entry];
+            else this.state.head.push(entry);
+        } else {
+            // No browser-side support.
+            // Why? Because React router only replaces the body.
+        }
+
+        return this;
+    }
+
+    public addToBodyBegin(key: string, entry: React.ReactNode) {
+        if (!this.checkKey("b" + key)) return this;
+
+        if (!this.state.bodyBegin) this.state.bodyBegin = [entry];
+        else this.state.bodyBegin.push(entry);
+
+        // Required to trigger a browser-side refresh of the body.
+        this.onStateUpdated(this.state);
+        return this;
+    }
+
+    public addToBodyEnd(key: string, entry: React.ReactNode) {
+        if (!this.checkKey("e" + key)) return this;
+
+        if (!this.state.bodyEnd) this.state.bodyEnd = [entry];
+        else this.state.bodyEnd.push(entry);
+
+        // Required to trigger a browser-side refresh of the body.
+        this.onStateUpdated(this.state);
+        return this;
+    }
+
+    public setHeadTagProps(key: string, value: any) {
+        if (this.isServerSide) {
+            if (!this.state.headProps) this.state.headProps = {};
+            this.state.headProps[key] = value;
+        }
+
+        return this;
+    }
+
+    public setHtmlTagProps(key: string, value: any) {
+        if (this.isServerSide) {
+            if (!this.state.htmlProps) this.state.htmlProps = {};
+            this.state.htmlProps[key] = value;
+        }
+
+        return this;
+    }
+
+    public setBodyTagProps(key: string, value: any) {
+        if (this.isServerSide) {
+            if (!this.state.bodyProps) this.state.bodyProps = {};
+            this.state.bodyProps[key] = value;
+        }
+
+        return this;
+    }
+
+    public setPageTitle(title: string) {
+        if (this.isServerSide) {
+            this.state.pageTitle = title;
+        } else {
+            document.title = title;
+        }
+
+        return this;
+    }
+
+    private checkKey(key: string) {
+        if (this.usedKeys.has(key)) {
+            return false;
+        }
+
+        this.usedKeys.add(key);
+        return true;
+    }
+
+    //endregion
+
+    public refreshUserInfos() {
+        if (!isServerSide && isUserInfoCookieUpdated()) {
+            this.userInfos = decodeUserInfosFromCookie();
+            jk_events.sendEvent("user.infosUpdated")
+        }
+    }
+
+    public logOutUser() {
+        if (!isServerSide) {
+            deleteCookie("authorization");
+        }
+
+        this.refreshUserInfos();
+    }
+
+    onStateUpdated(_state: PageOptions) {
+        // Will be dynamically replaced.
+    }
+
+    onRequireRefresh() {
+        // Will be dynamically replaced.
+    }
+}
+
+export class PageController_ExposePrivate<T = any> extends PageController<T> {
+    getOptions(): PageOptions {
+        return this.state;
+    }
+
+    setServerRequest(serverRequest: ServerRequestInstance) {
+        this.objectRegistry.registerObject("jopi.serverRequest", serverRequest);
+
+        this.serverRequest = serverRequest;
+        this.userInfos = decodeJwtToken(serverRequest.user_getJwtToken());
+    }
+
+    getServerRequest(): ServerRequestInstance {
+        return this.serverRequest!;
+    }
+}
+
+export type PageHook = (controller: PageController_ExposePrivate<unknown>) => void;
+
+// Use undefined, otherwise the value is common for all requests when doing SSR.
+export const PageContext = React.createContext<PageController<unknown>|undefined>(undefined);

package/src/@ui/tools.ts

@@ -0,0 +1,116 @@
+import {isServerSide} from "jopi-toolkit/jk_what";
+
+//region User info
+
+export interface UiUserInfos {
+    id: string;
+
+    roles?: string[];
+    email?: string;
+
+    fullName?: string;
+    nickName?: string;
+
+    firstName?: string;
+    lastName?: string;
+
+    avatarUrl?: string;
+
+    [key: string]: any;
+}
+
+export function decodeJwtToken(jwtToken: string|undefined): UiUserInfos|undefined {
+    if (!jwtToken) return undefined;
+
+    const parts = jwtToken.split('.');
+    if (parts.length !== 3) return undefined;
+
+    const payload = parts[1];
+    const decodedPayload = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+    return JSON.parse(decodedPayload) as UiUserInfos;
+}
+
+export function isUserInfoCookieUpdated(): boolean {
+    const jwtToken = decodeNavigatorCookie("authorization");
+    return jwtToken !== gAuthorizationCookiePreviousValue;
+}
+
+export function decodeUserInfosFromCookie(): UiUserInfos|undefined {
+    if (isServerSide) {
+        return undefined;
+    }
+
+    let jwtToken = decodeNavigatorCookie("authorization");
+    gAuthorizationCookiePreviousValue = jwtToken;
+
+    return decodeJwtToken(jwtToken);
+}
+
+let gAuthorizationCookiePreviousValue = "";
+
+//endregion
+
+//region Cookies
+
+export function setCookie(name: string, value: string, maxAge?: number) {
+    if (isServerSide) return;
+
+    let cookieStr = `${name}=${value}; path=/`;
+
+    if (maxAge !== undefined) {
+        cookieStr += `; max-age=${maxAge}`;
+    }
+
+    document.cookie = cookieStr;
+}
+
+export function deleteCookie(name: string) {
+    if (isServerSide) return;
+
+    let current = decodeNavigatorCookie(name);
+    if (current === undefined) return;
+
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+
+    // Allow to be ok until document.cookie is refreshed.
+    delete gCookies![name];
+}
+
+/**
+ * Returns the value of the cookie.
+ * Works browser side and server side.
+ *
+ * @param name
+ *      The name of the cookie we want.
+ */
+export function decodeNavigatorCookie(name: string) {
+    if (isServerSide) {
+        return "";
+    }
+
+    let currentCookies = document.cookie;
+
+    if (gCookies) {
+        if (gCookieString !== currentCookies) {
+            gCookieString = currentCookies;
+            gCookies = undefined;
+        }
+    }
+
+    if (!gCookies) {
+        gCookies = {};
+
+        currentCookies.split(';').forEach(c => {
+            c = c.trim();
+            let idx = c.indexOf("=");
+            gCookies![c.substring(0, idx)] = c.substring(idx + 1);
+        });
+    }
+
+    return gCookies![name];
+}
+//
+let gCookies: undefined|Record<string, string>;
+let gCookieString = "";
+
+//endregion

package/src/@uikit/README.md

@@ -0,0 +1 @@
+It extends ui-core with optional functionalities.

package/src/@uikit/core/UiKitModule.ts

@@ -0,0 +1,20 @@
+import {ModuleInitContext} from "jopijs/ui";
+import {MenuManager} from "../menu/index.ts";
+import {getDefaultMenuManager} from "../menu/internal.ts";
+
+export class UiKitModule extends ModuleInitContext {
+    protected override initialize() {
+        this.objectRegistry.addObjectBuilder("uikit.menuManager", () => {
+            if (this.isBrowserSide) {
+                return getDefaultMenuManager();
+            }
+
+            const mustRemoveTrailingSlashs = this.host.mustRemoveTrailingSlashs;
+            return new MenuManager(mustRemoveTrailingSlashs, this.getCurrentURL());
+        });
+    }
+
+    getMenuManager(): MenuManager {
+        return this.objectRegistry.getObject<MenuManager>("uikit.menuManager")!;
+    }
+}

package/src/@uikit/core/index.ts

@@ -0,0 +1,4 @@
+export * from "./UiKitModule.ts";
+import {registerUiKit} from "./jBundler_ifServer.ts";
+
+registerUiKit();