Root your static website and transform it into a dynamic one. Benefit from a low-emission carbon code. Many static web hosting providers support this. Dare to Benchmark This?
The JS Rule of Thumb:
JavaScript is an asynchronous scripting language.
Every line in JavaScript runs as an independent process in a browser, not waiting.
Use async await or promise if you want to run without a sub-process.
JSCroot uses ES6+ Syntax module:
<script type="module" src="index.js"></script>
Download or Use JSCRoot Library from CDN
Meet sweet alert with JSCroot:
import {addCSSInHead} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.1.6/element.js";
import Swal from 'https://cdn.jsdelivr.net/npm/sweetalert2@11/src/sweetalert2.js';
await addCSSInHead("https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.css");
//alert() replacement
Swal.fire({
icon: "error", //success,warning,info,question
title: "Testing",
text: "Hi, from JSCroot",
});
//confirm() replacement
Swal.fire({
title: 'Apakah Anda yakin?',
text: 'Anda akan melanjutkan tindakan ini.',
icon: 'warning',
showCancelButton: true, // Menampilkan tombol Cancel
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire('Melanjutkan...', 'Tindakan Anda telah dikonfirmasi.', 'success');
} else {
Swal.fire('Dibatalkan', 'Tindakan Anda dibatalkan.', 'info');
}
});
Using JSCroot assisted by ChatGPT:
I want to use JSCroot as ES modules to build my website, this is my library file from:
https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.1/api.js
I want to use JSCroot as ES modules to build my website, this is my library file from:
https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.1/api.js
...content inside api.js file...
Need a basic concept? don’t worry, follow this tutorial and exercise first:
The first thing to do is create your html file and declare the type module js script.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module Example</title>
</head>
<body>
<p id="demo"></p>
<script type="module" src="index.js"></script>
</body>
</html>
This is your step:
import { setInner } from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/element.js";
setInner("demo","Dari croot.js");
import * as croot from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/element.js";
croot.setInner("demo","Dari croot.js import fungsi dengan nama croot");
index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<table class="table">
<tbody id="lokasi">
<tr>
<th>Type</th>
<th>Nama</th>
<th>Kordinat</th>
</tr>
</tbody>
</table>
<script type="module" src="./main.js"></script>
</body>
</html>
main.js file:
import { get } from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/api.js";
import {setInner,addChild } from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/element.js";
export let URLGeoJson = "https://jscroot.github.io/examples/api/get/fromfile/data.json";
export let tableTag="tr";
export let tableRowClass="content is-small";
export let tableTemplate=`
<td>#TYPE#</td>
<td>#NAME#</td>
<td>#KORDINAT#</td>
`
get(URLGeoJson,responseData);
export function responseData(results){
console.log(results.features);
results.features.forEach(isiRow);
}
export function isiRow(value){
let content=tableTemplate.replace("#TYPE#",value.geometry.type)
.replace("#NAME#",value.properties.name)
.replace("#KORDINAT#",value.geometry.coordinates);
console.log(content);
addChild("lokasi",tableTag,tableRowClass,content);
}
We use Micro Front End(MFE) paradigm: Come into examples section to begin your journey with JSCroot.
| File Explorer | Fork Github |
| PDF Web Viewer | Fork Github |
| Swagger | Fork Github |
| 404 Not Found Template | Fork Github |
Conventional Single Page Application(SPA) : Use our skeleton and look at demo.
Run your rooted dynamic website in this static web hosting providing list: