Jstml-json NPM

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.

jstml render compilator side server components component only javascript

4 years ago

5 years ago

5 years ago

5 years ago