@sitecore-feaas/clientside 0.0.9 → 0.1.0

package/tsconfig.json

@@ -1,12 +1,17 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "strict": false /* Enable all strict type-checking options. */,
     "declaration": true,
-    "forceConsistentCasingInFileNames": false,
     "outDir": "dist",
-    "types": ["react", "react-dom"]
+    "rootDir": "src",
+    "tsBuildInfoFile": "./types/tsbuildinfo",
+    "declarationDir": "./types"
   },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["../**/node_modules", "../**/dist", "../**/build"]
+  "references": [
+    {
+      "path": "../sdk"
+    }
+  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["scripts/**", "test/**", "types/**", "build/**", "dist/**", "node_modules/**"]
 }

package/types/basic.d.ts

@@ -0,0 +1,5 @@
+export * from './dom.js';
+export * from './fetch.js';
+export * from './components/FEAASLoader.js';
+export * from './components/FEAASStylesheet.js';
+export * from './components/FEAASComponent.js';

package/types/cloud.d.ts

@@ -0,0 +1,18 @@
+export interface CloudTemplate {
+    cdn?: string;
+    hostname?: string;
+    library: string;
+    component: string;
+    version: string;
+    revision?: string;
+}
+export interface CloudStylesheet {
+    cdn?: string;
+    hostname?: string;
+    library: string;
+    revision?: 'staging' | 'published' | 'saved' | number;
+}
+export declare function getComponentURL({ cdn, hostname, library, component, version, revision }: CloudTemplate): string;
+export declare function getStylesheetURL({ cdn, hostname, library, revision }: CloudStylesheet): string;
+export declare function fetchComponent(props: CloudTemplate, callback: (html: string) => void): Promise<Response>;
+export declare function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void): Promise<Response>;

package/types/components/FEAASBase.d.ts

@@ -0,0 +1,70 @@
+import { ReactElement, ReactNode } from 'react';
+import type React from 'react';
+export declare type OptionalExcept<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>;
+export declare class FEAASBase<Props = any, Payload = any> extends HTMLElement {
+    static observedAttributes: string[];
+    /** Return attributes as parsed values */
+    getProps(context?: HTMLElement): any;
+    /** Properties parsed in current tick */
+    props: Props;
+    overrides: Props;
+    /** Timer until next tick */
+    nextRender: number;
+    /** Is/was component in the dom? */
+    connected: Event;
+    /** Result of lazy loading */
+    payload: Payload;
+    refs: Record<string, FEAASBase>;
+    descendants: FEAASBase[];
+    /** Attaches shadow root if getShadowRootOptions any settings, or uses element itself */
+    getRoot(): FEAASBase | HTMLElement | ShadowRoot;
+    /** Attribute changes trigger props parsing and schedules re-rendering */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Components parses its attributes when connected, and schedules rendeirng */
+    connectedCallback(): void;
+    /** Nothing special happens on disconnect, except setting a flag */
+    disconnectedCallback(): void;
+    /** Catch-all event handler that dispatches events to callback */
+    handleEvent(event: Event): void;
+    /** Act on children element being removed */
+    orphanCallback(event: Event): void;
+    /** Act on children element being added */
+    adoptedCallback(event: Event): boolean | void;
+    getComponentName(): string;
+    /**
+     * Check if lazy component is ready to be loaded. For example a component may stay unloaded unless certain attributes
+     * are set
+     */
+    isReadyToLoad(): boolean;
+    /** Load lazy component & render */
+    reify(): Promise<void>;
+    /** Invoke preloading logic that needs to finish before component can render */
+    load(): Promise<any>;
+    /** Payload is inside onLoad callback. For web components that use react, it has to provide React & ReactDOM props */
+    onLoad: (payload: Payload) => void;
+    /**
+     * Component-specific logic that updates the DOM. Default render implementation assume react rendering, in that case
+     * the component needs to provide React & ReactDOM references in its payload. Web component redefine its render to not
+     * use react at all
+     */
+    render(nested?: boolean): any;
+    invokeReactRendering(): ReactNode;
+    reactWrapper: (props?: any) => ReactNode;
+    getReactWrapper(target?: FEAASBase, displayName?: string): (props?: any) => any;
+    uid: string;
+    getUID(): string;
+    forceUpdateReact: (node?: ReactNode) => void;
+    /**
+     * Render method that is pretty much the same as React Functional component, but with extra second argument for
+     * payload (usually result of import, it is expected to have React in scope).
+     */
+    renderReact?(props: React.PropsWithChildren<typeof this.props>, payload: typeof this.payload): ReactNode | ReactElement;
+    getReactRoot(): HTMLElement | ShadowRoot;
+    /** Set props and return values on new next tick */
+    set(overrides?: Partial<Props>): void;
+    /** Schedule rendering on next tick, to batch multiple attribute changes */
+    scheduleRender(): void;
+    formatURL(src: string, hostname: string): string;
+    getContextAttribute(name: string, element?: this): string;
+    static register(tagName: string): void;
+}

