@cycle/dom - npm Package Compare versions

Comparing version 10.0.0-rc21 to 10.0.0-rc22

lib/isolate.js

@@ -9,2 +9,11 @@ "use strict";
     return sink.map(function (vTree) {
+        if (vTree.data.isolate) {
+            var existingScope = parseInt(vTree.data.isolate.split(utils_1.SCOPE_PREFIX + 'cycle')[1]);
+            var _scope = parseInt(scope.split('cycle')[1]);
+            if (Number.isNaN(existingScope) ||
+                Number.isNaN(_scope) ||
+                existingScope > _scope) {
+                return vTree;
+            }
+        }
         vTree.data.isolate = utils_1.SCOPE_PREFIX + scope;
@@ -11,0 +20,0 @@ return vTree;

package.json

 {
   "name": "@cycle/dom",
-  "version": "10.0.0-rc21",
+  "version": "10.0.0-rc22",
   "description": "The standard DOM Driver for Cycle.js, based on Snabbdom",
@@ -5,0 +5,0 @@ "license": "MIT",

src/isolate.ts

@@ -15,2 +15,15 @@ import {VNode} from 'snabbdom';
   return <Mappable<VNode, VNode>>sink.map((vTree: VNode) => {
+    if (vTree.data.isolate) {
+      const existingScope =
+        parseInt(vTree.data.isolate.split(SCOPE_PREFIX + 'cycle')[1]);
+
+      const _scope = parseInt(scope.split('cycle')[1]);
+
+      if (Number.isNaN(existingScope) ||
+          Number.isNaN(_scope) ||
+          existingScope > _scope
+      ) {
+        return vTree;
+      }
+    }
     vTree.data.isolate = SCOPE_PREFIX + scope;
@@ -17,0 +30,0 @@ return vTree;

test/browser/isolation.js

@@ -8,3 +8,3 @@ 'use strict';
 let Rx = require('rxjs');
-let {h, svg, div, p, span, h2, h3, h4, hJSX, select, option, makeDOMDriver} = CycleDOM;
+let {h, svg, div, p, span, h2, h3, h4, hJSX, select, option, button, makeDOMDriver} = CycleDOM;
 
@@ -718,3 +718,186 @@ function createRenderTarget(id = null) {
     dispose = run();
+  });
+
+  it('should allow an isolated child to receive events when it is used as ' +
+    'the vTree of an isolated parent component', (done) => {
+    let dispose
+    function Component(sources) {
+      sources.DOM.select('.btn').events('click')
+        .subscribe(ev => {
+          assert.strictEqual(ev.target.tagName, 'BUTTON')
+          dispose()
+          done()
+        })
+      return {
+        DOM: Rx.Observable.of(
+          div('.component', {}, [
+            button('.btn', {}, 'Hello')
+          ])
+        )
+      }
+    }
+
+    function main(sources) {
+      const component = isolate(Component)(sources)
+
+      return {DOM: component.DOM}
+    }
+
+    function app(sources) {
+      return isolate(main)(sources)
+    }
+
+    const {sinks, sources, run} = Cycle(app, {
+      DOM: makeDOMDriver(createRenderTarget())
+    })
+
+
+    sinks.DOM.subscribe(x => console.log('dom', x))
+
+    sources.DOM.elements.skip(1).take(1).subscribe(root => {
+      const element = root.querySelector('.btn')
+      assert.notStrictEqual(element, null)
+      setTimeout(() => element.click())
+    })
+
+    dispose = run()
   })
+
+  it('should allow an isolated child to receive events when it is used as ' +
+    'the vTree of an isolated parent component when scope is explicitly ' +
+    'specified on child', (done) => {
+    let dispose
+    function Component(sources) {
+      sources.DOM.select('.btn').events('click')
+        .subscribe(ev => {
+          assert.strictEqual(ev.target.tagName, 'BUTTON')
+          dispose()
+          done()
+        })
+      return {
+        DOM: Rx.Observable.of(
+          div('.component', {}, [
+            button('.btn', {}, 'Hello')
+          ])
+        )
+      }
+    }
+
+    function main(sources) {
+      const component = isolate(Component, 'foo')(sources)
+
+      return {DOM: component.DOM}
+    }
+
+    function app(sources) {
+      return isolate(main)(sources)
+    }
+
+    const {sinks, sources, run} = Cycle(app, {
+      DOM: makeDOMDriver(createRenderTarget())
+    })
+
+
+    sinks.DOM.subscribe(x => console.log('dom', x))
+
+    sources.DOM.elements.skip(1).take(1).subscribe(root => {
+      const element = root.querySelector('.btn')
+      assert.notStrictEqual(element, null)
+      setTimeout(() => element.click())
+    })
+
+    dispose = run()
+  })
+
+  it('should allow an isolated child to receive events when it is used as ' +
+    'the vTree of an isolated parent component when scope is explicitly ' +
+    'specified on parent', (done) => {
+    let dispose
+    function Component(sources) {
+      sources.DOM.select('.btn').events('click')
+        .subscribe(ev => {
+          assert.strictEqual(ev.target.tagName, 'BUTTON')
+          dispose()
+          done()
+        })
+      return {
+        DOM: Rx.Observable.of(
+          div('.component', {}, [
+            button('.btn', {}, 'Hello')
+          ])
+        )
+      }
+    }
+
+    function main(sources) {
+      const component = isolate(Component)(sources)
+
+      return {DOM: component.DOM}
+    }
+
+    function app(sources) {
+      return isolate(main, 'foo')(sources)
+    }
+
+    const {sinks, sources, run} = Cycle(app, {
+      DOM: makeDOMDriver(createRenderTarget())
+    })
+
+
+    sinks.DOM.subscribe(x => console.log('dom', x))
+
+    sources.DOM.elements.skip(1).take(1).subscribe(root => {
+      const element = root.querySelector('.btn')
+      assert.notStrictEqual(element, null)
+      setTimeout(() => element.click())
+    })
+
+    dispose = run()
+  })
+
+  it('should allow an isolated child to receive events when it is used as ' +
+    'the vTree of an isolated parent component when scope is explicitly ' +
+    'specified on parent and child', (done) => {
+    let dispose
+    function Component(sources) {
+      sources.DOM.select('.btn').events('click')
+        .subscribe(ev => {
+          assert.strictEqual(ev.target.tagName, 'BUTTON')
+          dispose()
+          done()
+        })
+      return {
+        DOM: Rx.Observable.of(
+          div('.component', {}, [
+            button('.btn', {}, 'Hello')
+          ])
+        )
+      }
+    }
+
+    function main(sources) {
+      const component = isolate(Component, 'bar')(sources)
+
+      return {DOM: component.DOM}
+    }
+
+    function app(sources) {
+      return isolate(main, 'foo')(sources)
+    }
+
+    const {sinks, sources, run} = Cycle(app, {
+      DOM: makeDOMDriver(createRenderTarget())
+    })
+
+
+    sinks.DOM.subscribe(x => console.log('dom', x))
+
+    sources.DOM.elements.skip(1).take(1).subscribe(root => {
+      const element = root.querySelector('.btn')
+      assert.notStrictEqual(element, null)
+      setTimeout(() => element.click())
+    })
+
+    dispose = run()
+  })
 });

No alert changes

Improved metrics

Total package byte prevSize

1282996

increased by0.49%

Lines of code

22498

increased by0.78%

No dependency changes