From a3070ba1d27ac6dfecccbd56a32c76f4e62ef2ed Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Sat, 2 Nov 2019 22:18:46 +0100
Subject: [PATCH 1/9] added more reactive interface to subscibe api

---
 .idea/inspectionProfiles/Project_Default.xml |   1 +
 src/decorators.ts                            |   4 +-
 src/example/di/CounterView.ts                |   2 +-
 src/example/progress/ProgressBar.ts          |   4 +-
 src/example/progress/ProgressDialog.ts       |   4 +-
 src/example/streaming/Ticker.ts              |  96 +++++++-----
 src/example/streaming/index.ts               |   6 +-
 src/index.ts                                 |   2 +-
 src/publisher.ts                             |  37 ++++-
 src/subscribe.ts                             | 146 +++++++++++++++++++
 src/subscriber.ts                            |  79 ----------
 test/pptr.js                                 |  12 --
 12 files changed, 252 insertions(+), 141 deletions(-)
 create mode 100644 src/subscribe.ts
 delete mode 100644 src/subscriber.ts
 delete mode 100644 test/pptr.js

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 2d93a34..b5202ce 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -37,6 +37,7 @@
       <option name="myCustomValuesEnabled" value="true" />
     </inspection_tool>
     <inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="TypeScriptPreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="UnterminatedStatementJS" enabled="false" level="WARNING" enabled_by_default="false">
       <option name="ignoreSemicolonAtEndOfBlock" value="true" />
     </inspection_tool>
diff --git a/src/decorators.ts b/src/decorators.ts
index 48c4746..9818498 100644
--- a/src/decorators.ts
+++ b/src/decorators.ts
@@ -1,5 +1,5 @@
 import { Publication, publisher } from './publisher.js'
