Show HN: Thi.ng/hdom: S-expression based, pure ES6 UI/VDOM components https://ift.tt/2OKIU7A

Show HN: Thi.ng/hdom: S-expression based, pure ES6 UI/VDOM components http://thi.ng/hdom Lightweight UI component tree definition syntax, DOM creation and differential updates using only vanilla JS data structures (arrays, iterators, closures, attribute objects or objects with life cycle functions, closures). By default targets the browser's native DOM, but supports other arbitrary target implementations in a branch-local manner, e.g. to define scene graphs for a canvas element as part of the normal UI tree. Benefits: - Use the full expressiveness of ES6 / TypeScript to define user interfaces - No enforced opinion about state handling, very flexible - Clean, functional component composition & reuse - No source pre-processing, transpiling or string interpolation - Less verbose than HTML / JSX, resulting in smaller file sizes - Supports arbitrary elements (incl. SVG), attributes and events in uniform, S-expression based syntax - Supports branch-local custom update behaviors & arbitrary (e.g. non-DOM) target data structures to which tree diffs are applied to - Suitable for server-side rendering and then "hydrating" listeners and components with life cycle methods on the client side - Can use JSON for static components (or component templates) - Optional user context injection (an arbitrary object/value passed to all component functions embedded in the tree) - Default implementation supports CSS conversion from JS objects for style attribs - Auto-expansion of embedded values / types which implement the IToHiccup or IDeref interfaces (e.g. atoms, cursors, derived views, streams etc.) - Only ~5.5KB gzipped September 23, 2018 at 03:42AM