From 565990fcbce9e3ef8860fdaa127ebcba22a9ef2a Mon Sep 17 00:00:00 2001 From: Karsten Schmidt Date: Wed, 30 Nov 2022 13:38:49 +0100 Subject: [PATCH] refactor(examples): update imports in rdom examples --- examples/rdom-basics/src/index.ts | 29 ++++--- examples/rdom-delayed-update/package.json | 1 + examples/rdom-delayed-update/src/index.ts | 92 +++++++++++---------- examples/rdom-dnd/src/draggable.ts | 5 +- examples/rdom-dnd/src/index.ts | 10 +-- examples/rdom-dnd/src/notification.ts | 16 ++-- examples/rdom-lissajous/src/index.ts | 23 +++--- examples/rdom-search-docs/src/index.ts | 24 ++---- examples/rdom-search-docs/src/pagination.ts | 14 +--- examples/rdom-search-docs/src/search.ts | 2 +- examples/rdom-svg-nodes/src/index.ts | 17 ++-- yarn.lock | 1 + 12 files changed, 108 insertions(+), 126 deletions(-) diff --git a/examples/rdom-basics/src/index.ts b/examples/rdom-basics/src/index.ts index 69e2a4d7b1..c380da6c13 100644 --- 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(); diff --git a/examples/rdom-delayed-update/package.json b/examples/rdom-delayed-update/package.json index 9a1c6c25aa..0a1c2a62da 100644 --- 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 index 2cc32f3b85..cefd9c2148 100644 --- 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) => [ - "img.db.w-100", - { +const userThumb = (srcUrl: Promise) => + img(".db.w-100", { // src image attribute src: merge({ // stream sources @@ -48,24 +48,24 @@ const userThumb = (srcUrl: Promise) => [ ///.... ], }), - }, -]; + }); /** * Alternative project thumbnail with custom inner pre-loader component. * * @param srcUrl - */ -const userThumbAlt = (srcUrl: Promise) => [ - "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) => + 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 { 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 index 987da483ce..7ad81e0375 100644 --- 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 index e1e307d610..06d5b5af10 100644 --- 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 index 13f3dbb94c..5b52c6c5e4 100644 --- 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 index c11ab7bf19..fe35cbdfd0 100644 --- 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, diff --git a/examples/rdom-search-docs/src/index.ts b/examples/rdom-search-docs/src/index.ts index 22d671c9cd..240168a095 100644 --- 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 index 60cfec8d54..43e205778e 100644 --- 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 implements IRelease { page: Stream; diff --git a/examples/rdom-search-docs/src/search.ts b/examples/rdom-search-docs/src/search.ts index dab832313c..adf9bb81fa 100644 --- 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, number[]?]; diff --git a/examples/rdom-svg-nodes/src/index.ts b/examples/rdom-svg-nodes/src/index.ts index 1d779a810b..8ca7b9129f 100644 --- 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 index 5a8418c089..0c68ecb2a2 100644 --- 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:^"