animot-presenter 0.1.2 → 0.1.3

package/dist/element.svelte.d.ts

@@ -3,20 +3,49 @@ import './styles/presenter.css';
 declare class AnimotPresenterElement extends HTMLElement {
     static get observedAttributes(): string[];
     private _component;
+    private _pendingRemount;
+    private _src;
     private _data;
+    private _autoplay;
+    private _loop;
+    private _controls;
+    private _arrows;
+    private _progress;
+    private _keyboard;
+    private _duration;
+    private _startSlide;
     private _onslidechange;
     private _oncomplete;
-    private _mounted;
-    private _props;
-    set data(value: AnimotProject | null);
+    get src(): string | null;
+    set src(v: string | null);
     get data(): AnimotProject | null;
+    set data(v: AnimotProject | null);
+    get autoplay(): boolean;
+    set autoplay(v: boolean);
+    get loop(): boolean;
+    set loop(v: boolean);
+    get controls(): boolean;
+    set controls(v: boolean);
+    get arrows(): boolean;
+    set arrows(v: boolean);
+    get progress(): boolean;
+    set progress(v: boolean);
+    get keyboard(): boolean;
+    set keyboard(v: boolean);
+    get duration(): number | undefined;
+    set duration(v: number | undefined);
+    get startSlide(): number | undefined;
+    set startSlide(v: number | undefined);
+    get onslidechange(): ((index: number, total: number) => void) | null;
     set onslidechange(fn: ((index: number, total: number) => void) | null);
+    get oncomplete(): (() => void) | null;
     set oncomplete(fn: (() => void) | null);
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private _buildProps;
-    private _updateProps;
+    private _cancelPendingRemount;
+    private _scheduleRemount;
     private _mount;
     private _unmount;
     next(): void;

package/dist/element.svelte.js

@@ -6,60 +6,86 @@ import { mount, unmount } from 'svelte';
 import AnimotPresenter from './AnimotPresenter.svelte';
 // Inject floating animation CSS into the document (once)
 import './styles/presenter.css';
-const BOOLEAN_ATTRS = new Set(['autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard']);
+const BOOLEAN_PROPS = ['autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard'];
 class AnimotPresenterElement extends HTMLElement {
     static get observedAttributes() {
         return ['src', 'autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard', 'duration', 'start-slide'];
     }
     _component = null;
+    _pendingRemount = null;
+    // Property backing stores — React 19 sets these as properties, not attributes
+    _src = null;
     _data = null;
+    _autoplay = false;
+    _loop = false;
+    _controls = false;
+    _arrows = false;
+    _progress = false;
+    _keyboard = false;
+    _duration = undefined;
+    _startSlide = undefined;
     _onslidechange = null;
     _oncomplete = null;
-    _mounted = false;
-    // Reactive props object that Svelte reads from
-    _props = $state({});
-    set data(value) {
-        this._data = value;
-        this._updateProps();
-    }
-    get data() {
-        return this._data;
-    }
+    // --- Property getters/setters (React 19 sets these directly) ---
+    get src() { return this._src ?? this.getAttribute('src'); }
+    set src(v) { this._src = v; this._scheduleRemount(); }
+    get data() { return this._data; }
+    set data(v) { this._data = v; this._scheduleRemount(); }
+    get autoplay() { return this._autoplay || this.hasAttribute('autoplay'); }
+    set autoplay(v) { this._autoplay = !!v; this._scheduleRemount(); }
+    get loop() { return this._loop || this.hasAttribute('loop'); }
+    set loop(v) { this._loop = !!v; this._scheduleRemount(); }
+    get controls() { return this._controls || this.hasAttribute('controls'); }
+    set controls(v) { this._controls = !!v; this._scheduleRemount(); }
+    get arrows() { return this._arrows || this.hasAttribute('arrows'); }
+    set arrows(v) { this._arrows = !!v; this._scheduleRemount(); }
+    get progress() { return this._progress || this.hasAttribute('progress'); }
+    set progress(v) { this._progress = !!v; this._scheduleRemount(); }
+    get keyboard() { return this._keyboard || this.hasAttribute('keyboard'); }
+    set keyboard(v) { this._keyboard = !!v; this._scheduleRemount(); }
+    get duration() { return this._duration; }
+    set duration(v) { this._duration = v; this._scheduleRemount(); }
+    get startSlide() { return this._startSlide; }
+    set startSlide(v) { this._startSlide = v; this._scheduleRemount(); }
+    get onslidechange() { return this._onslidechange; }
     set onslidechange(fn) {
         this._onslidechange = fn;
-        this._updateProps();
+        this._scheduleRemount();
     }
+    get oncomplete() { return this._oncomplete; }
     set oncomplete(fn) {
         this._oncomplete = fn;
-        this._updateProps();
+        this._scheduleRemount();
     }
     connectedCallback() {
-        this._mounted = true;
         this._mount();
     }
     disconnectedCallback() {
-        this._mounted = false;
+        this._cancelPendingRemount();
         this._unmount();
     }
     attributeChangedCallback() {
-        // Only update props if already mounted — don't remount
-        if (this._mounted && this._component) {
-            this._updateProps();
+        if (this.isConnected && this._component) {
+            this._scheduleRemount();
         }
     }
     _buildProps() {
         const props = {};
-        const src = this.getAttribute('src');
+        // Read from property first (React 19), fall back to attribute (vanilla HTML)
+        const src = this._src ?? this.getAttribute('src');
         if (src)
             props.src = src;
-        for (const attr of BOOLEAN_ATTRS) {
-            props[attr] = this.hasAttribute(attr);
-        }
-        const duration = this.getAttribute('duration');
-        if (duration)
+        props.autoplay = this.autoplay;
+        props.loop = this.loop;
+        props.controls = this.controls;
+        props.arrows = this.arrows;
+        props.progress = this.progress;
+        props.keyboard = this.keyboard;
+        const duration = this._duration ?? this.getAttribute('duration');
+        if (duration != null)
             props.duration = Number(duration);
-        const startSlide = this.getAttribute('start-slide');
-        if (startSlide)
+        const startSlide = this._startSlide ?? this.getAttribute('start-slide');
+        if (startSlide != null)
             props.startSlide = Number(startSlide);
         if (this._data)
             props.data = this._data;
@@ -81,30 +107,41 @@ class AnimotPresenterElement extends HTMLElement {
         }
         return props;
     }
-    _updateProps() {
-        const newProps = this._buildProps();
-        // Update the reactive props object in place so Svelte picks up changes
-        for (const key of Object.keys(newProps)) {
-            this._props[key] = newProps[key];
+    _cancelPendingRemount() {
+        if (this._pendingRemount) {
+            clearTimeout(this._pendingRemount);
+            this._pendingRemount = null;
         }
     }
+    _scheduleRemount() {
+        if (!this.isConnected)
+            return;
+        this._cancelPendingRemount();
+        this._pendingRemount = setTimeout(() => {
+            this._pendingRemount = null;
+            this._unmount();
+            this._mount();
+        }, 0);
+    }
     _mount() {
         if (this._component)
             return;
         if (!this.style.display) {
             this.style.display = 'block';
         }
-        // Build initial props
-        Object.assign(this._props, this._buildProps());
+        if (!this.style.height && !this.getAttribute('style')?.includes('height')) {
+            this.style.height = '100%';
+        }
         this._component = mount(AnimotPresenter, {
             target: this,
-            props: this._props
+            props: this._buildProps()
         });
     }
     _unmount() {
         if (this._component) {
             unmount(this._component);
             this._component = null;
+            this.innerHTML = '';
         }
     }
     next() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
 	"type": "module",
 	"svelte": "./dist/index.js",