# jayesstee

> Pure javascript templating

Latest version **0.13.1** (published 2022-11-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install jayesstee
pnpm add jayesstee
yarn add jayesstee
bun add jayesstee
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.1 |
| Published | 2022-11-23 |
| First published | 2018-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 298.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | efunneko |
| Keywords | template, templating, javascript |

## Links

- npm: https://www.npmjs.com/package/jayesstee
- Repository: https://github.com/efunneko/jayesstee
- Homepage: https://jayesstee.org
- Issues: https://github.com/efunneko/jayesstee/issues
- npm.io page: https://npm.io/package/jayesstee

## Dependencies (1)

- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.6.0

## Recent versions

- 0.13.1 (latest) — 2022-11-23
- 0.13.0 — 2021-06-18
- 0.12.0 — 2021-02-16
- 0.11.5 — 2020-05-25
- 0.11.4 — 2019-12-19
- 0.11.3 — 2019-12-18
- 0.11.2 — 2019-12-09
- 0.11.1 — 2019-12-09
- 0.11.0 — 2019-12-09
- 0.10.2 — 2019-01-16
- 0.10.1 — 2018-12-19
- 0.10.0 — 2018-12-05
- 0.9.3 — 2018-11-19
- 0.9.2 — 2018-11-17
- 0.9.1 — 2018-10-30
- … 15 more at https://npm.io/package/jayesstee/versions

## README

# jayesstee - Javascript Templating (JST)

## Overview

Yes, another templating module. This one is quite small, super simple and 
is 100% pure javascript. You can step through your templates with a JS
debugger.

The module can both create simple HTML output in string form (useful for 
spitting out some HTML in node.js) or can be used in the browser and fill in the
DOM with HTMLElements, etc. It can also manage CSS with local scoping. Finally it adds
some basic support for events and input data retrieval.

Take a look at these codepens for working examples:  https://codepen.io/collection/nxdMer


## Examples

### Most basic usage - no templates or refreshable objects

Add a div with an unordered-list into the body of the page:

    import jst from "jayesstee";
    
    // Promote all elements to global (or add 'jst.' in front of everything)
    jst.makeGlobal();
    
    jst("body").appendChild(
        $div({id: "main", "class": "main-class"},
            $ul(
                $li({id: "one"},   "First Entry"),
                $li({id: "two"},   "Second Entry"),
                $li({id: "three"}, "Third Entry")
            )
        )
    );

## Build a page using jst.Components

    import jst from 'jayesstee';
    
    jst.makeGlobal();
    
    class Page extends jst.Component  {
        constructor(appData) {
            super();
            this.header = new Header(appData);
            this.body   = new Body(appData);
        }
        cssGlobal() {
            return {
              body: {fontFamily: "Arial", padding$px: 0, margin$px: 0}
            };      
        }
        render() {
            return $div({cn: "page"},
                        this.header,
                        this.body);
        }
    }
    
    class Body extends jst.Component {
        constructor(appData) {
            super();
            this.table  = new Table(appData.tableConfig, appData.tableData);
        }
        render() {
            return $div({cn: "body"},
                        this.table);
        }
    }
    
    class Header extends jst.Component {
        constructor(appData) {
            super();
            this.headerInfo = appData.headerInfo;
        }
        render() {
            return $div({cn: "-header"},
                        $div({cn: "-title"},
                             this.headerInfo.title),
                        $div({cn: "-userInfo"},
                             this.headerInfo.userInfo)
                       );
        }
        cssLocal() {
          return {
            header$c: {backgroundColor: "black", color: "white", padding$px: 5},
            title$c: {fontSize: "150%", display: "inline-block"},
            userInfo$c: {display: "inline-block", float: "right", verticalAlign: "bottom"}
          }
        }
    }
    
    const templates = {
      table: (fieldInfo, fieldsToShow, collection) => 
        $table(
          {cn: "table"},
          $thead(
            $tr(fieldsToShow.map(field => $th(fieldInfo[field].title)))
          ),
          $tbody(
            collection.map(entry => $tr(
              fieldsToShow.map(field => $td(entry[field]))
            ))
          )
        )
    };
    
    class Table extends jst.Component {
        constructor(config, data) {
            super();
            this.config = config;
            this.data   = data;
        }
        cssLocal() {
          return {'tableContainer$c': {margin$px: 10}, 
                  table: {borderCollapse: "collapse"}, 
                  'td,th': {border$px: [1, "solid", "black"], padding$px: 4},
                  th: {backgroundColor: "black", color: "white"}
                 };
        }
        render() {
            return $div({cn: "-tableContainer"},
                        templates.table(this.config.fieldInfo,
                                        this.config.fieldsToShow,
                                        this.data.collection)
                        );
        }
        setConfig(config) {
            this.config = config;
            this.refresh(); // Refresh only the table on the page
        }
        setData(data) {
            this.data = data;
            this.refresh(); // Refresh only the table on the page
        }
    }
    
    // Now create a page - this won't yet render it
    let page = new Page({
        headerInfo: {
            title: "My Title",
            userInfo: "my-name" 
        },
        tableConfig: {
            fieldInfo: {
                name:   {title: "Name"},
                height: {title: "Height"},
                age:    {title: "Age"},
                weight: {title: "Weight"},
            },
            fieldsToShow: ["name", "height", "weight"]
        },
        tableData: {
            collection: [
                {name: "Bob",     height: 73, age: 31, weight: 180},
                {name: "Sam",     height: 69, age: 16, weight: 160},
                {name: "Ruth",    height: 64, age: 55, weight: 150},
                {name: "Navneet", height: 60, age: 34, weight: 110}
            ]
        }
    });
    
    // Now add it to the document
    jst("body").appendChild(page);


[CodePen for previous example](https://codepen.io/efunneko/pen/XxPjej)

### Another more dynamic demo of spinning tables:

[CodePen Spinners](https://codepen.io/efunneko/pen/bQvLBP)


_Copyright 2018 Edward Funnekotter All rights reserved_

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