fix everything

Author: dasathyakuma

examples/marko/dynamic/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

examples/marko/fixed/src/routes/+page.marko

@@ -27,7 +27,10 @@
     <p>Fixed sizes — every item's dimensions are hard-coded to the same value and never change.</p>
 
     <let/mounted = false/>
-    <script() { mounted = true }/>
+    <script>
+      // @ts-expect-error — Marko LS types <let> as read-only; assignment is valid Marko 6
+      mounted = true
+    </script>
 
     <section>
       <h2>Rows</h2>

examples/marko/fixed/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

examples/marko/grid/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

examples/marko/infinite-scroll/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

examples/marko/smooth-scroll/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

examples/marko/variable/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

examples/marko/window/vite.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from 'vite'
 import marko from '@marko/run/vite'
 
 export default defineConfig({
-  plugins: [marko()],
-})
+  // Cast to any: @marko/run/vite types are built against Vite 6 but this
+  // workspace uses Vite 5. The plugin works correctly at runtime.
+  plugins: [marko() as any],
+})

packages/marko-virtual/src/marko.d.ts

@@ -0,0 +1,22 @@
+// Ambient type declaration for .marko template imports.
+// @marko/vite compiles .marko files to browser templates exposing mount().
+// The full Marko.Template type is available via the marko package but
+// requires the Marko language toolchain. For test imports we declare the
+// minimal shape we actually use.
+declare module "*.marko" {
+  const template: {
+    mount(
+      input: Record<string, unknown>,
+      container: Element | DocumentFragment,
+    ): { destroy(): void }
+  }
+  export default template
+}
+
+// Type declaration for @marko/vite plugin.
+// The actual package may ship its own types; this is a fallback.
+declare module "@marko/vite" {
+  import type { Plugin } from "vite"
+  function marko(options?: Record<string, unknown>): Plugin
+  export default marko
+}

packages/marko-virtual/src/tags/virtualizer/index.marko

@@ -4,11 +4,8 @@ import {
   observeElementOffset,
   elementScroll,
 } from "@tanstack/virtual-core"
-import type {
-  VirtualItem,
-  ScrollToIndexOptions,
-  ScrollToOffsetOptions,
-} from "@tanstack/virtual-core"
+import type { VirtualItem, ScrollToOptions } from "@tanstack/virtual-core"
+import { setInstance, getInstance, deleteInstance } from "./store"
 
 export interface Input {
   count: number
@@ -23,32 +20,26 @@ export interface Input {
   gap?: number
   lanes?: number
   initialOffset?: number | (() => number)
-  // Tag parameters — the body content receives virtualItems, totalSize, etc.
   content: Marko.Body<[{
     virtualItems: VirtualItem[]
     totalSize: number
     measureElement: ((el: Element | null) => void) | undefined
-    scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void
-    scrollToOffset: (offset: number, options?: ScrollToOffsetOptions) => void
+    scrollToIndex: (index: number, options?: ScrollToOptions) => void
+    scrollToOffset: (offset: number, options?: ScrollToOptions) => void
   }]>
 }
 
-// Module-level Map — class instances never stored in reactive signals
-static const _instances = new Map<string, Virtualizer<Element, Element>>()
-static const _cleanups  = new Map<string, () => void>()
-static let   _nextId    = 0
-
-<let/id    = (`v${++_nextId}`)/>
+<let/id    = (Math.random().toString(36).slice(2))/>
 <let/items = ([] as VirtualItem[])/>
 <let/size  = 0/>
 
 <lifecycle<{}>
   onMount() {
     const notify = () => {
-      const v = _instances.get(id)
-      if (!v) return
-      items = v.getVirtualItems()
-      size  = v.getTotalSize()
+      const entry = getInstance(id)
+      if (!entry) return
+      items = entry.v.getVirtualItems()
+      size  = entry.v.getTotalSize()
     }
 
     const v = new Virtualizer<Element, Element>({
@@ -70,14 +61,14 @@ static let   _nextId    = 0
       onChange: notify,
     })
 
-    _instances.set(id, v)
-    _cleanups.set(id, v._didMount())
+    setInstance(id, { v, cleanup: v._didMount() })
     v._willUpdate()
   }
 
   onUpdate() {
-    const v = _instances.get(id)
-    if (!v) return
+    const entry = getInstance(id)
+    if (!entry) return
+    const { v } = entry
 
     const notify = () => {
       items = v.getVirtualItems()
@@ -102,21 +93,22 @@ static let   _nextId    = 0
     })
 
     v._willUpdate()
+    notify()
   }
 
   onDestroy() {
-    _cleanups.get(id)?.()
-    _instances.delete(id)
-    _cleanups.delete(id)
+    const entry = getInstance(id)
+    if (entry) {
+      entry.cleanup()
+      deleteInstance(id)
+    }
   }
 />
 
-// Render the body content with virtual items passed as tag parameters.
-// When items/size signals change, this re-renders with updated values.
 <${input.content}
   virtualItems=items
   totalSize=size
-  measureElement=_instances.get(id)?.measureElement
-  scrollToIndex=(index: number, options?: ScrollToIndexOptions) => _instances.get(id)?.scrollToIndex(index, options)
-  scrollToOffset=(offset: number, options?: ScrollToOffsetOptions) => _instances.get(id)?.scrollToOffset(offset, options)
+  measureElement=getInstance(id)?.v?.measureElement
+  scrollToIndex=(index: number, options?: ScrollToOptions) => getInstance(id)?.v?.scrollToIndex(index, options)
+  scrollToOffset=(offset: number, options?: ScrollToOptions) => getInstance(id)?.v?.scrollToOffset(offset, options)
 />