vlist-solidjs 0.1.0 → 0.1.2

package/README.md

@@ -1,11 +1,11 @@
 # vlist-solidjs
 
-SolidJS primitives for [vlist](https://github.com/floor/vlist) - a lightweight, high-performance virtual list.
+SolidJS primitives for [@floor/vlist](https://github.com/floor/vlist) — lightweight, zero-dependency virtual scrolling.
 
-## Installation
+## Install
 
 ```bash
-npm install vlist-solidjs @floor/vlist
+npm install @floor/vlist vlist-solidjs
 ```
 
 ## Quick Start
@@ -13,70 +13,36 @@ npm install vlist-solidjs @floor/vlist
 ```tsx
 import { createVList } from 'vlist-solidjs';
 import { createSignal } from 'solid-js';
+import '@floor/vlist/styles';
 
-function MyList() {
-  const [items] = createSignal(
-    Array.from({ length: 10000 }, (_, i) => ({
-      id: i,
-      name: `Item ${i}`
-    }))
+function UserList() {
+  const [users] = createSignal(
+    Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `User ${i + 1}` }))
   );
 
   const { setRef, instance } = createVList(() => ({
-    items: items(),
+    items: users(),
     item: {
       height: 48,
-      template: (item) => `<div>${item.name}</div>`
-    }
+      template: (user) => `<div>${user.name}</div>`,
+    },
   }));
 
-  return <div ref={setRef} />;
+  return <div ref={setRef} style={{ height: '400px' }} />;
 }
 ```
 
 ## API
 
-### `createVList(config)`
+- **`createVList(config)`** — Creates a virtual list. Config is an accessor returning the vlist config. Returns `{ setRef, instance }`.
+- **`createVListEvent(instance, event, handler)`** — Subscribe to vlist events with automatic cleanup.
 
-Creates a virtual list instance.
+Config accepts all [@floor/vlist options](https://vlist.dev/docs/api/reference) minus `container` (handled by the ref). Feature fields like `adapter`, `grid`, `groups`, `selection`, and `scrollbar` are translated into `.use(withX())` calls automatically.
 
-**Parameters:**
-- `config` - An accessor returning the vlist configuration (without container)
+## Documentation
 
-**Returns:**
-- `setRef` - Ref callback to attach to the container element
-- `instance` - Accessor to the vlist instance
-
-### `createVListEvent(instance, event, handler)`
-
-Subscribe to vlist events.
-
-**Parameters:**
-- `instance` - The vlist instance accessor
-- `event` - Event name
-- `handler` - Event handler function
-
-**Example:**
-```tsx
-import { createVListEvent } from 'vlist-solidjs';
-
-createVListEvent(instance, 'item:click', ({ item, index }) => {
-  console.log('Clicked:', item, 'at index:', index);
-});
-```
-
-## Features
-
-All vlist features are supported:
-
-- **Selection** - Single and multiple selection modes
-- **Grid layout** - Multi-column grid virtualization
-- **Sections** - Grouped lists with sticky headers
-- **Infinite scroll** - Async data loading
-- **Horizontal** - Horizontal scrolling support
-- **Scale** - Handle 1M+ items with compression
-- **Scrollbar** - Custom scrollbar with auto-hide
+Full usage guide, feature config examples, and TypeScript types: **[Framework Adapters — SolidJS](https://vlist.dev/docs/frameworks#solidjs)**
 
 ## License
 
-MIT © Floor IO
+MIT © [Floor IO](https://floor.io)

package/dist/index.d.ts

@@ -3,12 +3,12 @@
  */
 import type { Accessor } from "solid-js";
 import type { VListConfig, VListItem, VListEvents, EventHandler } from "@floor/vlist";
-import { type BuiltVList } from "@floor/vlist";
+import { type VList } from "@floor/vlist";
 export type UseVListConfig<T extends VListItem = VListItem> = Omit<VListConfig<T>, "container">;
 export interface CreateVListReturn<T extends VListItem = VListItem> {
     setRef: (el: HTMLDivElement) => void;
-    instance: Accessor<BuiltVList<T> | null>;
+    instance: Accessor<VList<T> | null>;
 }
 export declare function createVList<T extends VListItem = VListItem>(config: Accessor<UseVListConfig<T>>): CreateVListReturn<T>;
-export declare function createVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instance: Accessor<BuiltVList<T> | null>, event: K, handler: EventHandler<VListEvents<T>[K]>): void;
+export declare function createVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instance: Accessor<VList<T> | null>, event: K, handler: EventHandler<VListEvents<T>[K]>): void;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1 +1 @@
-import{onMount as a,onCleanup as d,createEffect as m,on as p}from"solid-js";import{vlist as L}from"@floor/vlist";import{withAsync as g,withGrid as V,withSections as h,withSelection as u,withScrollbar as T,withScale as v,withSnapshots as b,withPage as y}from"@floor/vlist";function C(o){let n=null,i=null,r=(e)=>{n=e},l=()=>i;return a(()=>{if(!n)return;let e=o(),t=L({...e,container:n});if(e.scroll?.element===window)t=t.use(y());if(e.adapter)t=t.use(g({adapter:e.adapter,...e.loading&&{loading:e.loading}}));if(e.layout==="grid"&&e.grid)t=t.use(V(e.grid));if(e.groups){let s=e.groups,f=typeof s.headerHeight==="function"?s.headerHeight("",0):s.headerHeight;t=t.use(h({getGroupForIndex:s.getGroupForIndex,headerHeight:f,headerTemplate:s.headerTemplate,...s.sticky!==void 0&&{sticky:s.sticky}}))}if((e.selection?.mode||"none")!=="none")t=t.use(u(e.selection));else t=t.use(u({mode:"none"}));t=t.use(v());let c=e.scroll?.scrollbar||e.scrollbar;if(c!=="none"){let s=typeof c==="object"?c:{};t=t.use(T(s))}t=t.use(b()),i=t.build()}),m(p(()=>o().items,(e)=>{if(i&&e)i.setItems(e)})),d(()=>{if(i)i.destroy(),i=null}),{setRef:r,instance:l}}function H(o,n,i){a(()=>{let r=o();if(!r)return;let l=r.on(n,i);d(()=>{l()})})}export{H as createVListEvent,C as createVList};
+import{onMount as u,onCleanup as d,createEffect as m,on as p}from"solid-js";import{vlist as L}from"@floor/vlist";import{withAsync as g,withGrid as V,withSections as h,withSelection as a,withScrollbar as T,withScale as v,withSnapshots as b,withPage as y}from"@floor/vlist";function C(o){let n=null,i=null,r=(e)=>{n=e},l=()=>i;return u(()=>{if(!n)return;let e=o(),t=L({...e,container:n});if(e.scroll?.element===window)t=t.use(y());if(e.adapter)t=t.use(g({adapter:e.adapter,...e.loading&&{loading:e.loading}}));if(e.layout==="grid"&&e.grid)t=t.use(V(e.grid));if(e.groups){let s=e.groups,f=typeof s.headerHeight==="function"?s.headerHeight("",0):s.headerHeight;t=t.use(h({getGroupForIndex:s.getGroupForIndex,headerHeight:f,headerTemplate:s.headerTemplate,...s.sticky!==void 0&&{sticky:s.sticky}}))}if((e.selection?.mode||"none")!=="none")t=t.use(a(e.selection));else t=t.use(a({mode:"none"}));t=t.use(v());let c=e.scroll?.scrollbar||e.scrollbar;if(c!=="none"){let s=typeof c==="object"?c:{};t=t.use(T(s))}t=t.use(b()),i=t.build()}),m(p(()=>o().items,(e)=>{if(i&&e)i.setItems(e)})),d(()=>{if(i)i.destroy(),i=null}),{setRef:r,instance:l}}function H(o,n,i){u(()=>{let r=o();if(!r)return;let l=r.on(n,i);d(()=>{l()})})}export{H as createVListEvent,C as createVList};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vlist-solidjs",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "SolidJS primitives for vlist - lightweight virtual scrolling",
   "author": {
     "name": "Floor IO",
@@ -33,7 +33,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@floor/vlist": "^0.6.0",
+    "@floor/vlist": "^1.1.2",
     "solid-js": ">=1.0.0"
   },
   "files": [