Test and minor improvements

.github/workflows/nodejs.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x]
+        node-version: [12.x, 14.x]
 
     steps:
     - uses: actions/checkout@v1

assets/test-bundled.html

@@ -17,6 +17,7 @@
     <script type="module" src="../dist-web/index.bundled.js"></script>
     <script>mocha.setup('bdd')</script>
     <script type="module" src="../dist-src/index.test.js"></script>
+    <script type="module" src="../dist-src/publication-web.test.js"></script>
     <script type="module">
       mocha.checkLeaks();
       mocha.run();

package.json

@@ -1,52 +1,52 @@
 {
-    "name": "bubblesub",
-    "version": "1.5.0",
-    "description": "Observables based on DOM events",
-    "repository": "https://github.com/zenwork/bubblesub.git",
-    "author": "Florian Hehlen <florian@hehlen.name>",
-    "license": "MIT",
-    "keywords": [
+    "name"           : "bubblesub",
+    "version"        : "1.5.0",
+    "description"    : "Observables based on DOM events",
+    "repository"     : "https://github.com/zenwork/bubblesub.git",
+    "author"         : "Florian Hehlen <florian@hehlen.name>",
+    "license"        : "MIT",
+    "keywords"       : [
         "typescript",
         "DI",
         "publisher",
         "subscriber",
         "event"
     ],
-    "scripts": {
-        "build": "pika build",
-        "build:serve": "npm run build && mkdir -p .serve/node_modules && rsync -cavzur pkg/ .serve/  > /dev/null 2>&1 && rsync -cavzur ./node_modules/lit-html .serve/node_modules  > /dev/null 2>&1 && rsync -cavzur ./node_modules/lit-element .serve/node_modules  > /dev/null 2>&1 ",
-        "build:watch": "watch \"npm run build:serve\" ./src ./assets",
-        "lint": "tslint -c tslint.json 'src/**/*.ts'",
-        "minify": "terser --source-map includeSources pkg/dist-web/index.js -o pkg/dist-web/index.min.js; terser --source-map includeSources pkg/dist-web/index.bundled.js -o pkg/dist-web/index.bundled.min.js",
-        "prepare": "npm run build:serve; npm run lint",
-        "serve": "es-dev-server --config es-dev-server.config.js --root-dir .serve",
-        "test": "npm run test:headless",
+    "scripts"        : {
+        "build"        : "pika build",
+        "build:serve"  : "npm run build && mkdir -p .serve/node_modules && rsync -cavzur pkg/ .serve/  > /dev/null 2>&1 && rsync -cavzur ./node_modules/lit-html .serve/node_modules  > /dev/null 2>&1 && rsync -cavzur ./node_modules/lit-element .serve/node_modules  > /dev/null 2>&1 ",
+        "build:watch"  : "watch \"npm run build:serve\" ./src ./assets",
+        "lint"         : "tslint -c tslint.json 'src/**/*.ts'",
+        "minify"       : "terser --source-map includeSources pkg/dist-web/index.js -o pkg/dist-web/index.min.js; terser --source-map includeSources pkg/dist-web/index.bundled.js -o pkg/dist-web/index.bundled.min.js",
+        "prepare"      : "npm run build:serve; npm run lint",
+        "serve"        : "es-dev-server --config es-dev-server.config.js --root-dir .serve",
+        "test"         : "npm run test:headless",
         "test:headless": "mocha-headless-chrome -f http://localhost:8888/assets/test-bundled.html",
-        "test:watch": "watch \"npm run build:serve && npm run test:headless\" ./src ./assets",
-        "version": "npm run build"
+        "test:watch"   : "watch \"npm run build:serve && npm run test:headless\" ./src ./assets",
+        "version"      : "npm run build"
     },
     "devDependencies": {
-        "@pika/pack": "^0.5.0",
-        "@pika/plugin-build-node": "^0.6.1",
-        "@pika/plugin-build-web": "^0.6.1",
-        "@pika/plugin-bundle-web": "^0.6.1",
-        "@pika/plugin-copy-assets": "^0.6.1",
+        "@pika/pack"                  : "^0.5.0",
+        "@pika/plugin-build-node"     : "^0.6.1",
+        "@pika/plugin-build-web"      : "^0.6.1",
+        "@pika/plugin-bundle-web"     : "^0.6.1",
+        "@pika/plugin-copy-assets"    : "^0.6.1",
         "@pika/plugin-ts-standard-pkg": "^0.6.1",
-        "@pika/web": "^0.6.1",
-        "@types/chai": "^4.2.3",
-        "@types/mocha": "^5.2.7",
-        "chai": "^4.2.0",
-        "es-dev-server": "^1.36.2",
-        "lit-element": "^2.2.1",
-        "lit-html": "^1.1.2",
-        "mocha": "^6.2.1",
-        "mocha-headless-chrome": "^2.0.3",
-        "terser": "^4.6.3",
-        "tslint": "^5.20.0",
-        "typescript": "^3.7.5",
-        "watch": "^1.0.2"
+        "@pika/web"                   : "^0.6.1",
+        "@types/chai"                 : "^4.2.3",
+        "@types/mocha"                : "^5.2.7",
+        "chai"                        : "^4.2.0",
+        "es-dev-server"               : "^1.57.4",
+        "lit-element"                 : "^2.2.1",
+        "lit-html"                    : "^1.1.2",
+        "mocha"                       : "^6.2.1",
+        "mocha-headless-chrome"       : "^2.0.3",
+        "terser"                      : "^4.6.3",
+        "tslint"                      : "^5.20.0",
+        "typescript"                  : "^3.7.5",
+        "watch"                       : "^1.0.2"
     },
-    "@pika/pack": {
+    "@pika/pack"     : {
         "pipeline": [
             [
                 "@pika/plugin-ts-standard-pkg"

src/example/di/index.test.ts

@@ -25,25 +25,25 @@ describe('fibonacci counter(di) example', () => {
       value = new Query(wc, 'span')
       button = new Query(wc, '#button')
       wrapper = {
-          wc,
-          value: async () => {
-            await value.query()
-          },
-          button: async () => {
-            await button.query().click()
-            await wc.updateComplete
+        wc,
+        value: async () => {
+          await value.query()
+        },
+        button: async () => {
+          await button.query().click()
+          await wc.updateComplete
 
-          },
-          await: async () => {
-            return await wc.updateComplete
-          }
+        },
+        await: async () => {
+          return await wc.updateComplete
         }
+      }
       return wc.updateComplete
     })
 
-    setTimeout(() => {
+    it('should show next number when button pressed', function(done) {
+      setTimeout(async () => {
 
-      it('should show next number when button pressed', async function() {
         await this.timeout(1000)
         await wrapper.await()
         chai.expect(value.query().textContent).to.equal('0')
@@ -62,8 +62,10 @@ describe('fibonacci counter(di) example', () => {
         await wrapper.button()
         await wrapper.button()
         chai.expect(value.query().textContent).to.equal('89')
-      })
-    }, 500)
+
+        done()
+      }, 500)
+    })
 
   })
 })

src/example/progress/ProgressDialog.ts

@@ -6,6 +6,7 @@ import { FileService } from './FileService.js'
 export class ProgressDialog extends HTMLElement {
 
   pub: Publication<number> = null
+  pub2: Publication<number> = null
   root: ShadowRoot
 
   constructor() {

src/example/streaming/index.test.ts

@@ -5,9 +5,6 @@ import { Ticker } from './Ticker.js'
 export { Ticker } from './Ticker.js'
 
 describe('streaming', function() {
-  // @ts-ignore
-  this.timeout(5000)
-  this.enableTimeouts()
 
   describe('wc', function() {
     let service: PriceSource
@@ -50,7 +47,7 @@ describe('streaming', function() {
 
     })
 
-    it('2- should not miss last when subscribing to last', function(done) {
+    it('3- should not miss last when subscribing to last', function(done) {
       service = new PriceSource([
         {name: 'apples', price: 999},
         {name: 'apples', price: 888},

src/index.test.ts

@@ -1,3 +1,4 @@
 import './example/index.test.js'
+import './publication-web.test.js'
 import './publication.test.js'
 import './subscriber.test.js'

src/publication-web.test.ts

@@ -0,0 +1,40 @@
+import { publish } from './publish.js'
+import { subscribe } from './subscribe.js'
+
+describe('publish()', function() {
+
+  describe('multiple publishers', function() {
+
+    it('creating two publication uses same publication internally', function() {
+
+      const pub1 = publish(document.body).create<string>('double-create', 'foobar', 10)
+      const pub2 = publish(document.body).create<string>('double-create', 'foobar', 10)
+
+      chai.expect(pub1.id).to.equal(pub2.id)
+    })
+
+    it('subscriber gets all updates when there are multiple publishers', function(done) {
+
+      const pub1 = publish(document.body).create<string>('double-create', 'foobar', 10)
+      const pub2 = publish(document.body).create<string>('double-create', 'fizzbuz', 10)
+
+      pub1.update('one')
+      pub2.update('two')
+      pub1.update('three')
+
+      const result: string[] = []
+      subscribe(document.body).to<string>('double-create')
+        .map(s => {
+          result.push(s)
+          if (result.length === 4) {
+            chai.expect(result[0]).to.equal('foobar')
+            chai.expect(result[1]).to.equal('one')
+            chai.expect(result[2]).to.equal('two')
+            chai.expect(result[3]).to.equal('three')
+            chai.expect(result.length).to.equal(4)
+            done()
+          }
+        })
+    })
+  })
+})

src/publication.test.ts

@@ -1,7 +1,7 @@
 import { Publication } from './publication.js'
 
 describe('publisher', function() {
-  this.enableTimeouts()
+
   const expect = chai.expect
 
   describe('Publication', function() {
@@ -50,9 +50,9 @@ describe('publisher', function() {
     })
 
     it('should trigger early subscriptions', function() {
-      let subAll: number
-      let subFirst: number
-      let subLast: number
+      let subAll: number = 0
+      let subFirst: number = 0
+      let subLast: number = null
 
       const pub = new Publication<number>('test')
 
@@ -63,7 +63,7 @@ describe('publisher', function() {
       pub.update(999)
       pub.update(888)
       expect(subAll).to.equal(888)
-      expect(subLast).to.equal(undefined)
+      expect(subLast).to.equal(null)
       pub.update(777)
 
       pub.close()
@@ -74,9 +74,9 @@ describe('publisher', function() {
     })
 
     it('should trigger late subscriptions', function(done) {
-      let subAll: number
-      let subFirst: number
-      let subLast: number
+      let subAll: number = 0
+      let subFirst: number = 0
+      let subLast: number = 0
 
       const pub = new Publication<number>('test')
 
@@ -98,13 +98,13 @@ describe('publisher', function() {
     })
 
     it('should not remember past updates when configured to do so', function(done) {
-      const subAllBefore: number[] = new Array<number>()
-      const subFirstBefore: number[] = new Array<number>()
-      const subLastBefore: number[] = new Array<number>()
+      const subAllBefore: number[] = []
+      const subFirstBefore: number[] = []
+      const subLastBefore: number[] = []
 
-      const subAll: number[] = new Array<number>()
-      const subFirst: number[] = new Array<number>()
-      const subLast: number[] = new Array<number>()
+      const subAll: number[] = []
+      const subFirst: number[] = []
+      const subLast: number[] = []
 
       const pub = new Publication<number>('test', null, 0)
       pub.subscribe((update: number) => {subAllBefore.push(update)})
@@ -122,6 +122,7 @@ describe('publisher', function() {
 
       setTimeout(() => {
         expect(subAll.length).to.eq(0)
+        expect(subAllBefore.length).to.eq(3)
         expect(subFirstBefore.length).to.eq(1)
         expect(subFirstBefore[0]).to.eq(999)
         expect(subFirst.length).to.eq(0)

src/publication.ts

@@ -60,11 +60,12 @@ export class PublicationRequest<T> {
   }
 }
 
+let id: number = 0
 /**
  * A published value
  */
 export class Publication<T> {
-
+  readonly id: number = ++id
   readonly name: string
   private subscriptions = new Array<Update<T>>()
   private firstSubscriptions = new Array<Update<T>>()
@@ -167,12 +168,14 @@ export class Publication<T> {
 
   asDebugMap(): {} {
     return {
+      id: this.id,
       name: this.name,
       length: this.length,
-      sub: this.subscriptions.length,
-      fistSub: this.firstSubscriptions.length,
-      lastSub: this.lastSubscriptions.length,
-      lastValue: this.last.constructor.name + ':' + JSON.stringify(this.last)
+      subscribedForAll: this.subscriptions.length,
+      subscribedForFirst: this.firstSubscriptions.length,
+      subscribedForLast: this.lastSubscriptions.length,
+      type: this.last ? this.last.constructor.name : null,
+      values: this.publishedValues
     }
   }
 }

src/publish.ts

@@ -19,13 +19,19 @@ export function publish(parent: HTMLElement | ShadowRoot) {
     create: function createPublication<T>(name: string,
                                           initialValue?: T | null | undefined,
                                           maxSize: number = -1): Publication<T> {
+      let tag = 'unknown'
+      if (parent instanceof HTMLElement) tag = parent.tagName
+      if (parent instanceof ShadowRoot) tag = parent.host.tagName + ' (shadow-dom)'
 
       if (handlers.get(parent) && handlers.get(parent).get(name)) {
         // listener exists so just return stored publication
-        return handlers.get(parent).get(name).publication
+        const pub = handlers.get(parent).get(name).publication
+        // @ts-ignore
+        console.debug(`return existing publication[${pub.id}] for ${name}@${tag}`)
+        return pub
 
       } else {
-
+        console.debug(`create publication for ${name}@${tag}`)
         // create new publication and listener
         const publication = new Publication<T>(name, initialValue, maxSize)
         const builder = new HandlerBuilder(publication)