New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@solid-primitives/keyed

Package Overview
Dependencies
Maintainers
3
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@solid-primitives/keyed - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

15

dist/index.d.ts

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc