add focus, mutate, modify, attributes

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}

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"

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

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"

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... ]
 

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"

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 }

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}

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" ]

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
       ]

test/client/components/update.coffee

@@ -2,25 +2,27 @@ import * as _ from "@dashkite/joy"
 import * as c from "@dashkite/carbon"
 import Greetings from "./greetings"
 
+html = (data) ->
+  """
+  <form>
+    <input name='salutation' type='text' value='#{data.salutation}'/>
+    <input name='name' type='text' value='#{data.name}'/>
+  </form>
+  """
+
 class extends c.Handle
 
   _.mixin @, [
     c.tag "x-update-greeting"
     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) ->
-          """
-          <form>
-            <input name='salutation' type='text' value='#{data.salutation}'/>
-            <input name='name' type='text' value='#{data.name}'/>
-          </form>
-          """
-] ] ]
+] ]

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) -> "<p>#{data.salutation}, #{data.name}!</p>"
   ] ] ]