https://github.com/mdxprograms/mycelia
A minimal, DOM manipulation library with JavaScript functions as elements and a universal dispatching system
https://github.com/mdxprograms/mycelia
dom javascript typescript
Last synced: 7 months ago
JSON representation
A minimal, DOM manipulation library with JavaScript functions as elements and a universal dispatching system
- Host: GitHub
- URL: https://github.com/mdxprograms/mycelia
- Owner: mdxprograms
- Created: 2022-08-27T18:44:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-08T17:55:12.000Z (almost 3 years ago)
- Last Synced: 2025-02-23T04:15:39.363Z (about 1 year ago)
- Topics: dom, javascript, typescript
- Language: TypeScript
- Homepage:
- Size: 347 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mycelia
```
A minimal, DOM manipulation library with Javascript functions as elements and a universal dispatching system
```
This is a continuation/improvement/evolution from [mantle](https://github.com/mdxprograms/mantle)
## Installation
```
npm i -S @wallerbuilt/mycelia
```
## Basic Usage
```typescript
import { mount, dom } from "@wallerbuilt/mycelia";
// Main element to mount the mycelia app to
const appSelector = "#app"
// abstracting the div and h1 element from dom object (could also use it as `dom.div` and `dom.h1`)
const { div, h1 } = dom;
const Heading = h1({ classname: 'intro-heading' }, "Hello mycelia!");
// Children are an array of mycelia elements or non-array strings
const App = div({ classname: 'app-container' }, [Heading])
// mount our App to appSelector element
mount(App, appSelector);
```
## Elements
Elements are created from the `dom` object.
```typescript
import { dom } from "@wallerbuilt/mycelia";
const { div, button, p } = dom;
const Item = div({ className: "item" }, [
p("I have some interesting things to say in this item's paragraph."),
button({ onclick: console.log }, "Click me!")
]);
```
## Mount
`mount` is the jumping off point of your application and typically takes the outermost element as an argument.
```typescript
import { mount, dom } from "@wallerbuilt/mycelia";
const appSelector = "#app";
const App = dom.div("the app here")
mount(App, appSelector);
```
## Events and Dispatch
```typescript
import { Emitter } from "@wallerbuilt/mycelia";
type State = {
todos: string[];
}
const emit = new Emitter(); // the generic is then passed to `on` and `dispatch` on instantiation
```
When using `emit.on` or `emit.dispatch`, your payload returned and sent (respectively), requires that type of state object to be passed.
```typescript
emit.on("event:name")(({ todos }) => console.log(todos));
emit.dispatch("event:name")({ todos: ["one added"] });
```