@pfern/elements 0.1.9 → 0.1.11

package/README.md

@@ -1,63 +1,16 @@
 # Elements.js
 
-Elements.js is a minimalist declarative UI toolkit designed around purity,
-immutability, and HTML semantics.
+Elements.js is a tiny, functional UI toolkit for building DOM trees with plain
+functions. Components are just functions; updates are just calling the function
+again with new arguments.
 
-## Features
+## Install
 
-* Zero-dependency functional UI engine
-* Stateless components defined as pure functions
-* Fully declarative, deeply composable view trees
-* HTML element functions with JSDoc and TypeScript-friendly signatures
-* No hooks, no classes, no virtual DOM heuristics
-
----
-
-## Why Elements.js?
-
-Modern frameworks introduced declarative UI—but buried it beneath lifecycle
-hooks, mutable state, and complex diffing algorithms.
-
-**Elements.js goes further:**
-
-* Pure functions represent both logic and view
-* The DOM *is* your state model
-* Re-rendering is *recursion*, not reconciliation
-
-> Can UI be defined as a tree of pure function calls—nothing more?
-
-Yes. Elements.js proves it.
-
----
-
-## Philosophy
-
-### Declarative from top to bottom
-
-* No internal component state
-* No lifecycle methods or effects
-* Every component is a function
-
-To update a view: just **call the function again** with new arguments. The DOM
-subtree is replaced in place.
-
-### State lives in the DOM
-
-There is no observer graph, no `useState`, and no memory of previous renders.
-The DOM node *is the history*. Input state is passed as an argument.
-
-### Minimal abstraction
-
-* No keys, refs, proxies, or context systems
-* No transpilation step
-* No reactive graph to debug
-
-Elements.js embraces the full truth of each function call as the only valid
-state.
-
----
+```bash
+npm install @pfern/elements
+```
 
-## Example: Counter
+## Quick Example: Counter
 
 ```js
 import { button, component, div, output } from '@pfern/elements'
@@ -70,13 +23,7 @@ export const counter = component((count = 0) =>
       'Increment')))
 ```
 
-* Each click returns a new call to `counter(count + 1)`
-* The old DOM node is replaced with the new one
-* No virtual DOM, no diffing
-
----
-
-## Form Example: Todos App
+## Example: Todos App
 
 ```js
 
@@ -111,18 +58,6 @@ export const todos = component(
 
 ```
 
-This is a complete MVC-style app:
-
-* Stateless
-* Immutable
-* Pure
-
-You can view these examples live on [Github
-Pages](https://pfernandez.github.io/elements/) or by running them locally with
-`npm run dev`.
-
----
-
 ## Root Rendering Shortcut
 
 If you use `html`, `head`, or `body` as the top-level tag, `render()` will
@@ -152,21 +87,15 @@ render(
           todos())))))
 ```
 
----
-
 ## Declarative Events
 
-All event listeners in Elements.js are pure functions. You can return a vnode
-from a listener to declaratively update the component tree—- no mutation or
-imperative logic required.
-
 ### General Behavior
 
 * Any event handler (e.g. `onclick`, `onsubmit`, `oninput`) may return a new
   vnode to trigger a subtree replacement.
 * If the handler returns `undefined`, the event is treated as passive (no update
   occurs).
-* Returned vnodes are passed to `component()` to re-render declaratively.
+* Returned vnodes are applied at the closest component boundary.
 
 ### Form Events
 
@@ -195,8 +124,6 @@ form({
 If the handler returns nothing, `preventDefault()` is skipped and the form
 submits natively.
 
----
-
 ## API
 
 ### `component(fn)`
@@ -232,48 +159,10 @@ Elements are data-in, data-out only, so mocking and headless browsers like
 `jsdom` are unnecessary out of the box. See the tests [in this
 repository](test/README.md) for some examples.
 
----
-
-## Status
-
-* 🧪 Fully tested (data-in/data-out behavior)
-* ⚡ Under 2kB min+gzip
-* ✅ Node and browser compatible
-
----
-
-## Installation
-
-```bash
-npm install @pfern/elements
-```
-
-Or clone the repo and use as an ES module:
-
-```js
-import { render, div, component, ... } from './elements.js';
-```
-
----
-
-## Summary
-
-Elements.js is a thought experiment turned practical:
-
-> Can UI be nothing but functions?
-
-Turns out, yes.
-
-* No diffing
-* No state hooks
-* No lifecycle
-* No reconciliation heuristics
-
-Just pure declarative HTML—rewritten in JavaScript.
-
----
-
-**Lightweight. Immutable. Composable.**
-
-Give it a try. You might never go back.
+## Notes
 
+- Elements.js is intended to be small and easy to reason about.
+- For a starter app template, use `@pfern/create-elements`:
+  - https://github.com/pfernandez/create-elements
+  - `npx @pfern/create-elements my-app`
+- More examples live in `examples/`.

package/elements.js

@@ -309,34 +309,6 @@ export const render = (vtree, container = null) => {
   rootMap.set(vtree, target)
 }
 
-/**
- * Updates the browser URL via the History API (no full page load).
- * No-ops outside the browser.
- *
- * @param {string} to - The target URL (path/search/hash).
- * @param {Object} [options]
- * @param {boolean} [options.replace=false] - Use replaceState instead of pushState.
- * @param {boolean} [options.force=false] - Update even if URL is already `to`.
- * @param {any} [options.state={}] - History state.
- * @param {string} [options.title=''] - History title (mostly ignored by browsers).
- */
-export const navigate = (to, {
-  replace = false,
-  force = false,
-  state = {},
-  title = ''
-} = {}) => {
-  if (typeof window === 'undefined') return
-  if (typeof to !== 'string' || !to.length) return
-
-  const { pathname, search, hash } = window.location
-  const current = `${pathname}${search}${hash}`
-  if (!force && current === to) return
-
-  const method = replace ? 'replaceState' : 'pushState'
-  window.history[method](state, title, to)
-}
-
 /**
  * Wraps a function component so that it participates in reconciliation.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfern/elements",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A minimalist, pure functional declarative UI toolkit.",
   "type": "module",
   "main": "elements.js",

package/types/elements.d.ts

@@ -12,15 +12,6 @@
 export const DEBUG: boolean;
 export function render(vtree: any, container?: any): void;
 export function component(fn: (...args: any[]) => any): (...args: any[]) => any;
-export function navigate(
-  to: string,
-  options?: {
-    replace?: boolean;
-    force?: boolean;
-    state?: any;
-    title?: string;
-  }
-): void;
 /**
  * @typedef {Record<string, any>} Props
  * @typedef {any[] | string | number | boolean | null | undefined | Node} Child