vanilla-jui 1.4.7 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "private": false,
   "description": "A lightweight vanilla JavaScript UI plugin library.",
   "keywords": [

package/src/components/accordion.ts

@@ -1,11 +1,9 @@
 import {
   bindAttr,
   createDeepStore,
-  createEffect,
   createRoot,
   flushSync,
   jsx,
-  untrack,
 } from 'vanilla-signal';
 
 import Component, {
@@ -18,6 +16,11 @@ import {
   normalizeContentNodes,
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
+import {
+  createStateSync,
+  stateSnapshot,
+  trackStoreVersion,
+} from '../utilities/scheduler.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -329,28 +332,27 @@ class Accordion extends Component<
 
   private bindItems(): void {
     this.itemsDispose?.();
-    this.itemsDispose = createRoot((dispose) => {
-      createEffect(() => {
-        const sourceItems = this.state.items;
-        const items = normalizeItems(sourceItems);
-
-        untrack(() => {
-          if (needsItemsSync(sourceItems, items)) {
-            this.state.items = items;
-          }
-
-          const activeNames = reconcileActiveNames(
-            this.state.activeNames,
-            items,
-            this.props.multiple
-          );
-          this.buildItems(items, activeNames);
-          this.syncActiveNames(activeNames, items);
-        });
-      });
+    this.syncItems(this.state.items);
+    this.itemsDispose = createStateSync(
+      () => trackStoreVersion(this.state.items),
+      (items) => this.syncItems(items)
+    );
+  }
 
-      return dispose;
-    });
+  private syncItems(sourceItems: AccordionItem[]): void {
+    const items = normalizeItems(stateSnapshot(sourceItems));
+
+    if (needsItemsSync(sourceItems, items)) {
+      this.state.items = items;
+    }
+
+    const activeNames = reconcileActiveNames(
+      this.state.activeNames,
+      items,
+      this.props.multiple
+    );
+    this.buildItems(items, activeNames);
+    this.syncActiveNames(activeNames, items);
   }
 
   private buildItems(items: AccordionItem[], activeNames: string[]): void {

package/src/components/form.ts

@@ -625,7 +625,7 @@ class Form extends Component<ResolvedFormProps, FormState, FormDOM> {
           type: 'checkbox',
           id,
           name: field.name,
-          value: field.value ?? 'on',
+          value: field.value ?? '1',
           checked: !!field.checked,
           disabled: !!field.disabled,
           required: !!field.required,

package/src/components/menu.ts

@@ -1,10 +1,4 @@
-import {
-  createDeepStore,
-  createEffect,
-  createRoot,
-  jsx,
-  untrack,
-} from 'vanilla-signal';
+import { createDeepStore, jsx } from 'vanilla-signal';
 import { t } from 'vanilla-signal-i18n';
 
 import Component, {
@@ -16,6 +10,11 @@ import { icon } from '../primitives/icons.ts';
 import { joinClasses } from '../utilities/class-name.ts';
 import { all } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
+import {
+  createStateSync,
+  stateSnapshot,
+  trackStoreVersion,
+} from '../utilities/scheduler.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -284,21 +283,19 @@ class MenuComponent extends Component<ResolvedMenuProps, MenuState, MenuDOM> {
   private bindState(): void {
     if (this.cleanup.state) return;
 
-    this.cleanup.state = createRoot((dispose) => {
-      createEffect(() => {
-        const snapshot = {
-          data: this.state.data,
-        };
-        untrack(() => this.renderSnapshot(snapshot));
-      });
-      return dispose;
-    });
+    this.cleanup.state = createStateSync(
+      () => ({
+        data: trackStoreVersion(this.state.data),
+      }),
+      (snapshot) => this.renderSnapshot(snapshot),
+      { deferInitial: false, flushInitial: true }
+    );
   }
 
   private renderSnapshot(snapshot: MenuSnapshot): void {
     if (!this.runtime.built || !this.dom.root || !this.dom.list) return;
     this.validateData(snapshot.data);
-    const data = cloneMenuData(snapshot.data);
+    const data = cloneMenuData(stateSnapshot(snapshot.data));
 
     this.dom.list.textContent = '';
     this.dom.list.append(...data.map((item) => this.buildItem(item)));

package/src/components/offcanvas.ts

@@ -1,11 +1,4 @@
-import {
-  createDeepStore,
-  createEffect,
-  createRoot,
-  flushSync,
-  jsx,
-  untrack,
-} from 'vanilla-signal';
+import { createDeepStore, flushSync, jsx } from 'vanilla-signal';
 
 import Component, {
   type ComponentDOM,
@@ -17,6 +10,7 @@ import {
   normalizeContentNodes,
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
+import { createStateSync } from '../utilities/scheduler.ts';
 import { timer } from '../utilities/timer.ts';
 import {
   type ResolveSchema,
@@ -298,18 +292,10 @@ class OffcanvasComponent extends Component<
   private bindState(): void {
     if (this.cleanup.state) return;
 
-    this.cleanup.state = createRoot((dispose) => {
-      let initialized = false;
-      createEffect(() => {
-        const content = this.state.content;
-        if (!initialized) {
-          initialized = true;
-          return;
-        }
-        void untrack(() => this.syncContent(content));
-      });
-      return dispose;
-    });
+    this.cleanup.state = createStateSync(
+      () => this.state.content,
+      (content) => this.syncContent(content)
+    );
   }
 
   private async syncContent(content: OffcanvasContent): Promise<void> {

package/src/components/pagination.ts

@@ -1,11 +1,4 @@
-import {
-  createDeepStore,
-  createEffect,
-  createRoot,
-  flushSync,
-  jsx,
-  untrack,
-} from 'vanilla-signal';
+import { createDeepStore, flushSync, jsx } from 'vanilla-signal';
 
 import Component, {
   type ComponentDOM,
@@ -13,6 +6,7 @@ import Component, {
 } from '../core/Component.ts';
 import { icon } from '../primitives/icons.ts';
 import { isPlainObject } from '../utilities/object.ts';
+import { createStateSync } from '../utilities/scheduler.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -400,20 +394,19 @@ class PaginationComponent extends Component<
   private bindState(): void {
     if (this.cleanup.state) return;
 
-    this.cleanup.state = createRoot((dispose) => {
-      createEffect(() => {
-        const snapshot: PaginationSnapshot = {
+    this.cleanup.state = createStateSync(
+      () =>
+        ({
           total: this.state.total,
           size: this.state.page.size,
           current: this.state.page.current,
           sibling: this.state.count.sibling,
           boundary: this.state.count.boundary,
           locked: this.state.locked,
-        };
-        untrack(() => this.syncState(snapshot));
-      });
-      return dispose;
-    });
+        }) as PaginationSnapshot,
+      (snapshot) => this.syncState(snapshot),
+      { deferInitial: false, flushInitial: true, flush: 'sync' }
+    );
   }
 
   private syncState(snapshot: PaginationSnapshot): void {

package/src/components/swiper.ts

@@ -2,10 +2,8 @@ import {
   bindAttr,
   bindClass,
   createDeepStore,
-  createEffect,
   createRoot,
   h,
-  untrack,
 } from 'vanilla-signal';
 
 import Component, {
@@ -22,6 +20,11 @@ import {
   type RenderableContent,
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
+import {
+  createStateSync,
+  stateSnapshot,
+  trackStoreVersion,
+} from '../utilities/scheduler.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -156,6 +159,7 @@ interface SwiperRuntime extends ComponentRuntime {
   swiping: boolean;
   clickPrevented: boolean;
   timer: ReturnType<typeof setInterval> | null;
+  mountRefreshId: number | null;
   imageCleanups: Set<() => void>;
   realCount: number;
 }
@@ -374,6 +378,7 @@ class SwiperComponent extends Component<
     this.runtime.swiping = false;
     this.runtime.clickPrevented = false;
     this.runtime.timer = null;
+    this.runtime.mountRefreshId = null;
     this.runtime.imageCleanups = new Set();
 
     this.runtime.realCount = 0;
@@ -452,6 +457,7 @@ class SwiperComponent extends Component<
 
       if (this.dom.slides.length > 0) this.onInit();
       if (this.dom.createdRoot) this.bindStateData();
+      this.queueMountRefresh();
     } catch (error) {
       this.destroy();
       throw error;
@@ -519,28 +525,21 @@ class SwiperComponent extends Component<
   private bindStateData(): void {
     if (this.cleanup.data) return;
 
-    this.cleanup.data = createRoot((dispose) => {
-      let initialized = false;
-      createEffect(() => {
-        const data = this.state.data;
-        if (!initialized) {
-          initialized = true;
-          return;
-        }
-        untrack(() => this.syncStateData(data));
-      });
-      return dispose;
-    });
+    this.cleanup.data = createStateSync(
+      () => trackStoreVersion(this.state.data),
+      (data) => this.syncStateData(data)
+    );
   }
 
   private syncStateData(data: SwiperDataItem[]): void {
     if (!this.runtime.built || !this.dom.createdRoot) return;
-    validateParam('data', data, SWIPER_OPTIONS_SCHEMA.data, 'Swiper.state');
+    const nextData = cloneData(stateSnapshot(data));
+    validateParam('data', nextData, SWIPER_OPTIONS_SCHEMA.data, 'Swiper.state');
 
     const realIndex = this.state.index;
     let wrapper = this.dom.wrapper;
     if (!wrapper && this.dom.root) {
-      wrapper = this.createDataView(this.dom.root, data);
+      wrapper = this.createDataView(this.dom.root, nextData);
       this.dom.wrapper = wrapper;
     }
     if (!wrapper) return;
@@ -555,7 +554,7 @@ class SwiperComponent extends Component<
 
     all('[data-clone]', wrapper).forEach((slide) => slide.remove());
     wrapper.textContent = '';
-    this.normalizeData(data).forEach((item, index) => {
+    this.normalizeData(nextData).forEach((item, index) => {
       wrapper.appendChild(this.createDataSlide(item, index));
     });
     this.refreshSlides();
@@ -658,6 +657,7 @@ class SwiperComponent extends Component<
 
   protected onDestroy(): void {
     this.pause();
+    this.cancelMountRefresh();
     this.clearImageCleanups();
     this.cleanup.events.clear();
     this.cleanup.data?.();
@@ -680,7 +680,10 @@ class SwiperComponent extends Component<
   private updateSize(): void {
     this.assertBuilt('updateSize');
     if (!this.dom.root) return;
-    this.width = this.dom.root.clientWidth || this.dom.root.offsetWidth;
+    const width = this.dom.root.clientWidth || this.dom.root.offsetWidth;
+    if (width > 0 || !this.dom.root.isConnected || this.state.width === 0) {
+      this.width = width;
+    }
   }
 
   refresh(): this {
@@ -689,11 +692,61 @@ class SwiperComponent extends Component<
     this.setupStyles();
     this.setTrackIndex(this.trackIndexForRealIndex(this.state.index), false);
     if (this.props.lazyload) this.loadImages();
-    if (this.props.autoplay) this.resume();
+    if (this.props.autoplay && this.hasLayout()) this.resume();
     else this.pause();
     return this;
   }
 
+  private hasLayout(): boolean {
+    return !!this.dom.root?.isConnected && this.state.width > 0;
+  }
+
+  private syncLayout(): boolean {
+    this.updateSize();
+    if (!this.hasLayout()) return false;
+    this.setupStyles();
+    return true;
+  }
+
+  private queueMountRefresh(): void {
+    if (!this.dom.createdRoot || !this.dom.root || this.runtime.mountRefreshId)
+      return;
+    if (typeof requestAnimationFrame !== 'function') {
+      queueMicrotask(() => {
+        if (
+          !this.runtime.destroyed &&
+          this.runtime.built &&
+          this.dom.root?.isConnected
+        ) {
+          this.refresh();
+        }
+      });
+      return;
+    }
+    this.runtime.mountRefreshId = requestAnimationFrame(() => {
+      this.runtime.mountRefreshId = null;
+      if (
+        !this.runtime.destroyed &&
+        this.runtime.built &&
+        this.dom.root?.isConnected
+      ) {
+        this.refresh();
+      }
+    });
+  }
+
+  private cancelMountRefresh(): void {
+    if (
+      this.runtime.mountRefreshId == null ||
+      typeof cancelAnimationFrame !== 'function'
+    ) {
+      this.runtime.mountRefreshId = null;
+      return;
+    }
+    cancelAnimationFrame(this.runtime.mountRefreshId);
+    this.runtime.mountRefreshId = null;
+  }
+
   private refreshSlides(): void {
     if (!this.dom.wrapper) return;
     this.dom.slides = all<HTMLElement>('[data-swiper-slide]', this.dom.wrapper);
@@ -893,7 +946,7 @@ class SwiperComponent extends Component<
   }
 
   private onStart(point: SwipePoint, target: EventTarget | null = null): void {
-    if (this.state.animating) return;
+    if (this.state.animating || !this.syncLayout()) return;
 
     this.runtime.logs = [];
     this.pushLog(point);
@@ -1082,6 +1135,7 @@ class SwiperComponent extends Component<
     this.assertBuilt('slideToTrack');
     if (this.state.animating) return;
     if (this.dom.slides.length === 0) return;
+    if (!this.syncLayout()) return;
 
     let target = idx;
 
@@ -1113,7 +1167,14 @@ class SwiperComponent extends Component<
   private render(animate: boolean): void {
     this.assertBuilt('render');
     if (!this.dom.wrapper) return;
-    if (animate) {
+    const transform = `translate3d(${this.state.transform}px, 0, 0)`;
+    const shouldAnimate =
+      animate &&
+      this.props.speed > 0 &&
+      this.state.width > 0 &&
+      this.dom.wrapper.style.transform !== transform;
+
+    if (shouldAnimate) {
       this.dom.wrapper.style.transition = `transform ${this.props.speed}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
       this.animating = true;
     } else {
@@ -1121,7 +1182,7 @@ class SwiperComponent extends Component<
       this.animating = false;
     }
 
-    this.dom.wrapper.style.transform = `translate3d(${this.state.transform}px, 0, 0)`;
+    this.dom.wrapper.style.transform = transform;
   }
 
   private loadImages(): void {
@@ -1326,6 +1387,7 @@ class SwiperComponent extends Component<
     this.assertBuilt('play');
     if (this.runtime.destroyed || this.runtime.timer) return;
     if (this.realCount <= 1) return;
+    if (!this.syncLayout()) return;
     const delay = Math.max(this.props.delay, AUTOPLAY_DELAY_FLOOR);
     this.runtime.timer = setInterval(() => this.next(), delay);
   }

package/src/components/tabs.ts

@@ -1,11 +1,9 @@
 import {
   bindAttr,
   createDeepStore,
-  createEffect,
   createRoot,
   flushSync,
   jsx,
-  untrack,
 } from 'vanilla-signal';
 
 import Component, {
@@ -19,6 +17,11 @@ import {
   q,
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
+import {
+  createStateSync,
+  getStoreVersion,
+  stateSnapshot,
+} from '../utilities/scheduler.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -334,7 +337,7 @@ class TabsComponent extends Component<ResolvedTabsProps, TabsState, TabsDOM> {
     }) as HTMLElement;
   }
 
-  private renderItems(): void {
+  private renderItems(data: TabItem[] = this.state.data): void {
     if (!this.dom.root) return;
     const tabList = q<HTMLElement>('[data-tabs-list]', this.dom.root);
     const panelWrapper = q<HTMLElement>(
@@ -352,7 +355,7 @@ class TabsComponent extends Component<ResolvedTabsProps, TabsState, TabsDOM> {
     const tabFragment = document.createDocumentFragment();
     const panelFragment = document.createDocumentFragment();
 
-    this.state.data.forEach((item, index) => {
+    data.forEach((item, index) => {
       const name = item.name || randomId();
 
       const tab = jsx('div', {
@@ -410,78 +413,84 @@ class TabsComponent extends Component<ResolvedTabsProps, TabsState, TabsDOM> {
   private bindState(): void {
     if (this.stateDispose) return;
 
-    this.stateDispose = createRoot((dispose) => {
-      let initialized = false;
-      let previousData = this.state.data;
-      let previousDirection = this.state.direction;
-      let previousActive = this.state.active;
-      createEffect(() => {
+    let previousData = this.state.data;
+    let previousDataVersion = getStoreVersion(previousData);
+    let previousDirection = this.state.direction;
+    let previousActive = this.state.active;
+
+    this.stateDispose = createStateSync(
+      () => {
         const data = this.state.data;
+        const dataVersion = getStoreVersion(data);
         const direction = this.state.direction;
         const disabled = this.state.disabled;
         const active = this.state.active;
-        if (!initialized) {
-          initialized = true;
-          return;
-        }
-
-        const dataChanged = data !== previousData;
-        const directionChanged = direction !== previousDirection;
-        const activeChanged = active !== previousActive;
+        const snapshot = {
+          data,
+          direction,
+          disabled,
+          active,
+          dataChanged:
+            data !== previousData || dataVersion !== previousDataVersion,
+          directionChanged: direction !== previousDirection,
+          activeChanged: active !== previousActive,
+        };
+
         previousData = data;
+        previousDataVersion = dataVersion;
         previousDirection = direction;
         previousActive = active;
 
-        void untrack(() =>
-          this.syncStateView({ dataChanged, directionChanged, activeChanged })
-        );
-        void disabled;
-      });
-      return dispose;
-    });
+        return snapshot;
+      },
+      (snapshot) => this.syncStateView(snapshot)
+    );
   }
 
   private async syncStateView({
+    data,
+    direction,
+    disabled,
+    active,
     dataChanged,
     directionChanged,
     activeChanged,
   }: {
+    data: TabItem[];
+    direction: TabsDirection;
+    disabled: TabsDisabled;
+    active: TabsValue;
     dataChanged: boolean;
     directionChanged: boolean;
     activeChanged: boolean;
   }): Promise<void> {
     if (!this.runtime.built || !this.dom.root) return;
-    this.validateData(this.state.data);
+    const dataSnapshot = cloneTabItems(stateSnapshot(data));
+    this.validateData(dataSnapshot);
     validateParam(
       'direction',
-      this.state.direction,
+      direction,
       TABS_STATE_SCHEMA.direction,
       'Tabs.state'
     );
     validateParam(
       'disabled',
-      this.state.disabled,
+      disabled,
       TABS_STATE_SCHEMA.disabled,
       'Tabs.state'
     );
-    validateParam(
-      'active',
-      this.state.active,
-      TABS_STATE_SCHEMA.active,
-      'Tabs.state'
-    );
+    validateParam('active', active, TABS_STATE_SCHEMA.active, 'Tabs.state');
 
     if (directionChanged) {
-      this.dom.root.setAttribute('data-tabs-direction', this.state.direction);
+      this.dom.root.setAttribute('data-tabs-direction', direction);
       flushSync(() => {
-        this.state.isVertical =
-          this.state.direction === 'left' || this.state.direction === 'right';
+        this.state.isVertical = direction === 'left' || direction === 'right';
       });
     }
 
     if (dataChanged) {
       this.runtime.cache.panels.clear();
-      this.renderItems();
+      this.renderItems(dataSnapshot);
       this.bindEvents();
       flushSync(() => {
         this.syncCurrent(-1);
@@ -489,7 +498,7 @@ class TabsComponent extends Component<ResolvedTabsProps, TabsState, TabsDOM> {
     }
 
     if (dataChanged || activeChanged) {
-      await this.activateInternal(this.state.active, activeChanged);
+      await this.activateInternal(active, activeChanged);
     }
 
     this.refreshDrag();

package/src/index.ts

@@ -11,6 +11,7 @@ export * from './utilities/object.ts';
 export * from './utilities/timer.ts';
 export * from './utilities/types.ts';
 export * from './utilities/function.ts';
+export * from './utilities/scheduler.ts';
 
 // UI primitives
 export * from './primitives/icons.ts';