-
-
Notifications
You must be signed in to change notification settings - Fork 144
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(examples): add rdom-klist example project, update readmes
- Loading branch information
1 parent
cd526f1
commit 531437f
Showing
20 changed files
with
319 additions
and
66 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # rdom-klist | ||
|
|
||
|  | ||
|
|
||
| [Live demo](http://demo.thi.ng/umbrella/rdom-klist/) | ||
|
|
||
| ## Developing & building | ||
|
|
||
| Please refer to the instructions on the wiki: | ||
|
|
||
| - [Development](https://github.com/thi-ng/umbrella/wiki/Development-mode-for-examples-using-thi.ng-meta%E2%80%90css) | ||
| - [Production build](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) | ||
|
|
||
| ## Authors | ||
|
|
||
| - Karsten Schmidt | ||
|
|
||
| ## License | ||
|
|
||
| © 2024 Karsten Schmidt // Apache Software License 2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "tables": {}, | ||
| "vars": {}, | ||
| "decls": [], | ||
| "specs": [], | ||
| "templates": [] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // list of CSS class names to force-include in generated CSS | ||
| // (one class per line, basic wildcards supported) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| // thi.ng/meta-css stylesheet | ||
| // see package readme for more details/usage | ||
| // use `yarn css:build` or `yarn css:watch` to transpile to CSS | ||
| // also see component-specific *.mcss files in /src folder | ||
|
|
||
| // (optional) variable declarations | ||
| :root { | ||
| // color1=#fff | ||
| } | ||
|
|
||
| body { system-sans-serif ma3 } | ||
|
|
||
| #app { mb4 } | ||
|
|
||
| li { cursor-pointer } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link | ||
| rel="icon" | ||
| href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>' | ||
| /> | ||
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>rdom-klist · @thi.ng/umbrella</title> | ||
| <link href="/css/style.css" rel="stylesheet"> | ||
| <script>window.goatcounter = { path: (p) => location.host + p };</script> | ||
| <script data-goatcounter="https://thing.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-klist">Source code</a></div> | ||
| <script type="module" src="/src/index.ts"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| { | ||
| "name": "@example/rdom-klist", | ||
| "version": "0.0.1", | ||
| "private": true, | ||
| "description": "Basic usage of thi.ng/rdom keyed list component wrapper", | ||
| "repository": "https://github.com/thi-ng/umbrella", | ||
| "author": "Karsten Schmidt <k+npm@thi.ng>", | ||
| "license": "Apache-2.0", | ||
| "scripts": { | ||
| "start": "yarn css:build && yarn start:only", | ||
| "start:only": "vite --host --open", | ||
| "css:watch": "../../node_modules/.bin/metacss develop --bundle --watch --pretty --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss", | ||
| "css:build": "../../node_modules/.bin/metacss develop --bundle --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss", | ||
| "build": "yarn css:build && tsc && vite build --base='./'", | ||
| "preview": "vite preview --host --open" | ||
| }, | ||
| "devDependencies": { | ||
| "@thi.ng/meta-css": "workspace:^", | ||
| "typescript": "^5.4.3", | ||
| "vite": "^5.2.6" | ||
| }, | ||
| "dependencies": { | ||
| "@thi.ng/arrays": "workspace:^", | ||
| "@thi.ng/atom": "workspace:^", | ||
| "@thi.ng/random": "workspace:^", | ||
| "@thi.ng/rdom": "workspace:^", | ||
| "@thi.ng/rstream": "workspace:^" | ||
| }, | ||
| "browser": { | ||
| "process": false | ||
| }, | ||
| "thi.ng": { | ||
| "readme": [ | ||
| "atom", | ||
| "random", | ||
| "rdom", | ||
| "rstream" | ||
| ], | ||
| "screenshot": "examples/rdom-klist.png" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { swap } from "@thi.ng/arrays"; | ||
| import { defAtom } from "@thi.ng/atom"; | ||
| import { uniqueIndices } from "@thi.ng/random"; | ||
| import { $compile, $klist } from "@thi.ng/rdom"; | ||
| import { fromAtom, fromView } from "@thi.ng/rstream"; | ||
|
|
||
| const db = defAtom({ | ||
| sel: -1, | ||
| items: ["one", "two", "three", "four"], | ||
| }); | ||
|
|
||
| // reactive view of the atom | ||
| const $db = fromAtom(db); | ||
|
|
||
| // create a subscription on the selection ID only | ||
| // this will be more efficient when list items will later subscribe to this value | ||
| // since these downstream subs will only be triggered if the selection changes and | ||
| // not if ANY value in the atom changes | ||
| const $sel = fromView(db, { path: ["sel"] }); | ||
|
|
||
| // similar to $sel, but for the list items only | ||
| const $items = fromView(db, { path: ["items"] }); | ||
|
|
||
| // color chooser helper fn | ||
| const highlight = (sel: number, i: number) => (sel === i ? "red" : "blue"); | ||
|
|
||
| // onclick handler to select/deselect items | ||
| const selectItem = (id: number) => | ||
| db.swapIn(["sel"], (sel) => (id === sel ? -1 : id)); | ||
|
|
||
| $compile([ | ||
| "div", | ||
| {}, | ||
| ["div", {}, "Open DOM inspector to observe element/attribute changes..."], | ||
|
|
||
| ["h2", {}, "Version 1"], | ||
| // version 1: subscribes to the entire atom (therefore triggers a list | ||
| // update when ANYTHING changes). here the key function for each list item | ||
| // also includes the current selection, supposedly to for each list item to | ||
| // determine if it's selected or not. this means though, that once the | ||
| // selection changes, *ALL* items will change and update (because their key | ||
| // changes too), regardless if the new selection impacts that item or not. | ||
| // in summary, this approach counteracts the entire purpose of using a keyed | ||
| // list and better solution is shown below... | ||
| $klist( | ||
| $db.map(({ sel, items }) => | ||
| items.map((x, i) => <[number, number, string]>[sel, i, x]) | ||
| ), | ||
| "ul", | ||
| {}, | ||
| ([sel, i, x]) => [ | ||
| "li", | ||
| { | ||
| style: { color: highlight(sel, i) }, | ||
| onclick: () => selectItem(i), | ||
| // include key for debug | ||
| data: { key: `${sel}|${i}|${x}` }, | ||
| }, | ||
| x, | ||
| ], | ||
| // key is "selection|index|item" | ||
| (item) => item.join("|") | ||
| ), | ||
|
|
||
| ["h2", {}, "Version 2"], | ||
|
|
||
| // version 2: subscribe to `items` array only and don't include selection in | ||
| // item keys. to update an item's color, we use a reactive attribute | ||
| // subscription attached to `$sel`. the result of this arrangement is that | ||
| // only max. 2 items (current & previous selected item) will be updated when | ||
| // the selection changes or when items are being re-ordered in the list (see | ||
| // shuffle button below). | ||
| // | ||
| // the general advice is: keep the information used in the item key to a | ||
| // minimum and only include those values relevant to an item's unique | ||
| // definition & position in the list (in this case here, if an item is | ||
| // selected has zero influence on its position or content). | ||
| $klist( | ||
| $items.map((items) => items.map((x, i) => <[number, string]>[i, x])), | ||
| "ul", | ||
| {}, | ||
| ([i, x]) => [ | ||
| "li", | ||
| { | ||
| // reactive color attrib | ||
| style: { color: $sel.map((sel) => highlight(sel, i)) }, | ||
| onclick: () => selectItem(i), | ||
| // include key for debug | ||
| data: { key: `${i}|${x}` }, | ||
| }, | ||
| x, | ||
| ], | ||
| // key is only "index|item" | ||
| (item) => item.join("|") | ||
| ), | ||
|
|
||
| // button to trigger swapping of 2 random list items & update selection if needed | ||
| [ | ||
| "button", | ||
| { | ||
| onclick: () => { | ||
| let { items, sel } = db.deref(); | ||
| // updates to values in atoms always should be immutable! | ||
| items = items.slice(); | ||
| // pick 2 unique indices to swap | ||
| const [idx, idx2] = uniqueIndices(2, items.length); | ||
| swap(items, idx, idx2); | ||
| // swap selection if needed | ||
| if (sel === idx) sel = idx2; | ||
| else if (sel === idx2) sel = idx; | ||
| // update atom, trigger $klist updates | ||
| db.reset({ sel, items }); | ||
| }, | ||
| }, | ||
| "swap items", | ||
| ], | ||
| ]).mount(document.getElementById("app")!); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "include": ["src/**/*"], | ||
| "compilerOptions": { | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default { | ||
| build: { target: "esnext" }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters