dreamland
v0.0.24
Published
A utilitarian HTML rendering library
Downloads
489
Maintainers
Readme
dreamland is a reactive JSX-inspired UI library with no virtual dom and no build step. It is less than 3kb minified (smaller than preact), gradually integrates with existing plain JS projects, and is reasonably easy to learn
Getting Started
Plain JS
dreamland can be integrated into plain javascript applications gradually and seamlessly. See the website to learn the concepts that dreamland uses.
To get started, in your HTML file, add <script src="https://unpkg.com/dreamland"></script>
somewhere. This contains the html builder allowing you to start writing dreamland code in plain JS, such as the example shown below
function App() {
this.counter = 0
return html`
<div>
<button on:click=${() => this.counter++}>Click me!</button>
<p>${use(this.counter)}</p>
</div>
`
}
window.addEventListener('load', () => {
document.body.appendChild(h(App))
})
Note that this is a development build. For production, you should pin the version and use either the "all" or "minimal" bundle depending on the features you want (ex. https://unpkg.com/[email protected]/dist/all.js)
Building a custom bundle
If you care about the bundle size, it is recommended to serve a custom bundle with only the features you need.
git clone https://github.com/MercuryWorkshop/dreamland
cd dreamland
npm install
npm rollup -c --file path/to/output.js --enable-jsxLiterals --disable-css
# see https://dreamland.js.org/building for more options
Typescript + Bundler (vite, rollup, webpack, esbuild, etc)
First install dreamland (npm install dreamland
), then add this to the compileroptions of your tsconfig.json
to setup JSX.
"jsx":"react",
"jsxFactory":"h",
"jsxFragmentFactory":"Fragment",
"types": ["dreamland"],
In the entry point of the app, add the line import "dreamland/dev"
into at least one file to bundle dreamland with the rest of the code. Now you can use dreamland with tsx syntax.
In production, you can use import "dreamland"
instead of import "dreamland/dev"
to use the production build, or (recommended) vendor in a custom build.
// typescript syntax for defining components
const App: Component<
{
// component properties. if you had a component that took a property like `<Button text="..." /> you would use a type like the one in the following line
// text: string
},
{
// types for internal state
counter: number
}
> = function () {
this.counter = 0
return (
<div>
<button on:click={() => this.counter++}>Click me!</button>
<p>{use(this.counter)}</p>
</div>
)
}
window.addEventListener('load', () => {
document.body.appendChild(<App />)
})
Note: If you are using plain jsx and not tsx, you will need to change your bundler's config so it uses the proper jsx globals. If you are using vite with plain jsx, use vite-plugin-dreamland
See the documentation for more information.