stnd.js

Standard.js ·

A very efficient, flexible Javascript framework for user facing interfaces.

Installation

$ npm i stnd.js

Application Structure:

/app
    /components
              /home
                  /home.js
                  /home.html
                  /home.css
              /view
                  /view.js
                  /view.html
                  /view.css
/index.html
/main.js

Require the module:

inside main.js(entry js file):

 var standard = require("stnd.js"); 

Register the components:

var view = require("./app/components/view/view.js");
var home = require("./app/components/home/home.js");
var mainContent = require("./main.html")

Storing the component's data:

std.storeComponent("main", {
  data: {},
  template: mainContent,
  events:[{
    target: '',
    onClick: function(){}
  }]
})

Rendering the component on a target:

std.renderOnTarget("home", "#renderHere");

Data-flow between components:

std.passData("view", {
  title: "Data coming from home component"
})

Reset the component's data and automatic re-render:

set.setData("home",{num: 6});

Data-binding:

if home component has a data {name: "home component"},

then inside the html of home component use expression: {{name}}

Basic example:

You will need to bundle everything and send to server for which you can use webpack bundler and a "html-loader"

$ npm install webpack webpack-cli --save-dev
$ npm i html-loader

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.html?$/,
        loader: "html-loader"
      }
    ]
  }
};

index.html

<div id="root"></div>

main.js

require("stnd.js");

var home = require("./app/components/home/home.js");
var view = require("./app/components/view/view.js");

//bootstrap

std.renderOnTarget("home", "#root");

home.js

var std = require("stnd.js"
var homeTemplate = require("./home.html");

std.storeComponent("home", {
  data: { title: " Inside home Component" },
  template: homeTemplate,
  events: [
    {
      target: "#renderView",
      onClick: function() {
        std.renderOnTarget("view", "#root");
      }
    }
  ]
});

export default function home() {}

home.html

<h1>Home</h1> <button id="renderView">Render view component</button> {{title}}

view.js

var std = require("stnd.js"
var viewTemplate = require("./view.html");

std.storeComponent("view", {
  data: { title: "Inside View Component" },
  template: viewTemplate,
  events: [
    {
      target: "#renderHome",
      onClick: function() {
        std.renderOnTarget("home", "#root");
      }
    }
  ]
});

export default function view() {}

view.html

<h1>View</h1> <button id="renderHome">Render Home Component on root</button> {{title}}

to fetch from a mock or live api, standardJS provides apis:

the apis and examples on https://yashkumar6640.github.io/stdFetch/

Run your index.html with live server to quickly test

License

standardJS is MIT Licensed