@agnos-ui/svelte-headless 0.4.4 → 0.5.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![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/).
+Headless component library for [Svelte](https://svelte.dev/).
 
 ## Installation
 
@@ -12,4 +12,4 @@ 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.
+Please check [our demo site](https://www.agnosui.dev/latest/) to see all the available components and how to use them.

package/Slot.svelte

@@ -1,24 +1,19 @@
-<script lang="ts">
-	import type {SlotContent, SlotSvelteComponent} from './types';
-	import {isSvelteComponent} from './utils/widget';
-	import {useSvelteSlot} from './types';
-	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 lang="ts" generics="Props extends object">
+	import type {SlotContent} from './types';
+
+	let {
+		content,
+		props,
+	}: {
+		content: SlotContent<Props>;
+		props: 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 content}
+	{#if typeof content === 'string'}
+		{content}
+	{:else}
+		{@render content(props)}
+	{/if}
 {/if}

package/Slot.svelte.d.ts

@@ -1,25 +1,21 @@
-import {SvelteComponentTyped} from 'svelte';
-import type {SlotSvelteComponent, SlotContent} from './types';
+import type { SlotContent } from './types';
 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;
-		};
-	};
+    props(): {
+        content: SlotContent<Props>;
+        props: Props;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-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 {};
+interface $$IsomorphicComponent {
+    new <Props extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Props>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Props>['props']>, ReturnType<__sveltets_Render<Props>['events']>, ReturnType<__sveltets_Render<Props>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Props>['bindings']>;
+    } & ReturnType<__sveltets_Render<Props>['exports']>;
+    <Props extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Props>['props']> & {}): ReturnType<__sveltets_Render<Props>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Slot: $$IsomorphicComponent;
+type Slot<Props extends object> = InstanceType<typeof Slot<Props>>;
+export default Slot;

package/config.d.ts

@@ -1,16 +1,16 @@
 import type { Partial2Levels, WidgetsConfigStore } from '@agnos-ui/core/config';
 import type { ReadableSignal } from '@amadeus-it-group/tansu';
-import type { SlotsPresent, Widget, WidgetProps, WidgetFactory } from './types';
+import type { Widget, WidgetProps, WidgetFactory } from './types';
 export * from '@agnos-ui/core/config';
 type WidgetFactoryInput<Config extends {
     [widgetName: string]: object;
 }, W extends Widget> = {
     factory: WidgetFactory<W>;
     widgetName?: null | keyof Config;
-    $$slots?: SlotsPresent<WidgetProps<W>>;
     defaultConfig?: Partial<WidgetProps<W>> | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
-    events?: Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}Change`>;
-    $$props: Partial<WidgetProps<W>>;
+    events?: Partial<Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}Change`>>;
+    props?: Partial<WidgetProps<W>>;
+    enablePatchChanged?: true;
 };
 type AdaptParentConfig<Config> = (config: Partial2Levels<Config>) => Partial2Levels<Config>;
 type CreateWidgetsDefaultConfig<Config extends {
@@ -21,6 +21,7 @@ type CreateWidgetsDefaultConfig<Config extends {
  *
  * It can be used when extending the core and creating new widgets.
  *
+ * @template Config - The shape of the widgets configuration object.
  * @param widgetsDefaultConfigKey - the widgets config key
  * @returns the utilities to create / manage widgets and contexts
  */
@@ -33,10 +34,6 @@ export declare const widgetsConfigFactory: <Config extends {
     widgetsDefaultConfigKey: symbol;
     createWidgetsDefaultConfig: CreateWidgetsDefaultConfig<Config>;
     getContextWidgetConfig: <N extends keyof Config>(widgetName: N) => ReadableSignal<Partial<Config[N]> | undefined>;
-    callWidgetFactory: <W extends Widget>({ factory, widgetName, $$slots, defaultConfig, events, $$props, }: WidgetFactoryInput<Config, W>) => W & {
-        patchChangedProps: W["patch"];
-    };
-};
-export declare const widgetsDefaultConfigKey: symbol, createWidgetsDefaultConfig: CreateWidgetsDefaultConfig<WidgetsConfig>, getContextWidgetConfig: <N extends string | number | symbol>(widgetName: N) => ReadableSignal<any>, callWidgetFactory: <W extends Widget>({ factory, widgetName, $$slots, defaultConfig, events, $$props, }: WidgetFactoryInput<WidgetsConfig, W>) => W & {
-    patchChangedProps: W["patch"];
+    callWidgetFactory: <W extends Widget>(input: WidgetFactoryInput<Config, W>) => WidgetSlotContext<W_1>;
 };
+export declare const widgetsDefaultConfigKey: symbol, createWidgetsDefaultConfig: CreateWidgetsDefaultConfig<WidgetsConfig>, getContextWidgetConfig: <N extends string | number | symbol>(widgetName: N) => ReadableSignal<any>, callWidgetFactory: <W extends Widget>(input: WidgetFactoryInput<WidgetsConfig, W>) => WidgetSlotContext<W_1>;

package/config.js

@@ -1,13 +1,14 @@
 import { createWidgetsConfig } from '@agnos-ui/core/config';
 import { computed } from '@amadeus-it-group/tansu';
 import { getContext, setContext } from 'svelte';
-import { callWidgetFactoryWithConfig } from './utils/widget';
+import { callWidgetFactoryWithConfig } from './utils/widget.svelte';
 export * from '@agnos-ui/core/config';
 /**
  * A factory to create the utilities to allow widgets to be context-aware.
  *
  * It can be used when extending the core and creating new widgets.
  *
+ * @template Config - The shape of the widgets configuration object.
  * @param widgetsDefaultConfigKey - the widgets config key
  * @returns the utilities to create / manage widgets and contexts
  */
@@ -60,13 +61,15 @@ export const widgetsConfigFactory = (widgetsDefaultConfigKey = Symbol('widgetsCo
         const widgetsConfig = getContext(widgetsDefaultConfigKey);
         return computed(() => widgetsConfig?.()[widgetName]);
     };
-    const callWidgetFactory = ({ factory, widgetName = null, $$slots, defaultConfig = {}, events, $$props, }) => callWidgetFactoryWithConfig({
-        factory,
-        $$slots,
-        defaultConfig,
-        widgetConfig: widgetName ? getContextWidgetConfig(widgetName) : null,
-        events,
-        $$props,
+    const callWidgetFactory = (input) => callWidgetFactoryWithConfig({
+        factory: input.factory,
+        defaultConfig: input.defaultConfig,
+        widgetConfig: input.widgetName ? getContextWidgetConfig(input.widgetName) : null,
+        events: input.events,
+        get props() {
+            return input.props;
+        },
+        enablePatchChanged: input.enablePatchChanged,
     });
     return {
         /**

package/generated/index.d.ts

@@ -17,9 +17,8 @@ export * from './utils/stores';
 export * from './utils/directive';
 export * from './types';
 export * from './config';
-export * from './utils/widget';
+export * from './utils/widget.svelte';
 export * from './slot';
-export * from './Slot.svelte.d';
 export * from './components/toast/index';
 export * from './components/slider/index';
 export * from './components/select/index';

package/generated/index.js

@@ -17,9 +17,8 @@ export * from './utils/stores';
 export * from './utils/directive';
 export * from './types';
 export * from './config';
-export * from './utils/widget';
+export * from './utils/widget.svelte';
 export * from './slot';
-export * from './Slot.svelte.d';
 export * from './components/toast/index';
 export * from './components/slider/index';
 export * from './components/select/index';

package/generated/utils/widget.svelte.d.ts

@@ -0,0 +1 @@
+export * from './../../utils/widget.svelte';

package/generated/utils/widget.svelte.js

@@ -0,0 +1 @@
+export * from './../../utils/widget.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/svelte-headless",
-	"description": "Headless widget library for Svelte.",
-	"version": "0.4.4",
+	"description": "Headless component library for Svelte.",
+	"version": "0.5.0",
 	"type": "module",
 	"main": "./index.js",
 	"module": "./index.js",
@@ -49,14 +49,14 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core": "0.4.4"
+		"@agnos-ui/core": "0.5.0"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^1.0.0",
-		"svelte": "^4.2.18"
+		"svelte": "^5.1.4"
 	},
 	"sideEffects": false,
-	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
+	"homepage": "https://www.agnosui.dev/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",
 	"repository": {
@@ -70,6 +70,7 @@
 		"accordion",
 		"AgnosUI",
 		"alert",
+		"collapse",
 		"components",
 		"modal",
 		"pagination",

package/types.d.ts

@@ -1,13 +1,9 @@
 export * from '@agnos-ui/core/types';
-import type { SlotContent as CoreSlotContent, Extends, WidgetProps, WidgetSlotContext } from '@agnos-ui/core/types';
-import type { ComponentType, SvelteComponent } from 'svelte';
-export declare const useSvelteSlot: unique symbol;
-export type IsSlotContent<T> = Extends<T, SlotContent<any>> | Extends<SlotContent<any>, T> extends 1 ? T : 0;
-export type WidgetPropsSlots<Props extends object> = {
-    [K in keyof Props as IsSlotContent<Props[K]> extends SlotContent<any> ? K extends 'children' ? 'default' : K extends `slot${infer U}` ? Uncapitalize<U> : K : never]: Props[K] extends SlotContent<infer U> ? U : never;
-};
-export type SlotsPresent<Props extends object> = {
-    [K in keyof Props as IsSlotContent<Props[K]> extends SlotContent<any> ? K extends 'children' ? 'default' : K extends `slot${infer U}` ? Uncapitalize<U> : K : never]?: boolean;
-};
-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;
+import type { Snippet } from 'svelte';
+/**
+ * Represents the content of a slot, which can either be a `string` or a `Snippet`.
+ *
+ * @template Props - The type of the properties that the Snippet can accept.
+ * @see {@link https://svelte.dev/docs/svelte/snippet}
+ */
+export type SlotContent<Props extends object = object> = string | Snippet<[Props]>;

package/types.js

@@ -1,2 +1 @@
 export * from '@agnos-ui/core/types';
-export const useSvelteSlot = Symbol('useSvelteSlot');

package/utils/widget.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { Widget, WidgetFactory, WidgetProps, WidgetSlotContext } from '../types';
+/**
+ * Call a widget factory using provided configs.
+ *
+ * @param parameter - the parameter
+ * @param parameter.factory - the widget factory to call
+ * @param parameter.defaultConfig - the default config of the widget
+ * @param parameter.widgetConfig - the config of the widget, overriding the defaultConfig
+ * @param parameter.events - the events of the widget
+ * @param parameter.props - the props of the widget
+ * @param parameter.enablePatchChanged - enable patching changed props
+ * @returns the widget
+ */
+export declare const callWidgetFactoryWithConfig: <W extends Widget>(parameter: {
+    factory: WidgetFactory<W>;
+    defaultConfig?: Partial<WidgetProps<W>> | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
+    widgetConfig?: null | undefined | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
+    events?: Partial<Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}Change`>>;
+    props?: Partial<WidgetProps<W>>;
+    enablePatchChanged?: true;
+}) => WidgetSlotContext<W>;

package/utils/{widget.js → widget.svelte.js}

@@ -1,6 +1,6 @@
 import { findChangedProperties, toReadableStore } from '@agnos-ui/core/utils/stores';
 import { asWritable, computed, writable } from '@amadeus-it-group/tansu';
-import { useSvelteSlot } from '../types';
+import { fromStore } from 'svelte/store';
 function createPatchChangedProps(previousProps, patchFn) {
     return (props) => {
         const changedProps = findChangedProperties(previousProps, props);
@@ -41,46 +41,44 @@ const eventStore = (event, prop) => {
  *
  * @param parameter - the parameter
  * @param parameter.factory - the widget factory to call
- * @param parameter.$$slots - the slots of the widget
  * @param parameter.defaultConfig - the default config of the widget
  * @param parameter.widgetConfig - the config of the widget, overriding the defaultConfig
  * @param parameter.events - the events of the widget
- * @param parameter.$$props - the props of the widget
+ * @param parameter.props - the props of the widget
+ * @param parameter.enablePatchChanged - enable patching changed props
  * @returns the widget
  */
-export const callWidgetFactoryWithConfig = ({ factory, $$slots, defaultConfig, widgetConfig, events, $$props, }) => {
+export const callWidgetFactoryWithConfig = (parameter) => {
+    const { factory, defaultConfig, widgetConfig, events, enablePatchChanged } = parameter;
+    const props = parameter.props ?? {};
     const defaultConfig$ = toReadableStore(defaultConfig);
-    const processedSlots = {};
-    if ($$slots) {
-        for (const [name, present] of Object.entries($$slots)) {
-            if (present) {
-                processedSlots[name === 'default' ? 'children' : name] = useSvelteSlot;
-            }
-        }
-    }
-    const props = { ...$$props };
+    const propsWithEvents = { ...props };
     if (events) {
         for (const event of Object.keys(events)) {
-            props[event] = eventStore(events[event], $$props[event]);
+            propsWithEvents[event] = eventStore(events[event], props[event]);
         }
     }
     const widget = factory({
-        config: computed(() => ({ ...defaultConfig$(), ...widgetConfig?.(), ...processedSlots })),
-        props,
+        config: computed(() => ({ ...defaultConfig$(), ...widgetConfig?.() })),
+        props: propsWithEvents,
     });
-    return { ...widget, patchChangedProps: createPatchChangedProps($$props, widget.patch) };
-};
-/**
- * A type guard checking if a provided slot content is a Svelte component.
- *
- * @param content - the slot content
- * @returns true if the slot content is a svelte component
- */
-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');
+    const runes = Object.fromEntries(Object.entries(widget.stores).map(([key, val]) => [key.slice(0, -1), fromStore(val)]));
+    if (enablePatchChanged) {
+        const patch = createPatchChangedProps(props, widget.patch);
+        $effect(() => {
+            patch({ ...parameter.props });
+        });
+    }
+    return {
+        api: widget.api,
+        directives: widget.directives,
+        state: new Proxy(runes, {
+            get(target, name, receiver) {
+                if (Reflect.has(target, name)) {
+                    return Reflect.get(target, name, receiver).current;
+                }
+                return undefined;
+            },
+        }),
+    };
 };

package/generated/Slot.svelte.d.ts

@@ -1 +0,0 @@
-export * from './../Slot.svelte.d';

package/generated/utils/widget.d.ts

@@ -1 +0,0 @@
-export * from './../../utils/widget';

package/generated/utils/widget.js

@@ -1 +0,0 @@
-export * from './../../utils/widget';

package/utils/widget.d.ts

@@ -1,31 +0,0 @@
-import type { ReadableSignal } from '@amadeus-it-group/tansu';
-import type { SlotContent, SlotSvelteComponent, SlotsPresent, Widget, WidgetFactory, WidgetProps } from '../types';
-/**
- * Call a widget factory using provided configs.
- *
- * @param parameter - the parameter
- * @param parameter.factory - the widget factory to call
- * @param parameter.$$slots - the slots of the widget
- * @param parameter.defaultConfig - the default config of the widget
- * @param parameter.widgetConfig - the config of the widget, overriding the defaultConfig
- * @param parameter.events - the events of the widget
- * @param parameter.$$props - the props of the widget
- * @returns the widget
- */
-export declare const callWidgetFactoryWithConfig: <W extends Widget>({ factory, $$slots, defaultConfig, widgetConfig, events, $$props, }: {
-    factory: WidgetFactory<W>;
-    $$slots?: SlotsPresent<WidgetProps<W>>;
-    defaultConfig?: Partial<WidgetProps<W>> | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
-    widgetConfig?: null | undefined | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
-    events?: Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}Change`>;
-    $$props: Partial<WidgetProps<W>>;
-}) => W & {
-    patchChangedProps: W["patch"];
-};
-/**
- * A type guard checking if a provided slot content is a Svelte component.
- *
- * @param content - the slot content
- * @returns true if the slot content is a svelte component
- */
-export declare const isSvelteComponent: <Props extends object>(content: SlotContent<Props>) => content is SlotSvelteComponent<Props>;