lego-dom v0.0.3
Lego UI Library
Work In Progress and API will change drastically before 1.0.0
Lego is a UI Library that borrows heavily from the children toy company's product of the same name Lego © Lego.
It allows for Reusable interlocking User Interfaces (Lego Blocks) to be composed into bricks that are managed in isolation for assembly at runtime.
Most importantly Lego aims to be the simplest UI Lib a developer can learn...
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lego Example</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<!-- This is a lego block -->
<SomeFormWizard></SomeFormWizard>
<AnotherWizard>
<!-- whatever is nested inline in a block will be removed and appended as the last child of the loaded block -->
</AnotherWizard>
<script src="unpkg.com/lego/1.0"></script>
<!-- After loading Lego you can either link to where your basket is defined i.e. external js bundle -->
<script src="application.bundle.js"></script>
<!-- Or declare your lego blocks and bricks Inline -->
<script>
let basket = Lego.use("basket"); //case insensitive so .use("BaSkEt") works also
let router = Lego.use("router");
let AnotherWizard = router.get("./wizard.html");
let ProtectedBrick = router.get("./wizard.html", () => {
//This can be a global authentication function call to auth0 etc...
return router.get("./unathenticated.html");
})
//Explicit registration
Basket.register(AnotherWizard);
Basket.register(Router.get("./snippet.html")).as("SomeFormWizard");
</script>
</body>
</html>There are 5 things to understand all in all to get a complete mastery of Lego JS. These are stylized under the acronym B.R.I.C.K to signify how lego acts as a building platform with the meanings provided below.
- B is for Basket: This is similar to a real basket and is where all blocks
*.legopages are kept in memory for reuse.
let basket = lego.use("basket");- R is for Router: This is the global router responsible for loading and displaying blocks.
let router = lego.use("router");- I is for Interface: This is a proxy to the UI/DOM that helps tie your JS code to what appears on screen.
let interface = lego.use("interface");- C is for Connection: The connection holds utilities for fetching data and sending data to an API.
let connection = lego.use("connection");- K is for Keep: The Keep is the global store for your application to register and reuse state and services.
const db = lego.use("keep");
class User = { /** Methods, Fields, Constructor, Localized state etc. */ }
db.register("User", User);
db.register("User.Enterprise", User); //scoped<script src="unpkg.com/lego-dom@1.0.0"></script>
<script></script>
Loading Files
- Server Loaded
- Client Loaded
Server Loaded
Java/PHP/Python or XYZ code on the server is responsible for checking if the request is a Lego request (X-Lego) header present or if it is a plain old HTTP Request.
- The server can send back a
Lego Brickorfull HTMLPage depending on if the request is a Lego Request or plain old HTTP request.
Basket Loaded
This strategy depends on you calling into the Lego Basket to get the page where the Naive Brick returned from the server should sit.
<Card></Card>
<script src="/path.to.bundle.js"></script>
<script>
let blocks = Basket.get("/approute/:ids/supported");
blocks.insert("#insertionPoint")
</script>KEEP
The keep is where state and objects are stored for reuse i.e. a User class or object that should be shared across multiple bricks and blocks. Like all other parts of Lego the API is pretty straightforward.
<html>
<body>
</body>
<script src="unpkg.com/lego/1.0"></script>
<script>
let keep = lego.use("keep");
class User = { /* custom methods and properties etc */ }
keep.set("User", User);
</script>