Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/willybrauner/compose
Compose is a small and type-safe library that links your javascript to your DOM.
https://github.com/willybrauner/compose
atomic-design components dom dom-manipulation page-transitions query typescript vanilla-js
Last synced: 2 months ago
JSON representation
Compose is a small and type-safe library that links your javascript to your DOM.
- Host: GitHub
- URL: https://github.com/willybrauner/compose
- Owner: willybrauner
- License: mit
- Created: 2021-02-09T00:15:54.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-15T17:58:37.000Z (11 months ago)
- Last Synced: 2024-10-28T13:11:26.011Z (3 months ago)
- Topics: atomic-design, components, dom, dom-manipulation, page-transitions, query, typescript, vanilla-js
- Language: TypeScript
- Homepage:
- Size: 860 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Compose
Compose is a small library that help to links your javascript to your DOM.
_⚠️ This library is work in progress, the API is subject to change until the v1.0 release._
## Summary
- [Installation](#Installation)
- [Component](#Component)
- [add](#add)
- [addAll](#addAll)
- [find](#find)
- [findAll](#findAll)
- [lifecycle](#lifecycle)
- [beforeMount](#beforeMount)
- [mounted](#mounted)
- [unmounted](#unmounted)
- [workflow](#Workflow)
- [Credits](#Credits)
- [Licence](#Licence)
## Installation
```shell
$ npm i @wbe/compose
```
## Component
### add
This method allows to 'add' new Component instance to the tree.
It returns a single instance and associated properties.
Add component inside the class:
```js
class Foo extends Component {
bar = this.add(Bar)
method() {
// then, access child Bar instance
this.bar.root
this.bar.mounted()
this.bar.unmounted()
// etc...
}
}
```
The method accepts a static props parameter which we can access from the new Bar component via `this.props`.
```js
bar = this.add(Bar, { props: { foo: "bar" } })
```
### addAll
`addAll` will return an array of instances.
```html
```
```js
class Foo extends Component {
bars = this.addAll(Bar)
// Returns array of Bar: [Bar, Bar]
}
```
### `find`
`find` is a simple `this.root.querySelector()` wrapper.
This method allows retrieving `BEM` element of current $root component.
```html
Hello
```
```js
class Bar extends Component {
//
Hello
can be query with:
$title = this.find("_title")
// or
$title = this.find("Bar_title")
}
```
### `findAll`
`findAll` is a simple `this.$root.querySelectorAll()` wrapper.
This method returns a DOM Element array.
```html
icon
icon
```
```js
class Bar extends Component {
$icons = this.findAll("_icon")
// [div.Bar_icon, div.Bar_icon]
}
```
## lifecycle
### beforeMount
Each class extended by `Component` provide a life-cycle methods collection.
It's particularly useful when `Stack` class is used.
`beforeMount(): void`
Method called before class component is mounted, in at begining of class constructor.
### mounted
`mounted(): (()=> void) | void`
Method called after class component is mounted. Children component instances are now available.
It can return a function to be called when the component is unmounted.
### unmounted
`unmounted(): void`
Method called after class component is unmounted.
The parent component observer will called this unmounted method automatically if the current component is removed from DOM.
All children component instances are also unmounted after this method is called.
## Workflow
- Clone this repo
```shell
# install dependencies
pnpm i
# build and watch lib changes
pnpm run build:watch
# start tests and watch
pnpm run test:watch
# start dev server for all examples
pnpm run dev
# Or run a specific example
pnpm run dev --scope {example-name}
```
## Credits
[© Willy Brauner](https://willybrauner.com)
## Licence
[MIT](./LICENCE)