mirror of https://github.com/n2geoff/um
first pass
This commit is contained in:
parent
76e2d94b7f
commit
e79e241236
|
|
@ -0,0 +1,5 @@
|
|||
.vscode/
|
||||
|
||||
node_modules/
|
||||
|
||||
.scratch/
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
# Tagged
|
||||
|
||||
> Minimal Javascript UI Library
|
||||
|
||||
This is an experimental composable ui library that takes ideas from Elm Architecture, but without the doctrine - this is Javascript!
|
||||
|
||||
## Features
|
||||
- No Virtual Dom
|
||||
- No Build System
|
||||
- No Over Engineering
|
||||
- ~100 lines of code
|
||||
- Totally inefficient rendering (at scale)
|
||||
|
||||
## Overview
|
||||
|
||||
the `app` builder takes an `opts` object that expects it to include:
|
||||
|
||||
- `data` as initial data `{object}`
|
||||
- `methods` as `{object}` with functions definitions
|
||||
- `view` as `{function}` that returns valid dom
|
||||
|
||||
and a querySelector compatible `selector` to mount the ui.
|
||||
|
||||
`app` returns:
|
||||
|
||||
- a object that returns a `state` object that you can use to update in other components
|
||||
- `methods` you can call outside the app component
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import {app, h} from "./tagged.js";
|
||||
|
||||
const myapp = app({
|
||||
data: {name: "[Your Name Here]", job: "Developer"},
|
||||
view(state, methods) {
|
||||
return h("main", [
|
||||
h("strong", `Greeting from ${state.name}`),
|
||||
h("div", `Your local ${state.job}`),
|
||||
h("div", {id: "test"}, [
|
||||
h("h1", "Hello Tagged"),
|
||||
h("p", 21),
|
||||
h("hr")
|
||||
])
|
||||
]);
|
||||
}
|
||||
}, "#main");
|
||||
</script>
|
||||
|
||||
<main id="app"></main>
|
||||
```
|
||||
|
||||
### Inspired By
|
||||
|
||||
- hyperapp
|
||||
- mithril
|
||||
- Elm Architecture
|
||||
|
||||
## Todo
|
||||
|
||||
- Methods
|
||||
- Update API: state, actions
|
||||
|
||||
> WORK-IN-PROGRESS
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
export default function app(opts, selector = "body") {
|
||||
// initial setup
|
||||
let data = {};
|
||||
let view = () => null;
|
||||
let methods = {};
|
||||
|
||||
// query helper
|
||||
const $ = document.querySelector.bind(document);
|
||||
|
||||
// state helper
|
||||
const state = (state) => {
|
||||
if(typeof state === "object") {
|
||||
data = {...data, ...state};
|
||||
}
|
||||
|
||||
// update ui
|
||||
render();
|
||||
|
||||
// return current state
|
||||
return data;
|
||||
}
|
||||
|
||||
const render = () => {
|
||||
$(selector).replaceChildren(view(data, methods));
|
||||
}
|
||||
|
||||
// setup view
|
||||
if (opts.view && typeof opts.view === "function") {
|
||||
view = opts?.view;
|
||||
}
|
||||
|
||||
// setup data
|
||||
if (opts.data && typeof opts.data === "object") {
|
||||
// wrap data in state object
|
||||
data = state(opts.data);
|
||||
}
|
||||
|
||||
// setup methods
|
||||
if (opts.methods && typeof opts.methods === "object") {
|
||||
methods = opts.methods;
|
||||
}
|
||||
|
||||
// mount view
|
||||
if (opts.view && selector) {
|
||||
render();
|
||||
}
|
||||
|
||||
return {
|
||||
state,
|
||||
methods,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import tag from "./tag.js";
|
||||
import app from "./app.js";
|
||||
|
||||
export {app};
|
||||
export const h = tag;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* Creates new DOM element(s) from tag name(s) and attributes
|
||||
*
|
||||
* @param {string} tag - tag to create
|
||||
* @param {...any} args - attributes and/or child tag elements
|
||||
*
|
||||
* @returns {HTMLElement} The created DOM element(s)
|
||||
*/
|
||||
export default function tag(tag, ...args) {
|
||||
const el = document.createElement(tag);
|
||||
|
||||
args.forEach((arg) => {
|
||||
if (typeof arg === "string" || typeof arg === "number") {
|
||||
el.appendChild(document.createTextNode(arg));
|
||||
} else if (Array.isArray(arg)) {
|
||||
el.append(...arg);
|
||||
} else {
|
||||
Object.assign(el, arg);
|
||||
}
|
||||
});
|
||||
|
||||
return el;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tagged UI Creation Lib</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
Tagged Loading...
|
||||
</div>
|
||||
<script type="module">
|
||||
import {app, h} from "../src/index.js";
|
||||
|
||||
const myapp = app({
|
||||
data: {name: "[Your Name Here]", job: "Developer"},
|
||||
view(state, methods) {
|
||||
return h("main", [
|
||||
h("strong", `Greeting from ${state.name}`),
|
||||
h("div", `Your local ${state.job}`),
|
||||
h("div", {id: "test"}, [
|
||||
h("h1", "Hello Tagged"),
|
||||
h("p", 21),
|
||||
h("hr")
|
||||
])
|
||||
]);
|
||||
}
|
||||
}, "#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue