mikuru 1.0.33 → 1.0.34

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.0.34 - 2026-05-16
+
+- Stabilized package component internals so repeated mounts and parent rerenders no longer recreate equivalent derived arrays, Sets, or style objects unnecessarily.
+- Hardened `MikuruCarousel`, `MikuruDropdown`, `MikuruToast`, `MikuruCodeBlock`, and `MikuruVideoPlayer` against recursive update loops when parents pass freshly-created array props with unchanged contents.
+- Switched package component style bindings in `MikuruImageViewer`, `MikuruProgress`, and `MikuruVideoPlayer` to stable string styles to avoid avoidable reactive object churn.
+- Updated `MikuruAudioPlayer` timeline class derivation to return stable class strings.
+
 ## 1.0.33 - 2026-05-16
 
 - Added `MikuruVideoPlayer` sizing props for width, height, and aspect ratio.

package/components/MikuruAudioPlayer.mikuru

@@ -111,10 +111,11 @@ const showSkipControl = computed(() => hasControl("skip"));
 const showMuteControl = computed(() => hasControl("mute"));
 const showVolumeControl = computed(() => hasControl("volume"));
 const showTimeline = computed(() => showSeekControl.value || showTimeControl.value);
-const timelineClass = computed(() => ({
-  "timeline-seek-only": showSeekControl.value && !showTimeControl.value,
-  "timeline-time-only": showTimeControl.value && !showSeekControl.value
-}));
+const timelineClass = computed(() => {
+  if (showSeekControl.value && !showTimeControl.value) return "timeline-seek-only";
+  if (showTimeControl.value && !showSeekControl.value) return "timeline-time-only";
+  return "";
+});
 const showControls = computed(() => (
   showPlayControl.value ||
   showSkipControl.value ||

package/components/MikuruCarousel.mikuru

@@ -4,7 +4,7 @@
       <div class="carousel-track" :style="trackStyle">
         <article
           class="carousel-slide"
-          m-for="slide in normalizedSlides"
+          m-for="slide in slides"
           :key="slide.id"
           :aria-label="slide.label"
         >
@@ -33,7 +33,7 @@
       <span>{{ positionLabel }}</span>
       <div class="carousel-dots" role="tablist" aria-label="Carousel slides">
         <button
-          m-for="slide in normalizedSlides"
+          m-for="slide in slides"
           :key="slide.id"
           type="button"
           :class="{ active: slide.index === activeIndex }"
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { computed, onMounted, onUnmounted, ref } from "mikuru";
+import { computed, onMounted, onUnmounted, ref, watch } from "mikuru";
 
 const {
   images = [],
@@ -65,11 +65,24 @@ const {
 });
 
 const activeIndex = ref(0);
+const slides = ref([]);
+let slidesSignature = "";
 let timer = null;
+let mounted = false;
 
-const normalizedSlides = computed(() => {
+const slideCount = computed(() => slides.value.length);
+const isEmpty = computed(() => slideCount.value === 0);
+const trackStyle = computed(() => `transform: translateX(-${activeIndex.value * 100}%)`);
+const positionLabel = computed(() => {
+  if (slideCount.value === 0) return "0 / 0";
+  return `${activeIndex.value + 1} / ${slideCount.value}`;
+});
+
+watch(images, syncSlides, { immediate: true });
+
+function syncSlides() {
   const source = Array.isArray(images.value) ? images.value : [];
-  return source.map((item, index) => {
+  const nextSlides = source.map((item, index) => {
     const src = typeof item === "string" ? item : item.src;
     const alt = typeof item === "string" ? "" : item.alt || item.title || `Slide ${index + 1}`;
     const slideTitle = typeof item === "string" ? `Slide ${index + 1}` : item.title || `Slide ${index + 1}`;
@@ -84,22 +97,25 @@ const normalizedSlides = computed(() => {
       label: `${slideTitle}, ${index + 1} of ${source.length}`
     };
   });
-});
-const slideCount = computed(() => normalizedSlides.value.length);
-const isEmpty = computed(() => slideCount.value === 0);
-const trackStyle = computed(() => ({
-  transform: `translateX(-${activeIndex.value * 100}%)`
-}));
-const positionLabel = computed(() => {
-  if (slideCount.value === 0) return "0 / 0";
-  return `${activeIndex.value + 1} / ${slideCount.value}`;
-});
+  const nextSignature = nextSlides
+    .map((slide) => `${slide.id}\u0000${slide.alt}\u0000${slide.title}\u0000${slide.caption}`)
+    .join("\u0001");
+  if (nextSignature === slidesSignature) return;
+  slidesSignature = nextSignature;
+  slides.value = nextSlides;
+  activeIndex.value = clampIndex(activeIndex.value);
+  if (mounted) {
+    startAutoplay();
+  }
+}
 
 onMounted(() => {
+  mounted = true;
   startAutoplay();
 });
 
 onUnmounted(() => {
+  mounted = false;
   stopAutoplay();
 });
 

package/components/MikuruCodeBlock.mikuru

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { computed, ref } from "mikuru";
+import { computed, ref, watch } from "mikuru";
 
 const {
   code = "",
@@ -23,12 +23,16 @@ const {
 });
 
 const copied = ref(false);
+const lines = ref([]);
 const languageLabel = computed(() => language.value || "text");
 const copyLabel = computed(() => copied.value ? "Copied" : "Copy");
-const lines = computed(() => code.value.split("\n").map((text, index) => ({
-  number: index + 1,
-  text
-})));
+
+watch(code, () => {
+  lines.value = code.value.split("\n").map((text, index) => ({
+    number: index + 1,
+    text
+  }));
+}, { immediate: true });
 
 async function copyCode() {
   if (!navigator.clipboard) return;

package/components/MikuruDropdown.mikuru

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { computed, onMounted, onUnmounted, ref } from "mikuru";
+import { onMounted, onUnmounted, ref, watch } from "mikuru";
 
 const {
   label = "Menu",
@@ -42,9 +42,14 @@ const {
 const emit = defineEmits(["select"]);
 const rootEl = ref(null);
 const isOpen = ref(false);
-const normalizedItems = computed(() => {
+const normalizedItems = ref([]);
+let itemsSignature = "";
+
+watch(items, syncItems, { immediate: true });
+
+function syncItems() {
   const source = Array.isArray(items.value) ? items.value : [];
-  return source.map((item, index) => {
+  const nextItems = source.map((item, index) => {
     if (typeof item === "string") {
       return { label: item, value: item, description: "", disabled: false };
     }
@@ -55,7 +60,13 @@ const normalizedItems = computed(() => {
       disabled: Boolean(item.disabled)
     };
   });
-});
+  const nextSignature = nextItems
+    .map((item) => `${item.value}\u0000${item.label}\u0000${item.description}\u0000${item.disabled}`)
+    .join("\u0001");
+  if (nextSignature === itemsSignature) return;
+  itemsSignature = nextSignature;
+  normalizedItems.value = nextItems;
+}
 
 onMounted(() => {
   document.addEventListener("pointerdown", handleDocumentPointer);

package/components/MikuruImageViewer.mikuru

@@ -82,9 +82,7 @@ const label = computed(() => caption.value || alt.value);
 const captionText = computed(() => caption.value || alt.value);
 const zoomLabel = computed(() => `${Math.round(zoom.value * 100)}%`);
 const fullscreenLabel = computed(() => isFullscreen.value ? "Exit fullscreen" : "Enter fullscreen");
-const imageStyle = computed(() => ({
-  transform: `translate(${offsetX.value}px, ${offsetY.value}px) scale(${zoom.value}) rotate(${rotation.value}deg)`
-}));
+const imageStyle = computed(() => `transform: translate(${offsetX.value}px, ${offsetY.value}px) scale(${zoom.value}) rotate(${rotation.value}deg)`);
 
 onMounted(() => {
   document.addEventListener("fullscreenchange", syncFullscreen);

package/components/MikuruProgress.mikuru

@@ -36,9 +36,7 @@ const safeMax = computed(() => max.value > 0 ? max.value : 100);
 const clampedValue = computed(() => Math.min(Math.max(value.value, 0), safeMax.value));
 const percent = computed(() => Math.round((clampedValue.value / safeMax.value) * 100));
 const percentLabel = computed(() => `${percent.value}%`);
-const fillStyle = computed(() => ({
-  width: indeterminate.value ? "45%" : `${percent.value}%`
-}));
+const fillStyle = computed(() => `width: ${indeterminate.value ? "45%" : `${percent.value}%`}`);
 </script>
 
 <style scoped>

package/components/MikuruToast.mikuru

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { computed, onMounted, onUnmounted, watch } from "mikuru";
+import { computed, onMounted, onUnmounted, ref, watch } from "mikuru";
 
 const {
   toasts = [],
@@ -32,9 +32,14 @@ const {
 const emit = defineEmits(["dismiss"]);
 const timers = new Map();
 const positionClass = computed(() => `position-${position.value}`);
-const normalizedToasts = computed(() => {
+const normalizedToasts = ref([]);
+let toastsSignature = "";
+
+watch([toasts, duration], syncToasts, { immediate: true });
+
+function syncToasts() {
   const source = Array.isArray(toasts.value) ? toasts.value : [];
-  return source.map((toast, index) => {
+  const nextToasts = source.map((toast, index) => {
     const id = toast.id ?? index;
     const tone = toast.tone || "info";
     const toastDuration = typeof toast.duration === "number" ? toast.duration : duration.value;
@@ -47,7 +52,14 @@ const normalizedToasts = computed(() => {
       duration: toastDuration
     };
   });
-});
+  const nextSignature = nextToasts
+    .map((toast) => `${toast.id}\u0000${toast.title}\u0000${toast.message}\u0000${toast.toneClass}\u0000${toast.duration}`)
+    .join("\u0001");
+  if (nextSignature === toastsSignature) return;
+  toastsSignature = nextSignature;
+  normalizedToasts.value = nextToasts;
+  syncToastTimers();
+}
 
 onMounted(() => {
   syncToastTimers();
@@ -57,10 +69,6 @@ onUnmounted(() => {
   clearToastTimers();
 });
 
-watch(toasts, () => {
-  syncToastTimers();
-});
-
 function dismissToast(id) {
   clearToastTimer(id);
   emit("dismiss", id);

package/components/MikuruVideoPlayer.mikuru

@@ -144,7 +144,7 @@
 </template>
 
 <script>
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from "mikuru";
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from "mikuru";
 
 const {
   src,
@@ -202,19 +202,40 @@ const controlsVisible = ref(true);
 const settingsEl = ref(null);
 const allControls = ["play", "seek", "time", "mute", "volume", "settings", "fullscreen"];
 const liveHiddenControls = ["seek", "time"];
-const activeControls = computed(() => {
+const activeControls = ref(new Set(allControls));
+const normalizedQualityOptions = ref([]);
+let controlsSignature = "";
+let qualityOptionsSignature = "";
+
+watch(controls, syncControls, { immediate: true });
+watch([qualityOptions, src, poster], syncQualityOptions, { immediate: true });
+
+function syncControls() {
   const configuredControls = Array.isArray(controls.value) ? controls.value : allControls;
-  return new Set(configuredControls);
-});
-const normalizedQualityOptions = computed(() => {
+  const nextSignature = configuredControls.join("\u0001");
+  if (nextSignature === controlsSignature) return;
+  controlsSignature = nextSignature;
+  activeControls.value = new Set(configuredControls);
+}
+
+function syncQualityOptions() {
   const source = Array.isArray(qualityOptions.value) ? qualityOptions.value : [];
   const options = source
     .map((option, index) => normalizeQualityOption(option, index))
     .filter(Boolean);
-  return options.length > 0
+  const nextOptions = options.length > 0
     ? options
     : [{ id: "auto", label: "Auto", src: src.value, poster: poster.value }];
-});
+  const nextSignature = nextOptions
+    .map((option) => `${option.id}\u0000${option.label}\u0000${option.src}\u0000${option.poster}`)
+    .join("\u0001");
+  if (nextSignature === qualityOptionsSignature) return;
+  qualityOptionsSignature = nextSignature;
+  normalizedQualityOptions.value = nextOptions;
+  if (!nextOptions.some((option) => option.id === selectedQualityId.value)) {
+    selectedQualityId.value = nextOptions[0]?.id || "auto";
+  }
+}
 const selectedQuality = computed(() =>
   normalizedQualityOptions.value.find((option) => option.id === selectedQualityId.value) ?? normalizedQualityOptions.value[0]
 );
@@ -223,15 +244,15 @@ const selectedVideoSrc = computed(() => selectedQuality.value?.src || src.value)
 const selectedPoster = computed(() => selectedQuality.value?.poster ?? poster.value);
 const playerStyle = computed(() => {
   const normalizedWidth = normalizeCssSize(width.value);
-  return normalizedWidth ? { width: normalizedWidth } : null;
+  return normalizedWidth ? `width: ${normalizedWidth}` : "";
 });
 const screenStyle = computed(() => {
   const normalizedHeight = normalizeCssSize(height.value);
   const normalizedAspectRatio = normalizeAspectRatio(aspectRatio.value);
-  return {
-    height: normalizedHeight || null,
-    aspectRatio: normalizedAspectRatio || null
-  };
+  const declarations = [];
+  if (normalizedHeight) declarations.push(`height: ${normalizedHeight}`);
+  if (normalizedAspectRatio) declarations.push(`aspect-ratio: ${normalizedAspectRatio}`);
+  return declarations.join("; ");
 });
 const isLive = computed(() => live.value === true);
 const safeDuration = computed(() => duration.value > 0 ? duration.value : 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikuru",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "private": false,
   "type": "module",
   "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",