		import type { Nullish, Primitive } from 'ts-runtime-typecheck';
		import type { Observable } from './Observable.type';
		import type { Observable } from './Observable/Observable.type';
		declare type BasicValue = Nullish \| Primitive \| EventListener \| ChildNode \| DocumentFragment;
		@@ -4,0 +4,0 @@ export declare type StaticValue = BasicValue \| BasicValue[];

cjs/children.d.ts

		@@ -1,3 +0,3 @@
		import type { Observable } from './Observable.type';
		import type { Observable } from './Observable/Observable.type';
		export declare function children<T, R extends Node>(source: Observable<Iterable<T>>, transform: (value: T) => R, identity?: (value: T, index: number) => unknown): Observable<R[]>;
		//# sourceMappingURL=children.d.ts.map

cjs/html.js

		@@ -19,3 +19,3 @@ 'use strict';
		function parse_template(literal) {
		const template = template_cache.get(literal);
		let template = template_cache.get(literal);
		if (template) {
		@@ -29,3 +29,5 @@ return template;
		}
		return parser.close_parser(ctx);
		template = parser.close_parser(ctx);
		template_cache.set(literal, template);
		return template;
		}
		@@ -32,0 +34,0 @@

cjs/index.d.ts

		@@ -1,8 +0,15 @@
		export { html, svg } from './html';
		export { Emitter } from './Observable/Emitter';
		export { AbstractObservable, SimpleObservable } from './Observable/Observable';
		export type { Observable, FoundationObservable, Disposable, Listener, Subscriber, Operator } from './Observable/Observable.type';
		export { Store } from './Observable/Store';
		export type { StaticValue, DynamicValue, ListValue, Value } from './Child.type';
		export { children } from './children';
		export { distinct } from './operators';
		export { html, svg, parse_template } from './html';
		export { SVG_NAMESPACE, HTML_NAMESPACE } from './Namespace.constants';
		export type { Namespace } from './Namespace.type';
		export { filter, map, distinct, until, take, tap, combine, share } from './Observable/operators';
		export { route, redirect, router, navigate, link } from './router';
		export { Store, Emitter, AbstractObservable } from './Observable';
		export type { Observable, Disposable, Listener, Subscriber, Operator } from './Observable.type';
		export type { StaticValue, DynamicValue, ListValue } from './Child.type';
		export type { RenderRoute, StaticRedirectRoute, DynamicRedirectRoute, RedirectRoute, Route } from './router.type';
		export type { Template } from './Template.type';
		export { web_component } from './WebComponent';
		//# sourceMappingURL=index.d.ts.map

cjs/index.js

		@@ -5,14 +5,32 @@ 'use strict';

		var Emitter = require('./Observable/Emitter.js');
		var Observable = require('./Observable/Observable.js');
		var Store = require('./Observable/Store.js');
		var children = require('./children.js');
		var html = require('./html.js');
		var children = require('./children.js');
		var operators = require('./operators.js');
		var Namespace_constants = require('./Namespace.constants.js');
		var operators = require('./Observable/operators.js');
		var router = require('./router.js');
		var Observable = require('./Observable.js');
		var WebComponent = require('./WebComponent.js');



		exports.Emitter = Emitter.Emitter;
		exports.AbstractObservable = Observable.AbstractObservable;
		exports.SimpleObservable = Observable.SimpleObservable;
		exports.Store = Store.Store;
		exports.children = children.children;
		exports.html = html.html;
		exports.parse_template = html.parse_template;
		exports.svg = html.svg;
		exports.children = children.children;
		exports.HTML_NAMESPACE = Namespace_constants.HTML_NAMESPACE;
		exports.SVG_NAMESPACE = Namespace_constants.SVG_NAMESPACE;
		exports.combine = operators.combine;
		exports.distinct = operators.distinct;
		exports.filter = operators.filter;
		exports.map = operators.map;
		exports.share = operators.share;
		exports.take = operators.take;
		exports.tap = operators.tap;
		exports.until = operators.until;
		exports.link = router.link;
		@@ -23,4 +41,2 @@ exports.navigate = router.navigate;
		exports.router = router.router;
		exports.AbstractObservable = Observable.AbstractObservable;
		exports.Emitter = Observable.Emitter;
		exports.Store = Observable.Store;
		exports.web_component = WebComponent.web_component;

cjs/render.d.ts

		import { Primitive } from 'ts-runtime-typecheck';
		import type { Template } from './Template.type';
		import type { Disposable } from './Observable.type';
		import type { Disposable } from './Observable/Observable.type';
		import type { DynamicValue, Value } from './Child.type';
		@@ -5,0 +5,0 @@ import type { Namespace } from './Namespace.type';

