@agnos-ui/svelte-headless 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,15 @@
+# @agnos-ui/svelte-headless
+
+[![npm](https://img.shields.io/npm/v/@agnos-ui/svelte-headless)](https://www.npmjs.com/package/@agnos-ui/svelte-headless)
+
+Headless widget library for [Svelte](https://svelte.dev/).
+
+## Installation
+
+```sh
+npm install @agnos-ui/svelte-headless
+```
+
+## Usage
+
+Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.

package/Slot.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type {SlotContent, SlotSvelteComponent} from './utils';
+	import {isSvelteComponent, useSvelteSlot} from './utils';
+	type Props = $$Generic<object>; // eslint-disable-line no-undef
+	// cf https://github.com/ota-meshi/eslint-plugin-svelte/issues/348
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	type $$Slots = {
+		default: {component: SlotSvelteComponent<Props>; props: Props};
+		slot: {props: Props};
+	};
+	export let slotContent: SlotContent<Props> = null;
+	export let props: Props;
+</script>
+
+{#if slotContent === useSvelteSlot}
+	<slot name="slot" {props} />
+{:else if typeof slotContent === 'string'}
+	{slotContent}
+{:else if slotContent && !isSvelteComponent(slotContent)}
+	{slotContent(props)}
+{:else if slotContent}
+	<slot component={slotContent} {props} />
+{/if}

package/Slot.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SlotContent, SlotSvelteComponent } from './utils';
+declare class __sveltets_Render<Props extends object> {
+    props(): {
+        slotContent?: SlotContent<Props>;
+        props: Props;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            component: SlotSvelteComponent<Props>;
+            props: Props;
+        };
+        slot: {
+            props: Props;
+        };
+    };
+}
+export type SlotProps<Props extends object> = ReturnType<__sveltets_Render<Props>['props']>;
+export type SlotEvents<Props extends object> = ReturnType<__sveltets_Render<Props>['events']>;
+export type SlotSlots<Props extends object> = ReturnType<__sveltets_Render<Props>['slots']>;
+export default class Slot<Props extends object> extends SvelteComponentTyped<SlotProps<Props>, SlotEvents<Props>, SlotSlots<Props>> {
+}
+export {};

package/index.d.ts

@@ -0,0 +1,38 @@
+export * from '@agnos-ui/core';
+export { Slot };
+import Slot from './Slot.svelte';
+export * from './utils';
+export type { SlotContent, WidgetsConfig } from './utils';
+import type { WidgetProps, WidgetState } from '@agnos-ui/core';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetPropsSlots } from './utils';
+export type AccordionWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionWidget>;
+export type AccordionProps = WidgetProps<AccordionWidget>;
+export type AccordionState = WidgetState<AccordionWidget>;
+export type AccordionSlots = WidgetPropsSlots<AccordionProps>;
+export type AccordionItemWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionItemWidget>;
+export type AccordionItemProps = WidgetProps<AccordionItemWidget>;
+export type AccordionItemState = WidgetState<AccordionItemWidget>;
+export type AccordionItemContext = AdaptSlotContentProps<import('@agnos-ui/core').AccordionItemContext>;
+export type AlertWidget = AdaptWidgetSlots<import('@agnos-ui/core').AlertWidget>;
+export type AlertProps = WidgetProps<AlertWidget>;
+export type AlertState = WidgetState<AlertWidget>;
+export type AlertSlots = WidgetPropsSlots<AlertProps>;
+export type ModalWidget = AdaptWidgetSlots<import('@agnos-ui/core').ModalWidget>;
+export type ModalProps = WidgetProps<ModalWidget>;
+export type ModalState = WidgetState<ModalWidget>;
+export type ModalContext = AdaptSlotContentProps<import('@agnos-ui/core').ModalContext>;
+export type ModalSlots = WidgetPropsSlots<ModalProps>;
+export type PaginationWidget = AdaptWidgetSlots<import('@agnos-ui/core').PaginationWidget>;
+export type PaginationProps = WidgetProps<PaginationWidget>;
+export type PaginationState = WidgetState<PaginationWidget>;
+export type PaginationContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationContext>;
+export type PaginationNumberContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationNumberContext>;
+export type PaginationSlots = WidgetPropsSlots<PaginationProps>;
+export type RatingWidget = AdaptWidgetSlots<import('@agnos-ui/core').RatingWidget>;
+export type RatingProps = WidgetProps<RatingWidget>;
+export type RatingState = WidgetState<RatingWidget>;
+export type RatingSlots = WidgetPropsSlots<RatingProps>;
+export type SelectWidget<Item> = AdaptWidgetSlots<import('@agnos-ui/core').SelectWidget<Item>>;
+export type SelectProps<Item> = WidgetProps<SelectWidget<Item>>;
+export type SelectState<Item> = WidgetState<SelectWidget<Item>>;
+export type SelectSlots<Item> = WidgetPropsSlots<SelectProps<Item>>;

package/index.js

@@ -0,0 +1,4 @@
+export * from '@agnos-ui/core';
+export { Slot };
+import Slot from './Slot.svelte';
+export * from './utils';

package/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@agnos-ui/svelte-headless",
+	"description": "Headless widget library for Svelte.",
+	"type": "module",
+	"main": "./index.js",
+	"module": "./index.js",
+	"types": "./index.d.ts",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"svelte": "./index.js"
+		}
+	},
+	"dependencies": {
+		"@agnos-ui/core": "0.0.1-alpha.1",
+		"@amadeus-it-group/tansu": "0.0.22"
+	},
+	"peerDependencies": {
+		"svelte": "*"
+	},
+	"sideEffects": false,
+	"version": "0.0.1-alpha.1",
+	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
+	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
+		"directory": "svelte/headless"
+	},
+	"keywords": [
+		"svelte",
+		"headless",
+		"components",
+		"widgets",
+		"accordion",
+		"alert",
+		"modal",
+		"pagination",
+		"rating"
+	]
+}

