ajo 0.0.8 → 0.0.9

package/index.cjs

@@ -104,8 +104,7 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
   (cleaners.get(host) ?? cleaners.set(host, /* @__PURE__ */ new Set())).add(cleaner);
 }, clx = (o) => keys(o).filter((k) => o[k]).join(" ") || null, stx = (o) => entries(o).map((t) => t.join(":")).join(";") || null, keb = (o) => keys(o).reduce((r, k) => (r[k.replace(search, replace).toLowerCase()] = o[k], r), {});
 const wm = () => {
-  const instance = /* @__PURE__ */ new WeakMap();
-  const { set } = instance;
+  const instance = /* @__PURE__ */ new WeakMap(), { set } = instance;
   instance.set = (key, value) => (set.call(instance, key, value), value);
   return instance;
 }, throwTypeError = (name, value, expected) => {

package/index.js

@@ -96,8 +96,7 @@ export const
 
 const
   wm = () => {
-    const instance = new WeakMap
-    const { set } = instance
+    const instance = new WeakMap, { set } = instance
     instance.set = (key, value) => (set.call(instance, key, value), value)
     return instance
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "index.js",
@@ -8,13 +8,16 @@
   "exports": {
     ".": {
       "import": "./index.js",
-      "require": "./index.cjs"
+      "require": "./index.cjs",
+      "browser": "./index.min.js"
     }
   },
   "scripts": {
-    "build": "esbuild --format=cjs --out-extension:.js=.cjs --outdir=. index.js",
-    "test": "uvu",
-    "release": "npm run build && npm t && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish"
+    "build": "npm run build:require && npm run build:browser",
+    "build:require": "esbuild --format=cjs --out-extension:.js=.cjs --outdir=. index.js",
+    "build:browser": "esbuild --format=iife --out-extension:.js=.min.js --outdir=. --global-name=ajo --minify index.js",
+    "release": "npm run build && npm t && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish",
+    "test": "uvu"
   },
   "repository": "cristianfalcone/ajo",
   "author": "Cristian Falcone",

package/readme.md

@@ -1,15 +1,13 @@
 # ajo
 ajo is a JavaScript view library for building user interfaces
 
+## Install
+
 ```sh
 npm install ajo
 ```
 
-## Incremental DOM
-To keep the UI in sync, ajo uses a technique called incremental DOM.
-It is a way to build UI components without the need to keep previous virtual DOM in memory.
-Instead, generated virtual DOM is diffed against the actual DOM, and changes are applied along the way.
-This reduces memory usage and makes ajo code more simple and concise. As a result, ajo is easy to read and maintain, but lacks perfomance oportunities that diffing two virtual DOM trees can provide.
+## Render JSX to a DOM element
 
 ```jsx
 /** @jsx h */
@@ -17,13 +15,10 @@ import { h, render } from 'ajo'
 
 document.body.innerHTML = '<div>Hello World</div>'
 
-render(document.body, <div>Goodbye World</div>)
+render(<div>Goodbye World</div>, document.body)
 ```
 
-## Stateless components
-As a way to reuse markup snipets, ajo uses simple synchroneous functions that return virtual DOM.
-This type of components are ment to be "consumers" of data.
-No state is preserved between invocations, so generated virtual DOM should rely exclusively on function's arguments. 
+## Stateless Component
 
 ```jsx
 /** @jsx h */
@@ -31,20 +26,17 @@ import { h, render } from 'ajo'
 
 const Greet = ({ name }) => <div>Hello {name}</div>
 
-render(document.body, <Greet name="World" />)
+render(<Greet name="World" />, document.body)
 ```
 
-## Stateful components
-Since ajo does not store previous virtual DOM, stateful components rely on a DOM node to preserve its state between UI updates.
-This DOM node is called a host node (similar to a Web Component host node).
-State is declared in a generator function local scope.
-Then ajo asociates the returned iterator with the host, and updates host children nodes each time, retrieving iterator's next value. Lifecycle of these components are closely related to its host nodes, and generator function provides a way to manage them.
+## Stateful Component
 
 ```jsx
 /** @jsx h */
-import { h, component, render, refresh } from 'ajo'
+import { h, component, refresh, render } from 'ajo'
 
 const Counter = component(({ start = 0 }, host) => {
+  
   let count = start
   
   const increment = () => {
@@ -58,5 +50,5 @@ const Counter = component(({ start = 0 }, host) => {
     </button>
 })
 
-render(document.body, <Counter start={1} />)
+render(<Counter start={1} />, document.body)
 ```