package/types/components/FEAASComponent.d.ts

@@ -0,0 +1,39 @@
+import { FEAASBase, OptionalExcept } from './FEAASBase.js';
+export declare function FEAASComponentsProps(element?: FEAASBase): {
+    data: any;
+    library: string;
+    component: string;
+    version: string;
+    revision: string;
+    hostname: string;
+    cdn: string;
+    template: string;
+};
+export declare type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>;
+export declare class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
+    static observedAttributes: string[];
+    needsRefresh: boolean;
+    setData(data: any): void;
+    getProps(): {
+        data: any;
+        library: string;
+        component: string;
+        version: string;
+        revision: string;
+        hostname: string;
+        cdn: string;
+        template: string;
+    };
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    getOriginal(): FEAASComponent;
+    isReadyToLoad(): boolean;
+    load(): Promise<void>;
+    render(): void;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-component': OptionalExcept<FEAASComponentsProps, 'component' | 'version' | 'revision'>;
+        }
+    }
+}

package/types/components/FEAASContext.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" resolution-mode="require"/>
+import type * as FEAASContextImports from '@sitecore-feaas/frontend/src/components/providers/ContextProvider.jsx';
+import { FEAASBase, OptionalExcept } from './FEAASBase.jsx';
+export declare function FEAASContextProps(element?: HTMLElement): {
+    library: string;
+    src: string;
+    frontend: string;
+    backend: string;
+    cdn: string;
+    getToken: (options: any) => Promise<string>;
+};
+declare type FEAASContextProps = ReturnType<typeof FEAASContextProps>;
+/**
+ * Context provides shared parameters and react providers for its nested elements. It loads lazily once any of its
+ * nested components load. Just placing it on the page without any consumers does not impose any overhead.
+ */
+export declare class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASContextImports> {
+    static observedAttributes: string[];
+    getProps(): {
+        library: string;
+        src: string;
+        frontend: string;
+        backend: string;
+        cdn: string;
+        getToken: (options: any) => Promise<string>;
+    };
+    load(): Promise<any>;
+    getTheme(theme: FEAASContextImports.Chakra.Theme): FEAASContextImports.Chakra.Theme;
+    getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot;
+    reactRoot: HTMLDivElement;
+    getReactRoot(): HTMLDivElement;
+    /** Pull in children FEAAS react elements into the shadow DOM so they receieve the styles */
+    adoptedCallback(event: Event): void;
+    renderReact({ children, library }: React.PropsWithChildren<FEAASContextProps>, { AppContext, Chakra: { Button, Tooltip }, React: { useRef } }: typeof this.payload): JSX.Element;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-context': OptionalExcept<FEAASContextProps, 'library'>;
+        }
+    }
+}
+export {};