package/utils.d.ts

@@ -0,0 +1,77 @@
+import type { SlotContent as CoreSlotContent, WidgetsConfig as CoreWidgetsConfig, Partial2Levels, Widget, WidgetFactory, WidgetProps, WidgetSlotContext, WidgetState, WidgetsConfigStore } from '@agnos-ui/core';
+import type { ComponentType, SvelteComponent } from 'svelte';
+export declare function createPatchChangedProps<T extends object>(patchFn: (arg: Partial<T>) => void): (props: Partial<T>) => void;
+/**
+ * Key used in the Svelte context to get or set the widgets default configuration store.
+ */
+export declare const widgetsDefaultConfigKey: unique symbol;
+/**
+ * Creates in the Svelte context hierarchy a new widgets default configuration store that inherits from any widgets default configuration
+ * store already defined at an upper level in the Svelte context hierarchy.
+ * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The configuration is computed from the parent configuration in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the own$ store. The own$ store initially contains
+ * an empty object (i.e. no property from the parent is overridden). It can be changed by calling set on the store returned by this function.
+ *
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+ * default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ *
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ *
+ * @example
+ * ```ts
+ * const widgetsConfig = createWidgetsDefaultConfig((parentConfig) => {
+ *   // first step configuration: transforms the parent configuration
+ *   parentConfig.rating = parentConfig.rating ?? {};
+ *   parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+ *   return parentConfig;
+ * });
+ * widgetsConfig.set({
+ *   // second step configuration: overrides the parent configuration
+ *   rating: {
+ *     slotStar: MyCustomSlotStar
+ *   }
+ * });
+ * ```
+ */
+export declare const createWidgetsDefaultConfig: (adaptParentConfig?: ((config: Partial2Levels<WidgetsConfig>) => Partial2Levels<WidgetsConfig>) | undefined) => WidgetsConfigStore<WidgetsConfig>;
+export declare function withPatchChangedProps<T extends {
+    patch: (arg: object) => void;
+}>(api: T): T & {
+    patchChangedProps: T['patch'];
+};
+export declare const createEventDispatcher: <T extends object>() => import("svelte").EventDispatcher<{ [K in keyof T]: T[K] extends CustomEvent<infer U> ? U : never; }>;
+export type WidgetPropsProps<Props extends object> = Partial<Omit<Props, `on${string}`>>;
+export type WidgetPropsEvents<Props extends object> = {
+    [K in keyof Props & `on${string}` as K extends `on${infer U}` ? Uncapitalize<U> : never]: NonNullable<Props[K]> extends (arg: infer U) => void ? CustomEvent<U> : never;
+};
+export type WidgetPropsSlots<Props extends object> = {
+    [K in keyof Props & `slot${string}` as K extends `slot${infer U}` ? Uncapitalize<U> : never]: Props[K] extends SlotContent<infer U> ? U : never;
+};
+export type SlotsPresent<Props extends object> = {
+    [K in keyof Props & `slot${string}` as K extends `slot${infer U}` ? Uncapitalize<U> : never]: boolean;
+};
+export declare const callWidgetFactory: <W extends Widget<object, object, object, object, object>>(factory: WidgetFactory<W>, widgetName: keyof WidgetsConfig | null, slots: SlotsPresent<Omit<WidgetProps<W>, `slot${string}`> & { [K in keyof WidgetProps<W> & `slot${string}`]: WidgetProps<W>[K] extends CoreSlotContent<infer U extends object> ? SlotContent<AdaptSlotContentProps<U>> : WidgetProps<W>[K]; }>, defaultConfig?: Partial<Omit<WidgetProps<W>, `slot${string}`> & { [K in keyof WidgetProps<W> & `slot${string}`]: WidgetProps<W>[K] extends CoreSlotContent<infer U extends object> ? SlotContent<AdaptSlotContentProps<U>> : WidgetProps<W>[K]; }> | undefined) => AdaptWidgetSlots<W> & {
+    patchChangedProps: (parameters: Partial<AdaptPropsSlots<WidgetProps<W>>>) => void;
+};
+export declare const useSvelteSlot: unique symbol;
+export type SlotSvelteComponent<Props extends object = object> = ComponentType<SvelteComponent<Props, any, Props extends WidgetSlotContext<infer U> ? WidgetPropsSlots<WidgetProps<U>> : any>>;
+export type SlotContent<Props extends object = object> = CoreSlotContent<Props> | SlotSvelteComponent<Props> | typeof useSvelteSlot;
+export type AdaptSlotContentProps<Props extends Record<string, any>> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<AdaptWidgetSlots<U>> & AdaptPropsSlots<Omit<Props, keyof WidgetSlotContext<any>>> : AdaptPropsSlots<Props>;
+export type AdaptPropsSlots<Props> = Omit<Props, `slot${string}`> & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends CoreSlotContent<infer U> ? SlotContent<AdaptSlotContentProps<U>> : Props[K];
+};
+export type WidgetsConfig = {
+    [WidgetName in keyof CoreWidgetsConfig]: AdaptPropsSlots<CoreWidgetsConfig[WidgetName]>;
+};
+export type AdaptWidgetSlots<W extends Widget> = Widget<AdaptPropsSlots<WidgetProps<W>>, AdaptPropsSlots<WidgetState<W>>, W['api'], W['actions'], W['directives']>;
+export declare const isSvelteComponent: <Props extends object>(content: SlotContent<Props>) => content is SlotSvelteComponent<Props>;

