refactor(examples): update imports in rdom examples

thi-ng · Nov 30, 2022 · 565990f · 565990f
1 parent 3fd5f8e
commit 565990f
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 126 deletions.
diff --git a/examples/rdom-basics/src/index.ts b/examples/rdom-basics/src/index.ts
@@ -1,18 +1,17 @@
-import { isString } from "@thi.ng/checks/is-string";
-import { delayed } from "@thi.ng/compose/delayed";
-import { $compile } from "@thi.ng/rdom/compile";
-import { $list } from "@thi.ng/rdom/list";
-import { $replace } from "@thi.ng/rdom/replace";
-import { CloseMode } from "@thi.ng/rstream/api";
-import { fromDOMEvent } from "@thi.ng/rstream/event";
-import { fromInterval } from "@thi.ng/rstream/interval";
-import { fromIterable } from "@thi.ng/rstream/iterable";
-import { metaStream } from "@thi.ng/rstream/metastream";
-import { reactive, stream } from "@thi.ng/rstream/stream";
-import { sync } from "@thi.ng/rstream/sync";
-import { choices } from "@thi.ng/transducers/choices";
-import { map } from "@thi.ng/transducers/map";
-import { take } from "@thi.ng/transducers/take";
+import { isString } from "@thi.ng/checks";
+import { delayed } from "@thi.ng/compose";
+import { $compile, $list, $replace } from "@thi.ng/rdom";
+import {
+	CloseMode,
+	fromDOMEvent,
+	fromInterval,
+	fromIterable,
+	metaStream,
+	reactive,
+	stream,
+	sync,
+} from "@thi.ng/rstream";
+import { choices, map, take } from "@thi.ng/transducers";
 
 const blur = reactive(false);
 const body = stream<string>();

diff --git a/examples/rdom-delayed-update/package.json b/examples/rdom-delayed-update/package.json
@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@thi.ng/compose": "workspace:^",
+		"@thi.ng/hiccup-html": "workspace:^",
 		"@thi.ng/random": "workspace:^",
 		"@thi.ng/rdom": "workspace:^",
 		"@thi.ng/rstream": "workspace:^",

