Lego requires npm or yarn and node.
By default Lego compiles HTML components from the HTML files within the /bricks folder. Create the folder to host your future components: mkdir bricks
.
Quick start
Installation
If you don’t have a package.json file yet, initialize first with npm init
(or yarn init
).
Install the compiler with npm i @polight/lego@beta
(or yarn add @polight/lego@beta
).
Basic Example
This is the file tree we will need for this example:
index.html
|- bricks/
|- hello-world.html → The HTML you typed
Hello World
Create a file called bricks/hello-world.html:
<script>
const state = { name: "World!" } }
</script>
<template>
<p>Hello ${ state.name }</p>
</template>
Compile with npx lego
(or yarn lego
)
And use you component in your /index.html:
<script src="./dist/index.js" type="module"></script>
<hello-world></hello-world>
Run a local web server, eg: npx sirv-cli
and open http://localhost:5000.
Let’s get a step back
What did just happen?
Here’s what you just did with this simple code:
- you created a native HTML element called
hello-world
by creating bricks/hello-world.html - you made it react with a
name
state property - you imported all components from
./dist/index.js
(well, only 1 for now) - you used the HTML element
<hello-world></hello-world>
No magic 🪄 here, just a couple of default configuration that you can override.
You website is ready to be published on any static host, even Github Pages.