This framework is built with the idea that we stil work based on available platform. (Browsers, Devices, Network topology...)
npm install -g https://github.com/thanhntmany/phloemjs# Firstly, cd into project directory.
phloemjs init
phloemjs runphloemjs <command>...
Commands:
init Initialize project
run [-p <port>] Run static website (on <port>, default: 3080)
build [<pathspec>...] [--] Scan and render by builders (*.builder.mjs)ESM
import phloemjs from "www/phloe.mjs";Dynamic Import
import("www/phloe.mjs").then((phloemjs_module) => {
const phloemjs = phloemjs_module.default
// operations
});Frontend (Browser)
<head>
<script type="importmap">{"imports": {"www/": "/"}}</script>
<script type="module" src="/phloe.mjs"></script>
<!-- 2 lines above are automatically added into HTML code while using HTMLAr -->
</head>
<script>
const const { StringAr } = phloemjs; // phloemjs has already been in global
// operations
</script>const { StringAr } = phloemjs;
// init template
const template = new StringAr(`Sample {{placeholder_abc}}, end.`);
//Assign data
template.$.placeholder_abc = "DEF"
console.log(template.toString()) // Sample DEF, end.
console.log("" + template) // Sample DEF, end.
// Assign new data
template.$.placeholder_abc = "GHI"
console.log(template.toString()) // Sample GHI, end.
console.log("" + template) // Sample GHI, end.phloemjs.dir('/abc/def/ghi/'); //Returns: '/abc/def/ghi'
phloemjs.dir('/abc/def/ghi'); //Returns: '/abc/def'phloemjs.pathname('/abc/def/ghi/'); //Returns: '/abc/def/ghi'
phloemjs.pathname('/abc/def/ghi'); //Returns: '/abc/def'phloemjs.dirname('/abc/def/ghi/'); //Returns: '/abc/def/ghi'
phloemjs.dirname('/abc/def/ghi'); //Returns: '/abc/def'phloemjs.resolve('/abc/def/ghi/'); //Returns: '/abc/def/ghi'
phloemjs.resolve('/abc/def/ghi'); //Returns: '/abc/def'phloemjs.moduleIdFromUrl('/abc/def/ghi/'); //Returns: '/abc/def/ghi'
phloemjs.moduleIdFromUrl('/abc/def/ghi'); //Returns: '/abc/def'phloemjs.HTML[WIP]
ESM
import { HTMLAr, StringAr } from "phloemjs/phloe.mjs";Dynamic Import
import("www/phloe.mjs").then((phloemjs_module) => {
const { HTMLAr, StringAr } = phloemjs_module
// operations
});A subclass of StringAr. It is specifically used for generating HTML raw code. I will adde necessary tags in to output HTML code automatically.
import { HTMLAr } from "phloemjs/phloe.mjs"
const templ = new HTMLAr(`<html>
<head></head>
<body></body>
</html>`)
console.log("" + templ)
/** output
<html>
<head><script type="importmap">{"imports": {"www/": "/"}}</script><script type="module" src="/phloe.mjs"></script></head>
<body></body>
</html>
*/