-import { subscriber, Update } from './subscriber.js'
+import { subscribe, Update } from './subscribe.js'
 
 export class SubConfig<T> {
   name?: string | undefined
@@ -32,7 +32,7 @@ export function sub<T>(config: SubConfig<T> = {}) {
           } else {
             up = (v: any) => value = v
           }
-          if (conf.name != null) {subscriber(this).request<T>(conf.name, up)}
+          if (conf.name != null) {subscribe(this).request<T>(conf.name, up)}
           subscribed = true
         }
         if (isGet) {
diff --git a/src/example/di/CounterView.ts b/src/example/di/CounterView.ts
index 42b0ec8..39a6543 100644
--- a/src/example/di/CounterView.ts
+++ b/src/example/di/CounterView.ts
@@ -1,6 +1,6 @@
 import { customElement, html, LitElement, property } from 'lit-element'
 import { sub } from '../../decorators.js'
-import { subscriber } from '../../subscriber.js'
+import { subscribe } from '../../subscribe.js'
 import { SequenceService } from './index.js'
 
 @customElement('counter-view')
diff --git a/src/example/progress/ProgressBar.ts b/src/example/progress/ProgressBar.ts
index 8099941..fd03f4c 100644
--- a/src/example/progress/ProgressBar.ts
+++ b/src/example/progress/ProgressBar.ts
@@ -1,11 +1,11 @@
-import { subscriber } from '../../subscriber.js'
+import { subscribe } from '../../subscribe.js'
 
 export class ProgressBar extends HTMLElement {
   factor = Math.random() * 2
   f = (this.factor > 2) ? 1 : this.factor
 
   connectedCallback(): void {
-    subscriber(this)
+    subscribe(this)
       .request(
         'percent',
         (percent: number) => {
diff --git a/src/example/progress/ProgressDialog.ts b/src/example/progress/ProgressDialog.ts
index 795b93e..eb2d74e 100644
--- a/src/example/progress/ProgressDialog.ts
+++ b/src/example/progress/ProgressDialog.ts
@@ -1,5 +1,5 @@
 import { Publication, publisher } from '../../publisher.js'
-import { subscriber } from '../../subscriber.js'
+import { subscribe } from '../../subscribe.js'
 import { FileService } from './FileService.js'
 
 export class ProgressDialog extends HTMLElement {
@@ -23,7 +23,7 @@ export class ProgressDialog extends HTMLElement {
 
   connectedCallback() {
 
-    subscriber(this).request(
+    subscribe(this).request(
       'file-service',
       (srv: FileService) => {
 
diff --git a/src/example/streaming/Ticker.ts b/src/example/streaming/Ticker.ts
index b09fd1f..89486b6 100644
--- a/src/example/streaming/Ticker.ts
+++ b/src/example/streaming/Ticker.ts
@@ -1,44 +1,72 @@
-import { sub } from '../../decorators.js'
+import { customElement, html, LitElement, property } from 'lit-element'
+import { subscribe } from '../../subscribe.js'
 
-export class Ticker extends HTMLElement {
+interface Tick {
+  name: string,
+  price: number
+}
 
-  @sub({update(change) { this.updateOnChange(change)}})
-  priceStream: { name: string, price: number } | null
+@customElement('ex-ticker')
+export class Ticker extends LitElement {
 
-  lastPrice: number
+  @property()
+  applePrices: number[]
 
-  connectedCallback() {
-    this.innerHTML = `
-        <ul class="prices"></ul>
-        <h2 class="change">apple price change: </h2>
-    `
-    this.priceStream
-  }
+  @property()
+  prices: Tick[]
 
-  updateOnChange(change: { name: string, price: number }) {
-    this.updatePrice(change)
-    this.updateApplePriceChange(change)
-  }
+  @property()
+  first: Tick
+
+  @property()
+  last: Tick
+
+  constructor() {
+    super()
+    this.prices = new Array<Tick>()
+    this.applePrices = new Array<number>()
+
+    subscribe(this)
+      .to<Tick>('prices')
+      .map((tick: Tick) => {
+        if (this.prices.filter((t: Tick) => t.name === tick.name).length === 1) {
+          this.prices
+            .map((t: Tick) => {
+              if (t.name === tick.name) t.price = tick.price
+              return t
+            })
+        } else {
+          this.prices.push(tick)
+        }
+
+        if (tick.name === 'apples') this.applePrices.push(tick.price)
+        this.requestUpdate()
+
+      })
+      .mapFirst((first: Tick) => {
+        this.first = first
+      })
+      .mapLast((last: Tick) => {
+        this.last = last
+      })
 
-  private updateApplePriceChange(change: { name: string; price: number }) {
-    if (change.name === 'apples') {
-      this.querySelector('.change').innerHTML = `apple price change: ${change.price - this.lastPrice}`
-      this.lastPrice = change.price
-    }
   }
 
-  private updatePrice(change: { name: string; price: number }) {
-    const element = this.querySelector('.' + change.name)
-    const template = `${change.name}: ${change.price}`
-    if (element) {
-      element.innerHTML = template
-    } else {
-      const item = document.createElement('li')
-      item.className = change.name
-      item.innerHTML = `${change.name}: ${change.price}`
-      this.querySelector('.prices').appendChild(item)
-    }
+  render() {
+    return html`
+        <h1>prices</h1>
+        <ul class="prices">
+            ${this.prices.map((t: Tick) => html`<li>${t.name}:${t.price}</li>`)}
+        </ul>
+        <h2>first price was</h2>
+        <ul class="prices">
+            <li>${this.first ? this.first.name : ''}:${this.first ? this.first.price : ''}</li>
+        </ul>
+        <h2>last price was</h2>
+        <ul class="prices">
+            <li>${this.last ? this.last.name : ''}:${this.last ? this.last.price : ''}</li>
+        </ul>
+        <h2 class="change">apple price change: ${this.applePrices[this.applePrices.length - 1] - this.applePrices[this.applePrices.length - 2]}</h2>
+    `
   }
 }
-
-customElements.define('ex-ticker', Ticker)
diff --git a/src/example/streaming/index.ts b/src/example/streaming/index.ts
index 14b4ce7..5870edd 100644
--- a/src/example/streaming/index.ts
+++ b/src/example/streaming/index.ts
@@ -31,7 +31,7 @@ export const config = {initialValue: 0, pubTarget: document.body}
 export class PriceStreamer {
 
   @pub({initialValue: null, pubTarget: document.body})
-  priceStream: { name: string, price: number }
+  prices: { name: string, price: number }
 
   constructor() {
     this.updatePrice('apples')
@@ -44,10 +44,10 @@ export class PriceStreamer {
   updatePrice(name: string) {
     const speed = getRandomInt(200, 1000)
     console.debug(`NEW publishing prices for ${name} every ${speed} millis`)
-    generator(300, speed,
+    generator(30, speed,
       value => {
         // this[name] = value
-        this.priceStream = {name, price: value}
+        this.prices = {name, price: value}
       })
   }
 
diff --git a/src/index.ts b/src/index.ts
index 52ccaf9..4c093fc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,3 @@
 export { publisher, Publication } from './publisher.js'
-export { subscriber, PublicationRequest, PUB_REQUEST_EVENT_NAME } from './subscriber.js'
+export { subscribe, PublicationRequest, PUB_REQUEST_EVENT_NAME } from './subscribe.js'
 export * from './decorators'
diff --git a/src/publisher.ts b/src/publisher.ts
index 102eccd..8f541be 100644
--- a/src/publisher.ts
+++ b/src/publisher.ts
@@ -1,4 +1,4 @@
-import { PUB_REQUEST_EVENT_NAME, PublicationRequest, Update } from './subscriber.js'
+import { PUB_REQUEST_EVENT_NAME, PublicationRequest, Update } from './subscribe.js'
 
 export function publisher(parent: HTMLElement | ShadowRoot) {
   /**
@@ -36,9 +36,13 @@ export class Publication<T> {
 
   readonly name: string
   private subscriptions = new Array<Update<T>>()
-  private publishedValue: T | null | undefined
+  private firstSubscriptions = new Array<Update<T>>()
+  private lastSubscriptions = new Array<Update<T>>()
+  private publishedValue?: T
+  private firstPublishedValue?: T = null
+  private closed = false
 
-  constructor(name: string, value: T | null) {
+  constructor(name: string, value?: T) {
     this.name = name
     this.publishedValue = value
   }
@@ -47,12 +51,35 @@ export class Publication<T> {
     return this.publishedValue
   }
 
-  update(value: T | null | undefined) {
+  close() {
+    this.closed = true
+    this.lastSubscriptions.forEach((sub) => sub(this.publishedValue))
+  }
+
+  update(value?: T) {
+    if (!this.firstPublishedValue) {
+      this.firstSubscriptions.forEach((updateFunction) => updateFunction(value))
+      this.firstPublishedValue = value
+    }
     this.publishedValue = value
-    this.subscriptions.forEach((val) => val(this.value))
+    this.subscriptions.forEach((updateFunction) => updateFunction(value))
   }
 
   subscribe(fn: Update<T>) {
     this.subscriptions.push(fn)
   }
+
+  subscribeForFirst(fn: Update<T>) {
+    this.firstSubscriptions.push(fn)
+    if (this.firstPublishedValue) {
+      setTimeout(() => {fn(this.firstPublishedValue)}, 0)
+    }
+  }
+
+  subscribeForLast(fn: Update<T>) {
+    this.lastSubscriptions.push(fn)
+    if (this.closed) {
+      setTimeout(() => {fn(this.publishedValue)}, 0)
+    }
+  }
 }
diff --git a/src/subscribe.ts b/src/subscribe.ts
new file mode 100644
index 0000000..bf6d74d
--- /dev/null
+++ b/src/subscribe.ts
@@ -0,0 +1,146 @@
+import { Publication } from './publisher.js'
+export const PUB_REQUEST_EVENT_NAME: string = 'subscribablerequest'
+
+export function subscribe(parent: HTMLElement | ShadowRoot) {
+
+  /**
+   * Subscribe for changes to a subscibable. The update is called once on subscription to get the initial value.
+   * @param name pub name
+   * @param update function called once each time the pub changes
+   * @param retry retry getting a handle on publication if it is not yet available.
+   */
+
+  return {
+    request: function request<T>(name: string, update: Update<T>, retry: boolean = true) {
+
+      function begin(publication: PublicationRequest<T>) {
+        // subscribe for updates
+        publication.subscribe(update)
+
+        // force publish initial value
+        update(publication.value)
+      }
+
+      setup(name, retry, begin, parent)
+
+    },
+    to: function to<T>(name: string): To<T> { return new To<T>(name, parent)}
+  }
+
+}
+
+/**
+ * Request for publication to subscribe to
+ */
+export class PublicationRequest<T> {
+  readonly name: string
+  pub?: Publication<T>
+
+  constructor(name: string) {
+    this.name = name
+  }
+
+  get value(): T | null | undefined {
+    return this.pub ? this.pub.value : null
+  }
+
+  subscribe(update: Update<T>) {
+    if (this.pub) this.pub.subscribe(update)
+  }
+
+  subscribeForFirst(fn: Update<T>) {
+    if (this.pub) this.pub.subscribeForFirst(fn)
+  }
+
+  subscribeForLast(fn: Update<T>) {
+     if (this.pub) this.pub.subscribeForLast(fn)
+  }
+}
+
+/**
+ * Publication update callback
+ */
+export type Update<T> = (updated: T | null | undefined) => void
+
+class To<T> {
+  name: string
+  target: HTMLElement | ShadowRoot
+
+  constructor(name: string, target: HTMLElement | ShadowRoot) {
+    this.name = name
+    this.target = target
+  }
+
+  map(fn: Update<T>): To<T> {
+    setup(
+      this.name,
+      true,
+      (pub: PublicationRequest<T>) => {
+        pub.subscribe(fn)
+      },
+      this.target)
+
+    return this
+  }
+
+  mapFirst(fn: Update<T>): To<T> {
+    setup(
+      this.name,
+      true,
+      (pub: PublicationRequest<T>) => {
+        pub.subscribeForFirst(fn)
+      },
+      this.target)
+
+    return this
+  }
+
+  mapLast(fn: Update<T>): To<T> {
+    setup(
+      this.name,
+      true,
+      (pub: PublicationRequest<T>) => {
+        pub.subscribeForLast(fn)
+      },
+      this.target)
+    return this
+  }
+}
+
+function setup<T>(name: string,
+                  retry: boolean,
+                  beginFn: (pub: PublicationRequest<T>) => void,
+                  parent: HTMLElement | ShadowRoot): PublicationRequest<T> {
+
+  const publication = new PublicationRequest<T>(name)
+  // console.debug('SETUP SUB: ' + publication.name)
+
+  // seek a parent that provides this publication
+  const event = new CustomEvent(
+    PUB_REQUEST_EVENT_NAME,
+    {
+      detail: publication,
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    })
+
+  // request the publication
+  parent.dispatchEvent(event)
+
+  retryUntilThere(10)
+
+  function retryUntilThere(timeout: number) {
+    if (publication.value == null) {
+      setTimeout(() => {
+        // console.debug('RETRY SUB: ' + publication.name)
+        parent.dispatchEvent(event)
+        if (retry) retryUntilThere((timeout * 5))
+      }, timeout)
+    } else {
+      beginFn(publication)
+    }
+  }
+
+  return publication
+}
diff --git a/src/subscriber.ts b/src/subscriber.ts
deleted file mode 100644
index 2ca716e..0000000
--- a/src/subscriber.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Publication } from './publisher.js'
-export const PUB_REQUEST_EVENT_NAME: string = 'subscribablerequest'
-
-export function subscriber(parent: HTMLElement | ShadowRoot) {
-  /**
-   * Subscribe for changes to a subscibable. The update is called once on subscription to get the initial value.
-   * @param name pub name
-   * @param update function called once each time the pub changes
-   * @param retry retry getting a handle on publication if it is not yet available.
-   */
-  return {
-    request: function request<T>(name: string, update: Update<T>, retry: boolean = true) {
-      const publication = new PublicationRequest<T>(name)
-      // console.debug('SETUP SUB: ' + publication.name)
-
-      // seek a parent that provides this publication
-      const event = new CustomEvent(
-        PUB_REQUEST_EVENT_NAME,
-        {
-          detail: publication,
-          bubbles: true,
-          cancelable: true,
-          composed: true
-        })
-
-      // request the publication
-      parent.dispatchEvent(event)
-
-      tryIt(10)
-
-      function tryIt(timeout: number) {
-        if (publication.value == null) {
-          setTimeout(() => {
-            // console.debug('RETRY SUB: ' + publication.name)
-            parent.dispatchEvent(event)
-            if (retry) tryIt((timeout * 5))
-          }, timeout)
-        } else {
-          begin()
-        }
-      }
-
-      function begin() {
-        // subscribe for updates
-        publication.subscribe(update)
-
-        // force publish initial value
-        update(publication.value)
-      }
-
-    }
-  }
-
-}
-
-/**
- * Request for publication to subscribe to
- */
-export class PublicationRequest<T> {
-  readonly name: string
-  pub?: Publication<T>
-
-  constructor(name: string) {
-    this.name = name
-  }
-
-  get value(): T | null | undefined {
-    return this.pub ? this.pub.value : null
-  }
-
-  subscribe(update: Update<T>) {
-    return this.pub ? this.pub.subscribe(update) : null
-  }
-}
-
-/**
- * Publication update callback
- */
-export type Update<T> = (updated: T | null | undefined) => void
diff --git a/test/pptr.js b/test/pptr.js
deleted file mode 100644
index 7eab717..0000000
--- a/test/pptr.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const puppeteer = require('puppeteer');
-
-
-(async () => {
-  const browser = await puppeteer.launch()
-  const page = await browser.newPage()
-  await page.goto('http://localhost:8888/src/example/streaming/index.html')
-  await page.waitFor('.apples')
-  await page.screenshot({ path: 'example.png' })
-
-  await browser.close()
-})()

From ea346c4aab51e935900ba4463494b146f65edf9c Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Sun, 3 Nov 2019 16:25:42 +0100
Subject: [PATCH 2/9] added better tests and unit tests

---
 src/example/index.test.ts            |   5 +-
 src/example/streaming/PriceSource.ts |  64 +++++++++++++++++
 src/example/streaming/Ticker.ts      |  13 ++--
 src/example/streaming/index.test.ts  |  51 ++++++++++++++
 src/example/streaming/index.ts       |  56 +--------------
 src/example/streaming/util.ts        |  29 --------
 src/index.test.ts                    |   2 +
 src/publisher.test.ts                | 100 +++++++++++++++++++++++++++
 src/publisher.ts                     |  56 +++++++++++----
 src/subscribe.ts                     |  41 +++++++++--
 src/subscriber.test.ts               |  41 +++++++++++
 test/Counter.js                      |  11 ---
 test/Streaming.js                    |  62 -----------------
 tslint.json                          |   2 +-
 14 files changed, 349 insertions(+), 184 deletions(-)
 create mode 100644 src/example/streaming/PriceSource.ts
 create mode 100644 src/example/streaming/index.test.ts
 delete mode 100644 src/example/streaming/util.ts
 create mode 100644 src/publisher.test.ts
 create mode 100644 src/subscriber.test.ts
 delete mode 100644 test/Counter.js
 delete mode 100644 test/Streaming.js

diff --git a/src/example/index.test.ts b/src/example/index.test.ts
index 7e99288..2b89286 100644
--- a/src/example/index.test.ts
+++ b/src/example/index.test.ts
@@ -1,2 +1,3 @@
-import './di/index.test.js'
-import './service/index.test.js'
+// import './di/index.test.js'
+// import './service/index.test.js'
+import './streaming/index.test.js'
diff --git a/src/example/streaming/PriceSource.ts b/src/example/streaming/PriceSource.ts
new file mode 100644
index 0000000..3433a99
--- /dev/null
+++ b/src/example/streaming/PriceSource.ts
@@ -0,0 +1,64 @@
+// random integer generator
+import { pub } from '../../decorators.js'
+import { publisher } from '../../publisher.js'
+
+function getRandomInt(x: number, y: number) {
+  return Math.floor(Math.random() * ((y - x) + 1) + x)
+}
+
+// Start price streams
+export class PriceSource {
+
+  @pub({pubTarget: document.body})
+  prices: { name: string, price: number }
+
+  closed: boolean = false
+
+  constructor(prices?: Array<{ price: number; name: string } | { price: number; name: string }>,
+              interval?: number) {
+    if (!prices) {
+      this.updatePrice('apples', interval)
+      this.updatePrice('bananas', interval)
+      this.updatePrice('grapes', interval)
+      this.updatePrice('kiwi', interval)
+      this.updatePrice('oranges', interval)
+    } else {
+      const publication = publisher(document.body).create<{ price: number; name: string }>('prices')
+      setTimeout(() => {
+        prices.forEach((p) => {publication.update(p)})
+        publication.printAll()
+        publication.close()
+      }, 0)
+    }
+  }
+
+  updatePrice(name: string, interval?: number) {
+    interval = interval || getRandomInt(200, 1000)
+    console.debug(`NEW publishing prices for ${name} every ${interval} millis`)
+    this.generator(30, interval,
+      value => {
+        // this[name] = value
+        this.prices = {name, price: value}
+      })
+  }
+
+  close() {
+    this.closed = true
+  }
+
+  // random price stream generator
+  private generator(size: number, speed: number, callback: (value: number) => void) {
+    this.getNextPrice(size, speed, callback)
+  }
+
+  private getNextPrice(remaining: number, speed: number, callback: (value: number) => void) {
+    if (!this.closed) {
+      remaining = remaining - 1
+      setTimeout(() => {
+        const value = getRandomInt(0, 1000)
+        callback(value)
+        if (remaining > 0) this.getNextPrice(remaining, speed, callback)
+      }, speed)
+    }
+  }
+}
diff --git a/src/example/streaming/Ticker.ts b/src/example/streaming/Ticker.ts
index 89486b6..ad692b9 100644
--- a/src/example/streaming/Ticker.ts
+++ b/src/example/streaming/Ticker.ts
@@ -29,6 +29,7 @@ export class Ticker extends LitElement {
     subscribe(this)
       .to<Tick>('prices')
       .map((tick: Tick) => {
+        // console.log(tick)
         if (this.prices.filter((t: Tick) => t.name === tick.name).length === 1) {
           this.prices
             .map((t: Tick) => {
@@ -55,16 +56,16 @@ export class Ticker extends LitElement {
   render() {
     return html`
         <h1>prices</h1>
-        <ul class="prices">
-            ${this.prices.map((t: Tick) => html`<li>${t.name}:${t.price}</li>`)}
+        <ul id="prices">
+            ${this.prices.map((t: Tick) => html`<li id="${t.name}">${t.name}:${t.price}</li>`)}
         </ul>
         <h2>first price was</h2>
-        <ul class="prices">
-            <li>${this.first ? this.first.name : ''}:${this.first ? this.first.price : ''}</li>
+        <ul>
+            <li id="first">${this.first ? this.first.name : ''}:${this.first ? this.first.price : ''}</li>
         </ul>
         <h2>last price was</h2>
-        <ul class="prices">
-            <li>${this.last ? this.last.name : ''}:${this.last ? this.last.price : ''}</li>
+        <ul>
+            <li id="last">${this.last ? this.last.name : ''}:${this.last ? this.last.price : ''}</li>
         </ul>
         <h2 class="change">apple price change: ${this.applePrices[this.applePrices.length - 1] - this.applePrices[this.applePrices.length - 2]}</h2>
     `
diff --git a/src/example/streaming/index.test.ts b/src/example/streaming/index.test.ts
new file mode 100644
index 0000000..923e374
--- /dev/null
+++ b/src/example/streaming/index.test.ts
@@ -0,0 +1,51 @@
+import { initLit, Query } from '../util.js'
+import { PriceSource } from './PriceSource.js'
+import { Ticker } from './Ticker.js'
+
+export { Ticker } from './Ticker.js'
+
+describe('streaming', function() {
+  // @ts-ignore
+  this.timeout(5000)
+  this.enableTimeouts()
+
+  describe('wc', () => {
+    let service: PriceSource
+    let wc: Ticker
+    let first: Query
+    let apples: Query
+
+    beforeEach(async () => {
+      wc = await initLit('ex-ticker', '#container')
+      await wc.updateComplete
+      first = new Query(wc, '#first')
+      apples = new Query(wc, '#prices > #apples')
+    })
+
+    afterEach(async () => {
+      service.close()
+      service = null
+    })
+
+    it('1- should get exactly first when subscribing to first', function(done) {
+      service = new PriceSource([{name: 'apples', price: 999}, {name: 'apples', price: 888}])
+      setTimeout(() => {
+        const value = first.query().innerText
+        chai.expect(value).to.equal('apples:999')
+        done()
+      }, 300)
+
+    })
+
+    // it('2- should not miss first when subscribing to all', function(done) {
+    //   service = new PriceSource([{name: 'apples', price: 999}])
+    //   setTimeout(() => {
+    //     const value = apples.query().innerText
+    //     chai.expect(value).to.equal('apples:999')
+    //     done()
+    //   }, 300)
+    //
+    // })
+
+  })
+})
diff --git a/src/example/streaming/index.ts b/src/example/streaming/index.ts
index 5870edd..e8b44e4 100644
--- a/src/example/streaming/index.ts
+++ b/src/example/streaming/index.ts
@@ -1,56 +1,4 @@
-import { pub } from '../../decorators.js'
-
+import { PriceSource } from './PriceSource.js'
 export { Ticker } from './Ticker.js'
 
-// random integer generator
-function getRandomInt(x: number, y: number) {
-  return Math.floor(Math.random() * ((y - x) + 1) + x)
-}
-
-// random price stream generator
-function generator(size: number, speed: number, callback: (value: number) => void) {
-  const x = 0
-  const y = 1000
-
-  function getPrice(remaining: number) {
-    remaining = remaining - 1
-    setTimeout(() => {
-      const value = getRandomInt(x, y)
-      callback(value)
-      if (remaining > 0) getPrice(remaining)
-    }, speed)
-  }
-
-  getPrice(size)
-
-}
-
-export const config = {initialValue: 0, pubTarget: document.body}
-
-// Start price streams
-export class PriceStreamer {
-
-  @pub({initialValue: null, pubTarget: document.body})
-  prices: { name: string, price: number }
-
-  constructor() {
-    this.updatePrice('apples')
-    this.updatePrice('bananas')
-    this.updatePrice('grapes')
-    this.updatePrice('kiwi')
-    this.updatePrice('oranges')
-  }
-
-  updatePrice(name: string) {
-    const speed = getRandomInt(200, 1000)
-    console.debug(`NEW publishing prices for ${name} every ${speed} millis`)
-    generator(30, speed,
-      value => {
-        // this[name] = value
-        this.prices = {name, price: value}
-      })
-  }
-
-}
-
-new PriceStreamer()
+new PriceSource()
diff --git a/src/example/streaming/util.ts b/src/example/streaming/util.ts
deleted file mode 100644
index 1f2b867..0000000
--- a/src/example/streaming/util.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Watch for changes. In a real app this is expected to be provided by a library such as LitElement
- * @param name
- * @param wc
- */
-export function updateOnChange(name: string, wc: HTMLElement) {
-  // @ts-ignore
-  let current = wc[name]
-  setTimeout(() => {
-    // @ts-ignore
-    if (current !== wc[name]) {
-      const element = wc.querySelector('.' + name)
-      // @ts-ignore
-      const template = `${name}: ${wc[name]}`
-      if (element) {
-        element.innerHTML = template
-      } else {
-        const item = document.createElement('li')
-        item.className = name
-        // @ts-ignore
-        item.innerHTML = `${name}: ${wc[name]}`
-        wc.querySelector('.prices').appendChild(item)
-      }
-      // @ts-ignore
-      current = wc[name]
-    }
-    updateOnChange(name, wc)
-  }, 5)
-}
diff --git a/src/index.test.ts b/src/index.test.ts
index e32c986..d636757 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -1 +1,3 @@
 import './example/index.test.js'
+import './publisher.test.js'
+import './subscriber.test.js'
diff --git a/src/publisher.test.ts b/src/publisher.test.ts
new file mode 100644
index 0000000..e3f828a
--- /dev/null
+++ b/src/publisher.test.ts
@@ -0,0 +1,100 @@
+import { Publication } from './publisher.js'
+
+describe('publisher', function() {
+  this.enableTimeouts()
+  const expect = chai.expect
+
+  describe('Publication', function() {
+
+    it('should be empty after init', function() {
+      const pub = new Publication('test')
+
+      expect(pub.value).to.be.null
+      expect(pub.first).to.be.null
+      expect(pub.last).to.be.null
+      expect(pub.length).to.equal(0)
+
+    })
+
+    it('should contain one item after initializing with default', function() {
+      const pub = new Publication<number>('test', 999)
+
+      expect(pub.value).to.equal(999)
+      expect(pub.first).to.equal(999)
+      expect(pub.last).to.be.equal(999)
+      expect(pub.length).to.equal(1)
+
+    })
+
+    it('should contain two item after initializing with one default and one update', function() {
+      const pub = new Publication<number>('test', 999)
+      pub.update(888)
+
+      expect(pub.value).to.equal(888)
+      expect(pub.first).to.equal(999)
+      expect(pub.last).to.be.equal(888)
+      expect(pub.length).to.equal(2)
+
+    })
+
+    it('should contain three item after initializing with three items', function() {
+      const pub = new Publication<number>('test')
+      pub.update(999)
+      pub.update(888)
+      pub.update(777)
+
+      expect(pub.value).to.equal(777)
+      expect(pub.first).to.equal(999)
+      expect(pub.last).to.be.equal(777)
+      expect(pub.length).to.equal(3)
+    })
+
+    it('should trigger early subscriptions', function() {
+      let subAll: number
+      let subFirst: number
+      let subLast: number
+
+      const pub = new Publication<number>('test')
+
+      pub.subscribe((update: number) => {subAll = update})
+      pub.subscribeForFirst((update: number) => {subFirst = update})
+      pub.subscribeForLast((update: number) => {subLast = update})
+
+      pub.update(999)
+      pub.update(888)
+      expect(subAll).to.equal(888)
+      expect(subLast).to.equal(undefined)
+      pub.update(777)
+
+      pub.close()
+      expect(subAll).to.equal(777)
+      expect(subFirst).to.equal(999)
+      expect(subLast).to.equal(777)
+
+    })
+
+    it('should trigger late subscriptions', function(done) {
+      let subAll: number
+      let subFirst: number
+      let subLast: number
+
+      const pub = new Publication<number>('test')
+
+      pub.update(999)
+      pub.update(888)
+      pub.update(777)
+      pub.close()
+
+      pub.subscribe((update: number) => {subAll = update})
+      pub.subscribeForFirst((update: number) => {subFirst = update})
+      pub.subscribeForLast((update: number) => {subLast = update})
+
+      setTimeout(() => {
+        expect(subAll).to.equal(777)
+        expect(subFirst).to.equal(999)
+        expect(subLast).to.equal(777)
+        done()
+      }, 200)
+    })
+  })
+})
diff --git a/src/publisher.ts b/src/publisher.ts
index 8f541be..85dfad1 100644
--- a/src/publisher.ts
+++ b/src/publisher.ts
@@ -8,7 +8,7 @@ export function publisher(parent: HTMLElement | ShadowRoot) {
    * @param parent
    */
   return {
-    create: function createPublication<T>(name: string, initialValue: T | null): Publication<T> {
+    create: function createPublication<T>(name: string, initialValue?: T | null | undefined): Publication<T> {
       const publication = new Publication<T>(name, initialValue)
 
       const requestListener = (event: CustomEvent) => {
@@ -38,48 +38,74 @@ export class Publication<T> {
   private subscriptions = new Array<Update<T>>()
   private firstSubscriptions = new Array<Update<T>>()
   private lastSubscriptions = new Array<Update<T>>()
-  private publishedValue?: T
-  private firstPublishedValue?: T = null
+  private publishedValues: T[] = new Array<T>()
   private closed = false
 
-  constructor(name: string, value?: T) {
+  constructor(name: string, value: T = null) {
     this.name = name
-    this.publishedValue = value
+    if (value !== null) { this.publishedValues.push(value)}
   }
 
-  get value(): T | undefined | null {
-    return this.publishedValue
+  get value(): T | null {
+    return this.last
+  }
+
+  get length() {
+    return this.publishedValues.length
+  }
+
+  get first(): T | null {
+    if (this.length > 0) {
+      return this.publishedValues[0]
+    } else {
+      return null
+    }
+  }
+
+  get last(): T | null {
+    if (this.length > 0) {
+      return this.publishedValues[this.length - 1]
+    } else {
+      return null
+    }
   }
 
   close() {
     this.closed = true
-    this.lastSubscriptions.forEach((sub) => sub(this.publishedValue))
+    this.lastSubscriptions.forEach((sub) => sub(this.last))
   }
 
-  update(value?: T) {
-    if (!this.firstPublishedValue) {
+  update(value: T) {
+    if (this.length === 0) {
       this.firstSubscriptions.forEach((updateFunction) => updateFunction(value))
-      this.firstPublishedValue = value
     }
-    this.publishedValue = value
+    this.publishedValues.push(value)
     this.subscriptions.forEach((updateFunction) => updateFunction(value))
   }
 
   subscribe(fn: Update<T>) {
     this.subscriptions.push(fn)
+    if (this.length > 0) {
+      setTimeout(() => {this.publishedValues.forEach((v) => fn(v))}, 0)
+    }
   }
 
   subscribeForFirst(fn: Update<T>) {
     this.firstSubscriptions.push(fn)
-    if (this.firstPublishedValue) {
-      setTimeout(() => {fn(this.firstPublishedValue)}, 0)
+    if (this.first) {
+      setTimeout(() => {fn(this.first)}, 0)
     }
   }
 
   subscribeForLast(fn: Update<T>) {
     this.lastSubscriptions.push(fn)
     if (this.closed) {
-      setTimeout(() => {fn(this.publishedValue)}, 0)
+      setTimeout(() => {fn(this.last)}, 0)
     }
   }
+
+  printAll() {
+    this.publishedValues.forEach((p: T, i: number) => {console.log(`${i}: ${JSON.stringify(p)}`)})
+    console.log()
+  }
 }
diff --git a/src/subscribe.ts b/src/subscribe.ts
index bf6d74d..9b4b9a4 100644
--- a/src/subscribe.ts
+++ b/src/subscribe.ts
@@ -34,7 +34,11 @@ export function subscribe(parent: HTMLElement | ShadowRoot) {
  */
 export class PublicationRequest<T> {
   readonly name: string
-  pub?: Publication<T>
+  private _pub?: Publication<T>
+
+  private subscriptions = new Array<Update<T>>()
+  private firstSubscriptions = new Array<Update<T>>()
+  private lastSubscriptions = new Array<Update<T>>()
 
   constructor(name: string) {
     this.name = name
@@ -44,16 +48,45 @@ export class PublicationRequest<T> {
     return this.pub ? this.pub.value : null
   }
 
+  get pub() {return this._pub}
+
+  set pub(pub: Publication<T>) {
+    if (!this._pub) {
+      this.subscriptions.forEach((u) => pub.subscribe(u))
+      this.subscriptions.length = 0
+
+      this.firstSubscriptions.forEach((u) => pub.subscribeForFirst(u))
+      this.firstSubscriptions.length = 0
+
+      this.lastSubscriptions.forEach((u) => pub.subscribeForLast(u))
+      this.lastSubscriptions.length = 0
+    }
+
+    this._pub = pub
+  }
+
   subscribe(update: Update<T>) {
-    if (this.pub) this.pub.subscribe(update)
+    if (this.pub) {
+      this.pub.subscribe(update)
+    } else {
+      this.subscriptions.push(update)
+    }
   }
 
   subscribeForFirst(fn: Update<T>) {
-    if (this.pub) this.pub.subscribeForFirst(fn)
+    if (this.pub) {
+      this.pub.subscribeForFirst(fn)
+    } else {
+      this.lastSubscriptions.push(fn)
+    }
   }
 
   subscribeForLast(fn: Update<T>) {
-     if (this.pub) this.pub.subscribeForLast(fn)
+    if (this.pub) {
+      this.pub.subscribeForLast(fn)
+    } else {
+      this.firstSubscriptions.push(fn)
+    }
   }
 }
 
diff --git a/src/subscriber.test.ts b/src/subscriber.test.ts
new file mode 100644
index 0000000..79ec941
--- /dev/null
+++ b/src/subscriber.test.ts
@@ -0,0 +1,41 @@
+import { Publication } from './publisher.js'
+import { PublicationRequest } from './subscribe.js'
+
+describe('subscriber', function() {
+  this.enableTimeouts()
+  const expect = chai.expect
+
+  describe('Sub', function() {
+
+    it('should register subscriptions', function() {
+      let subAll: number
+      const request = new PublicationRequest<number>('test')
+      request.pub = new Publication<number>('test')
+      request.subscribe((up: number) => {subAll = up})
+      request.pub.update(999)
+
+      chai.expect(subAll).to.equal(999)
+
+    })
+
+    it('should register early subscriptions', function() {
+      let subAll: number
+      let subFirst: number
+      let subLast: number
+      const request = new PublicationRequest<number>('test')
+      request.subscribe((up: number) => {subAll = up})
+      request.subscribeForFirst((up: number) => {subFirst = up})
+      request.subscribeForLast((up: number) => {subLast = up})
+
+      request.pub = new Publication<number>('test')
+      request.pub.update(999)
+      request.pub.close()
+
+      chai.expect(subFirst).to.equal(999)
+      chai.expect(subAll).to.equal(999)
+      chai.expect(subLast).to.equal(999)
+
+    })
+
+  })
+})
diff --git a/test/Counter.js b/test/Counter.js
deleted file mode 100644
index eaa0794..0000000
--- a/test/Counter.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Selector } from 'testcafe';
-
-fixture `Counter`
-  .page `http://localhost:8888/src/example/di/index.html`;
-
-test('Increment counter', async t => {
-  await t
-    .click(".b")
-    .click('.b')
-      .expect(Selector('.value').textContent).eql('2');
-});
diff --git a/test/Streaming.js b/test/Streaming.js
deleted file mode 100644
index c5035e3..0000000
--- a/test/Streaming.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Selector } from 'testcafe'
-
-fixture`Streams`.page`http://localhost:8888/src/example/streaming/index.html`
-
-test('all 5 prices are received', async t => {
-
-    let apples = await Selector('.apples')
-    let oranges = await Selector('.oranges')
-    let bananas = await Selector('.bananas')
-    let grapes = await Selector('.grapes')
-    let kiwis = await Selector('.kiwis')
-
-    await t.expect(apples)
-      .ok()
-      .expect(apples.textContent)
-      .contains('apples:')
-      .expect(oranges)
-      .ok()
-      .expect(oranges.textContent)
-      .contains('oranges:')
-      .expect(bananas)
-      .ok()
-      .expect(bananas.textContent)
-      .contains('bananas:')
-      .expect(grapes)
-      .ok()
-      .expect(grapes.textContent)
-      .contains('grapes:')
-      .expect(kiwis)
-      .ok()
-      .expect(kiwis.textContent)
-      .contains('kiwis:')
-  },
-)
-test('prices change', async t => {
-    await t.wait(1500)
-    let apples = await Selector('.apples')
-    let applePrice = await apples.textContent
-
-    let kiwis = await Selector('.kiwis')
-    let kiwiPrice = await kiwis.textContent
-
-    let change = await Selector('.change')
-    let priceChange = await change.textContent
-
-    await t.wait(1500)
-    let p = await Selector('.apples').textContent
-
-    await t.expect(applePrice)
-      .notEql(p)
-      .expect((kiwiPrice))
-      .notEql(Selector('.kiwis').textContent)
-      .expect((priceChange))
-      .notEql(Selector('.change').textContent)
-
-    priceChange = await change.textContent
-
-    await t.wait(1500)
-      .expect((priceChange))
-      .notEql(Selector('.change').textContent)
-  },
-)
diff --git a/tslint.json b/tslint.json
index 3c6523b..ef4f1c7 100644
--- a/tslint.json
+++ b/tslint.json
@@ -41,7 +41,7 @@
         "forin"                   : false,
         "arrow-parens"            : false,
         "only-arrow-functions"    : [
-            true,
+            false,
             "allow-declarations",
             "allow-named-functions"
         ],

From 89e4731a5e73002756f4100043a66b75fa529375 Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Sun, 3 Nov 2019 17:16:30 +0100
Subject: [PATCH 3/9] streaming passing all tests

---
 src/example/index.test.ts            |  4 ++--
 src/example/streaming/PriceSource.ts | 31 ++++++++++++++++--------
 src/example/streaming/Ticker.ts      | 17 ++++++++++----
 src/example/streaming/index.test.ts  | 35 ++++++++++++++++++++--------
 src/subscribe.ts                     |  2 +-
 5 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/src/example/index.test.ts b/src/example/index.test.ts
index 2b89286..2deb80b 100644
--- a/src/example/index.test.ts
+++ b/src/example/index.test.ts
@@ -1,3 +1,3 @@
-// import './di/index.test.js'
-// import './service/index.test.js'
+import './di/index.test.js'
+import './service/index.test.js'
 import './streaming/index.test.js'
diff --git a/src/example/streaming/PriceSource.ts b/src/example/streaming/PriceSource.ts
index 3433a99..de82919 100644
--- a/src/example/streaming/PriceSource.ts
+++ b/src/example/streaming/PriceSource.ts
@@ -1,6 +1,6 @@
 // random integer generator
 import { pub } from '../../decorators.js'
-import { publisher } from '../../publisher.js'
+import { Publication, publisher } from '../../publisher.js'
 
 function getRandomInt(x: number, y: number) {
   return Math.floor(Math.random() * ((y - x) + 1) + x)
@@ -9,13 +9,14 @@ function getRandomInt(x: number, y: number) {
 // Start price streams
 export class PriceSource {
 
-  @pub({pubTarget: document.body})
-  prices: { name: string, price: number }
-
   closed: boolean = false
+  counter: number = 0
+  publication: Publication<{ name: string, price: number }>
 
   constructor(prices?: Array<{ price: number; name: string } | { price: number; name: string }>,
               interval?: number) {
+    this.publication = publisher(document.body).create<{ price: number; name: string }>('prices')
+
     if (!prices) {
       this.updatePrice('apples', interval)
       this.updatePrice('bananas', interval)
@@ -23,13 +24,14 @@ export class PriceSource {
       this.updatePrice('kiwi', interval)
       this.updatePrice('oranges', interval)
     } else {
-      const publication = publisher(document.body).create<{ price: number; name: string }>('prices')
+
       setTimeout(() => {
-        prices.forEach((p) => {publication.update(p)})
-        publication.printAll()
-        publication.close()
+        prices.forEach((p) => {this.publication.update(p)})
+        this.publication.close()
       }, 0)
     }
+
+    this.checkDone()
   }
 
   updatePrice(name: string, interval?: number) {
@@ -37,13 +39,21 @@ export class PriceSource {
     console.debug(`NEW publishing prices for ${name} every ${interval} millis`)
     this.generator(30, interval,
       value => {
-        // this[name] = value
-        this.prices = {name, price: value}
+        this.publication.update({name, price: value})
       })
   }
 
   close() {
     this.closed = true
+    this.publication.close()
+  }
+
+  private checkDone() {
+    setTimeout(() => {
+
+      if (this.counter === 150) this.close()
+      this.checkDone()
+    }, 100)
   }
 
   // random price stream generator
@@ -57,6 +67,7 @@ export class PriceSource {
       setTimeout(() => {
         const value = getRandomInt(0, 1000)
         callback(value)
+        this.counter++
         if (remaining > 0) this.getNextPrice(remaining, speed, callback)
       }, speed)
     }
diff --git a/src/example/streaming/Ticker.ts b/src/example/streaming/Ticker.ts
index ad692b9..d443847 100644
--- a/src/example/streaming/Ticker.ts
+++ b/src/example/streaming/Ticker.ts
@@ -21,15 +21,19 @@ export class Ticker extends LitElement {
   @property()
   last: Tick
 
+  @property()
+  counter: number
+
   constructor() {
     super()
     this.prices = new Array<Tick>()
     this.applePrices = new Array<number>()
+    this.counter = 0
 
     subscribe(this)
       .to<Tick>('prices')
       .map((tick: Tick) => {
-        // console.log(tick)
+        this.counter++
         if (this.prices.filter((t: Tick) => t.name === tick.name).length === 1) {
           this.prices
             .map((t: Tick) => {
@@ -37,7 +41,7 @@ export class Ticker extends LitElement {
               return t
             })
         } else {
-          this.prices.push(tick)
+          this.prices.push(this.copy(tick))
         }
 
         if (tick.name === 'apples') this.applePrices.push(tick.price)
@@ -45,10 +49,10 @@ export class Ticker extends LitElement {
 
       })
       .mapFirst((first: Tick) => {
-        this.first = first
+        this.first = this.copy(first)
       })
       .mapLast((last: Tick) => {
-        this.last = last
+        this.last = this.copy(last)
       })
 
   }
@@ -68,6 +72,11 @@ export class Ticker extends LitElement {
             <li id="last">${this.last ? this.last.name : ''}:${this.last ? this.last.price : ''}</li>
         </ul>
         <h2 class="change">apple price change: ${this.applePrices[this.applePrices.length - 1] - this.applePrices[this.applePrices.length - 2]}</h2>
+        <h2 class="change">counter: ${this.counter}</h2>
     `
   }
+
+  private copy(last: Tick) {
+    return JSON.parse(JSON.stringify(last))
+  }
 }
diff --git a/src/example/streaming/index.test.ts b/src/example/streaming/index.test.ts
index 923e374..1214c70 100644
--- a/src/example/streaming/index.test.ts
+++ b/src/example/streaming/index.test.ts
@@ -1,7 +1,6 @@
 import { initLit, Query } from '../util.js'
 import { PriceSource } from './PriceSource.js'
 import { Ticker } from './Ticker.js'
-
 export { Ticker } from './Ticker.js'
 
 describe('streaming', function() {
@@ -13,12 +12,14 @@ describe('streaming', function() {
     let service: PriceSource
     let wc: Ticker
     let first: Query
+    let last: Query
     let apples: Query
 
     beforeEach(async () => {
       wc = await initLit('ex-ticker', '#container')
       await wc.updateComplete
       first = new Query(wc, '#first')
+      last = new Query(wc, '#last')
       apples = new Query(wc, '#prices > #apples')
     })
 
@@ -37,15 +38,29 @@ describe('streaming', function() {
 
     })
 
-    // it('2- should not miss first when subscribing to all', function(done) {
-    //   service = new PriceSource([{name: 'apples', price: 999}])
-    //   setTimeout(() => {
-    //     const value = apples.query().innerText
-    //     chai.expect(value).to.equal('apples:999')
-    //     done()
-    //   }, 300)
-    //
-    // })
+    it('2- should not miss first when subscribing to all', function(done) {
+      service = new PriceSource([{name: 'apples', price: 999}])
+      setTimeout(() => {
+        const value = apples.query().innerText
+        chai.expect(value).to.equal('apples:999')
+        done()
+      }, 300)
+
+    })
+
+    it('2- should not miss last when subscribing to last', function(done) {
+      service = new PriceSource([
+        {name: 'apples', price: 999},
+        {name: 'apples', price: 888},
+        {name: 'apples', price: 777}
+      ])
+      setTimeout(() => {
+        const value = last.query().innerText
+        chai.expect(value).to.equal('apples:777')
+        done()
+      }, 300)
+
+    })
 
   })
 })
diff --git a/src/subscribe.ts b/src/subscribe.ts
index 9b4b9a4..d725819 100644
--- a/src/subscribe.ts
+++ b/src/subscribe.ts
@@ -85,7 +85,7 @@ export class PublicationRequest<T> {
     if (this.pub) {
       this.pub.subscribeForLast(fn)
     } else {
-      this.firstSubscriptions.push(fn)
+      this.lastSubscriptions.push(fn)
     }
   }
 }

From d25591e425ae50aed7cbb3a44164e0b85d1950fd Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Sun, 3 Nov 2019 18:25:59 +0100
Subject: [PATCH 4/9] refactored; fixed other tests

---
 src/decorators.ts                      |  2 +-
 src/example/di/CounterView.ts          | 21 +++++++++--
 src/example/di/index.test.ts           | 52 ++++++++++++++------------
 src/example/di/index.ts                |  4 +-
 src/example/progress/ProgressBar.ts    |  4 +-
 src/example/progress/ProgressDialog.ts |  6 +--
 src/example/service/index.test.ts      |  6 +--
 src/example/streaming/index.test.ts    |  6 +--
 src/subscribe.ts                       | 22 ++---------
 9 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/src/decorators.ts b/src/decorators.ts
index 9818498..d7228fa 100644
--- a/src/decorators.ts
+++ b/src/decorators.ts
@@ -32,7 +32,7 @@ export function sub<T>(config: SubConfig<T> = {}) {
           } else {
             up = (v: any) => value = v
           }
-          if (conf.name != null) {subscribe(this).request<T>(conf.name, up)}
+          if (conf.name != null) {subscribe(this).to<T>(conf.name).map(up)}
           subscribed = true
         }
         if (isGet) {
diff --git a/src/example/di/CounterView.ts b/src/example/di/CounterView.ts
index 39a6543..982ad32 100644
--- a/src/example/di/CounterView.ts
+++ b/src/example/di/CounterView.ts
@@ -9,17 +9,32 @@ export class CounterView extends LitElement {
   @property({attribute: false})
   private counter: number = 0
 
-  @sub({name: 'service.counter'})
+  @property({attribute: false})
   private service: SequenceService
 
+  constructor() {
+    super()
+    subscribe(this)
+      .to<SequenceService>('service.counter')
+      .mapFirst((s) => {
+        console.log('first')
+        this.service = s
+        const el: HTMLButtonElement = this.shadowRoot.querySelector('#button')
+        el.style.visibility = null
+        this.requestUpdate()
+      })
+  }
+
   protected render() {
     return html`
-            <input type="button" value="+" id="button" @click="${this.increment}"/>
+            <input type="button" value="+" id="button" @click="${this.increment}" style="visibility: hidden"/>
             <h2>Next Fibonacci: <span id="value">${this.counter}</span></h2>`
   }
 
   private increment() {
-    this.counter = this.service.next()
+    setTimeout(() => {
+      this.counter = this.service.next()
+    }, 500)
   }
 
 }
diff --git a/src/example/di/index.test.ts b/src/example/di/index.test.ts
index c6d609d..86105cc 100644
--- a/src/example/di/index.test.ts
+++ b/src/example/di/index.test.ts
@@ -4,7 +4,7 @@ import { CounterService, CounterView } from './index.js'
 describe('fibonacci counter(di) example', () => {
 
   describe('service', () => {
-    it('should increment the sequence when next() called', async () => {
+    it('should increment the sequence when next() called', async function() {
       const counterService = new CounterService()
       chai.expect(counterService.next()).to.equal(1)
       chai.expect(counterService.next()).to.equal(1)
@@ -14,16 +14,16 @@ describe('fibonacci counter(di) example', () => {
     })
   })
 
-  describe('wc', () => {
+  describe('wc', function() {
     let wc: CounterView
     let value: Query
     let button: Query
     let wrapper: any
 
-    beforeEach(async () => {
+    beforeEach(async function() {
       wc = await initLit('counter-view', '#container')
       value = new Query(wc, 'span')
-      button = new Query(wc, 'input')
+      button = new Query(wc, '#button')
       wrapper = {
           wc,
           value: async () => {
@@ -38,28 +38,32 @@ describe('fibonacci counter(di) example', () => {
             return await wc.updateComplete
           }
         }
+      return wc.updateComplete
     })
 
-    it('should show next number when button pressed', async () => {
-      await wrapper.await()
-      chai.expect(value.query().textContent).to.equal('0')
-      await button.query().click()
-      await wc.updateComplete
-      chai.expect(value.query().textContent).to.equal('1')
-      await wrapper.button()
-      chai.expect(value.query().textContent).to.equal('1')
-      await wrapper.button()
-      chai.expect(value.query().textContent).to.equal('2')
-      await wrapper.button()
-      await wrapper.button()
-      await wrapper.button()
-      await wrapper.button()
-      await wrapper.button()
-      await wrapper.button()
-      await wrapper.button()
-      await wrapper.button()
-      chai.expect(value.query().textContent).to.equal('89')
-    })
+    setTimeout(() => {
+
+      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')
+        await wrapper.button()
+        chai.expect(value.query().textContent).to.equal('1')
+        await wrapper.button()
+        chai.expect(value.query().textContent).to.equal('1')
+        await wrapper.button()
+        chai.expect(value.query().textContent).to.equal('2')
+        await wrapper.button()
+        await wrapper.button()
+        await wrapper.button()
+        await wrapper.button()
+        await wrapper.button()
+        await wrapper.button()
+        await wrapper.button()
+        await wrapper.button()
+        chai.expect(value.query().textContent).to.equal('89')
+      })
+    }, 500)
 
   })
 })
diff --git a/src/example/di/index.ts b/src/example/di/index.ts
index 1d38a25..330d0f0 100644
--- a/src/example/di/index.ts
+++ b/src/example/di/index.ts
@@ -1,5 +1,4 @@
 import { publisher } from '../../publisher.js'
-
 export { CounterView } from './CounterView.js'
 
 export interface SequenceService {
@@ -34,4 +33,5 @@ function* fib() {
   }
 }
 
-publisher(document.body).create('service.counter', new CounterService())
+const pub = publisher(document.body).create<SequenceService>('service.counter')
+pub.update(new CounterService())
diff --git a/src/example/progress/ProgressBar.ts b/src/example/progress/ProgressBar.ts
index fd03f4c..fb5cd60 100644
--- a/src/example/progress/ProgressBar.ts
+++ b/src/example/progress/ProgressBar.ts
@@ -6,8 +6,8 @@ export class ProgressBar extends HTMLElement {
 
   connectedCallback(): void {
     subscribe(this)
-      .request(
-        'percent',
+      .to<number>('percent')
+      .map(
         (percent: number) => {
           let calc = percent * this.f
 
diff --git a/src/example/progress/ProgressDialog.ts b/src/example/progress/ProgressDialog.ts
index eb2d74e..d01095e 100644
--- a/src/example/progress/ProgressDialog.ts
+++ b/src/example/progress/ProgressDialog.ts
@@ -23,9 +23,9 @@ export class ProgressDialog extends HTMLElement {
 
   connectedCallback() {
 
-    subscribe(this).request(
-      'file-service',
-      (srv: FileService) => {
+    subscribe(this)
+      .to<FileService>('file-service')
+      .map((srv: FileService) => {
 
         // set file name and size
         this.root.querySelector('.name').innerHTML = srv.getName()
diff --git a/src/example/service/index.test.ts b/src/example/service/index.test.ts
index 5146315..edb0e1e 100644
--- a/src/example/service/index.test.ts
+++ b/src/example/service/index.test.ts
@@ -3,7 +3,7 @@ import { Todo, TodoService } from './service.js'
 describe('todo example', () => {
   describe('service', () => {
 
-    it('listens to selected', (done) => {
+    it('listens to selected', function(done) {
 
       const service = new TodoService()
       service.add({summary: 'project', details: 'finish project', status: {done: false, due: null}})
@@ -18,7 +18,7 @@ describe('todo example', () => {
 
   })
 
-    it('indexes are maintained', () => {
+    it('indexes are maintained', function() {
 
       const service = new TodoService()
       service.add({summary: 'project', details: 'finish project', status: {done: false, due: null}})
@@ -33,7 +33,7 @@ describe('todo example', () => {
       chai.expect(todo.summary).to.equal('supper')
   })
 
-    it('gets all todoList', () => {
+    it('gets all todoList', function() {
       const service = new TodoService()
       service.add({summary: 'project', details: 'finish project', status: {done: false, due: null}})
       service.add({summary: 'supper', details: 'make green curry', status: {done: false, due: null}})
diff --git a/src/example/streaming/index.test.ts b/src/example/streaming/index.test.ts
index 1214c70..91af023 100644
--- a/src/example/streaming/index.test.ts
+++ b/src/example/streaming/index.test.ts
@@ -8,14 +8,14 @@ describe('streaming', function() {
   this.timeout(5000)
   this.enableTimeouts()
 
-  describe('wc', () => {
+  describe('wc', function() {
     let service: PriceSource
     let wc: Ticker
     let first: Query
     let last: Query
     let apples: Query
 
-    beforeEach(async () => {
+    beforeEach(async function() {
       wc = await initLit('ex-ticker', '#container')
       await wc.updateComplete
       first = new Query(wc, '#first')
@@ -23,7 +23,7 @@ describe('streaming', function() {
       apples = new Query(wc, '#prices > #apples')
     })
 
-    afterEach(async () => {
+    afterEach(async function() {
       service.close()
       service = null
     })
diff --git a/src/subscribe.ts b/src/subscribe.ts
index d725819..08e810a 100644
--- a/src/subscribe.ts
+++ b/src/subscribe.ts
@@ -11,19 +11,6 @@ export function subscribe(parent: HTMLElement | ShadowRoot) {
    */
 
   return {
-    request: function request<T>(name: string, update: Update<T>, retry: boolean = true) {
-
-      function begin(publication: PublicationRequest<T>) {
-        // subscribe for updates
-        publication.subscribe(update)
-
-        // force publish initial value
-        update(publication.value)
-      }
-
-      setup(name, retry, begin, parent)
-
-    },
     to: function to<T>(name: string): To<T> { return new To<T>(name, parent)}
   }
 
@@ -34,8 +21,7 @@ export function subscribe(parent: HTMLElement | ShadowRoot) {
  */
 export class PublicationRequest<T> {
   readonly name: string
-  private _pub?: Publication<T>
-
+  private internalPublication?: Publication<T>
   private subscriptions = new Array<Update<T>>()
   private firstSubscriptions = new Array<Update<T>>()
   private lastSubscriptions = new Array<Update<T>>()
@@ -48,10 +34,10 @@ export class PublicationRequest<T> {
     return this.pub ? this.pub.value : null
   }
 
-  get pub() {return this._pub}
+  get pub() {return this.internalPublication}
 
   set pub(pub: Publication<T>) {
-    if (!this._pub) {
+    if (!this.internalPublication) {
       this.subscriptions.forEach((u) => pub.subscribe(u))
       this.subscriptions.length = 0
 
@@ -62,7 +48,7 @@ export class PublicationRequest<T> {
       this.lastSubscriptions.length = 0
     }
 
-    this._pub = pub
+    this.internalPublication = pub
   }
 
   subscribe(update: Update<T>) {

From 388a68569d39bb779e628c0aeec2831bb72fa154 Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Sun, 3 Nov 2019 23:45:18 +0100
Subject: [PATCH 5/9] refactored; improve docs

---
 DECORATORS.md                                 |  97 +++++++++++
 README.md                                     | 143 ++++++++--------
 src/decorators.ts                             |   7 +-
 src/example/di/CounterView.ts                 |  21 +--
 src/example/di/index.test.ts                  |   2 +-
 src/example/di/index.ts                       |   4 +-
 src/example/progress/ProgressDialog.ts        |   5 +-
 src/example/progress/index.ts                 |   4 +-
 src/example/streaming/PriceSource.ts          |   7 +-
 src/example/streaming/index.test.ts           |   2 +-
 src/example/{util.ts => test-util.ts}         |   0
 src/index.test.ts                             |   2 +-
 src/index.ts                                  |  12 +-
 ...{publisher.test.ts => publication.test.ts} |   2 +-
 src/{publisher.ts => publication.ts}          |  85 ++++++----
 src/publish.ts                                |  32 ++++
 src/subscribe.ts                              | 152 ++++++++----------
 src/subscriber.test.ts                        |   3 +-
 18 files changed, 357 insertions(+), 223 deletions(-)
 create mode 100644 DECORATORS.md
 rename src/example/{util.ts => test-util.ts} (100%)
 rename src/{publisher.test.ts => publication.test.ts} (98%)
 rename src/{publisher.ts => publication.ts} (56%)
 create mode 100644 src/publish.ts

diff --git a/DECORATORS.md b/DECORATORS.md
new file mode 100644
index 0000000..9522d28
--- /dev/null
+++ b/DECORATORS.md
@@ -0,0 +1,97 @@
+# Experimental Decorators
+
+Bubblesub comes with experimental `@pub` and `@sub` decorators. The interop with LitElement is not great. It is not clear if they are a good idea in the end
+
+## Example Usage
+
+Here is an example on StackBlitz that integrates with [lit-element](https://lit-element.polymer-project.org/) :
+[StackBlitz Example](https://stackblitz.com/edit/bubblesub-demo) 
+
+## Publishing
+
+Here is an example of a higher-level component that publishes a calculator as a service. 
+
+```typescript
+import { LitElement, customElement, html } from 'lit-element'
+import { pub } from 'bubblesub'
+import { Calculator } from 'calculator'
+
+//Parent calculator component
+@customElement('demo-calculator')
+class App extends LitElement {
+
+  @pub()
+  calc: Calculator = new Calculator()
+
+  render() {
+    return html`<h1>Calculator</h1><slot></slot>`;
+  }
+}
+
+```
+
+## Subscribing
+
+Here is a child element that can be repeated as many times as is needed.
+
+```typescript
+import { LitElement, customElement, html } from 'lit-element'
+import { sub } from 'bubblesub'
+import { Calculator } from 'calculator'
+
+@customElement('demo-val')
+class Value extends LitElement {
+
+  @sub()
+  calc: Calculator
+
+  render() {
+    return html`
+    <input 
+      type="number" 
+      @change="${(e) => { this.calc.set(parseInt(this.id), parseInt(e.target.value)) }}" >
+    </input>`
+  }
+}
+
+```
+
+Here is a child element that displays the total of the calculation
+
+```typescript
+import { LitElement, customElement, html } from 'lit-element'
+import { sub } from 'bubblesub'
+import { Calculator } from 'calculator'
+  
+@customElement('demo-total')
+class Total extends LitElement {
+
+  @sub({ update: function (calc: Calculator) { calc.onChange(() => { this.requestUpdate() }) } })
+  calc: Calculator
+
+  render() {
+    return html`
+    <input 
+      type="number" 
+      value="${this.calc.total()}" 
+      readonly>
+    </input>`
+  }
+}
+```
+
+## HTML
+
+Here the components are combined. The `demo-val` elements find the calculator service because they have an ancestor, demo-calculator that provides the service.
+
+```html
+  <demo-calculator>
+    <demo-val id="1"></demo-val>
+    +
+    <demo-val id="2"></demo-val>
+    +
+    <demo-val id="3"></demo-val>
+    =
+    <demo-total></demo-total>
+  </demo-calculator>
+```
diff --git a/README.md b/README.md
index d585b1f..c4b4cd7 100644
--- a/README.md
+++ b/README.md
@@ -2,21 +2,23 @@
 
 ***NOTE: This library is experimental!***
 
-Bubblesub is a simple library to create observables. It leverages the DOM and DOM events to reduce coupling to make things simple and lightweight. 
+Bubblesub is a simple and lightweight library to manage observables. It builds on top of the DOM and event web standards. It's reduces the code needed without introducing a large library. It targets mid-range problems such as:
+* building web components libraries
+* micro frontends
+* create observable contexts that are neither bound to a whole app or to a whole page.  
 
-With it, you can easily implement the following:
-* dependency injection
-* state management
-* data streaming
+Bubblesub is flexible enough to accomplish different types of integrations:
+* share a singleton services or factory
+* share data
+* stream data from a websocket or SSE to multiple listening components
+
+Bubblesub is written in Typescript but useable as a JS or TS dependency. It is published using ES 6 modules
 
 Bubblesub is inspired by a conference talk given by Justin Fagnani (@justinfugnani) who works on Polymer's lit-element and lit-html: [Polymer - Dependency Injection](https://youtu.be/6o5zaKHedTE)
 
 ## It's Easy
 
-Here is an example on StackBlitz that integrates with [lit-element](https://lit-element.polymer-project.org/) :
-[StackBlitz Example](https://stackblitz.com/edit/bubblesub-demo) 
-
-There are some other examples in this repo that are implemented as standalone Web Components. Finde them [here](src/example).
+There are some examples in this repo that are implemented as standalone Web Components. Finde them [here](src/example).
 
 ## How it works
 
@@ -26,93 +28,66 @@ There are some other examples in this repo that are implemented as standalone We
 * Bubblesub is written in Typescript and is provided with ES module bundling and d.ts files
 * Bubblesub has zero dependencies and targets web component (ie: custom elements, shadow dom) development. 
 
-### Publishing
-
-Here is an example of a higher-level component that publishes a calculator as a service. 
+### Publishing a Stream
 
+One common case for observable is a stream of data
+ 
+#### publishing
 ```typescript
-import { LitElement, customElement, html } from 'lit-element'
-import { pub } from 'bubblesub'
-import { Calculator } from 'calculator'
-
-//Parent calculator component
-@customElement('demo-calculator')
-class App extends LitElement {
+import { Publication } from './publication' 
+import { publish } from './publish'
 
-  @pub()
-  calc: Calculator = new Calculator()
+interface Price { name: string, price: number }
+ 
+const pub: Publication<Price> = publish(document.body).create<Price>('prices')
+pub.update({name: 'goog', price: 1273.74})
+pub.update({name: 'fb', price: 193.62})
 
-  render() {
-    return html`<h1>Calculator</h1><slot></slot>`;
-  }
-}
+pub.close()
 
 ```
 
-### Subscribing
-
-Here is a child element that can be repeated as many times as is needed.
-
+#### subscribing
 ```typescript
-import { LitElement, customElement, html } from 'lit-element'
-import { sub } from 'bubblesub'
-import { Calculator } from 'calculator'
+import { subscribe } from './subscribe' 
 
-@customElement('demo-val')
-class Value extends LitElement {
+interface Price { name: string, price: number }
 
-  @sub()
-  calc: Calculator
-
-  render() {
-    return html`
-    <input 
-      type="number" 
-      @change="${(e) => { this.calc.set(parseInt(this.id), parseInt(e.target.value)) }}" >
-    </input>`
-  }
-}
+subscribe(this)
+      .to<Price>('prices')
+      .map((price: Price) => { /*do something with all the price*/})
+      .mapFirst((price: Price) => { /*do something with the initial price*/})
+      .mapLast((price: Price) => { /*do something with the final price*/})
 
 ```
 
-Here is a child element that displays the total of the calculation
+### Publihing a Service
+
+#### publishing
 
 ```typescript
-import { LitElement, customElement, html } from 'lit-element'
-import { sub } from 'bubblesub'
-import { Calculator } from 'calculator'
-  
-@customElement('demo-total')
-class Total extends LitElement {
-
-  @sub({ update: function (calc: Calculator) { calc.onChange(() => { this.requestUpdate() }) } })
-  calc: Calculator
-
-  render() {
-    return html`
-    <input 
-      type="number" 
-      value="${this.calc.total()}" 
-      readonly>
-    </input>`
-  }
-}
+import {ServiceImpl, ServiceInterface } from 'my-app' 
+import { publish } from 'bubblesub' 
+
+const pub = publish(document.body).create<ServiceInterface>('service')
+pub.update(new ServiceImpl())
+
 ```
 
-### HTML
+#### subscribing
 
-Here the components are combined. The `demo-val` elements find the calculator service because they have an ancestor, demo-calculator that provides the service.
+```typescript
+import { subscribe } from 'bubblesub' 
+import { ServiceInterface } from 'my-app' 
 
-```html
-  <demo-calculator>
-    <demo-val id="1"></demo-val>
-    +
-    <demo-val id="2"></demo-val>
-    +
-    <demo-val id="3"></demo-val>
-    =
-    <demo-total></demo-total>
-  </demo-calculator>
+const service:ServiceInterface = await subscribe(this)
+      .to<ServiceInterface>('service')
+      .toPromise()
+
+subscribe(this)
+      .to<ServiceInterface>('service')
+      .mapFirst((service:ServiceInterface)=>{/* do something with the service*/})
+      
 ```
 
 ## Leveraging the DOM and events
@@ -124,7 +99,11 @@ So...
 * Bubblesub requires that the publisher of a Publication be an ancestor of the subscriber
 * Bubblesub relies on the hierarchical nature of the DOM to bind publisher and subscriber. A subscriber is bound to the closest ancestor that publishes the wanted Publication. 
 * There is no central registry of Publications. This means that your Bubblesub bindings can be encapsulated within a parent component, leak nothing, require nothing from outside.
- 
+* bubblesub does not require that subscribing happen after an observable is published. The subcriber will keep on trying to find the observable assuming it will eventually appear. On the other hand a late subscriber will receive all the updates that the observable has accumulated before the subscription was established.   
+
+## Decorators
+
+see: [experimental decorators](DECORATORS.md)
 
 ## Usage
 
@@ -135,9 +114,13 @@ The only required coupling is on the name of the dependency. Bubblesub is implem
 A set of examples devised for demonstrating and testing is available if you checkout the project and build it. For the sake of clarity the examples are implemented using vanilla JS web components.
 
 ```shell script
-yarn build.example
+## build the library, the tests, and the examples
+yarn build:serve
+
+## serve the built examples
 yarn serve
-## open browser at http://localhost:8080
+
+## open browser at http://localhost:8888
 ```
 
 [Docs on Examples](src/example/README.md)
diff --git a/src/decorators.ts b/src/decorators.ts
index d7228fa..db1e442 100644
--- a/src/decorators.ts
+++ b/src/decorators.ts
@@ -1,4 +1,5 @@
-import { Publication, publisher } from './publisher.js'
+import { Publication } from './publication'
+import { publish } from './publish.js'
 import { subscribe, Update } from './subscribe.js'
 
 export class SubConfig<T> {
@@ -73,9 +74,9 @@ export function pub<T>(config: PubConfig<T> = {}) {
 
         if (!publication) {
           if (conf.pubTarget) {
-            publication = publisher(conf.pubTarget).create<T>(conf.name, conf.initialValue)
+            publication = publish(conf.pubTarget).create<T>(conf.name, conf.initialValue)
           } else {
-            publication = publisher(this).create<T>(conf.name, conf.initialValue)
+            publication = publish(this).create<T>(conf.name, conf.initialValue)
           }
         }
 
diff --git a/src/example/di/CounterView.ts b/src/example/di/CounterView.ts
index 982ad32..353a77a 100644
--- a/src/example/di/CounterView.ts
+++ b/src/example/di/CounterView.ts
@@ -1,5 +1,4 @@
 import { customElement, html, LitElement, property } from 'lit-element'
-import { sub } from '../../decorators.js'
 import { subscribe } from '../../subscribe.js'
 import { SequenceService } from './index.js'
 
@@ -12,29 +11,21 @@ export class CounterView extends LitElement {
   @property({attribute: false})
   private service: SequenceService
 
-  constructor() {
-    super()
-    subscribe(this)
+  async connectedCallback() {
+    super.connectedCallback()
+    this.service = await subscribe(this)
       .to<SequenceService>('service.counter')
-      .mapFirst((s) => {
-        console.log('first')
-        this.service = s
-        const el: HTMLButtonElement = this.shadowRoot.querySelector('#button')
-        el.style.visibility = null
-        this.requestUpdate()
-      })
+      .toPromise()
   }
 
   protected render() {
     return html`
-            <input type="button" value="+" id="button" @click="${this.increment}" style="visibility: hidden"/>
+            <input type="button" value="+" id="button" @click="${this.increment}" />
             <h2>Next Fibonacci: <span id="value">${this.counter}</span></h2>`
   }
 
   private increment() {
-    setTimeout(() => {
-      this.counter = this.service.next()
-    }, 500)
+    this.counter = this.service.next()
   }
 
 }
diff --git a/src/example/di/index.test.ts b/src/example/di/index.test.ts
index 86105cc..c9f079f 100644
--- a/src/example/di/index.test.ts
+++ b/src/example/di/index.test.ts
@@ -1,4 +1,4 @@
-import { initLit, Query } from '../util.js'
+import { initLit, Query } from '../test-util.js'
 import { CounterService, CounterView } from './index.js'
 
 describe('fibonacci counter(di) example', () => {
diff --git a/src/example/di/index.ts b/src/example/di/index.ts
index 330d0f0..2e01938 100644
--- a/src/example/di/index.ts
+++ b/src/example/di/index.ts
@@ -1,4 +1,4 @@
-import { publisher } from '../../publisher.js'
+import { publish } from '../../publish.js'
 export { CounterView } from './CounterView.js'
 
 export interface SequenceService {
@@ -33,5 +33,5 @@ function* fib() {
   }
 }
 
-const pub = publisher(document.body).create<SequenceService>('service.counter')
+const pub = publish(document.body).create<SequenceService>('service.counter')
 pub.update(new CounterService())
diff --git a/src/example/progress/ProgressDialog.ts b/src/example/progress/ProgressDialog.ts
index d01095e..4a7ecac 100644
--- a/src/example/progress/ProgressDialog.ts
+++ b/src/example/progress/ProgressDialog.ts
@@ -1,4 +1,5 @@
-import { Publication, publisher } from '../../publisher.js'
+import { Publication } from '../../publication'
+import { publish } from '../../publish.js'
 import { subscribe } from '../../subscribe.js'
 import { FileService } from './FileService.js'
 
@@ -10,7 +11,7 @@ export class ProgressDialog extends HTMLElement {
   constructor() {
     super()
     this.root = this.attachShadow({mode: 'open'})
-    this.pub = publisher(this.root).create('percent', 0)
+    this.pub = publish(this.root).create('percent', 0)
 
     this.root.innerHTML = `
        <h1>CHUNK DOWNLOAD</h1>
diff --git a/src/example/progress/index.ts b/src/example/progress/index.ts
index f4489ca..fc07ce0 100644
--- a/src/example/progress/index.ts
+++ b/src/example/progress/index.ts
@@ -1,4 +1,4 @@
-import { publisher } from '../../publisher.js'
+import { publish } from '../../publish.js'
 import { service } from './FileService.js'
 export { ProgressDialog } from './ProgressDialog.js'
 export { ProgressBar } from './ProgressBar.js'
@@ -7,7 +7,7 @@ export class FileServiceComponent extends HTMLElement {
 
   constructor() {
     super()
-    publisher(document.body).create('file-service', service)
+    publish(document.body).create('file-service', service)
 
   }
 }
diff --git a/src/example/streaming/PriceSource.ts b/src/example/streaming/PriceSource.ts
index de82919..68de2af 100644
--- a/src/example/streaming/PriceSource.ts
+++ b/src/example/streaming/PriceSource.ts
@@ -1,6 +1,9 @@
 // random integer generator
 import { pub } from '../../decorators.js'
-import { Publication, publisher } from '../../publisher.js'
+import { Publication } from '../../publication'
+import { publish } from '../../publish.js'
+import { subscribe } from '../../subscribe'
+import doc = Mocha.reporters.doc
 
 function getRandomInt(x: number, y: number) {
   return Math.floor(Math.random() * ((y - x) + 1) + x)
@@ -15,7 +18,7 @@ export class PriceSource {
 
   constructor(prices?: Array<{ price: number; name: string } | { price: number; name: string }>,
               interval?: number) {
-    this.publication = publisher(document.body).create<{ price: number; name: string }>('prices')
+    this.publication = publish(document.body).create<{ price: number; name: string }>('prices')
 
     if (!prices) {
       this.updatePrice('apples', interval)
diff --git a/src/example/streaming/index.test.ts b/src/example/streaming/index.test.ts
index 91af023..c679be0 100644
--- a/src/example/streaming/index.test.ts
+++ b/src/example/streaming/index.test.ts
@@ -1,4 +1,4 @@
-import { initLit, Query } from '../util.js'
+import { initLit, Query } from '../test-util.js'
 import { PriceSource } from './PriceSource.js'
 import { Ticker } from './Ticker.js'
 export { Ticker } from './Ticker.js'
diff --git a/src/example/util.ts b/src/example/test-util.ts
similarity index 100%
rename from src/example/util.ts
rename to src/example/test-util.ts
diff --git a/src/index.test.ts b/src/index.test.ts
index d636757..8c825c0 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -1,3 +1,3 @@
 import './example/index.test.js'
-import './publisher.test.js'
+import './publication.test.js'
 import './subscriber.test.js'
diff --git a/src/index.ts b/src/index.ts
index 4c093fc..b7bfefb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,11 @@
-export { publisher, Publication } from './publisher.js'
-export { subscribe, PublicationRequest, PUB_REQUEST_EVENT_NAME } from './subscribe.js'
+import { publish } from './publish'
+export { publish } from './publish.js'
+export { subscribe } from './subscribe.js'
 export * from './decorators'
+export { PublicationRequest } from './publication.js'
+export { Publication } from './publication.js'
+
+/**
+ * The general purpose custom event name visible on the DOM used in bubblesub
+ */
+export const PUB_REQUEST_EVENT_NAME: string = 'bubblesubpublicationrequest'
diff --git a/src/publisher.test.ts b/src/publication.test.ts
similarity index 98%
rename from src/publisher.test.ts
rename to src/publication.test.ts
index e3f828a..caf3a13 100644
--- a/src/publisher.test.ts
+++ b/src/publication.test.ts
@@ -1,4 +1,4 @@
-import { Publication } from './publisher.js'
+import { Publication } from './publication'
 
 describe('publisher', function() {
   this.enableTimeouts()
diff --git a/src/publisher.ts b/src/publication.ts
similarity index 56%
rename from src/publisher.ts
rename to src/publication.ts
index 85dfad1..ef5ab25 100644
--- a/src/publisher.ts
+++ b/src/publication.ts
@@ -1,30 +1,61 @@
-import { PUB_REQUEST_EVENT_NAME, PublicationRequest, Update } from './subscribe.js'
-
-export function publisher(parent: HTMLElement | ShadowRoot) {
-  /**
-   * Expose a Subscibable over events
-   * @param name
-   * @param initialValue
-   * @param parent
-   */
-  return {
-    create: function createPublication<T>(name: string, initialValue?: T | null | undefined): Publication<T> {
-      const publication = new Publication<T>(name, initialValue)
-
-      const requestListener = (event: CustomEvent) => {
-        const request: PublicationRequest<T> = event.detail
-        if (request.name === publication.name) {
-          // console.debug(`PROVISION: ${publication.name}`)
-          // provide publication to requester
-          request.pub = publication
-          // stop propagation because only one publisher exists for each publication
-          event.stopPropagation()
-        }
-      }
-      // @ts-ignore
-      parent.addEventListener(PUB_REQUEST_EVENT_NAME, requestListener)
-      // console.debug(`SETUP PUB: ${name}`)
-      return publication
+import { Update } from './subscribe'
+
+/**
+ * Request for publication to subscribe to
+ */
+export class PublicationRequest<T> {
+  readonly name: string
+  private internalPublication?: Publication<T>
+  private subscriptions = new Array<Update<T>>()
+  private firstSubscriptions = new Array<Update<T>>()
+  private lastSubscriptions = new Array<Update<T>>()
+
+  constructor(name: string) {
+    this.name = name
+  }
+
+  get value(): T | null | undefined {
+    return this.pub ? this.pub.value : null
+  }
+
+  get pub() {return this.internalPublication}
+
+  set pub(pub: Publication<T>) {
+    if (!this.internalPublication) {
+      this.subscriptions.forEach((u) => pub.subscribe(u))
+      this.subscriptions.length = 0
+
+      this.firstSubscriptions.forEach((u) => pub.subscribeForFirst(u))
+      this.firstSubscriptions.length = 0
+
+      this.lastSubscriptions.forEach((u) => pub.subscribeForLast(u))
+      this.lastSubscriptions.length = 0
+    }
+
+    this.internalPublication = pub
+  }
+
+  subscribe(update: Update<T>) {
+    if (this.pub) {
+      this.pub.subscribe(update)
+    } else {
+      this.subscriptions.push(update)
+    }
+  }
+
+  subscribeForFirst(fn: Update<T>) {
+    if (this.pub) {
+      this.pub.subscribeForFirst(fn)
+    } else {
+      this.lastSubscriptions.push(fn)
+    }
+  }
+
+  subscribeForLast(fn: Update<T>) {
+    if (this.pub) {
+      this.pub.subscribeForLast(fn)
+    } else {
+      this.lastSubscriptions.push(fn)
     }
   }
 }
diff --git a/src/publish.ts b/src/publish.ts
new file mode 100644
index 0000000..ad0eccb
--- /dev/null
+++ b/src/publish.ts
@@ -0,0 +1,32 @@
+import { PUB_REQUEST_EVENT_NAME } from './index.js'
+import { Publication, PublicationRequest } from './publication.js'
+
+export function publish(parent: HTMLElement | ShadowRoot) {
+  /**
+   * Expose a Subscibable over events
+   * @param name
+   * @param initialValue
+   * @param parent
+   */
+  return {
+    create: function createPublication<T>(name: string, initialValue?: T | null | undefined): Publication<T> {
+      const publication = new Publication<T>(name, initialValue)
+
+      const requestListener = (event: CustomEvent) => {
+        const request: PublicationRequest<T> = event.detail
+        if (request.name === publication.name) {
+          // console.debug(`PROVISION: ${publication.name}`)
+          // provide publication to requester
+          request.pub = publication
+          // stop propagation because only one publisher exists for each publication
+          event.stopPropagation()
+        }
+      }
+      // @ts-ignore
+      parent.addEventListener(PUB_REQUEST_EVENT_NAME, requestListener)
+      // console.debug(`SETUP PUB: ${name}`)
+      return publication
+    }
+  }
+}
+
diff --git a/src/subscribe.ts b/src/subscribe.ts
index 08e810a..d7f3fe2 100644
--- a/src/subscribe.ts
+++ b/src/subscribe.ts
@@ -1,7 +1,12 @@
-import { Publication } from './publisher.js'
-export const PUB_REQUEST_EVENT_NAME: string = 'subscribablerequest'
+import { PUB_REQUEST_EVENT_NAME } from './index.js'
+import { PublicationRequest } from './publication.js'
 
-export function subscribe(parent: HTMLElement | ShadowRoot) {
+/**
+ * Subscribe to an observable. In most cases, passing `this` is recommended. The observable provider should be
+ * somewhere up the DOM tree from the provided `child`.
+ * @param descendant `HTMLElelement` or `ShadowRoot` descendant of observable provider
+ */
+export function subscribe(descendant: HTMLElement | ShadowRoot) {
 
   /**
    * Subscribe for changes to a subscibable. The update is called once on subscription to get the initial value.
@@ -11,76 +16,24 @@ export function subscribe(parent: HTMLElement | ShadowRoot) {
    */
 
   return {
-    to: function to<T>(name: string): To<T> { return new To<T>(name, parent)}
+    /**
+     * Identify by name the observable you are interested in. Use `T` generic to define the type of the observable.
+     * @param name unique observable identifier
+     *
+     */
+    to: function to<T>(name: string): To<T> { return new To<T>(name, descendant)}
   }
 
 }
 
 /**
- * Request for publication to subscribe to
+ * Publication update callback
  */
-export class PublicationRequest<T> {
-  readonly name: string
-  private internalPublication?: Publication<T>
-  private subscriptions = new Array<Update<T>>()
-  private firstSubscriptions = new Array<Update<T>>()
-  private lastSubscriptions = new Array<Update<T>>()
-
-  constructor(name: string) {
-    this.name = name
-  }
-
-  get value(): T | null | undefined {
-    return this.pub ? this.pub.value : null
-  }
-
-  get pub() {return this.internalPublication}
-
-  set pub(pub: Publication<T>) {
-    if (!this.internalPublication) {
-      this.subscriptions.forEach((u) => pub.subscribe(u))
-      this.subscriptions.length = 0
-
-      this.firstSubscriptions.forEach((u) => pub.subscribeForFirst(u))
-      this.firstSubscriptions.length = 0
-
-      this.lastSubscriptions.forEach((u) => pub.subscribeForLast(u))
-      this.lastSubscriptions.length = 0
-    }
-
-    this.internalPublication = pub
-  }
-
-  subscribe(update: Update<T>) {
-    if (this.pub) {
-      this.pub.subscribe(update)
-    } else {
-      this.subscriptions.push(update)
-    }
-  }
-
-  subscribeForFirst(fn: Update<T>) {
-    if (this.pub) {
-      this.pub.subscribeForFirst(fn)
-    } else {
-      this.lastSubscriptions.push(fn)
-    }
-  }
-
-  subscribeForLast(fn: Update<T>) {
-    if (this.pub) {
-      this.pub.subscribeForLast(fn)
-    } else {
-      this.lastSubscriptions.push(fn)
-    }
-  }
-}
+export type Update<T> = (updated: T | null) => void
 
 /**
- * Publication update callback
+ * Wrapper around subscription interface
  */
-export type Update<T> = (updated: T | null | undefined) => void
-
 class To<T> {
   name: string
   target: HTMLElement | ShadowRoot
@@ -90,8 +43,14 @@ class To<T> {
     this.target = target
   }
 
+  /**
+   * Map the values as they are updated. Whether the update is a replacement for a single value or a stream of values
+   * is determined by the
+   * observsable provider.
+   * @param fn {@link Update}
+   */
   map(fn: Update<T>): To<T> {
-    setup(
+    connect(
       this.name,
       true,
       (pub: PublicationRequest<T>) => {
@@ -102,8 +61,13 @@ class To<T> {
     return this
   }
 
+  /**
+   * Map the first update only. Useful if the first update should trigger special processing OR if only a single update
+   * is expected.
+   * @param fn {@link Update}
+   */
   mapFirst(fn: Update<T>): To<T> {
-    setup(
+    connect(
       this.name,
       true,
       (pub: PublicationRequest<T>) => {
@@ -114,8 +78,12 @@ class To<T> {
     return this
   }
 
+  /**
+   *
+   * @param fn {@link Update}
+   */
   mapLast(fn: Update<T>): To<T> {
-    setup(
+    connect(
       this.name,
       true,
       (pub: PublicationRequest<T>) => {
@@ -124,18 +92,33 @@ class To<T> {
       this.target)
     return this
   }
+
+  /**
+   * Map first value as a promise. This is useful to retrieve a service or a singleton.
+   */
+  toPromise(): Promise<T> {
+    return new Promise<T>((resolve) => {
+      this.mapFirst(updated => resolve(updated))
+    })
+  }
 }
 
-function setup<T>(name: string,
-                  retry: boolean,
-                  beginFn: (pub: PublicationRequest<T>) => void,
-                  parent: HTMLElement | ShadowRoot): PublicationRequest<T> {
+/**
+ * Connection strategy that connect observer and observable over events
+ * @param name observable name
+ * @param retry
+ * @param beginFn startup behavior once observable captured
+ * @param descendant
+ */
+function connect<T>(name: string,
+                    retry: boolean,
+                    beginFn: (pub: PublicationRequest<T>) => void,
+                    descendant: HTMLElement | ShadowRoot): PublicationRequest<T> {
 
   const publication = new PublicationRequest<T>(name)
-  // console.debug('SETUP SUB: ' + publication.name)
 
-  // seek a parent that provides this publication
-  const event = new CustomEvent(
+  // create custom event request
+  const requestEvent = new CustomEvent(
     PUB_REQUEST_EVENT_NAME,
     {
       detail: publication,
@@ -144,18 +127,23 @@ function setup<T>(name: string,
       composed: true
     })
 
-  // request the publication
-  parent.dispatchEvent(event)
+  // seek the observable provider somewhere up the DOM
+  descendant.dispatchEvent(requestEvent)
 
-  retryUntilThere(10)
+  retryUntilThere(10, retry)
 
-  function retryUntilThere(timeout: number) {
+  /**
+   * retry reaching observable at intervals. Retries delay grows after each failed attempt
+   * @param initialTimeout initial timeout.
+   * @param shouldRetry try more than once
+   */
+  function retryUntilThere(initialTimeout: number, shouldRetry: boolean) {
+    // check if provider has filled value
     if (publication.value == null) {
       setTimeout(() => {
-        // console.debug('RETRY SUB: ' + publication.name)
-        parent.dispatchEvent(event)
-        if (retry) retryUntilThere((timeout * 5))
-      }, timeout)
+        descendant.dispatchEvent(requestEvent)
+        if (shouldRetry) retryUntilThere((initialTimeout * 5), shouldRetry)
+      }, initialTimeout)
     } else {
       beginFn(publication)
     }
diff --git a/src/subscriber.test.ts b/src/subscriber.test.ts
index 79ec941..20865a2 100644
--- a/src/subscriber.test.ts
+++ b/src/subscriber.test.ts
@@ -1,5 +1,4 @@
-import { Publication } from './publisher.js'
-import { PublicationRequest } from './subscribe.js'
+import { Publication, PublicationRequest } from './publication'
 
 describe('subscriber', function() {
   this.enableTimeouts()

From 1a7e97325c23449026d1e2060e69ff846762344d Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Mon, 4 Nov 2019 00:12:56 +0100
Subject: [PATCH 6/9] improve docs

---
 README.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c4b4cd7..9028751 100644
--- a/README.md
+++ b/README.md
@@ -28,9 +28,9 @@ There are some examples in this repo that are implemented as standalone Web Comp
 * Bubblesub is written in Typescript and is provided with ES module bundling and d.ts files
 * Bubblesub has zero dependencies and targets web component (ie: custom elements, shadow dom) development. 
 
-### Publishing a Stream
+### Publishing a Stream of updates
 
-One common case for observable is a stream of data
+Do the following to publish a stream of data or update a single value as it changes 
  
 #### publishing
 ```typescript
@@ -48,6 +48,8 @@ pub.close()
 ```
 
 #### subscribing
+
+You can subscribe for all updates, just the first, or just the last. The last update is only published if the publication is closed.
 ```typescript
 import { subscribe } from './subscribe' 
 
@@ -61,10 +63,14 @@ subscribe(this)
 
 ```
 
-### Publihing a Service
+### Publishing a Service
+           
+Publishing a service or a factory is very similar to a stream of values. It's simply not expected that a service or factory is updated more than once.  
 
 #### publishing
 
+To publish a shared service or factory do the same as with a stream.   
+
 ```typescript
 import {ServiceImpl, ServiceInterface } from 'my-app' 
 import { publish } from 'bubblesub' 
@@ -76,6 +82,8 @@ pub.update(new ServiceImpl())
 
 #### subscribing
 
+To subscribe to a service or factory use async/await with the `.toPromise()` function to resolve the first update. Or you can use the `.mapFirst()` to process the update in a callback.
+
 ```typescript
 import { subscribe } from 'bubblesub' 
 import { ServiceInterface } from 'my-app' 

From d19a6e255100fa087f4495c2a0542a6e500d7c60 Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Mon, 4 Nov 2019 00:34:15 +0100
Subject: [PATCH 7/9] linting; docs

---
 README.md               |  2 +-
 package.json            | 74 ++++++++++++++++++++---------------------
 src/publication.test.ts |  2 +-
 src/publish.ts          |  1 -
 src/subscriber.test.ts  |  2 +-
 5 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index 9028751..e789d95 100644
--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@ subscribe(this)
 
 ```
 
-### Publishing a Service
+### Publishing a service
            
 Publishing a service or a factory is very similar to a stream of values. It's simply not expected that a service or factory is updated more than once.  
 
diff --git a/package.json b/package.json
index 70b84e4..aab662e 100644
--- a/package.json
+++ b/package.json
@@ -1,52 +1,52 @@
 {
-    "name": "bubblesub",
-    "version": "1.2.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.2.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; npm run test",
+        "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.18.4",
-        "lit-element": "^2.2.1",
-        "lit-html": "^1.1.2",
-        "mocha": "^6.2.1",
-        "mocha-headless-chrome": "^2.0.3",
-        "terser": "^4.3.9",
-        "tslint": "^5.20.0",
-        "typescript": "^3.6.4",
-        "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.18.4",
+        "lit-element"                 : "^2.2.1",
+        "lit-html"                    : "^1.1.2",
+        "mocha"                       : "^6.2.1",
+        "mocha-headless-chrome"       : "^2.0.3",
+        "terser"                      : "^4.3.9",
+        "tslint"                      : "^5.20.0",
+        "typescript"                  : "^3.6.4",
+        "watch"                       : "^1.0.2"
     },
-    "@pika/pack": {
+    "@pika/pack"     : {
         "pipeline": [
             [
                 "@pika/plugin-ts-standard-pkg"
diff --git a/src/publication.test.ts b/src/publication.test.ts
index caf3a13..6c73831 100644
--- a/src/publication.test.ts
+++ b/src/publication.test.ts
@@ -1,4 +1,4 @@
-import { Publication } from './publication'
+import { Publication } from './publication.js'
 
 describe('publisher', function() {
   this.enableTimeouts()
diff --git a/src/publish.ts b/src/publish.ts
index ad0eccb..1afd4d2 100644
--- a/src/publish.ts
+++ b/src/publish.ts
@@ -29,4 +29,3 @@ export function publish(parent: HTMLElement | ShadowRoot) {
     }
   }
 }
-
diff --git a/src/subscriber.test.ts b/src/subscriber.test.ts
index 20865a2..0edf2a1 100644
--- a/src/subscriber.test.ts
+++ b/src/subscriber.test.ts
@@ -1,4 +1,4 @@
-import { Publication, PublicationRequest } from './publication'
+import { Publication, PublicationRequest } from './publication.js'
 
 describe('subscriber', function() {
   this.enableTimeouts()

From 88a1d5f00d659f0fe01ec62cf16010032cab0a37 Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Mon, 4 Nov 2019 00:38:39 +0100
Subject: [PATCH 8/9] fixed prepare

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aab662e..c65fa23 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "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; npm run test",
+        "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",

From bb9417061ff2952ad223d1c9e1e715da28303284 Mon Sep 17 00:00:00 2001
From: zenwork <flo@hehlen.name>
Date: Mon, 4 Nov 2019 00:41:18 +0100
Subject: [PATCH 9/9] fix gitlab build

---
 .github/workflows/nodejs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 16eaa87..15b4646 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -21,6 +21,6 @@ jobs:
       run: |
         npm set audit false
         npm install
-        pika build
+        node_modules/.bin/pika build
       env:
         CI: true