From 70e3d724031e8a9d3e4ab1cb20c3c2bf24fb16e7 Mon Sep 17 00:00:00 2001 From: Daniel Yoder Date: Wed, 21 Jul 2021 12:43:39 -0700 Subject: [PATCH] add focus, mutate, modify, attributes --- src/actions/attributes.coffee | 20 ++++++++++++++++++++ src/actions/description.coffee | 2 +- src/actions/focus.coffee | 6 ++++-- src/actions/index.coffee | 1 + src/initialize/describe.coffee | 11 ++++++++--- src/initialize/index.coffee | 2 ++ src/initialize/modify.coffee | 18 ++++++++++++++++++ src/initialize/mutate.coffee | 15 +++++++++++++++ tasks/index.coffee | 2 -- test/client/components/tutorial.coffee | 4 ---- test/client/components/update.coffee | 24 +++++++++++++----------- test/client/components/view.coffee | 3 +-- 12 files changed, 83 insertions(+), 25 deletions(-) create mode 100644 src/actions/attributes.coffee create mode 100644 src/initialize/modify.coffee create mode 100644 src/initialize/mutate.coffee diff --git a/src/actions/attributes.coffee b/src/actions/attributes.coffee new file mode 100644 index 0000000..553074c --- /dev/null +++ b/src/actions/attributes.coffee @@ -0,0 +1,20 @@ +import {pipe} from "@dashkite/joy/function" +import { replace, uncase, camelCase } from "@dashkite/joy/text" +import {poke, read} from "@dashkite/katana/sync" + +# TODO this should be in joy +fromEntries = (pairs) -> Object.fromEntries pairs +# TODO should we exclude data properties? +convert = pipe [ uncase, camelCase ] + +_attributes = (handle) -> + fromEntries ([ (convert a.name), a.value ] for a in handle.dom.attributes) + +attributes = pipe [ + read "handle" + poke _attributes +] + +attributes._ = _attributes + +export {attributes} diff --git a/src/actions/description.coffee b/src/actions/description.coffee index ecbf4b9..320519d 100644 --- a/src/actions/description.coffee +++ b/src/actions/description.coffee @@ -1,7 +1,7 @@ import {pipe} from "@dashkite/joy/function" import {poke, read} from "@dashkite/katana/sync" -_description = (handle) -> Object.assign {}, handle.dom.dataset +_description = (handle) -> { handle.dom.dataset... } description = pipe [ read "handle" diff --git a/src/actions/focus.coffee b/src/actions/focus.coffee index 4262e16..100d67e 100644 --- a/src/actions/focus.coffee +++ b/src/actions/focus.coffee @@ -1,12 +1,14 @@ import * as F from "@dashkite/joy/function" import * as K from "@dashkite/katana" -_focus = (handle) -> (handle.root.querySelector selector)?.focus() +_focus = F.curry (selector, handle) -> + handle.root.querySelector selector + ?.focus() focus = (selector) -> F.flow [ K.read "handle" - K.pop _focus + K.pop _focus selector ] focus._ = _focus diff --git a/src/actions/index.coffee b/src/actions/index.coffee index a59eac2..f74fe01 100644 --- a/src/actions/index.coffee +++ b/src/actions/index.coffee @@ -8,4 +8,5 @@ export * from "./focus" export * from "./disable" export * from "./assign" export * from "./description" +export * from "./attributes" export * from "./sheets" diff --git a/src/initialize/describe.coffee b/src/initialize/describe.coffee index 5a67094..983e1d5 100644 --- a/src/initialize/describe.coffee +++ b/src/initialize/describe.coffee @@ -1,12 +1,17 @@ -import {peek} from "@dashkite/katana/sync" -import {curry, flow} from "@dashkite/joy/function" -import {description} from "../actions/description" +import { peek } from "@dashkite/katana/sync" +import { curry, flow } from "@dashkite/joy/function" +import { isEmpty } from "@dashkite/joy/value" +import { description } from "../actions/description" _describe = curry (handler, handle) -> observer = new MutationObserver (list) -> if (list.find (record) -> /^data\-/.test record.attributeName)? handler { handle } observer.observe handle.dom, attributes: true + if ! isEmpty description._ handle + handler { handle } + # avoid returning promise + undefined describe = (fx) -> peek _describe flow [ description, fx... ] diff --git a/src/initialize/index.coffee b/src/initialize/index.coffee index d50a4b6..d47ba5d 100644 --- a/src/initialize/index.coffee +++ b/src/initialize/index.coffee @@ -1,5 +1,7 @@ export * from "./shadow" +export * from "./modify" export * from "./describe" +export * from "./mutate" export * from "./observe" export * from "./navigate" export * from "./event" diff --git a/src/initialize/modify.coffee b/src/initialize/modify.coffee new file mode 100644 index 0000000..d167404 --- /dev/null +++ b/src/initialize/modify.coffee @@ -0,0 +1,18 @@ +import { peek } from "@dashkite/katana/sync" +import { curry, flow } from "@dashkite/joy/function" +import { attributes } from "../actions/attributes" + +_modify = curry (names, handler, handle) -> + observer = new MutationObserver (list) -> handler { handle } + observer.observe handle.dom, attributes: true, attributeFilter: names + for [ name, value ] in handle.dom.attributes when name in names + handler { handle } + break + # avoid returning promise + undefined + +modify = (names, fx) -> peek _modify names, flow [ description, fx... ] + +modify._ = _modify + +export { modify } diff --git a/src/initialize/mutate.coffee b/src/initialize/mutate.coffee new file mode 100644 index 0000000..89abc7c --- /dev/null +++ b/src/initialize/mutate.coffee @@ -0,0 +1,15 @@ +import {peek} from "@dashkite/katana/sync" +import {curry, flow} from "@dashkite/joy/function" + +_mutate = curry (handler, handle) -> + observer = new MutationObserver (list) -> handler { handle } + observer.observe handle.dom, childList: true + handler { handle } + # avoid returning promise + undefined + +mutate = (fx) -> peek _mutate flow fx + +mutate._ = _mutate + +export {mutate} diff --git a/tasks/index.coffee b/tasks/index.coffee index 208e799..54206ba 100644 --- a/tasks/index.coffee +++ b/tasks/index.coffee @@ -2,5 +2,3 @@ import * as t from "@dashkite/genie" import preset from "@dashkite/genie-presets" preset t - -t.after "build", [ "pug:with-import-map" ] diff --git a/test/client/components/tutorial.coffee b/test/client/components/tutorial.coffee index 694ca33..3611c75 100644 --- a/test/client/components/tutorial.coffee +++ b/test/client/components/tutorial.coffee @@ -14,10 +14,6 @@ class extends c.Handle c.tag "x-world-greetings" c.initialize [ c.shadow - c.activate [ - c.description - c.render template - ] c.describe [ c.render template ] diff --git a/test/client/components/update.coffee b/test/client/components/update.coffee index eb35795..895895f 100644 --- a/test/client/components/update.coffee +++ b/test/client/components/update.coffee @@ -2,6 +2,14 @@ import * as _ from "@dashkite/joy" import * as c from "@dashkite/carbon" import Greetings from "./greetings" +html = (data) -> + """ +
+ + +
+ """ + class extends c.Handle _.mixin @, [ @@ -9,18 +17,12 @@ class extends c.Handle c.diff c.initialize [ c.shadow + c.describe [ + c.call Greetings.get + c.render html + ] c.submit "form", [ c.description c.call ({key}, data) -> Greetings.put {key, data...} ] - c.activate [ - c.description - c.call Greetings.get - c.render (data) -> - """ -
- - -
- """ -] ] ] +] ] diff --git a/test/client/components/view.coffee b/test/client/components/view.coffee index 6f6b5bb..5962e28 100644 --- a/test/client/components/view.coffee +++ b/test/client/components/view.coffee @@ -11,8 +11,7 @@ class extends c.Handle c.diff c.initialize [ c.shadow - c.activate [ - c.description + c.describe [ k.poke Greetings.get c.render (data) -> "

#{data.salutation}, #{data.name}!

" ] ] ]