// Ported from choo 7.1.0 index.js (MIT) — https://github.com/choojs/choo // Same API, same event flow; ESM, consolidated nano* internals in ./lib. import morph from '@choojs/html/morph' import nanotiming from './lib/timing.js' import Nanorouter from './lib/router.js' import Nanobus from './lib/bus.js' import nanoquery from './lib/query.js' import nanoraf from './lib/raf.js' import nanohref from './lib/href.js' import ComponentCache from './lib/cache.js' import { documentReady, scrollToAnchor } from './lib/dom.js' import { ok, equal, notEqual } from './lib/assert.js' const HISTORY_OBJECT = {} export class Choo { constructor (opts) { const timing = nanotiming('choo.constructor') opts = opts || {} equal(typeof opts, 'object', 'choo: opts should be type object') const self = this // define events used by choo this._events = { DOMCONTENTLOADED: 'DOMContentLoaded', DOMTITLECHANGE: 'DOMTitleChange', REPLACESTATE: 'replaceState', PUSHSTATE: 'pushState', NAVIGATE: 'navigate', POPSTATE: 'popState', RENDER: 'render' } // properties for internal use only this._historyEnabled = opts.history === undefined ? true : opts.history this._hrefEnabled = opts.href === undefined ? true : opts.href this._hashEnabled = opts.hash === undefined ? false : opts.hash this._hasWindow = typeof window !== 'undefined' this._cache = opts.cache this._loaded = false this._stores = [ondomtitlechange] this._tree = null // state const _state = { events: this._events, components: {} } if (this._hasWindow) { this.state = window.initialState ? Object.assign({}, window.initialState, _state) : _state delete window.initialState } else { this.state = _state } // properties that are part of the API this.router = new Nanorouter() this.emitter = new Nanobus('choo.emit') this.emit = this.emitter.emit.bind(this.emitter) // listen for title changes; available even when calling .toString() if (this._hasWindow) this.state.title = document.title function ondomtitlechange (state) { self.emitter.prependListener(self._events.DOMTITLECHANGE, function (title) { equal(typeof title, 'string', 'events.DOMTitleChange: title should be type string') state.title = title if (self._hasWindow) document.title = title }) } timing() } route (route, handler) { const routeTiming = nanotiming("choo.route('" + route + "')") equal(typeof route, 'string', 'choo.route: route should be type string') equal(typeof handler, 'function', 'choo.handler: route should be type function') this.router.on(route, handler) routeTiming() } use (cb) { equal(typeof cb, 'function', 'choo.use: cb should be type function') const self = this this._stores.push(function (state) { let msg = 'choo.use' msg = cb.storeName ? msg + '(' + cb.storeName + ')' : msg const endTiming = nanotiming(msg) cb(state, self.emitter, self) endTiming() }) } start () { equal(typeof window, 'object', 'choo.start: window was not found. .start() must be called in a browser, use .toString() if running in Node') const startTiming = nanotiming('choo.start') const self = this if (this._historyEnabled) { this.emitter.prependListener(this._events.NAVIGATE, function () { self._matchRoute(self.state) if (self._loaded) { self.emitter.emit(self._events.RENDER) setTimeout(scrollToAnchor.bind(null, window.location.hash), 0) } }) this.emitter.prependListener(this._events.POPSTATE, function () { self.emitter.emit(self._events.NAVIGATE) }) this.emitter.prependListener(this._events.PUSHSTATE, function (href) { equal(typeof href, 'string', 'events.pushState: href should be type string') window.history.pushState(HISTORY_OBJECT, null, href) self.emitter.emit(self._events.NAVIGATE) }) this.emitter.prependListener(this._events.REPLACESTATE, function (href) { equal(typeof href, 'string', 'events.replaceState: href should be type string') window.history.replaceState(HISTORY_OBJECT, null, href) self.emitter.emit(self._events.NAVIGATE) }) window.onpopstate = function () { self.emitter.emit(self._events.POPSTATE) } if (self._hrefEnabled) { nanohref(function (location) { const href = location.href const hash = location.hash if (href === window.location.href) { if (!self._hashEnabled && hash) scrollToAnchor(hash) return } self.emitter.emit(self._events.PUSHSTATE, href) }) } } this._setCache(this.state) this._matchRoute(this.state) this._stores.forEach(function (initStore) { initStore(self.state) }) this._tree = this._prerender(this.state) ok(this._tree, 'choo.start: no valid DOM node returned for location ' + this.state.href) this.emitter.prependListener(self._events.RENDER, nanoraf(function () { const renderTiming = nanotiming('choo.render') const newTree = self._prerender(self.state) ok(newTree, 'choo.render: no valid DOM node returned for location ' + self.state.href) equal(self._tree.nodeName, newTree.nodeName, 'choo.render: The target node <' + self._tree.nodeName.toLowerCase() + '> is not the same type as the new node <' + newTree.nodeName.toLowerCase() + '>.') const morphTiming = nanotiming('choo.morph') morph(self._tree, newTree) morphTiming() renderTiming() })) documentReady(function () { self.emitter.emit(self._events.DOMCONTENTLOADED) self._loaded = true }) startTiming() return this._tree } mount (selector) { const mountTiming = nanotiming("choo.mount('" + selector + "')") if (typeof window !== 'object') { ok(typeof selector === 'string', 'choo.mount: selector should be type String') this.selector = selector mountTiming() return this } ok(typeof selector === 'string' || typeof selector === 'object', 'choo.mount: selector should be type String or HTMLElement') const self = this documentReady(function () { const renderTiming = nanotiming('choo.render') const newTree = self.start() if (typeof selector === 'string') { self._tree = document.querySelector(selector) } else { self._tree = selector } ok(self._tree, 'choo.mount: could not query selector: ' + selector) equal(self._tree.nodeName, newTree.nodeName, 'choo.mount: The target node <' + self._tree.nodeName.toLowerCase() + '> is not the same type as the new node <' + newTree.nodeName.toLowerCase() + '>.') const morphTiming = nanotiming('choo.morph') morph(self._tree, newTree) morphTiming() renderTiming() }) mountTiming() } toString (location, state) { state = state || {} state.components = state.components || {} state.events = Object.assign({}, state.events, this._events) notEqual(typeof window, 'object', 'choo.mount: window was found. .toString() must be called in Node, use .start() or .mount() if running in the browser') equal(typeof location, 'string', 'choo.toString: location should be type string') equal(typeof state, 'object', 'choo.toString: state should be type object') this._setCache(state) this._matchRoute(state, location) this.emitter.removeAllListeners() this._stores.forEach(function (initStore) { initStore(state) }) const html = this._prerender(state) ok(html, 'choo.toString: no valid value returned for the route ' + location) ok(!Array.isArray(html), 'choo.toString: return value was an array for the route ' + location) return typeof html.outerHTML === 'string' ? html.outerHTML : html.toString() } _matchRoute (state, locationOverride) { let location, queryString if (locationOverride) { location = locationOverride.replace(/\?.+$/, '').replace(/\/$/, '') if (!this._hashEnabled) location = location.replace(/#.+$/, '') queryString = locationOverride } else { location = window.location.pathname.replace(/\/$/, '') if (this._hashEnabled) location += window.location.hash.replace(/^#/, '/') queryString = window.location.search } const matched = this.router.match(location) this._handler = matched.cb state.href = location state.query = nanoquery(queryString) state.route = matched.route state.params = matched.params } _prerender (state) { const routeTiming = nanotiming("choo.prerender('" + state.route + "')") const res = this._handler(state, this.emit) routeTiming() return res } _setCache (state) { const cache = new ComponentCache(state, this.emitter.emit.bind(this.emitter), this._cache) state.cache = renderComponent function renderComponent (Component, id, ...args) { equal(typeof Component, 'function', 'choo.state.cache: Component should be type function') return cache.render(Component, id, ...args) } // When the state gets stringified, make sure `state.cache` isn't // stringified too. renderComponent.toJSON = function () { return null } } } // Callable with or without `new`, matching choo v7's `choo()` usage. export default function choo (opts) { return new Choo(opts) }