cjs/render.js

		@@ -8,3 +8,3 @@ 'use strict';
		var Template_constants = require('./Template.constants.js');
		var Observable = require('./Observable.js');
		var Observable = require('./Observable/Observable.js');
		var Ref = require('./Ref.js');
		@@ -11,0 +11,0 @@

cjs/router.d.ts

		@@ -1,2 +0,2 @@
		import type { Listener, Observable } from './Observable.type';
		import type { Listener, Observable } from './Observable/Observable.type';
		import { MatchResult } from 'path-to-regexp';
		@@ -3,0 +3,0 @@ import type { Value } from './Child.type';

cjs/router.js

		@@ -6,3 +6,3 @@ 'use strict';
		var pathToRegexp = require('path-to-regexp');
		var Observable = require('./Observable.js');
		var Observable = require('./Observable/Observable.js');
		var html = require('./html.js');
		@@ -9,0 +9,0 @@

mjs/Child.type.d.ts

		import type { Nullish, Primitive } from 'ts-runtime-typecheck';
		import type { Observable } from './Observable.type';
		import type { Observable } from './Observable/Observable.type';
		declare type BasicValue = Nullish \| Primitive \| EventListener \| ChildNode \| DocumentFragment;
		@@ -4,0 +4,0 @@ export declare type StaticValue = BasicValue \| BasicValue[];

mjs/children.d.ts

		@@ -1,3 +0,3 @@
		import type { Observable } from './Observable.type';
		import type { Observable } from './Observable/Observable.type';
		export declare function children<T, R extends Node>(source: Observable<Iterable<T>>, transform: (value: T) => R, identity?: (value: T, index: number) => unknown): Observable<R[]>;
		//# sourceMappingURL=children.d.ts.map

mjs/index.d.ts

		@@ -1,8 +0,15 @@
		export { html, svg } from './html';
		export { Emitter } from './Observable/Emitter';
		export { AbstractObservable, SimpleObservable } from './Observable/Observable';
		export type { Observable, FoundationObservable, Disposable, Listener, Subscriber, Operator } from './Observable/Observable.type';
		export { Store } from './Observable/Store';
		export type { StaticValue, DynamicValue, ListValue, Value } from './Child.type';
		export { children } from './children';
		export { distinct } from './operators';
		export { html, svg, parse_template } from './html';
		export { SVG_NAMESPACE, HTML_NAMESPACE } from './Namespace.constants';
		export type { Namespace } from './Namespace.type';
		export { filter, map, distinct, until, take, tap, combine, share } from './Observable/operators';
		export { route, redirect, router, navigate, link } from './router';
		export { Store, Emitter, AbstractObservable } from './Observable';
		export type { Observable, Disposable, Listener, Subscriber, Operator } from './Observable.type';
		export type { StaticValue, DynamicValue, ListValue } from './Child.type';
		export type { RenderRoute, StaticRedirectRoute, DynamicRedirectRoute, RedirectRoute, Route } from './router.type';
		export type { Template } from './Template.type';
		export { web_component } from './WebComponent';
		//# sourceMappingURL=index.d.ts.map

mjs/render.d.ts

		import { Primitive } from 'ts-runtime-typecheck';
		import type { Template } from './Template.type';
		import type { Disposable } from './Observable.type';
		import type { Disposable } from './Observable/Observable.type';
		import type { DynamicValue, Value } from './Child.type';
		@@ -5,0 +5,0 @@ import type { Namespace } from './Namespace.type';

mjs/router.d.ts

		@@ -1,2 +0,2 @@
		import type { Listener, Observable } from './Observable.type';
		import type { Listener, Observable } from './Observable/Observable.type';
		import { MatchResult } from 'path-to-regexp';
		@@ -3,0 +3,0 @@ import type { Value } from './Child.type';

