inslag
v1.0.1
Published
Lightweight component framework for frontend
Downloads
1
Readme
Lightweight, performant (blazingly fast) and ugly ~~also probably worse than literally any other option~~ component framework for frontend JavaScript. Heavily inspired by grecha.js by Tsoding
Getting started
Installing
Npm
Install inslag by running npm install inslag
Include the script inside your html file inside head
<script src="./node_modules/inslag/index.js"></script>Cdn
Alternatively import script directly from cdn
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>Setting up a project
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<script src="index.js" defer></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>index.js
// Main component
function App() {
return div(
h1("Hello World"),
div(
p("This is an inslag presentation page.")
)
)
}
// Mounting the App component inside the #root element
const root = document.getElementById("root");
mount(root, App);
// Alternatively you can directly mount an element
mount(root, div(
h1("Hello World"),
div(
p("This is an inslag presentation page.")
)
)
)Creating your first reusable component
In order to create an HTML element use functions named after HTML tags such as div(), h1(), p()
function Component() {
return div(
h1("Hello"),
p("inslag",
span(".js")
),
)
}Notice how tags that usually expect a text inside them, such as paragraphs, spans, headers and buttons, can take their first argument as a string.
However this is not the case for other elements such as divs. This is because those elements generally should not contain text nodes.
In case you need to add a text node, you can use text("") function, which will create a textNode and append it to the element.
div(
text("hello world"),
p()
)This will result in the following HTML being rendered
<div>
hello world
<p></p>
</div>Element methods
$att allows to add attributes to the element
There are two ways of adding an attribute
Passing name and value as two parameters
div().$att("class", "wrapper")Passing an object of one or multiple name value pairs
div().$att({ class: "wrapper", style: "color: #eee;" });$evt allows to attach an event listener to the element
button(`Click me`).$evt("onclick", () => {})Custom tags
In case a tag is not implemented or you need to create a custom one, use tag() function to create an html tag
tag("example-custom-tag").$att({
"class": "my-tag",
"data-index": "0",
"style": "color: #004daa; font-size: 20px;"
})