<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calebporzio/sprout</title>
</head>
<body>
<h1>calebporzio/sprout</h1>
<p>
<a href="https://github.com/calebporzio/sprout">[calebporzio/sprout]</a>
A zero-dependancy library for turning JSON into reactive DOM.
</p>
<p>Sprout is a JavaScript library that allows you to create reactive components using HTML templates.</p>
<p>It allows you to define templates and render them with data.</p>
<hr>
<script>
function updateTemplate(updateFunction) {
// Get the template element
// This is the template that will be used to render the component
const template = document.querySelector('template[is="🌱"]');
// This function will be called when the button is clicked
// It will increment the number in the template data
const templateData = JSON.parse(template.getAttribute('data-json'));
//const update = { number_to_increment: templateData.number_to_increment + 1 };
const update = updateFunction(templateData);
const newData = { ...templateData, ...update };
// Update the template's data-json attribute
// This will trigger the template to re-render with the new data
template.setAttribute('data-json', JSON.stringify(newData));
}
// This function will be called when the button is clicked
function updateFunctionIncrement(templateData) {
return { number_to_increment: templateData.number_to_increment + 1 };
}
// This function will be called when the p is clicked
function updateFunctionMessage(templateData) {
return { message: `${templateData.message}!!` };
}
</script>
<template is="🌱"
data-json='{"number_to_increment": 1, "message": "Hello, World!", "users": [{"name": "John", "age": 30, "isAdmin": true}, {"name": "Jane", "age": 25, "isAdmin": false}]}'>
<p>Click the button below.</p>
<button onclick="updateTemplate(updateFunctionIncrement)">{_.number_to_increment}</button>
<p>Click to update the message below.</p>
<p onclick="updateTemplate(updateFunctionMessage)">{_.message}</p>
<style>
button,
p[onclick] {
color: red;
}
</style>
<hr>
<p>"Users" example:</p>
<template data-for="{user in _.users}">
<div>
<template data-if="{user.isAdmin}">
<h1>Admin: <span>{user.name}</span></h1>
<p class="{user.name}">{user.age}</p>
</template>
<template data-unless="{user.isAdmin}">
<h1>{user.name}</h1>
<p class="{user.name}">{user.age}</p>
</template>
</div>
</template>
<p>End of "Users" example.</p>
</template>
<script src="https://unpkg.com/@sprout-js/sprout@0.1.0/src/index.js"></script>
<!-- <script type="module" src="./node_modules/@sprout-js/sprout/src/index.js"></script> -->
<script type="module">
//import '@sprout-js/sprout';
//import "./node_modules/@sprout-js/sprout/src/index.js";
</script>
<hr>
<script>
// optional mechanism just for me (for arkenidar/editor)
function init() {
// This function will be called when the page is loaded
// alert('reached init()');
console.log('reached init()');
}
// window.addEventListener('load', init);
// This function will be called when the page is loaded
document.addEventListener('DOMContentLoaded', init);
</script>
<p>Optional mechanism to show source code:</p>
<script src="https://arkenidar.com/web/show-source.js"></script>
</body>
</html>