diff --git a/examples/rdom-delayed-update/src/index.ts b/examples/rdom-delayed-update/src/index.ts
@@ -1,14 +1,15 @@
-import { delayed } from "@thi.ng/compose/delayed";
-import { SYSTEM } from "@thi.ng/random/system";
-import type { NumOrElement } from "@thi.ng/rdom";
-import { $compile } from "@thi.ng/rdom/compile";
-import { Component } from "@thi.ng/rdom/component";
-import { $klist } from "@thi.ng/rdom/klist";
-import { $refresh } from "@thi.ng/rdom/switch";
-import { merge } from "@thi.ng/rstream/merge";
-import { fromPromise } from "@thi.ng/rstream/promise";
-import { reactive } from "@thi.ng/rstream/stream";
-import { cycle } from "@thi.ng/transducers/cycle";
+import { delayed } from "@thi.ng/compose";
+import { comment, div, h3, img } from "@thi.ng/hiccup-html";
+import { SYSTEM } from "@thi.ng/random";
+import {
+	$compile,
+	$klist,
+	$refresh,
+	Component,
+	NumOrElement,
+} from "@thi.ng/rdom";
+import { fromPromise, merge, reactive } from "@thi.ng/rstream";
+import { cycle } from "@thi.ng/transducers";
 
 interface UserSummary {
 	id: number;
@@ -32,9 +33,8 @@ const colors = cycle(["f00", "0ff", "f0f", "f90", "00f", "0f0"]);
  *
  * @param srcUrl -
  */
-const userThumb = (srcUrl: Promise<string>) => [
-	"img.db.w-100",
-	{
+const userThumb = (srcUrl: Promise<string>) =>
+	img(".db.w-100", {
 		// src image attribute
 		src: merge({
 			// stream sources
@@ -48,24 +48,24 @@ const userThumb = (srcUrl: Promise<string>) => [
 				///....
 			],
 		}),
-	},
-];
+	});
 
 /**
  * Alternative project thumbnail with custom inner pre-loader component.
  *
  * @param srcUrl -
  */
-const userThumbAlt = (srcUrl: Promise<string>) => [
-	"div.aspect-ratio.aspect-ratio--16x9.tc",
-	{},
-	$refresh(
-		fromPromise(srcUrl),
-		async (src) => ["img.w-100", { src }],
-		async (x) => ["img.w-100", { src: "broken.png" }],
-		async () => ["div", { style: { padding: "25% 0" } }, "loading..."]
-	),
-];
+const userThumbAlt = (srcUrl: Promise<string>) =>
+	div(
+		".aspect-ratio.aspect-ratio--16x9.tc",
+		{},
+		$refresh(
+			fromPromise(srcUrl),
+			async (src) => ["img.w-100", { src }],
+			async (x) => ["img.w-100", { src: "broken.png" }],
+			async () => ["div", { style: { padding: "25% 0" } }, "loading..."]
+		)
+	);
 
 class UserComponent extends Component {
 	constructor(public user: UserSummary) {
@@ -74,25 +74,29 @@ class UserComponent extends Component {
 
 	async mount(parent: Element, index?: NumOrElement): Promise<Element> {
 		this.el = await this.$tree(
-			this.$compile([
-				"div.bg-black.white",
-				{},
-				// also try out userThumbAlt...
-				userThumb(
-					// intentionally delay
-					delayed(
-						`https://via.placeholder.com/640x360.png/${
-							colors.next().value
-						}/fff?text=${this.user.name}`,
-						SYSTEM.minmax(0.5, 1) * 2000
-					)
-				),
-				[
-					"h3.pa2.ma0.f6",
+			this.$compile(
+				div(
+					".bg-black.white",
 					{},
-					`User #${this.user.id}: ${this.user.name}`,
-				],
-			]),
+					// DOM comment (inspect in browser dev tools)
+					comment(`ID: ${this.user.id}`, `Name: ${this.user.name}`),
+					// also try out userThumbAlt...
+					userThumb(
+						// intentionally delay
+						delayed(
+							`https://via.placeholder.com/640x360.png/${
+								colors.next().value
+							}/fff?text=${this.user.name}`,
+							SYSTEM.minmax(0.5, 1) * 2000
+						)
+					),
+					h3(
+						".pa2.ma0.f6",
+						{},
+						`User #${this.user.id}: ${this.user.name}`
+					)
+				)
+			),
 			parent,
 			index
 		);

diff --git a/examples/rdom-dnd/src/draggable.ts b/examples/rdom-dnd/src/draggable.ts
@@ -1,7 +1,6 @@
 import type { Fn } from "@thi.ng/api";
-import { div } from "@thi.ng/hiccup-html/blocks";
-import type { ComponentLike, NumOrElement } from "@thi.ng/rdom";
-import { Component } from "@thi.ng/rdom/component";
+import { div } from "@thi.ng/hiccup-html";
+import { Component, ComponentLike, NumOrElement } from "@thi.ng/rdom";
 
 interface DraggableOpts {
 	scope?: string;

diff --git a/examples/rdom-dnd/src/index.ts b/examples/rdom-dnd/src/index.ts
@@ -1,9 +1,7 @@
-import { ADD_ALT } from "@thi.ng/hiccup-carbon-icons/add-alt";
-import { CLOSE_OUTLINE } from "@thi.ng/hiccup-carbon-icons/close-outline";
-import { withSize } from "@thi.ng/hiccup-carbon-icons/with-size";
-import { div } from "@thi.ng/hiccup-html/blocks";
-import { $compile } from "@thi.ng/rdom/compile";
-import { cycle } from "@thi.ng/transducers/cycle";
+import { ADD_ALT, CLOSE_OUTLINE, withSize } from "@thi.ng/hiccup-carbon-icons";
+import { div } from "@thi.ng/hiccup-html";
+import { $compile } from "@thi.ng/rdom";
+import { cycle } from "@thi.ng/transducers";
 import { Draggable } from "./draggable";
 import { Notification, type NotifyOpts } from "./notification";
 

diff --git a/examples/rdom-dnd/src/notification.ts b/examples/rdom-dnd/src/notification.ts
@@ -1,11 +1,11 @@
-import { CHECKMARK_FILLED } from "@thi.ng/hiccup-carbon-icons/checkmark-filled";
-import { INFORMATION_FILLED } from "@thi.ng/hiccup-carbon-icons/information-filled";
-import { withSize } from "@thi.ng/hiccup-carbon-icons/with-size";
-import { WARNING_ALT_FILLED } from "@thi.ng/hiccup-carbon-icons/warning-alt-filled";
-import { div } from "@thi.ng/hiccup-html/blocks";
-import { span } from "@thi.ng/hiccup-html/inline";
-import type { NumOrElement } from "@thi.ng/rdom";
-import { Component } from "@thi.ng/rdom/component";
+import {
+	CHECKMARK_FILLED,
+	INFORMATION_FILLED,
+	WARNING_ALT_FILLED,
+	withSize,
+} from "@thi.ng/hiccup-carbon-icons";
+import { div, span } from "@thi.ng/hiccup-html";
+import { Component, NumOrElement } from "@thi.ng/rdom";
 
 const PRESETS = {
 	info: { class: "bg-lightest-blue blue", icon: INFORMATION_FILLED },

diff --git a/examples/rdom-lissajous/src/index.ts b/examples/rdom-lissajous/src/index.ts
@@ -1,17 +1,16 @@
 import type { IDeref } from "@thi.ng/api";
-import { INFORMATION } from "@thi.ng/hiccup-carbon-icons/information";
-import { withSize } from "@thi.ng/hiccup-carbon-icons/with-size";
-import { div } from "@thi.ng/hiccup-html/blocks";
-import { inputRange, label } from "@thi.ng/hiccup-html/forms";
+import { INFORMATION, withSize } from "@thi.ng/hiccup-carbon-icons";
+import { div, inputRange, label } from "@thi.ng/hiccup-html";
+import { $compile } from "@thi.ng/rdom";
 import { $canvas } from "@thi.ng/rdom-canvas";
-import { $compile } from "@thi.ng/rdom/compile";
-import type { ISubscription } from "@thi.ng/rstream";
-import { fromDOMEvent } from "@thi.ng/rstream/event";
-import { fromRAF } from "@thi.ng/rstream/raf";
-import { reactive } from "@thi.ng/rstream/stream";
-import { sync } from "@thi.ng/rstream/sync";
-import { map } from "@thi.ng/transducers/map";
-import { slidingWindow } from "@thi.ng/transducers/sliding-window";
+import {
+	fromDOMEvent,
+	fromRAF,
+	ISubscription,
+	reactive,
+	sync,
+} from "@thi.ng/rstream";
+import { map, slidingWindow } from "@thi.ng/transducers";
 
 const slider = (
 	dest: ISubscription<number, number>,

diff --git a/examples/rdom-search-docs/src/index.ts b/examples/rdom-search-docs/src/index.ts
@@ -1,16 +1,8 @@
-import { timed } from "@thi.ng/bench/timed";
-import { div } from "@thi.ng/hiccup-html/blocks";
-import { inputText } from "@thi.ng/hiccup-html/forms";
-import { anchor } from "@thi.ng/hiccup-html/inline";
-import type { IComponent } from "@thi.ng/rdom";
-import { $compile } from "@thi.ng/rdom/compile";
-import { Component } from "@thi.ng/rdom/component";
-import { $text } from "@thi.ng/rdom/dom";
-import { $list } from "@thi.ng/rdom/list";
-import type { ISubscription } from "@thi.ng/rstream";
-import { debounce } from "@thi.ng/rstream/debounce";
-import { reactive, Stream } from "@thi.ng/rstream/stream";
-import { map } from "@thi.ng/transducers/map";
+import { timed } from "@thi.ng/bench";
+import { anchor, div, inputText } from "@thi.ng/hiccup-html";
+import { $list, $text, Component, IComponent } from "@thi.ng/rdom";
+import { debounce, ISubscription, reactive, Stream } from "@thi.ng/rstream";
+import { map } from "@thi.ng/transducers";
 import msgpack from "@ygoe/msgpack";
 import { pageControls, Pagination } from "./pagination";
 import { search, type SearchIndex } from "./search";
@@ -19,7 +11,7 @@ const INDEX_URL = "https://docs.thi.ng/umbrella/search-index-latest.bin";
 const REPO_URL = "https://github.com/thi-ng/umbrella/";
 const BASE_URL = `${REPO_URL}blob/develop/packages/`;
 const SRC_URL = `${REPO_URL}/tree/develop/examples/rdom-search-docs`;
-const INITIAL_QUERY = "hdom";
+const INITIAL_QUERY = "api";
 const PAGE_SIZE = 25;
 
 class DocSearch extends Component {
@@ -38,7 +30,7 @@ class DocSearch extends Component {
 	}
 
 	async mount(parent: Element) {
-		this.wrapper = $compile(
+		this.wrapper = this.$compile(
 			div(
 				{ class: "ma2 measure-ns center-ns f7 f6-ns" },
 				["h1.mv0", {}, "thi.ng/umbrella doc search"],
@@ -82,7 +74,7 @@ class DocSearch extends Component {
 
 			// compile inner component tree, including embedded reactive
 			// values/streams and controlflow structures
-			this.inner = $compile(
+			this.inner = this.$compile(
 				div(
 					null,
 					inputText({

diff --git a/examples/rdom-search-docs/src/pagination.ts b/examples/rdom-search-docs/src/pagination.ts
@@ -1,15 +1,9 @@
 import type { IRelease } from "@thi.ng/api";
 import { equiv } from "@thi.ng/equiv";
-import { div } from "@thi.ng/hiccup-html/blocks";
-import { button } from "@thi.ng/hiccup-html/forms";
-import { clamp } from "@thi.ng/math/interval";
-import type { ISubscription } from "@thi.ng/rstream";
-import { reactive, Stream } from "@thi.ng/rstream/stream";
-import { sync } from "@thi.ng/rstream/sync";
-import { comp } from "@thi.ng/transducers/comp";
-import { dedupe } from "@thi.ng/transducers/dedupe";
-import { map } from "@thi.ng/transducers/map";
-import { page } from "@thi.ng/transducers/page";
+import { button, div } from "@thi.ng/hiccup-html";
+import { clamp } from "@thi.ng/math";
+import { ISubscription, reactive, Stream, sync } from "@thi.ng/rstream";
+import { comp, dedupe, map, page } from "@thi.ng/transducers";
 
 export class Pagination<T extends any[]> implements IRelease {
 	page: Stream<number>;

diff --git a/examples/rdom-search-docs/src/search.ts b/examples/rdom-search-docs/src/search.ts
@@ -1,5 +1,5 @@
 import type { IObjectOf } from "@thi.ng/api";
-import { compareByKeys2 } from "@thi.ng/compare/keys";
+import { compareByKeys2 } from "@thi.ng/compare";
 
 export type PackedTrie = [IObjectOf<PackedTrie>, number[]?];
 

diff --git a/examples/rdom-svg-nodes/src/index.ts b/examples/rdom-svg-nodes/src/index.ts
@@ -1,15 +1,10 @@
-import { defAtom } from "@thi.ng/atom/atom";
+import { defAtom } from "@thi.ng/atom";
 import { equivArrayLike } from "@thi.ng/equiv";
-import { circle } from "@thi.ng/hiccup-svg/circle";
-import { line } from "@thi.ng/hiccup-svg/line";
-import { svg } from "@thi.ng/hiccup-svg/svg";
-import { $compile } from "@thi.ng/rdom/compile";
-import { $list } from "@thi.ng/rdom/list";
-import { fromAtom } from "@thi.ng/rstream/atom";
-import { indexed } from "@thi.ng/transducers/indexed";
-import { partition } from "@thi.ng/transducers/partition";
-import { repeatedly } from "@thi.ng/transducers/repeatedly";
-import { random2 } from "@thi.ng/vectors/random";
+import { circle, line, svg } from "@thi.ng/hiccup-svg";
+import { $compile, $list } from "@thi.ng/rdom";
+import { fromAtom } from "@thi.ng/rstream";
+import { indexed, partition, repeatedly } from "@thi.ng/transducers";
+import { random2 } from "@thi.ng/vectors";
 
 const WIDTH = 600;
 const NUM = 10;

diff --git a/yarn.lock b/yarn.lock
@@ -1033,6 +1033,7 @@ __metadata:
   resolution: "@example/rdom-delayed-update@workspace:examples/rdom-delayed-update"
   dependencies:
     "@thi.ng/compose": "workspace:^"
+    "@thi.ng/hiccup-html": "workspace:^"
     "@thi.ng/random": "workspace:^"
     "@thi.ng/rdom": "workspace:^"
     "@thi.ng/rstream": "workspace:^"