jstml-json v0.0.8
jstml-json
It's recommended to install three extensions to highlight your html | js | (css | scss | sass) code.
html : https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html js : https://marketplace.visualstudio.com/items?itemName=zjcompt.es6-string-javascript css : https://marketplace.visualstudio.com/items?itemName=bashmish.es6-string-css
If you don't know well the ES6 Template Literal rules, check the official documentation.
doc : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits
module goals :
Create web pages with diffrents components. And this without any compilator, just with the node.js engine.
Class Component
Class representing a component HTML with script and style. Think of the russian dolls.
constructor
constructor Component(element: {
template: string,
script: string,
style: string
}) : Component
render()
(method) Component.render(): string
This methode produice a final web page html with all css | scss | sass in a style tag at the end to the head. Same thing to the script append at the end to the body.
fusion()
(method) Component.fusion(...Component: Component[]): Component
example :
1. First Component
In this exemple we creat a start point of a new web page. This will contain all the others Components.
But, before create any component, we have to setup express.js !
https
|___home
|___GET
|___mainComponentHome.js
tools
|___header.js
app.js
package.json
If you don't known how work the Router() express's method, check the documentation : https://expressjs.com/fr/guide/routing.html
/* app.js */
var express = require('express');
var app = express();
app.get("/home",(req,res) => {
let context = {
req: req,
res: res
};
//fictional function
context.customer = recognizeCustomerWithHisCookie(context);
let toSend = require('./https/home/GET/mainComponentHome')(context);
res.end(toSend.render());
});
//start server
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
/* https/home/GET/mainComponentHome.js */
const Component = require('jstml-json').Component;
module.exports = (context) => {
return new Component({
template: /*html*/`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<h1>Well come home</h1>
</body>
</html>
`,
script: /*javascript*/`
/*----- Hush 1 -----*/
// mainJSTML
console.log("Hush 1");
`
});
}
Congratulation ! You created your first Component with JSTML-JSON !!!
Tell me if I'm doing too much...
2. Create the header Component
Indeed, our page is quite empty. Let's create a header which will can be used cross all our site.
/* tools/header.js */
const Component = require('jstml-json').Component;
module.exports = (context) => {
return new Component({
template: html`
<header>
<nav>
<a href="https://www.yoursite.com/">
<img src="/images/logo.png" width="100" height="100">
</a>
<div id="navbarSupportedContent">
<ul>
<li>
<a href="/home">
Home
</a>
</li>
<form>
<input type="search" placeholder="Search">
<button type="submit">
Search
</button>
</form>
${context.user.name}
</ul>
</div>
</nav>
</header>
`,
script: /*javascript*/`
/*----- Header script -----*/
// tools/header.js
console.log("Header script");
`
});
}
3. Just a matter of context :trollface:
You are maybe not focus on it, but you can see that all our Components are functions which have a single parameter: the context. With it you can call the context in yours Components.
This is realy import in the JSTML-JSON logical.
Send the context :
require('./GET/mainComponentHome')(context);
receive the context :
module.exports = (context) => {...}
4. connect our components
--> -->
app.get("/home") mainComponentHome header
<-- <--
Ok, we are almost there. Right now we have to change mainComponentHome.js
/* https/home/GET/mainComponentHome.js */
const Component = require('jstml-json').Component;
module.exports = (context) => {
const header = require('./tools/header.js')(context);
return new Component({
template: /*html*/`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
${header.template}
<h1>Well come home</h1>
</body>
</html>
`,
script: /*javascript*/`
/*----- Main -----*/
// mainJSTML
console.log("Main");
`
}).fusion(header);
}
Note that you must use fusion() method to conserve you scripts and styles of your last Components.