animot-presenter 0.1.0 → 0.1.2

package/dist/{element.d.ts → element.svelte.d.ts}

@@ -6,6 +6,8 @@ declare class AnimotPresenterElement extends HTMLElement {
     private _data;
     private _onslidechange;
     private _oncomplete;
+    private _mounted;
+    private _props;
     set data(value: AnimotProject | null);
     get data(): AnimotProject | null;
     set onslidechange(fn: ((index: number, total: number) => void) | null);
@@ -13,11 +15,10 @@ declare class AnimotPresenterElement extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
-    private _getProps;
+    private _buildProps;
+    private _updateProps;
     private _mount;
     private _unmount;
-    private _remount;
-    goto(index: number): void;
     next(): void;
     prev(): void;
 }

package/dist/{element.js → element.svelte.js}

@@ -7,7 +7,6 @@ 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 NUMBER_ATTRS = new Set(['duration', 'start-slide']);
 class AnimotPresenterElement extends HTMLElement {
     static get observedAttributes() {
         return ['src', 'autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard', 'duration', 'start-slide'];
@@ -16,56 +15,58 @@ class AnimotPresenterElement extends HTMLElement {
     _data = null;
     _onslidechange = null;
     _oncomplete = null;
-    // Public API: set data programmatically
+    _mounted = false;
+    // Reactive props object that Svelte reads from
+    _props = $state({});
     set data(value) {
         this._data = value;
-        this._remount();
+        this._updateProps();
     }
     get data() {
         return this._data;
     }
     set onslidechange(fn) {
         this._onslidechange = fn;
-        this._remount();
+        this._updateProps();
     }
     set oncomplete(fn) {
         this._oncomplete = fn;
-        this._remount();
+        this._updateProps();
     }
     connectedCallback() {
+        this._mounted = true;
         this._mount();
     }
     disconnectedCallback() {
+        this._mounted = false;
         this._unmount();
     }
     attributeChangedCallback() {
-        this._remount();
+        // Only update props if already mounted — don't remount
+        if (this._mounted && this._component) {
+            this._updateProps();
+        }
     }
-    _getProps() {
+    _buildProps() {
         const props = {};
-        // String attributes
         const src = this.getAttribute('src');
         if (src)
             props.src = src;
-        // Boolean attributes (presence = true)
         for (const attr of BOOLEAN_ATTRS) {
             props[attr] = this.hasAttribute(attr);
         }
-        // Number attributes
         const duration = this.getAttribute('duration');
         if (duration)
             props.duration = Number(duration);
         const startSlide = this.getAttribute('start-slide');
         if (startSlide)
             props.startSlide = Number(startSlide);
-        // Programmatic props
         if (this._data)
             props.data = this._data;
         if (this._onslidechange) {
             props.onslidechange = this._onslidechange;
         }
         else {
-            // Dispatch custom event for vanilla JS listeners
             props.onslidechange = (index, total) => {
                 this.dispatchEvent(new CustomEvent('slidechange', { detail: { index, total }, bubbles: true }));
             };
@@ -80,16 +81,24 @@ 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];
+        }
+    }
     _mount() {
         if (this._component)
             return;
-        // Ensure the element has dimensions
         if (!this.style.display) {
             this.style.display = 'block';
         }
+        // Build initial props
+        Object.assign(this._props, this._buildProps());
         this._component = mount(AnimotPresenter, {
             target: this,
-            props: this._getProps()
+            props: this._props
         });
     }
     _unmount() {
@@ -98,18 +107,6 @@ class AnimotPresenterElement extends HTMLElement {
             this._component = null;
         }
     }
-    _remount() {
-        if (!this.isConnected)
-            return;
-        this._unmount();
-        this._mount();
-    }
-    // Public methods that proxy to the Svelte component
-    goto(index) {
-        const btn = this.querySelector('.animot-controls button');
-        // Fire a custom event the component can listen to
-        this.dispatchEvent(new CustomEvent('animot-goto', { detail: { index } }));
-    }
     next() {
         const nextBtn = this.querySelectorAll('.animot-controls button')[2];
         if (nextBtn && !nextBtn.disabled)
@@ -121,7 +118,6 @@ class AnimotPresenterElement extends HTMLElement {
             prevBtn.click();
     }
 }
-// Register the custom element
 if (typeof customElements !== 'undefined' && !customElements.get('animot-presenter')) {
     customElements.define('animot-presenter', AnimotPresenterElement);
 }

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export { default as AnimotPresenter } from './AnimotPresenter.svelte';
 export type { AnimotProject, AnimotPresenterProps, Slide, SlideCanvas, CanvasElement, CanvasBackground, TransitionConfig, TransitionType, ProjectSettings, BaseElement, CodeElement, TextElement, ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement, ElementAnimationConfig, FloatingAnimationConfig, ParticlesConfig, ConfettiConfig } from './types';
-export { AnimotPresenterElement } from './element';

package/dist/index.js

@@ -1,4 +1,3 @@
 export { default as AnimotPresenter } from './AnimotPresenter.svelte';
-// Re-export element registration for convenience
-// Users who just want the web component can import 'animot-presenter/element'
-export { AnimotPresenterElement } from './element';
+// Web component registration is in a separate entry point: 'animot-presenter/element'
+// Do NOT re-export from here — it extends HTMLElement which breaks SSR

package/package.json

@@ -1,20 +1,21 @@
 {
 	"name": "animot-presenter",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"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",
-	"main": "./dist/cdn/animot-presenter.min.js",
-	"module": "./dist/cdn/animot-presenter.esm.js",
 	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"svelte": "./dist/index.js",
 			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./element": {
 			"import": "./dist/cdn/animot-presenter.esm.js",
 			"require": "./dist/cdn/animot-presenter.min.js"
 		},
-		"./element": {
+		"./cdn": {
 			"import": "./dist/cdn/animot-presenter.esm.js",
 			"require": "./dist/cdn/animot-presenter.min.js"
 		},
@@ -78,6 +79,6 @@
 	"license": "BUSL-1.1",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/animot/animot-presenter"
+		"url": "https://github.com/beeblock/animot-presenter"
 	}
 }