@solid-primitives/keyed
Advanced tools
Comparing version 0.1.0 to 1.0.0
@@ -1,2 +0,3 @@ | ||
import { Accessor, JSX, ReturnTypes } from 'solid-js'; | ||
import { Accessor, JSX } from 'solid-js'; | ||
import { AccessorArray } from 'solid-js/types/reactive/signal'; | ||
@@ -10,5 +11,5 @@ /** | ||
* @returns mapped input array signal | ||
* @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#mapKey | ||
* @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#keyArray | ||
*/ | ||
declare function mapKey<T, U, K>(list: Accessor<readonly T[] | undefined | null | false>, keyFn: (v: T) => K, mapFn: (v: Accessor<T>, i: Accessor<number>) => U, options?: { | ||
declare function keyArray<T, U, K>(items: Accessor<readonly T[] | undefined | null | false>, keyFn: (v: T) => K, mapFn: (v: Accessor<T>, i: Accessor<number>) => U, options?: { | ||
fallback?: Accessor<U>; | ||
@@ -44,5 +45,5 @@ }): Accessor<U[]>; | ||
*/ | ||
declare function Rerun<S extends Accessor<unknown> | Accessor<unknown>[] | []>(props: { | ||
on: S; | ||
children: RerunChildren<ReturnTypes<S>>; | ||
declare function Rerun<S>(props: { | ||
on: AccessorArray<S> | Accessor<S>; | ||
children: RerunChildren<S>; | ||
}): Accessor<JSX.Element>; | ||
@@ -56,2 +57,2 @@ declare function Rerun<S extends (object | string | bigint | number | boolean) & { | ||
export { Key, Rerun, RerunChildren, mapKey }; | ||
export { Key, Rerun, RerunChildren, keyArray }; |
@@ -7,56 +7,60 @@ // src/index.ts | ||
on, | ||
onCleanup | ||
onCleanup, | ||
untrack, | ||
$TRACK | ||
} from "solid-js"; | ||
var FALLBACK = Symbol("fallback"); | ||
function mapKey(list, keyFn, mapFn, options = {}) { | ||
function keyArray(items, keyFn, mapFn, options = {}) { | ||
const prev = /* @__PURE__ */ new Map(); | ||
onCleanup(() => prev.forEach((v) => v.dispose())); | ||
const empty = []; | ||
const items = createMemo(on(list, (list2) => list2 && list2.length ? list2 : empty)); | ||
return createMemo(on(items, (list2) => { | ||
var _a; | ||
if (!list2.length) { | ||
prev.forEach((v) => v.dispose()); | ||
prev.clear(); | ||
if (!options.fallback) | ||
return []; | ||
const fb2 = createRoot((dispose) => { | ||
prev.set(FALLBACK, { dispose }); | ||
return options.fallback(); | ||
}); | ||
return [fb2]; | ||
} | ||
const result = new Array(list2.length); | ||
const fb = prev.get(FALLBACK); | ||
if (!prev.size || fb) { | ||
fb == null ? void 0 : fb.dispose(); | ||
prev.delete(FALLBACK); | ||
for (let i = 0; i < list2.length; i++) { | ||
const item = list2[i]; | ||
return () => { | ||
let list = items() || []; | ||
list[$TRACK]; | ||
return untrack(() => { | ||
var _a; | ||
if (!list.length) { | ||
prev.forEach((v) => v.dispose()); | ||
prev.clear(); | ||
if (!options.fallback) | ||
return []; | ||
const fb2 = createRoot((dispose) => { | ||
prev.set(FALLBACK, { dispose }); | ||
return options.fallback(); | ||
}); | ||
return [fb2]; | ||
} | ||
const result = new Array(list.length); | ||
const fb = prev.get(FALLBACK); | ||
if (!prev.size || fb) { | ||
fb == null ? void 0 : fb.dispose(); | ||
prev.delete(FALLBACK); | ||
for (let i = 0; i < list.length; i++) { | ||
const item = list[i]; | ||
const key = keyFn(item); | ||
addNewItem(result, item, i, key); | ||
} | ||
return result; | ||
} | ||
const prevKeys = new Set(prev.keys()); | ||
for (let i = 0; i < list.length; i++) { | ||
const item = list[i]; | ||
const key = keyFn(item); | ||
addNewItem(result, item, i, key); | ||
prevKeys.delete(key); | ||
const lookup = prev.get(key); | ||
if (lookup) { | ||
result[i] = lookup.mapped; | ||
(_a = lookup.setIndex) == null ? void 0 : _a.call(lookup, i); | ||
lookup.setItem(() => item); | ||
} else | ||
addNewItem(result, item, i, key); | ||
} | ||
prevKeys.forEach((key) => { | ||
var _a2; | ||
(_a2 = prev.get(key)) == null ? void 0 : _a2.dispose(); | ||
prev.delete(key); | ||
}); | ||
return result; | ||
} | ||
const prevKeys = new Set(prev.keys()); | ||
for (let i = 0; i < list2.length; i++) { | ||
const item = list2[i]; | ||
const key = keyFn(item); | ||
prevKeys.delete(key); | ||
const lookup = prev.get(key); | ||
if (lookup) { | ||
result[i] = lookup.mapped; | ||
(_a = lookup.setIndex) == null ? void 0 : _a.call(lookup, i); | ||
lookup.setItem(() => item); | ||
} else | ||
addNewItem(result, item, i, key); | ||
} | ||
prevKeys.forEach((key) => { | ||
var _a2; | ||
(_a2 = prev.get(key)) == null ? void 0 : _a2.dispose(); | ||
prev.delete(key); | ||
}); | ||
return result; | ||
})); | ||
function addNewItem(list2, item, i, key) { | ||
}; | ||
function addNewItem(list, item, i, key) { | ||
createRoot((dispose) => { | ||
@@ -72,3 +76,3 @@ const [getItem, setItem] = createSignal(item); | ||
prev.set(key, save); | ||
list2[i] = save.mapped; | ||
list[i] = save.mapped; | ||
}); | ||
@@ -81,3 +85,3 @@ } | ||
const key = typeof by === "function" ? by : (v) => v[by]; | ||
const mapped = mapKey(() => props.each, key, props.children, { fallback }); | ||
const mapped = keyArray(() => props.each, key, props.children, { fallback }); | ||
return createMemo(mapped); | ||
@@ -95,3 +99,3 @@ } | ||
Rerun, | ||
mapKey | ||
keyArray | ||
}; |
{ | ||
"name": "@solid-primitives/keyed", | ||
"version": "0.1.0", | ||
"version": "1.0.0", | ||
"description": "Control Flow primitives and components that require specifying explicit keys to identify or rerender elements.", | ||
@@ -14,5 +14,5 @@ "author": "Damian Tarnawski @thetarnav <gthetarnav@gmail.com>", | ||
"name": "keyed", | ||
"stage": 2, | ||
"stage": 3, | ||
"list": [ | ||
"mapKey", | ||
"keyArray", | ||
"Key", | ||
@@ -46,4 +46,4 @@ "Rerun" | ||
"@solid-primitives/immutable": "^0.1.0", | ||
"@solid-primitives/refs": "^0.1.0", | ||
"@solid-primitives/utils": "^1.0.0", | ||
"@solid-primitives/refs": "^0.2.0", | ||
"@solid-primitives/utils": "^1.5.2", | ||
"jsdom": "^19.0.0", | ||
@@ -63,4 +63,4 @@ "prettier": "^2.5.1", | ||
"peerDependencies": { | ||
"solid-js": "^1.3.0" | ||
"solid-js": "^1.4.0" | ||
} | ||
} | ||
} |
@@ -10,7 +10,7 @@ <p> | ||
[![version](https://img.shields.io/npm/v/@solid-primitives/keyed?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/keyed) | ||
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-2.json)](https://github.com/solidjs-community/solid-primitives#contribution-process) | ||
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process) | ||
Control Flow primitives and components that require specifying explicit keys to identify or rerender elements. | ||
- [`mapKey`](#mapKey) - Reactively maps an array by specified key with a callback function - underlying helper for the `<Key>` control flow. | ||
- [`keyArray`](#keyArray) - Reactively maps an array by specified key with a callback function - underlying helper for the `<Key>` control flow. | ||
- [`Key`](#Key) - Creates a list of elements by mapping items by provided key. | ||
@@ -27,3 +27,3 @@ - [`Rerun`](#Rerun) - Causes the children to rerender when the `on` changes. | ||
## `mapKey` | ||
## `keyArray` | ||
@@ -37,3 +37,3 @@ Reactively maps an array by specified key with a callback function - underlying helper for the [`<Key>`](#Key) control flow. | ||
```ts | ||
import { mapKey } from "@solid-primitives/keyed"; | ||
import { keyArray } from "@solid-primitives/keyed"; | ||
``` | ||
@@ -43,3 +43,3 @@ | ||
The `mapKey` primitive takes 4 arguments: | ||
The `keyArray` primitive takes 4 arguments: | ||
@@ -52,3 +52,3 @@ - `list` - input list of values to map | ||
```ts | ||
const mapped = mapArray(source, (model, index) => { | ||
const mapped = keyArray(source, (model, index) => { | ||
const [name, setName] = createSignal(model().name); | ||
@@ -79,3 +79,3 @@ const [description, setDescription] = createSignal(model().description); | ||
Notice that both the value and index arguments are singlas. Items are identified only by keys, it means that the items could be copied, replaced, changed, but as long as the key is the same, `mapKey` will treat it as the same item. | ||
Notice that both the value and index arguments are singlas. Items are identified only by keys, it means that the items could be copied, replaced, changed, but as long as the key is the same, `keyArray` will treat it as the same item. | ||
@@ -196,2 +196,8 @@ ## `<Key>` | ||
1.0.0 - **stage-3** | ||
Support for Solid 1.4 Store Top Level Arrays | ||
Renamed `mapKey` -> `keyArray` | ||
</details> |
Sorry, the diff of this file is not supported yet
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
17434
264
0
197