https://github.com/meinstein/dom-dope
A dope JavaScript library for building user interfaces.
https://github.com/meinstein/dom-dope
dope frontend javascript library ui
Last synced: about 2 months ago
JSON representation
A dope JavaScript library for building user interfaces.
- Host: GitHub
- URL: https://github.com/meinstein/dom-dope
- Owner: meinstein
- Created: 2019-01-21T06:21:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-30T06:15:37.000Z (over 7 years ago)
- Last Synced: 2025-10-22T05:33:54.339Z (8 months ago)
- Topics: dope, frontend, javascript, library, ui
- Language: JavaScript
- Size: 266 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **DomDope**
A dope JavaScript library for creating user interfaces.
## **Introduction**
DomDope gives every component in your tree a bit of dope so that you can more easily build user interfaces.
## **Getting Started**
```html
// No need for bundlers!
import DomDope from 'https://unpkg.com/domdope'
// The Root component
const RootComponent = dope => dope.make('div')
// The root element where everything gets mounted.
const rootElement = document.getElementById('root')
// Instantiate DomDope with above roots.
const dope = new DomDope(RootComponent, rootElement)
// Give the component tree the dope it needs.
dope.render()
```
## **Interface**
```js
// Use dope to make component.
const Component = dope => {
return dope.make('p', {
text: 'This is dope!'
})
}
```
```js
// Use dope to fetch data.
const Component = dope => {
dope.initialState = { data: null }
dope.onMount(async () => {
const response = await fetch('../data/is/dope')
const data = await response.json()
dope.state = { data }
})
if (!dope.state.data) {
return dope.make(null)
}
return dope.make('pre', {
text: JSON.stringfy(dope.state.data)
})
}
```
```js
// Use withProps to inject props into components.
import { withProps } from 'https://unpkg.com/domdope'
const Content = (dope, props) => {
return dope.make('div', { text: props.msg })
}
const Nav = dope => {
const ContentWithProps = withProps(Content, { msg: '😎' })
return dope.make('nav', {
children: [ContentWithProps]
})
}
```
```js
// Use withRouter to inject routing-related props into components.
import { withRouter } from 'https://unpkg.com/domdope'
// Use dope as a router.
const Component = (dope, props) => {
if (props.router.pathname !== '/') {
props.router.redirectTo('/')
}
return dope.make('a', {
text: 'Link to nowhere.',
onClick: () => props.router.goTo('/nowhere')
})
}
export default withRouter(Component)
```
## **Demo**
Run a simple HTTP server from this project's root folder:
```
python -m SimpleHTTPServer 8080
```
And go to `localhost:8080/demo`
## **Examples**
- https://github.com/meinstein/blog
- https://github.com/meinstein/turn-me-on-lamps