package/types/components/FEAASEditor.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" resolution-mode="require"/>
+import type * as FEAASEditorImports from '@sitecore-feaas/frontend/src/components/editor/Editor.jsx';
+import { FEAASBase, OptionalExcept } from './FEAASBase.js';
+export declare function getFramePosition(element: HTMLElement): {
+    left: number;
+    top: number;
+};
+export declare function FEAASEditorProps(element?: FEAASBase): {
+    context: {
+        new (): HTMLElement;
+        prototype: HTMLElement;
+    };
+    frontend: string;
+    src: string;
+    library: string;
+    component: string;
+    version: string;
+    revision: string;
+    hidden: boolean;
+    for: string;
+};
+declare type FEAASEditorProps = ReturnType<typeof FEAASEditorProps>;
+declare type Rect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export declare class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorImports> {
+    chrome: HTMLElement;
+    wrapper: HTMLElement;
+    framePoint: Pick<Rect, 'top' | 'left'>;
+    wrapperRect: Rect;
+    bodyRect: Rect;
+    getProps(): {
+        context: {
+            new (): HTMLElement;
+            prototype: HTMLElement;
+        };
+        frontend: string;
+        src: string;
+        library: string;
+        component: string;
+        version: string;
+        revision: string;
+        hidden: boolean;
+        for: string;
+    };
+    getTarget: () => HTMLElement;
+    load(): Promise<any>;
+    onChromeMeasureElement: (element: HTMLElement, rect?: Rect) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    onBeforeMeasure: FEAASEditorImports.EditorContext['onChromeBeforeMeasure'];
+    onMeasure: FEAASEditorImports.EditorContext['onChromeMeasure'];
+    onPosition: FEAASEditorImports.EditorContext['onChromePosition'];
+    renderReact({ children, component: componentId, version: versionId }: React.PropsWithChildren<FEAASEditorProps>, { Editor, VersionStatusList, Version, EditorUIUndo, EditorUIMode, React: { useEffect, useMemo, useState }, Chakra: { HStack, Box }, Chrome, ReactDOM, useSDK, useSlots, useModelObserver }: typeof FEAASEditorImports): FEAASEditorImports.React.ReactElement<any, string | FEAASEditorImports.React.JSXElementConstructor<any>>;
+    isReadyToLoad(): boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-editor': OptionalExcept<FEAASEditorProps, 'component' | 'version'>;
+        }
+    }
+}
+export {};

package/types/components/FEAASLoader.d.ts

@@ -0,0 +1,20 @@
+import { FEAASBase } from './FEAASBase.js';
+export declare function FEAASLoaderProps(element?: HTMLElement): {
+    hidden: boolean;
+};
+declare type FEAASLoaderProps = ReturnType<typeof FEAASLoaderProps>;
+export declare class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
+    stylesheet: HTMLStyleElement;
+    loader: HTMLDivElement;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-loader': any;
+        }
+    }
+}
+export {};

package/types/components/FEAASPicker.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" resolution-mode="require"/>
+import type * as FEAASPickerImports from '@sitecore-feaas/frontend/src/components/picker/Picker.jsx';
+import { FEAASBase } from './FEAASBase.js';
+export declare function FEAASPickerProps(element?: FEAASBase<any, any>): {
+    part: string;
+    slot: string;
+    mode: "library" | "stylesheet";
+    frontend: string;
+    src: string;
+    hidden: boolean;
+    context: HTMLElement | import("@ckeditor/ckeditor5-engine").Element;
+    onClose: (...args: any[]) => {};
+};
+declare type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>;
+export declare class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerImports> {
+    getProps(): {
+        part: string;
+        slot: string;
+        mode: "library" | "stylesheet";
+        frontend: string;
+        src: string;
+        hidden: boolean;
+        context: HTMLElement | import("@ckeditor/ckeditor5-engine").Element;
+        onClose: (...args: any[]) => {};
+    };
+    load(): Promise<any>;
+    renderReact({ context, mode, children }: React.PropsWithChildren<FEAASPickerProps>, { Picker, React, ReactDOM }: typeof FEAASPickerImports): JSX.Element;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-picker': Partial<typeof FEAASPickerImports>;
+            'feaas-picker-lazy': Partial<typeof FEAASPickerImports>;
+        }
+    }
+}
+export declare function FEAASPickerLazyProps(element?: FEAASBase<any, any>): {
+    library: string;
+    mode: "library" | "stylesheet";
+    frontend: string;
+    src: string;
+    hidden: boolean;
+    context: HTMLElement | import("@ckeditor/ckeditor5-engine").Element;
+    getToken: (options: any) => Promise<string>;
+};
+declare type FEAASPickerLazyProps = ReturnType<typeof FEAASPickerLazyProps>;
+export declare class FEAASPickerLazy extends FEAASBase<FEAASPickerLazyProps, typeof FEAASPickerImports> {
+    payload: any;
+    getProps(): {
+        library: string;
+        mode: "library" | "stylesheet";
+        frontend: string;
+        src: string;
+        hidden: boolean;
+        context: HTMLElement | import("@ckeditor/ckeditor5-engine").Element;
+        getToken: (options: any) => Promise<string>;
+    };
+    onClose: () => void;
+    render(): void;
+}
+export {};

