https://github.com/sjsanc/spawnerjs
A small helper library that adds reactive and functional features to the native DOM api.
https://github.com/sjsanc/spawnerjs
Last synced: 2 months ago
JSON representation
A small helper library that adds reactive and functional features to the native DOM api.
- Host: GitHub
- URL: https://github.com/sjsanc/spawnerjs
- Owner: sjsanc
- Created: 2021-05-19T21:51:51.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-22T15:39:02.000Z (almost 4 years ago)
- Last Synced: 2025-01-16T19:27:14.094Z (4 months ago)
- Language: TypeScript
- Size: 13.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Spawner
A small JS framework for frontend stuff.
NOTE: not kept up to date -- see index.ts for correct syntax
```javascript
import { Spawner } from "./classes/spawner";
// Create a Spawner and set the root insertion point
const spawner = new Spawner(document.body);
// Start chaining elements
spawner
.create([])
.append([], { type: "h1", classList: "bold", innerText: "My life for Aiur" })
.append([], { type: "p", innerText: "Jeffrey, we're leaving" });
.render();
```
Nesting
```javascript
spawner
.create([])
.append([], { type: "h1", classList: "bold", innerText: "My life for Aiur" })
.append([], { type: "p", innerText: "Jeffrey, we're leaving" })
.nest(
spawner.create([], { type: "ul" }).append(
[],
["1", "2", "3"].map((li) => ({ type: "li", innerText: li }))
)
)
.render();
```
State management
```javascript
// Create a store
const initialValue = { name: "Jim Raynor" };
const store = spawner.store(initialValue);
const { state } = store;
// Insert some state
store.createState({ killCount: 25 });
// Reference the state by name
spawner
.create([], { type: "p", innerText: state.name })
.append([], {
type: "button",
onclick: () => store.setState({ name: "Sarah Kerrigan" }),
})
.render();
// Or compute it
const cb = (state) => {
return state + 1;
};
store.computeState(state.number, cb);
```