Skip to content

Commit 9c6a4c5

Browse files
maciek50322maciek50322
committed
init
1 parent 6b35d8e commit 9c6a4c5

File tree

8 files changed

+485
-0
lines changed

8 files changed

+485
-0
lines changed

‎packages/list/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Solid Primitives Working Group
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/list/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<p>
2+
<img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=list" alt="Solid Primitives list">
3+
</p>
4+
5+
# @solid-primitives/list
6+
7+
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
8+
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/list?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/list)
9+
[![version](https://img.shields.io/npm/v/@solid-primitives/list?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/list)
10+
[![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-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
11+
12+
A sample primitive that is made up for templating with the following options:
13+
14+
`createPrimitiveTemplate` - Provides a getter and setter for the primitive.
15+
16+
## Installation
17+
18+
```bash
19+
npm install @solid-primitives/list
20+
# or
21+
yarn add @solid-primitives/list
22+
# or
23+
pnpm add @solid-primitives/list
24+
```
25+
26+
## How to use it
27+
28+
```ts
29+
const [value, setValue] = createPrimitiveTemplate(false);
30+
```
31+
32+
## Demo
33+
34+
You can use this template for publishing your demo on CodeSandbox: https://codesandbox.io/s/solid-primitives-demo-template-sz95h
35+
36+
## Changelog
37+
38+
See [CHANGELOG.md](./CHANGELOG.md)

‎packages/list/dev/index.tsx

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {
2+
Component,
3+
type JSX,
4+
createSignal,
5+
type Accessor,
6+
createMemo,
7+
createEffect,
8+
onCleanup,
9+
untrack,
10+
onMount,
11+
} from "solid-js";
12+
import { listArray } from "../src/index.js";
13+
14+
export function List<T extends readonly any[], U extends JSX.Element>(props: {
15+
each: T | undefined | null | false;
16+
fallback?: JSX.Element;
17+
children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
18+
}) {
19+
const fallback = "fallback" in props && { fallback: () => props.fallback };
20+
return ("_SOLID_DEV_"
21+
? createMemo(
22+
listArray(() => props.each, props.children, fallback || undefined),
23+
undefined,
24+
{ name: "value" },
25+
)
26+
: createMemo(
27+
listArray(() => props.each, props.children, fallback || undefined),
28+
)) as unknown as JSX.Element;
29+
}
30+
31+
let currentValue = 1;
32+
const App: Component = () => {
33+
const [signal, setSignal] = createSignal<(string | number)[]>([
34+
currentValue++,
35+
currentValue++,
36+
currentValue++,
37+
]);
38+
39+
return (
40+
<>
41+
<List each={signal()}>
42+
{(v, i) => {
43+
onMount(() => console.log(`create ${i()}: ${v()}`));
44+
createEffect(last => {
45+
if (last) {
46+
console.log(`set new value for index ${untrack(i)}: ${v()}`);
47+
}
48+
return true;
49+
}, false);
50+
createEffect((lastIndex: number | null) => {
51+
if (lastIndex !== null) {
52+
console.log(`set new index from ${lastIndex} to ${i()}`);
53+
}
54+
return i();
55+
}, null);
56+
onCleanup(() => console.log(`remove ${i()}: ${v()}`));
57+
return (
58+
<pre>
59+
{i()}:
60+
<input
61+
value={v()}
62+
onInput={e => {
63+
setSignal(x => {
64+
const n = [...x];
65+
n[i()] = e.target.value;
66+
return n;
67+
});
68+
}}
69+
/>
70+
<button
71+
onClick={() => {
72+
setSignal(x => x.filter((y, j) => j != i()));
73+
}}
74+
>
75+
Delete
76+
</button>
77+
<button
78+
onClick={() => {
79+
setSignal(x => {
80+
const n = [...x];
81+
n[i()] = currentValue++;
82+
return n;
83+
});
84+
}}
85+
>
86+
Replace
87+
</button>
88+
</pre>
89+
);
90+
}}
91+
</List>
92+
<button
93+
onClick={() => {
94+
setSignal(x => [...x].sort(() => Math.random() - 0.5));
95+
}}
96+
>
97+
Shuffle
98+
</button>
99+
<button
100+
onClick={() => {
101+
setSignal(x => {
102+
const n = [...x];
103+
n.splice(~~(Math.random() * x.length), 0, currentValue++);
104+
return n;
105+
});
106+
}}
107+
>
108+
Insert randomly
109+
</button>
110+
</>
111+
);
112+
};
113+
114+
export default App;

‎packages/list/package.json

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "@solid-primitives/list",
3+
"version": "0.0.100",
4+
"description": "A template primitive example.",
5+
"author": "Maciek50322 <[email protected]>",
6+
"contributors": [],
7+
"license": "MIT",
8+
"homepage": "https://primitives.solidjs.community/package/list",
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/solidjs-community/solid-primitives.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/solidjs-community/solid-primitives/issues"
15+
},
16+
"primitive": {
17+
"name": "list",
18+
"stage": 0,
19+
"list": [
20+
"listArray",
21+
"List"
22+
],
23+
"category": "Reactivity"
24+
},
25+
"keywords": [
26+
"solid",
27+
"primitives",
28+
"list"
29+
],
30+
"private": false,
31+
"sideEffects": false,
32+
"files": [
33+
"dist"
34+
],
35+
"type": "module",
36+
"main": "./dist/index.cjs",
37+
"module": "./dist/index.js",
38+
"types": "./dist/index.d.ts",
39+
"browser": {},
40+
"exports": {
41+
"import": {
42+
"types": "./dist/index.d.ts",
43+
"default": "./dist/index.js"
44+
},
45+
"require": {
46+
"types": "./dist/index.d.cts",
47+
"default": "./dist/index.cjs"
48+
}
49+
},
50+
"typesVersions": {},
51+
"scripts": {
52+
"dev": "tsx ../../scripts/dev.ts",
53+
"build": "tsx ../../scripts/build.ts",
54+
"vitest": "vitest -c ../../configs/vitest.config.ts",
55+
"test": "pnpm run vitest",
56+
"test:ssr": "pnpm run vitest --mode ssr"
57+
},
58+
"peerDependencies": {
59+
"solid-js": "^1.6.12"
60+
}
61+
}

0 commit comments

Comments
 (0)