package/types/components/FEAASStylesheet.d.ts

@@ -0,0 +1,25 @@
+import { FEAASBase } from './FEAASBase.js';
+export declare function FEAASStylesheetProps(element?: FEAASBase): {
+    library: string;
+    revision: number | "published" | "staging" | "saved";
+    cdn: string;
+};
+export declare type FEAASStylesheetProps = ReturnType<typeof FEAASStylesheetProps>;
+export declare class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, string> {
+    stylesheet: HTMLStyleElement;
+    getProps(): {
+        library: string;
+        revision: number | "published" | "staging" | "saved";
+        cdn: string;
+    };
+    isReadyToLoad(): boolean;
+    load(): Promise<void>;
+    render(): void;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-stylesheet': Partial<FEAASStylesheetProps>;
+        }
+    }
+}

package/types/components/index.d.ts

@@ -0,0 +1,7 @@
+export { FEAASBase } from './FEAASBase.jsx';
+export { FEAASComponent } from './FEAASComponent.js';
+export { FEAASContext } from './FEAASContext.jsx';
+export { FEAASEditor } from './FEAASEditor.jsx';
+export { FEAASLoader } from './FEAASLoader.js';
+export { FEAASPicker } from './FEAASPicker.jsx';
+export { FEAASStylesheet } from './FEAASStylesheet.js';

package/types/dom.d.ts

@@ -0,0 +1,29 @@
+import { CloudStylesheet, CloudTemplate } from './cloud.js';
+export interface FEAASCustomizations {
+    processTemplate?: (element: HTMLElement, template: string, data: any) => string;
+    processData?: (element: HTMLElement, data: any) => any;
+    processValue?: (element: HTMLElement, property: string, value: any) => any;
+    shouldRepeat?: (element: HTMLElement, value: any) => boolean;
+    onRender?: (element: HTMLElement, data: any) => void;
+}
+export interface ExplicitTemplate {
+    template: string;
+}
+export declare type Datascopes = Record<string, any>;
+export declare type FEAASComponentProps = {
+    data?: Datascopes;
+} & (ExplicitTemplate | CloudTemplate) & FEAASCustomizations;
+export declare function renderComponentElement(content: string, datasources?: Datascopes): HTMLDivElement;
+export declare function cleanCollectionBit(path: string): string;
+export declare function normalizeCollectionScope(path: string): string;
+export declare function queryScopes(scopes: any, datapath: string, singleValue?: boolean, json?: any): any;
+export declare function setDOMAttribute(element: HTMLElement, attribute: string, value: any, config?: FEAASCustomizations): void;
+export declare function observeDOMElement(element: HTMLElement): MutationObserver;
+export declare function autoloadScripts(element: HTMLElement, observe?: boolean): MutationObserver;
+export declare function loadScript(element: HTMLElement, src: string): boolean;
+export declare function renderDOMElement(input: HTMLElement | DocumentFragment, datascopes?: any, config?: FEAASCustomizations, isNested?: boolean): HTMLElement;
+export declare function renderDOMContent(root: HTMLElement, template: string, data?: Datascopes, config?: FEAASCustomizations): HTMLElement;
+export declare function renderStylesheet(props: CloudStylesheet, style?: HTMLStyleElement): HTMLStyleElement;
+export declare function renderStylesheetPromise(props: CloudStylesheet, style?: HTMLStyleElement): Promise<HTMLStyleElement>;
+export declare function renderComponent(props: FEAASComponentProps, root?: HTMLElement): HTMLElement;
+export declare function renderComponentPromise(props: FEAASComponentProps, root?: HTMLElement): Promise<HTMLElement>;

package/types/fetch.d.ts

@@ -0,0 +1 @@
+export declare function fetchAndRevalidate(url: Parameters<typeof fetch>[0], options: Parameters<typeof fetch>[1], validator: (resposne: Response) => boolean, callback: (response: Response, status: 'cached' | 'valid') => void): Promise<Response>;

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './basic.js';
+export * from './components/FEAASEditor.jsx';
+export * from './components/FEAASPicker.jsx';
+export * from './components/FEAASContext.jsx';