package.json

		{
		"version": "0.3.0",
		"version": "0.4.0",
		"name": "helium-html",
		@@ -16,11 +16,12 @@ "main": "cjs/index.js",
		"devDependencies": {
		"@types/jest": "^27.0.2",
		"@typescript-eslint/eslint-plugin": "^5.3.0",
		"@typescript-eslint/parser": "^5.3.0",
		"eslint": "^8.2.0",
		"jest": "^27.3.1",
		"rollup": "^2.59.0",
		"rollup-plugin-typescript2": "^0.30.0",
		"ts-jest": "^27.0.7",
		"typescript": "^4.7.2"
		"@types/jest": "^29.0.2",
		"@typescript-eslint/eslint-plugin": "^5.37.0",
		"@typescript-eslint/parser": "^5.37.0",
		"eslint": "^8.23.1",
		"jest": "^29.0.3",
		"jest-environment-jsdom": "^29.0.3",
		"rollup": "^2.79.0",
		"rollup-plugin-typescript2": "^0.34.0",
		"ts-jest": "^29.0.1",
		"typescript": "^4.8.3"
		},
		@@ -27,0 +28,0 @@ "dependencies": {

README.md

		# helium-html

		A simple but powerful library for creating HTML fragments using template literals.
		A simple UI library that is easy to use and plays well with others.

		@@ -8,16 +8,5 @@ ```ts

		const fragment = html`<h1>hello world</h1>`
		document.body.append(fragment)
		```

		## Slotted values

		Values can be passed as attributes, nodes or text.

		```ts
		import { html } from 'helium-html';

		const name = 'James';
		const avatar = html`<img src=${ `avatar/${name}.png` } alt=${name} />`;

		// hello world
		const card = html`<div class="card">
		@@ -29,9 +18,8 @@ <h3>hello ${name}</h1>


		document.body.append(card)
		```

		## Dynamic values
		With Helium you can use the `html` tag to write HTML which is transformed into a DOM node. This is no simple interpolation; if you were to add a node via substitution then that node will be appended into the result, not a copy. This makes it relatively simple to compose a document in a concise, coherent and modular way.

		Passing an `Observable` as an attribute or node will bind it as the value. This provides a simple way for state to modify content. When written as a function this gives you components with very little behind the scenes magic.
		But what about dynamic state? Well by passing an `Observable` as an attribute or node it will be bound to that node and any changes will be reflected automatically. This provides a simple way for state to modify content. Creating stateful components is as simple as writing a function that accepts an Observable as a parameter.

		@@ -61,3 +49,3 @@ ```ts

		`Observable`s are bound to a specific piece of your template. If you have a large template with a single piece of dynamic text, only the relevant piece is updated. This differs from the likes of react which do a 'virtual' render of the entire template, compare with the current state and modify only the parts which change. Skipping this has obvious performance advantages, but naive use can lead to large re-renders.
		`Observable`s are bound to a specific piece of your template. If you have a large template with a single piece of dynamic text, only that text will be updated. This differs from the likes of react which do a 'virtual' render of the entire template, compare with the current state and modify only the parts which change. Skipping this has obvious performance advantages, but naive use can lead to large re-renders.

		@@ -185,8 +173,8 @@ The following is a simple example showing 2 ways to reflect state changes. Both take the same parameters, can be used in similar ways and produce the same HTML. In function `a` the `Observable` state is passed into the template expression. In function `b` state changes are observed and the value is passed into the template expression.

		`AbstractObservable` is an abstract class which implements `Observable`. It is used as a base for `Emitter` and `Store`. It is exposed so that developers may implement their own `Observable` classes with custom behavior. It provides a default implementation for `pipe` as well as some other utility methods but requires the implementor to define their own `watch` method, which is where the bulk of the class specific behavior for `Observable`s occur.
		`AbstractObservable` is an abstract class which implements `Observable`. It is used as a base for `Emitter` and `Store`. It is exposed so that developers may implement their own `Observable` classes with custom behavior. It provides a default implementation for `pipe` as well as the common operators `filter` and `map`. However, requires the implementor to define their own `watch` method, which is where the bulk of the class specific behavior for `Observable`s occur.

		helium `Observable`s do not support error or completion events. Any faults are thrown back to the trigger. If you wish to pass any error state onto a subscriber I advise utilizing a Result style algebraic type that wraps the success/failure state of an operation. Any subscription to an `Observable` returns a `Disposable` object, by calling the `dispose` method of this object any subscriptions will be cancelled.
		Helium `Observable`s do not support error or completion events. Any faults are thrown back to the trigger. If you wish to pass any error state onto a subscriber I advise utilizing a Result style algebraic type that wraps the success/failure state of an operation. Any subscription to an `Observable` returns a `Disposable` object, by calling the `dispose` method of this object any subscriptions will be cancelled.

		## Project status

		This project is currently in pre-release state. Many of the ideas have been fleshed out and implemented, with minimal testing. Some use cases are not fully covered, and performance has not been optimized. But it stands as a proof of concept. Some things might change and break before reaching 1.0.0, after which normal semver rules will be observed for breaking changes.
		This project is currently in pre-release state. Implementation of Observables, common operators and core behavior of the library have been completed and extensive tests written. Some things might still change and break before reaching 1.0.0, after which normal semver rules will be observed for breaking changes.

cjs/Observable.d.ts

cjs/Observable.d.ts.map

cjs/Observable.js

cjs/Observable.type.d.ts

cjs/Observable.type.d.ts.map

cjs/operators.d.ts

cjs/operators.d.ts.map

cjs/operators.js

mjs/Observable.d.ts

mjs/Observable.d.ts.map

mjs/Observable.mjs

mjs/Observable.type.d.ts

mjs/Observable.type.d.ts.map

mjs/operators.d.ts

mjs/operators.d.ts.map

mjs/operators.mjs

cjs/Child.type.d.ts.map