knockout · brianmhunt · Jun 23, 2021 · Jun 23, 2021 · Jun 23, 2021 · Jun 23, 2021
diff --git a/packages/observable/package.json b/packages/observable/package.json
@@ -45,4 +45,4 @@
       "url": "https://opensource.org/licenses/MIT"
     }
   ]
-}
+}
diff --git a/packages/observable/spec/subscribableBehaviors.ts b/packages/observable/spec/subscribableBehaviors.ts
@@ -17,6 +17,12 @@ describe('Subscribable', function () {
     expect(isSubscribable(null)).toEqual(false)
   })
 
+  it('creates/has a Symbol.observable', () => {
+    const sub = new subscribable()
+    expect(Symbol.observable).toEqual(Symbol.for('@tko/Symbol.observable'))
+    expect(sub[Symbol.observable]()).toBe(sub)
+  })
+
   it('Should be able to notify subscribers', function () {
     var instance = new subscribable()
     var notifiedValue

diff --git a/packages/observable/src/subscribable.ts b/packages/observable/src/subscribable.ts
@@ -14,6 +14,10 @@ export { isSubscribable } from './subscribableSymbol'
 // subscribed.
 export const LATEST_VALUE = Symbol('Knockout latest value')
 
+if (!Symbol.observable) {
+  Symbol.observable = Symbol.for('@tko/Symbol.observable')
+}
+
 export function subscribable () {
   Object.setPrototypeOf(this, ko_subscribable_fn)
   ko_subscribable_fn.init(this)

diff --git a/sites/minimum-esm/Makefile b/sites/minimum-esm/Makefile
@@ -0,0 +1,2 @@
+
+include ../../tools/site.mk
diff --git a/sites/minimum-esm/README.md b/sites/minimum-esm/README.md
@@ -0,0 +1,9 @@
+# Sample Site
+
+This is a trival setup, exhibiting a minimal configuration.
+
+## Startup
+
+```bash
+$ make serve
+```
diff --git a/sites/minimum-esm/src/entry.tsx b/sites/minimum-esm/src/entry.tsx
@@ -0,0 +1,49 @@
+import { Builder } from '@tko/builder'
+
+import { ComponentProvider } from '@tko/provider.component'
+import { MultiProvider } from '@tko/provider.multi'
+import {
+  NativeProvider
+} from '@tko/provider.native'
+
+import { bindings as coreBindings } from '@tko/binding.core'
+import { bindings as componentBindings } from '@tko/binding.component'
+
+import { filters } from '@tko/filter.punches'
+
+import components from '@tko/utils.component'
+import { createElement, Fragment } from '@tko/utils.jsx'
+
+
+const builder = new Builder({
+  filters,
+  provider: new MultiProvider({
+    providers: [
+      new ComponentProvider(),
+      new NativeProvider(),
+    ]
+  }),
+  bindings: [
+    coreBindings,
+    componentBindings,
+  ],
+  extenders: [],
+  options: {},
+})
+
+const tko = builder.create({
+  jsx: {
+    createElement,
+    Fragment,
+  },
+  components,
+  version: 'live',
+  Component: components.ComponentABC,
+})
+
+class TestComponent extends components.ComponentABC {
+  get template () { return <span>hello ${new Date().toISOString()}</span> }
+}
+TestComponent.register()
+
+tko.applyBindings()
diff --git a/sites/minimum-esm/src/index.d.ts b/sites/minimum-esm/src/index.d.ts
@@ -0,0 +1,7 @@
+
+declare namespace JSX {
+  interface IntrinsicElements {
+      [elemName: string]: any;
+  }
+}
+
diff --git a/sites/minimum-esm/src/index.html b/sites/minimum-esm/src/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <test-component />
+    <script src='entry.js'></script>
+  </body>
+</html>
diff --git a/sites/minimum-esm/tsconfig.json b/sites/minimum-esm/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "downlevelIteration": true,
+    "target": "ES2015",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "importHelpers": true,
+    "strict": true,
+    "jsx": "react",
+    "jsxFactory": "tko.jsx.createElement",
+    "jsxFragmentFactory": "tko.jsx.Fragment",
+    "baseUrl": ".",
+    "paths": {
+      "*": [
+        "*",
+        "../../packages/*",
+      ]
+    }
+  }
+}
diff --git a/sites/www.tko.io/Makefile b/sites/www.tko.io/Makefile
@@ -0,0 +1,7 @@
+
+include ../../tools/site.mk
+
+dist/esbuild.wasm: node_modules
+	cp node_modules/esbuild-wasm/esbuild.wasm dist
+
+build:: dist/esbuild.wasm
diff --git a/builds/reference/docs/3to4.md → sites/www.tko.io/docs/3to4.md b/builds/reference/docs/3to4.md → sites/www.tko.io/docs/3to4.md
diff --git a/builds/reference/docs/amd-loading.md → sites/www.tko.io/docs/amd-loading.md b/builds/reference/docs/amd-loading.md → sites/www.tko.io/docs/amd-loading.md
diff --git a/builds/reference/docs/animated.md → sites/www.tko.io/docs/animated.md b/builds/reference/docs/animated.md → sites/www.tko.io/docs/animated.md
diff --git a/builds/reference/docs/books.pug → sites/www.tko.io/docs/books.pug b/builds/reference/docs/books.pug → sites/www.tko.io/docs/books.pug
diff --git a/builds/reference/docs/fn.md → sites/www.tko.io/docs/fn.md b/builds/reference/docs/fn.md → sites/www.tko.io/docs/fn.md
diff --git a/builds/reference/docs/intro.md → sites/www.tko.io/docs/intro.md b/builds/reference/docs/intro.md → sites/www.tko.io/docs/intro.md
diff --git a/builds/reference/docs/json-data.md → sites/www.tko.io/docs/json-data.md b/builds/reference/docs/json-data.md → sites/www.tko.io/docs/json-data.md
diff --git a/builds/reference/docs/links.md → sites/www.tko.io/docs/links.md b/builds/reference/docs/links.md → sites/www.tko.io/docs/links.md
diff --git a/builds/reference/docs/plugins.md → sites/www.tko.io/docs/plugins.md b/builds/reference/docs/plugins.md → sites/www.tko.io/docs/plugins.md
diff --git a/sites/www.tko.io/package.json b/sites/www.tko.io/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "www.tko.io",
+  "version": "1.0.0",
+  "description": "www.tko.io",
+  "repository": "https://github.com/knockout/tko",
+  "author": "The Knockout Team",
+  "license": "MIT",
+  "dependencies": {
+    "@monaco-editor/loader": "^1.1.1",
+    "@types/css-font-loading-module": "^0.0.5",
+    "esbuild-wasm": "^0.12.12",
+    "jss": "^10.6.0",
+    "jss-preset-default": "^10.6.0"
+  }
+}
diff --git a/sites/www.tko.io/src/EsbuildComponent.tsx b/sites/www.tko.io/src/EsbuildComponent.tsx
@@ -0,0 +1,42 @@
+
+import * as esbuild from 'esbuild-wasm'
+import { observable, observableArray } from '@tko/observable'
+
+import {TkoComponent} from './TkoComponent'
+
+
+const wasmURL = './esbuild.wasm'
+
+export class EsbuildComponent extends TkoComponent {
+  private esbuildInitialized: Promise<void>
+  protected code = observable('')
+  protected warnings = observableArray([])
+  protected errors = observableArray([])
+
+  constructor () {
+    super()
+    this.esbuildInitialized = Promise.resolve(this.initializeEsbuild())
+  }
+
+  async initializeEsbuild () {
+    await esbuild.initialize({ wasmURL })
+  }
+
+  protected async compile (code: string) {
+    try {
+      await this.esbuildInitialized
+    } catch (err) {
+      this.errors.push(err)
+    }
+    try {
+      const r = await esbuild.transform(code)
+      this.warnings(r.warnings)
+      this.errors([])
+      return r
+    } catch (err: esbuild.TransformFailure) {
+      this.warnings(err.warnings)
+      this.errors(err.errors)
+      return { code: '' }
+    }
+  }
+}
diff --git a/sites/www.tko.io/src/TkoComponent.tsx b/sites/www.tko.io/src/TkoComponent.tsx
@@ -0,0 +1,119 @@
+import { default as jss, StyleSheet } from 'jss'
+import preset from "jss-preset-default"
+
+import { tko } from './tko'
+
+jss.setup(preset())
+
+const JSS = Symbol('Memoized ViewComponent.jss')
+const staticStyles: Record<string, StyleSheet> = {}
+
+/**
+ * TkoComponent is a Knockout web-component base-class for all view components.
+ *
+ * It has builtin JSS styles.
+ */
+export abstract class TkoComponent extends tko.components.ComponentABC {
+  private static customElementName: string
+
+  dispose () {
+    super.dispose()
+    if (this._styles) { jss.removeStyleSheet(this._styles) }
+  }
+
+  /**
+   * @return {object|null} containing JSS-style classes that are specific to
+   * the instance.
+   *
+   * This offers more dynamic options than `static get css`, but at a
+   * substantial performance cost.  Use sparingly.
+   */
+  get css () { return {} as const }
+
+  /**
+   * @return {object} containing JSS-style classes that apply to every
+   * instance of this class.
+   *
+   * This is higher performance than `get css`
+   */
+   static get css () { return {} as const }
+
+  /**
+   * Lazy getter, so subclass constructors can refer to observables and
+   * computeds added to the class in the constructor
+   * after `super` has been called.
+   */
+   get styles () : StyleSheet {
+    if (!this.css) { return { classes: {} } as StyleSheet }
+    const options = {
+      meta: `⚙️  Dynamic Classes for ${this.constructor.name}>`,
+      link: true,
+      classNamePrefix: `${this.constructor.name}--`
+    }
+    const sheet = jss.createStyleSheet(this.css, options).attach()
+    return this._styles || (this._styles = sheet)
+  }
+
+  /**
+   * Static styles are created for each class (not each instance).
+   */
+  static get styles () : StyleSheet {
+    if (this.name in staticStyles) { return staticStyles[this.name] }
+    if (!this.css) { return { classes: {} } as StyleSheet }
+    const options = {
+      meta: `🎨  Static Classes for ${this.name}`,
+      link: true, // Warning: [JSS] Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule.
+      classNamePrefix: `${this.name}__`
+    }
+    const sheet = jss.createStyleSheet(this.css, options).attach()
+    return (staticStyles[this.name] = sheet)
+  }
+
+  /**
+   * Return the classes object for our JSS/CSS.
+   */
+   get jss (): Record<string, string> {
+    return this[JSS] || (this[JSS] = {
+      ...(this.constructor as typeof TkoComponent).styles.classes,
+      ...this.styles.classes,
+    })
+  }
+
+  /**
+   * Called when the component is removed from the DOM.  Must be on the
+   * prototype (for performance we don't add a callback for every component).
+   */
+  disconnectedCallback? (node: HTMLElement): void
+
+  get template () { return Symbol('No template') }
+
+  /**
+   * We overload the Register to create a custom element that
+   * triggers a `disconnectedCallback`. This is simpler and faster
+   * than using MutationObserver to trigger when an element
+   * is removed from the DOM.
+   */
+  static register (name = this.customElementName) {
+    const wantsCallback = 'disconnectedCallback' in this.prototype
+    if (wantsCallback) { this.defineCustomElementForDisconnectCallback(name) }
+    return super.register(name)
+  }
+
+  /**
+   * Define customElement that triggers a disconnection callback when the
+   * element is removed from the DOM.
+   */
+  private static defineCustomElementForDisconnectCallback (name: string) {
+    if (globalThis.customElements) {
+      customElements.define(name, class extends HTMLElement {
+        disconnectedCallback (this: HTMLElement) {
+          const component = tko.dataFor(this.children[0])
+          if (component) { component.disconnectedCallback(this) }
+        }
+      })
+    } else if (!globalThis.process) {
+      console.warn(`"window.customElements" is not available.  Unable to
+      register life-cycle disconnection callback.`)
+    }
+  }
+}
diff --git a/sites/www.tko.io/src/WithFontsView.tsx b/sites/www.tko.io/src/WithFontsView.tsx
@@ -0,0 +1,42 @@
+import { observable } from '@tko/observable'
+import { computed } from '@tko/computed'
+
+import { TkoComponent } from './TkoComponent'
+
+export abstract class WithFontsView extends TkoComponent {
+  static fontsLoaded = observable(false)
+
+  protected abstract bodyHTML: any
+
+  /**
+   * document.fonts.ready is a promise that resolves when all
+   * the fonts on the screen are loaded.
+   */
+  private async monitorFontsLoading () {
+    const waitForFontsToBeOnScreen = Promise.resolve()
+    await waitForFontsToBeOnScreen
+    await document.fonts.ready
+    WithFontsView.fontsLoaded(true)
+  }
+
+  static get css () {
+    const { fontsLoaded } = this
+    const opacityUntilFontsLoaded = computed(() => fontsLoaded() ? 1 : 0)
+
+    return {
+      ...super.css,
+
+
+      '@global': {
+        body: {
+          opacity: opacityUntilFontsLoaded,
+        },
+      },
+    }
+  }
+
+  get template () {
+    this.monitorFontsLoading()
+    return <>{this.bodyHTML()}</>
+  }
+}
diff --git a/sites/www.tko.io/src/entry.tsx b/sites/www.tko.io/src/entry.tsx
@@ -0,0 +1,5 @@
+import { tko } from './tko'
+
+import './www-tko-io'
+
+tko.applyBindings()
diff --git a/sites/www.tko.io/src/index.html b/sites/www.tko.io/src/index.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <title>TKO.io</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Pacifico&display=swap" rel="stylesheet">
+
+  </head>
+  <body>
+    <script async type="module" src='entry.js'></script>
+    <www-tko-io />
+  </body>
+</html>