package/utils.js

@@ -0,0 +1,86 @@
+import { createWidgetsConfig, findChangedProperties } from '@agnos-ui/core';
+import { computed } from '@amadeus-it-group/tansu';
+import { getContext, setContext, createEventDispatcher as svelteCreateEventDispatcher } from 'svelte';
+export function createPatchChangedProps(patchFn) {
+    let previousProps = {};
+    return (props) => {
+        const changedProps = findChangedProperties(previousProps, props);
+        previousProps = props;
+        if (changedProps) {
+            patchFn(changedProps);
+        }
+    };
+}
+/**
+ * Key used in the Svelte context to get or set the widgets default configuration store.
+ */
+export const widgetsDefaultConfigKey = Symbol('widgetsConfig');
+/**
+ * Creates in the Svelte context hierarchy a new widgets default configuration store that inherits from any widgets default configuration
+ * store already defined at an upper level in the Svelte context hierarchy.
+ * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The configuration is computed from the parent configuration in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the own$ store. The own$ store initially contains
+ * an empty object (i.e. no property from the parent is overridden). It can be changed by calling set on the store returned by this function.
+ *
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+ * default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ *
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ *
+ * @example
+ * ```ts
+ * const widgetsConfig = createWidgetsDefaultConfig((parentConfig) => {
+ *   // first step configuration: transforms the parent configuration
+ *   parentConfig.rating = parentConfig.rating ?? {};
+ *   parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+ *   return parentConfig;
+ * });
+ * widgetsConfig.set({
+ *   // second step configuration: overrides the parent configuration
+ *   rating: {
+ *     slotStar: MyCustomSlotStar
+ *   }
+ * });
+ * ```
+ */
+export const createWidgetsDefaultConfig = (adaptParentConfig) => {
+    const parent$ = getContext(widgetsDefaultConfigKey);
+    const child$ = createWidgetsConfig(parent$, adaptParentConfig);
+    setContext(widgetsDefaultConfigKey, child$);
+    return child$;
+};
+export function withPatchChangedProps(api) {
+    const patchChangedProps = createPatchChangedProps(api.patch);
+    return { ...api, patchChangedProps };
+}
+export const createEventDispatcher = () => svelteCreateEventDispatcher();
+const getContextWidgetConfig = (widgetName, slots, defaultConfig) => {
+    const config$ = widgetName ? getContext(widgetsDefaultConfigKey) : undefined;
+    const processedSlots = {};
+    for (const [name, present] of Object.entries(slots)) {
+        if (present) {
+            processedSlots[`slot${name[0].toUpperCase()}${name.substring(1)}`] = useSvelteSlot;
+        }
+    }
+    return computed(() => ({ ...defaultConfig, ...(widgetName ? config$?.()[widgetName] : undefined), ...processedSlots }));
+};
+export const callWidgetFactory = (factory, widgetName, slots, defaultConfig) => withPatchChangedProps(factory(getContextWidgetConfig(widgetName, slots, defaultConfig)));
+export const useSvelteSlot = Symbol('useSvelteSlot');
+export const isSvelteComponent = (content) => {
+    // in prod mode, a svelte component has $set on its prototype
+    // in dev mode with hmr (hot module reload), a svelte component has nothing on its prototype, but its name starts with Proxy<
+    return ((typeof content === 'function' && !!content.prototype && (content.prototype.$set || /^Proxy</.test(content.name))) ||
+        // when using Server Side Rendering, a svelte component is an object with a render function:
+        // (cf https://svelte.dev/docs/server-side-component-api)
+        typeof content?.render === 'function');
+};