├── .DS_Store
├── examples
├── guests.json
├── style1.json
├── controller1.js
├── head1.json
└── example1.json
├── include.js
├── tests
└── test1.js
├── package.json
├── README.md
├── index.js
└── LICENSE
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jfscoertzen/HTON/HEAD/.DS_Store
--------------------------------------------------------------------------------
/examples/guests.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "Name": "Stephan",
4 | "Surname": "Coertzen"
5 | }
6 | ]
--------------------------------------------------------------------------------
/examples/style1.json:
--------------------------------------------------------------------------------
1 | {
2 | "h1": {
3 | "text-decoration": "underline"
4 | },
5 | ".center-text": {
6 | "text-align": "center"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/include.js:
--------------------------------------------------------------------------------
1 | Web = {
2 | Controllers: {},
3 |
4 | Initialize: () => {
5 | // Initialize all the controllers
6 | for(let controller in Web.Controllers) {
7 | if (Web.Controllers[controller].Initialize) Web.Controllers[controller].Initialize();
8 | }
9 | }
10 | }
11 |
12 | $C = Web.Controllers;
--------------------------------------------------------------------------------
/examples/controller1.js:
--------------------------------------------------------------------------------
1 | Web.Controllers.Controller1 = {
2 | Initialize: () => {
3 | $C.Controller1.GuestData = [];
4 | $.getJSON("guests.json", function( json ) {
5 | $C.Controller1.GuestData = json;
6 | });
7 | },
8 | AddUser: () => {
9 | Swal.fire({
10 | title: 'Error!',
11 | text: 'Do you want to continue',
12 | icon: 'error',
13 | confirmButtonText: 'Cool'
14 | })
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/examples/head1.json:
--------------------------------------------------------------------------------
1 | {
2 | "link$no-close": {
3 | "$attr.rel": "stylesheet",
4 | "$attr.href": "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
5 | },
6 | "script#1": {
7 | "$attr.src": "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
8 | },
9 | "script#2": {
10 | "$attr.src": "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
11 | },
12 | "script#3": {
13 | "$attr.src": "//cdn.jsdelivr.net/npm/sweetalert2@11"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tests/test1.js:
--------------------------------------------------------------------------------
1 | const HTON = require('./../index.js')();
2 |
3 | const express = require('express');
4 | const app = express();
5 | const port = 3000;
6 |
7 | app.get('/', (req, res) => {
8 | (async () => {
9 | await HTON.LoadJSON('examples/example1.json');
10 | //console.log(JSON.stringify(HTON.JSONData));
11 | //console.log(HTON.Html);
12 | res.send(HTON.Html);
13 | })();
14 | });
15 |
16 | app.use(express.static('examples'))
17 |
18 | app.listen(port, () => {
19 | console.log(`Example app listening on port ${port}`)
20 | });
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hton",
3 | "version": "1.0.0",
4 | "description": "JSON to HTML Interpreter and Framework",
5 | "main": "index.js",
6 | "directories": {
7 | "example": "examples"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/jfscoertzen/HTON.git"
15 | },
16 | "author": "Stephan Coertzen",
17 | "license": "GPL-3.0",
18 | "bugs": {
19 | "url": "https://github.com/jfscoertzen/HTON/issues"
20 | },
21 | "homepage": "https://github.com/jfscoertzen/HTON#readme",
22 | "dependencies": {
23 | "@apidevtools/json-schema-ref-parser": "^9.0.9",
24 | "express": "^4.17.3",
25 | "pretty": "^2.0.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/examples/example1.json:
--------------------------------------------------------------------------------
1 | {
2 | "HTML": {
3 | "head": {
4 | "$ref": "head1.json"
5 | },
6 | "$style": {
7 | "$ref": "style1.json"
8 | },
9 | "body": {
10 | "div": {
11 | "$attr.class": "row center-text",
12 | "h1": "Guest List"
13 | },
14 | "br$no-open": "",
15 | "$view:Controller1@controller1.js": {
16 | "table": {
17 | "$attr.class": "table table-striped table-bordered",
18 | "tr#1": {
19 | "td#1": {
20 | "b": "Name"
21 | },
22 | "td#2": {
23 | "b": "Surname"
24 | }
25 | },
26 | "tr#2": {
27 | "td#1": "Stephan",
28 | "td#2": "Coertzen"
29 | }
30 | },
31 | "button": {
32 | "$attr.class": "btn btn-default",
33 | "$attr.onclick": "$.AddUser()",
34 | "span":"Add"
35 | }
36 | }
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTON
2 | A JSON to HTML Interpreter and MVC framework
3 |
4 | ## Description
5 | An interpreter to handle JSON files to HTML transpilation. Html is used as a standard way of defining website look, layout and definition. HTON is an abbreviation for Hyper-Text Object Notation. It's a subset of JSON that's aimed at making a project 100% pure JavaScript and yet can be viewed in a web browser.
6 |
7 | ## Usage
8 | Currently the transpilation works as a node package. It's planned to be used with or without NodeJS later. The transpilation is designed to be on demand, thus when the user requests the site the service transpiles the JSON straight from the file to the requesting buffer.
9 |
10 | ```js
11 | const HTON = require('HTON')();
12 | (async () => {
13 | await HTON.LoadJSON('examples/example1.json');
14 | console.log(HTON.Html);
15 | })();
16 | ```
17 |
18 | ## JSON Definition
19 | ```js
20 | {
21 | "HTML": {
22 | "head": {
23 | "$ref": "head1.json"
24 | },
25 | "$style": {
26 | "$ref": "style1.json"
27 | },
28 | "body": {
29 | "h1": "Hello World!",
30 | "br$no-open": "",
31 | "table": {
32 | "$attr.class": "table table-striped table-bordered",
33 | "tr#1": {
34 | "td#1": {
35 | "b": "Name"
36 | },
37 | "td#2": {
38 | "b": "Surname"
39 | }
40 | },
41 | "tr#2": {
42 | "td#1": "Stephan",
43 | "td#2": "Coertzen"
44 | }
45 | },
46 | "$view:Controller1@controller1.js": {
47 | "button": {
48 | "$attr.class": "btn btn-default",
49 | "$attr.onclick": "$.AddUser",
50 | "span":"Add"
51 | }
52 | }
53 | }
54 | }
55 | }
56 | ```
57 |
58 | #### $ref
59 | Use `$ref` in property names to define another JSON file that you want to link to the attribute. Use the JSON schema referencing to construct the related schema that you want to parse into the attribute.
60 |
61 | https://json-schema.org/understanding-json-schema/structuring.html
62 |
63 | ### #1, #2 ...
64 | Use a `#` followed by a identification to define an id for the HTML element.
65 |
66 | ### `$no-close` or `$no-open`
67 | Use `$no-close` after the attribute name to define that the element should not have a closing tag.
68 | Use `$no-open` after the attribute name to define that the element should not have an opening tag and only a closing tag.
69 |
70 | ### `$view`
71 | Use `$view` to define a 'View' section that will be bound to a Controller with JavaScript functionality.
72 |
73 | ## Library Documentation
74 | ### HTON : object
75 | Hyper-Text Object Notation
76 |
77 | **Kind**: global namespace
78 |
79 |
80 |
81 | #### HTON.$this
82 | The main return object
83 |
84 | **Kind**: static property of [HTON](#HTON)
85 |
86 |
87 | #### HTON.Html ⇒
88 | Transpile loaded JSON to Html
89 |
90 | **Kind**: static property of [HTON](#HTON)
91 | **Returns**: Html Code
92 |
93 |
94 | #### HTON.$this.JSONData
95 | The JSON Data loaded with LoadJSON
96 |
97 | **Kind**: static property of [HTON](#HTON)
98 |
99 |
100 | #### HTON.$this.LoadJSON(jsonFile) ⇒
101 | Function to load the JSON file
102 |
103 | **Kind**: static method of [HTON](#HTON)
104 | **Returns**: Promise
105 |
106 | | Param | Type | Description |
107 | | --- | --- | --- |
108 | | jsonFile | String | The JSON File to Load |
109 |
110 |
111 |
112 | #### HTON.$this.EvaluateJSONDataProperty(jsonObj) ⇒
113 | Evaluate a JSON Object for Transpilation
114 |
115 | **Kind**: static method of [HTON](#HTON)
116 | **Returns**: HTML Code
117 |
118 | | Param | Type | Description |
119 | | --- | --- | --- |
120 | | jsonObj | Object | The JSON Object to Transpile |
121 |
122 |
123 |
124 | #### HTON.$this.GetControllerScripts(jsonObj) ⇒
125 | Get Header scripts to include in the HTML Header
126 |
127 | **Kind**: static method of [HTON](#HTON)
128 | **Returns**: HTML Code
129 |
130 | | Param | Type | Description |
131 | | --- | --- | --- |
132 | | jsonObj | Object | The JSON Object to inspect for header scripts |
133 |
134 |
135 |
136 | #### HTON.$this.GetPropHtmlAttributes(htmlObj, currentView) ⇒
137 | Get the attributes of a specific element
138 |
139 | **Kind**: static method of [HTON](#HTON)
140 | **Returns**: The Attribute Values for the HTML Element
141 |
142 | | Param | Type | Description |
143 | | --- | --- | --- |
144 | | htmlObj | Object | The Object being transpiled for attributes |
145 | | currentView | String | The current view being inspected |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const refParser = require("@apidevtools/json-schema-ref-parser");
3 | const pretty = require('pretty');
4 |
5 | /**
6 | * Hyper-Text Object Notation
7 | * @namespace HTON
8 | */
9 | const HTON = () => {
10 | /**
11 | * The main return object
12 | * @memberof HTON
13 | */
14 | let $this = {
15 | /**
16 | * Transpile loaded JSON to Html
17 | * @returns Html Code
18 | * @memberof HTON
19 | */
20 | get Html() {
21 | let htmlCode = '';
22 | htmlCode += $this.EvaluateJSONDataProperty($this.JSONData);
23 | htmlCode = htmlCode.split('