Merge pull request #14 from trash-and-fire/ref_to_contaner_and_attributes

provide ref callback and rest spread for dom container

Author: trash-and-fire

src/demo/app.svelte

@@ -414,7 +414,15 @@
     {#if components}
         <fieldset name="chart-component">
             <legend>Chart component:</legend>
-            <Chart {...(params.options ?? {})} ref={reference}>
+            <Chart
+                {...(params.options ?? {})}
+                ref={reference}
+                container={{
+                    class: 'chart',
+                    // eslint-disable-next-line no-console
+                    ref: console.log
+                }}
+            >
                 {#if mainProps.type === 'Area' }
                     <AreaSeries
                         {...(mainProps.options ?? {})}

src/package/components/__tests__/chart.ts

@@ -103,4 +103,87 @@ describe('Chart component', () => {
 
         expect(CHART_ACTION_OBJECT.destroy).toHaveBeenCalledTimes(1);
     });
+
+    it('should handle dom reference', async () => {
+        const { default: Chart } = await import('../chart.svelte');
+        const ref = jest.fn<HTMLElement | null, []>();
+        const target = document.createElement('div');
+        const component = new Chart({
+            target,
+            props: {
+                width: 100,
+                height: 100,
+                container: {
+                    ref,
+                }
+            },
+        });
+
+        await tick();
+
+        expect(ref).toHaveBeenCalledTimes(1);
+        expect(ref).toHaveBeenLastCalledWith(target.firstElementChild);
+
+        component.$set({
+            width: 100,
+            height: 100,
+            container: {
+                ref,
+            }
+        });
+
+        await tick();
+
+        expect(ref).toHaveBeenCalledTimes(1);
+
+        const nextRef = jest.fn<HTMLElement | null, []>();
+        component.$set({
+            width: 100,
+            height: 100,
+            container: {
+                ref: nextRef,
+            }
+        });
+
+        await tick();
+
+        expect(ref).toHaveBeenCalledTimes(2);
+        expect(ref).toHaveBeenLastCalledWith(null);
+
+        expect(nextRef).toHaveBeenCalledTimes(1);
+        expect(nextRef).toHaveBeenLastCalledWith(target.firstElementChild);
+
+        component.$destroy();
+
+        await tick();
+
+        expect(ref).toHaveBeenCalledTimes(2);
+
+        expect(nextRef).toHaveBeenCalledTimes(2);
+        expect(nextRef).toHaveBeenLastCalledWith(null);
+    });
+
+    it('should spread attributes to dom container', async () => {
+        const { default: Chart } = await import('../chart.svelte');
+
+        const target = document.createElement('div')
+        new Chart({
+            target,
+            props: {
+                width: 100,
+                height: 100,
+                container: {
+                    class: 'container',
+                    id: 'container',
+                    'data-test': 'container',
+                }
+            },
+        });
+
+        await tick();
+
+        expect(target.firstElementChild.className).toBe('container');
+        expect(target.firstElementChild.id).toBe('container');
+        expect(target.firstElementChild.getAttribute('data-test')).toBe('container');
+    });
 })

src/package/components/chart.interface.ts

@@ -8,6 +8,11 @@ import type {Reference} from '../types';
 
 export interface $$PROPS extends DeepPartial<ChartOptions> {
     ref?: Reference<IChartApi>;
+    container?: {
+        ref?: Reference<HTMLElement>;
+        class?: string;
+        id?: string;
+    }
 }
 
 export interface $$EVENTS {

src/package/components/chart.svelte

@@ -6,11 +6,14 @@
     import type {Reference} from '../types';
 
     import {createEventDispatcher} from 'svelte';
+    import {element} from './internal/element';
     import ContextProvider from './internal/context-provider.svelte';
     import {chart} from '../index';
 
     const dispatch = createEventDispatcher<$$EVENTS>();
 
+    export let container: $$PROPS['container'] = undefined;
+
     /** Height of the chart */
     export let width: $$PROPS['width'] = 0;
     /** Width of the chart */
@@ -67,6 +70,13 @@
         }
     })(ref);
 
+    // Dom container attributes
+    let attrs: $$PROPS['container'] = {};
+    $: {
+        attrs = Object.assign({}, container);
+        delete attrs.ref;
+    }
+
     function handleCrosshairMove(params: MouseEventParams): void {
         dispatch('crosshairMove', params);
     }
@@ -76,12 +86,16 @@
     }
 </script>
 
-<div use:chart={{
-    options,
-    onCrosshairMove: handleCrosshairMove,
-    onClick: handleClick,
-    reference: handleReference,
-}}>
+<div
+    {...attrs}
+    use:element={container?.ref}
+    use:chart={{
+        options,
+        onCrosshairMove: handleCrosshairMove,
+        onClick: handleClick,
+        reference: handleReference,
+    }}
+>
     {#if reference !== null}
         <ContextProvider value={reference}><slot/></ContextProvider>
     {/if}

src/package/components/internal/element.ts

@@ -0,0 +1,23 @@
+import type {ActionResult, Reference} from '../../types';
+
+export function element(
+    node: HTMLElement,
+    reference: Reference<HTMLElement> | undefined
+): ActionResult<Reference<HTMLElement> | undefined> {
+    let ref = reference;
+    ref?.(node);
+
+    return {
+        update(nextReference: Reference<HTMLElement | null> | undefined): void {
+            if (nextReference === ref) {
+                return;
+            }
+            ref?.(null);
+            ref = nextReference;
+            ref?.(node);
+        },
+        destroy(): void {
+            ref?.(null);
+        }
+    }
+}