Add Observable test

dy · May 21, 2020 · 283447c · 283447c
1 parent 3923809
commit 283447c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/examples/rx-use.html b/examples/rx-use.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<div id="location"></div>
+<script type="module">
+  // import { h, $ } from 'https://unpkg.com/spect?module'
+  import { h, $ } from '../'
+  import { fromEvent } from 'https://unpkg.com/rxjs?module'
+  import { scan } from 'https://unpkg.com/rxjs@6.5.5/_esm5/operators/index.js?module'
+
+
+  $('#location', el => {
+    h`<${el}>Clicked ${ fromEvent(document, 'click').pipe(scan(count => count + 1, 0)) } times</>`
+  })
+</script>
diff --git a/h.js b/h.js
@@ -166,7 +166,7 @@ export default function html(statics) {
       else children.push(-j)
 
     // actualize program
-    if (prog[0] === ATTR || count || type === COMP || type === ELEM || type === FRAG) {
+    if (prog[0] === ATTR || count || node.localName === H_TAG) {
       if (type) {
         // collect static props for component
         if (type === ELEM || type === COMP) for (let attr of node.attributes) props.push(`"${esc(attr.name)}":"${esc(attr.value)}"`)
@@ -185,6 +185,8 @@ export default function html(statics) {
             program.push(`el=frag.firstElementChild,child=el.childNodes,`)
           }
         }
+        // FIXME: h`<#smth>`
+        // else if (type === TEXT && node.localName === H_TAG) program.push(`el=document.querySelector("${node.id}"),child=el.childNodes,`)
         else program.push(`el=frag.getElementById("${esc(node.id)}"),child=el.childNodes,`)
 
         if (type === COMP || type === ELEM) program.push(`el.replaceWith(h(args[${sel}]`)
@@ -278,7 +280,9 @@ export function h(tag, props) {
 
   // merge children
   for (i = 2; i < arguments.length; i++)
-    if (observable(arguments[i])) cleanup.push(subs[i] = arguments[i]), arguments[i] = document.createTextNode('')
+    if (observable(arguments[i])) {
+      cleanup.push(subs[i] = arguments[i]), arguments[i] = document.createTextNode('')
+    }
 
   // append shortcut
   if (!tag.childNodes.length) for (i of flat(arguments)) tag.append(i)
@@ -311,7 +315,7 @@ const flat = (args) => {
 function sube(target, fn) {
   let unsub, stop
   if (typeof target === 'function') unsub = target(fn)
-  else if (target[symbol.observable]) target[symbol.observable](({subscribe}) => unsub = subscribe({ next: fn }))
+  else if (target[symbol.observable]) unsub = target[symbol.observable]().subscribe({next:fn})
   else if (target[Symbol.asyncIterator]) {
     unsub = () => stop = true
     ;(async () => { for await (target of target) { if (stop) break; fn(target) } })()

diff --git a/test/html.js b/test/html.js
@@ -5,6 +5,7 @@ import h from '../h.js'
 import { tick, frame, idle, time } from 'wait-please'
 import observable from './libs/observable.js'
 // import { v as iv } from 'ironjs'
+import Observable from 'zen-observable/esm.js'
 
 
 t('html: fast simple case', async t => {
@@ -744,3 +745,22 @@ t('html: dynamic data case', async t => {
 t('html: fields order', async t => {
   t.is(h`<b> b${2}b <c>c${3}c</c> b${4}b </b>`.outerHTMLClean, `<b> b2b <c>c3c</c> b4b </b>`)
 })
+
+t.todo('html: render to selector', async t=> {
+  let x = document.createElement('x')
+  x.id = x
+  document.body.appendChild(x)
+  h`<#x>1</>`
+
+  t.is(x.textContent, '1')
+})
+
+t('html: accepts rxjs directly', async t => {
+  const foo = new Observable(subscriber => {
+    subscriber.next(42);
+  });
+
+  let el = h`<div>${ foo }</div>`
+  await frame(2)
+  t.is(el.outerHTMLClean, `<div>42</div>`)
+})