habi: Tagalog word for woven.
For some time now, many of the existing model frameworks have been built on the fundamental assumption that HTML, CSS, and JS are related yet separate technologies. However, over time, the responsibilities of these technologies have begun to blur into each other. CSS has been extended to the point where it crosses beyond just styles and into the domain previously reserved for JS. At the same time, HTML and JS have continued in ways that make them intrinsically coupled, such as the case for canvas, webGL, and other more advanced uses of HTML.
We should reconsider those boundaries and perhaps remove them altogether. Habiscript hopes to unify CSS and HTML with JS and remove the accidental complexities resulting from maintaining those traditional separations.
With Habiscript, allows it's possible to
function Button({ id, className, style, text }) {
const handleButtonClick = () => console.log("Button clicked");
return [
`button#${id}.${className}`,
{ style, onclick: handleButtonClick },
text,
];
}
Habiscript.habiToHtml([
"div",
Button({
id: "myButton",
className: "btn btn-primary",f
style: { margin: `${2*10}px` },
text: "Click Me",
}),
]);To install Habiscript, you can use npm or yarn as follows:
npm install habiscriptOr, if you're using yarn:
yarn add habiscriptUse Habiscript notation to turn Javascript structures to html elements.
import { habiToHtml } from "habiscript";
const hello = ["div", ["p", "Hello World"]];
const htmlElement = habiToHtml(hello);
document.body.appendChild(htmlElement);You can also turn html to Habiscript
import { htmlToHabi } from "habiscript";
const htmlString = "<div><p>Hello World</p></div>";
const habiArray = htmlToHabi(htmlString);
console.log(habiArray);Demonstrating how to add CSS animations using Habiscript:
import { habiToHtml } from "habiscript";
const habiWithAnimation = [
"div",
{ style: { animation: "example 5s infinite" } },
"Animated content",
];
const animatedElement = habiToHtml(habiWithAnimation);
document.body.appendChild(animatedElement);You don't need to install anything if you want to use Habiscript directly in the browser. Simply include the following <script> tag in your HTML:
<script src="https://unpkg.com/habiscript/dist/habiscript.bundle.js"></script>or
<script src="https://unpkg.com/habiscript/dist/habiscript.bundle.min.js"></script>This will load the Habiscript library and make it available as a global variable habiscript. Here's how to use it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Habiscript Example</title>
<script src="https://unpkg.com/habiscript/dist/habiscript.bundle.min.js"></script>
</head>
<body>
<script>
// Convert an HTML string to the Habiscript array format
const htmlString = "<div><p>Hello World</p></div>";
const habiArray = Habiscript.htmlToHabi(htmlString);
console.log(habiArray);
// Convert a Habiscript array back to an HTML element
const htmlElement = Habiscript.habilToHtml(habiArray);
document.body.appendChild(htmlElement);
</script>
</body>
</html>Handling more complex CSS properties:
import { habiToHtml } from "habiscript";
const habiWithComplexStyle = [
"div",
{
style: {
backgroundColor: "linear-gradient(to right, red, orange)",
boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
},
},
"Stylish content",
];
const stylishElement = habiToHtml(habiWithComplexStyle);
document.body.appendChild(stylishElement);function Button({ id, className, style, onClick, text }) {
return [`button#${id}.${className}`, { style, onclick: onClick }, text];
}
function TextBox({ id, className, style, onChange, placeholder }) {
return [
`input#${id}.${className}`,
{ type: "text", style, placeholder, oninput: onChange },
];
}
function MyApp() {
const handleButtonClick = () => console.log("Button clicked");
const handleTextChange = (e) => console.log("Text changed:", e.target.value);
return [
"div#app.container",
Button({
id: "myButton",
className: "btn btn-primary",
style: { margin: "10px" },
onClick: handleButtonClick,
text: "Click Me",
}),
TextBox({
id: "myTextBox",
className: "form-control",
style: { margin: "10px" },
onChange: handleTextChange,
placeholder: "Enter text here",
}),
];
}
// Render MyApp to the DOM
document.addEventListener("DOMContentLoaded", () => {
const app = Habiscript.habiToHtml(MyApp());
document.body.appendChild(app);
});Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Please ensure your pull request adheres to the following guidelines:
- Search previous suggestions before making a new one, as yours may be a duplicate.
- Make an individual pull request for each suggestion.
- Use the following commit message format:
feat: Add <feature_name>for new features,fix: Fix <issue>for bug fixes. - New categories, or improvements to the existing categorization are welcome.
Distributed under the MIT License. See LICENSE for more information.
Felix Flores - felixflores@gmail.com
Project Link: https://github.com/felixflores/habiscript