# stnd.js

> A reusable, flexible and efficient Javascript framework for building user interfaces

Latest version **1.3.0** (published 2018-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install stnd.js
pnpm add stnd.js
yarn add stnd.js
bun add stnd.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2018-04-16 |
| First published | 2018-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yash Kumar |
| Maintainers | yashkumar6640 |
| Keywords | stnd.js, standardjs, standard.js, module, library, framework |

## Links

- npm: https://www.npmjs.com/package/stnd.js
- Repository: https://github.com/yashkumar6640/Standard.js
- Homepage: https://github.com/yashkumar6640/Standard.js#readme
- Issues: https://github.com/yashkumar6640/Standard.js/issues
- npm.io page: https://npm.io/package/stnd.js

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2018-04-16
- 1.2.1 — 2018-04-09
- 1.2.0 — 2018-04-09
- 1.1.3 — 2018-04-09
- 1.1.2 — 2018-04-09
- 1.1.1 — 2018-04-08
- 1.1.0 — 2018-04-08
- 1.0.0 — 2018-04-08

## README

## Standard.js · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sucom/SPA.js/blob/master/LICENSE)
A very efficient, flexible Javascript framework for user facing interfaces.

## Installation
<pre>
$ npm i stnd.js
</pre>

## Application Structure: <br>
<pre>
/app
    /components
              /home
                  /home.js
                  /home.html
                  /home.css
              /view
                  /view.js
                  /view.html
                  /view.css
/index.html
/main.js
</pre>

### Require the module:
##### inside main.js(entry js file):

<pre> var standard = require("stnd.js"); </pre>

##### Register the components:
<pre>
var view = require("./app/components/view/view.js");
var home = require("./app/components/home/home.js");
var mainContent = require("./main.html")
</pre>

##### Storing the component's data:

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

##### Rendering the component on a target:

<pre>std.renderOnTarget("home", "#renderHere");</pre>

##### Data-flow between components:
<pre>
std.passData("view", {
  title: "Data coming from home component"
})
</pre>

##### Reset the component's data and automatic re-render:
<pre>set.setData("home",{num: 6});</pre>

##### 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"
<pre>
$ npm install webpack webpack-cli --save-dev
$ npm i html-loader
</pre>

##### webpack.config.js
<pre>
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"
      }
    ]
  }
};
</pre>

##### index.html
  `<div id="root"></div>`

##### main.js
<pre>
require("stnd.js");

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

//bootstrap

std.renderOnTarget("home", "#root");
</pre>

##### home.js
<pre>
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() {}

</pre>

##### home.html
`<h1>Home</h1>`
`<button id="renderView">Render view component</button>`
{{title}}

##### view.js
<pre>
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() {}
</pre>

##### 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

---
_Source: https://npm.io/package/stnd.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._