tina4js 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.parcelrc +4 -4
  2. package/bin/tina4.js +103 -0
  3. package/index.html +10 -10
  4. package/package.json +31 -27
  5. package/readme.md +169 -165
  6. package/tina4/Api.ts +41 -41
  7. package/tina4/Get.ts +8 -8
  8. package/tina4/Globals.ts +31 -31
  9. package/tina4/History.ts +25 -25
  10. package/tina4/Post.ts +9 -9
  11. package/tina4/Route.ts +2 -2
  12. package/tina4/Router.ts +163 -163
  13. package/tina4/Tina4.ts +94 -94
  14. package/tina4/components/Tina4Api.ts +12 -12
  15. package/tina4/components/Tina4Config.ts +9 -9
  16. package/tina4.ts +5 -5
package/.parcelrc CHANGED
@@ -1,5 +1,5 @@
1
- {
2
- "extends": "@parcel/config-default",
3
- "resolvers": ["@parcel/resolver-glob", "..."],
4
- "reporters": ["...", "parcel-reporter-static-files-copy"]
1
+ {
2
+ "extends": "@parcel/config-default",
3
+ "resolvers": ["@parcel/resolver-glob", "..."],
4
+ "reporters": ["...", "parcel-reporter-static-files-copy"]
5
5
  }
package/bin/tina4.js ADDED
@@ -0,0 +1,103 @@
1
+ #! /usr/bin/env node
2
+ //get some params
3
+ const fs = require('fs');
4
+ const path = require('path');
5
+ const args = process.argv.slice(2);
6
+ const currentDir = process.cwd();
7
+ if (args) {
8
+ switch (args[0]) {
9
+ case 'install':
10
+ let installPath = path.join(currentDir, '/test');
11
+ console.log(`Installing to ${installPath}...`);
12
+ install(installPath);
13
+ break;
14
+ }
15
+ }
16
+
17
+ function install(installPath) {
18
+ const indexHtmlContent = `<!DOCTYPE html>
19
+ <html>
20
+ <head>
21
+ <title>My Tina4Js App</title>
22
+ </head>
23
+ <body>
24
+ <tina4-api url="https://randomuser.me/api/" token=""></tina4-api>
25
+ <div id="root"></div>
26
+ <script type="module" src="node_modules/tina4js/tina4.ts"></script>
27
+ </body>
28
+ </html>
29
+ `;
30
+ const parcelRcContent = `{
31
+ "extends": "@parcel/config-default",
32
+ "resolvers": ["@parcel/resolver-glob", "..."],
33
+ "reporters": ["...", "parcel-reporter-static-files-copy"]
34
+ }
35
+ `;
36
+
37
+ fs.access(installPath, (err) => {
38
+ if (err) {
39
+ console.log('Creating installation path ...');
40
+ fs.mkdirSync(installPath);
41
+ }
42
+
43
+ if (!fs.existsSync(path.join(installPath, 'src'))) {
44
+ fs.mkdirSync(path.join(installPath, 'src'));
45
+ };
46
+
47
+ if (!fs.existsSync(path.join(installPath, 'src', 'routes'))) {
48
+ fs.mkdirSync(path.join(installPath, 'src', 'routes'));
49
+ };
50
+
51
+ if (!fs.existsSync(path.join(installPath, 'src', 'templates'))) {
52
+ fs.mkdirSync(path.join(installPath, 'src', 'templates'));
53
+ };
54
+
55
+
56
+ let indexHtmlFile = path.join(installPath, 'index.html');
57
+ if (!fs.existsSync(indexHtmlFile)){
58
+ fs.writeFileSync(indexHtmlFile, indexHtmlContent);
59
+ }
60
+
61
+ let parcelRcFile = path.join(installPath, '.parcelrc');
62
+ if (!fs.existsSync(parcelRcFile)){
63
+ fs.writeFileSync(parcelRcFile, parcelRcContent);
64
+ }
65
+
66
+ //add the relevant sections to the package.json
67
+ let packageFile = path.join(installPath, 'package.json');
68
+ if (fs.existsSync(packageFile)) {
69
+ console.log ('Configuring package.json ...');
70
+ fs.readFile(packageFile, 'utf8', (err, data) => {
71
+ let packageJSON = JSON.parse(data);
72
+
73
+ if (!packageJSON.name) {
74
+ packageJSON['name'] = path.basename(installPath);
75
+ }
76
+
77
+ if (!packageJSON.description) {
78
+ packageJSON['description'] = 'Another tina4js project';
79
+ }
80
+
81
+ if (!packageJSON.version) {
82
+ packageJSON['version'] = '1.0.0';
83
+ }
84
+
85
+ if (!packageJSON.staticFiles) {
86
+ packageJSON['staticFiles'] = {};
87
+ packageJSON['staticFiles']['staticPath'] = 'src/templates';
88
+ packageJSON['staticFiles']['staticOutPath'] = 'templates';
89
+ }
90
+
91
+ if (!packageJSON.scripts) {
92
+ packageJSON['scripts'] = {};
93
+ packageJSON['scripts']['start'] = 'parcel index.html';
94
+ packageJSON['scripts']['build'] = 'parcel build';
95
+ }
96
+
97
+ fs.writeFileSync(packageFile, JSON.stringify(packageJSON, null, '\t'));
98
+ });
99
+ } else {
100
+ console.log('Please make sure you have run `npm install tina4js` in this folder');
101
+ }
102
+ });
103
+ }
package/index.html CHANGED
@@ -1,11 +1,11 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Tina4 JS</title>
5
- </head>
6
- <body>
7
- <tina4-api url="https://randomuser.me/api/" token=""></tina4-api>
8
- <div id="root"></div>
9
- <script type="module" src="tina4.ts"></script>
10
- </body>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Tina4 JS</title>
5
+ </head>
6
+ <body>
7
+ <tina4-api url="https://randomuser.me/api/" token=""></tina4-api>
8
+ <div id="root"></div>
9
+ <script type="module" src="tina4.ts"></script>
10
+ </body>
11
11
  </html>
package/package.json CHANGED
@@ -1,27 +1,31 @@
1
- {
2
- "name": "tina4js",
3
- "source": "index.html",
4
- "version": "0.0.2",
5
- "description" : "This is not another framework!",
6
- "dependencies": {
7
- "fs": "^0.0.1-security",
8
- "twig": "^1.15.4"
9
- },
10
- "devDependencies": {
11
- "@parcel/resolver-glob": "^2.3.2",
12
- "@types/node": "^17.0.21",
13
- "parcel": "latest",
14
- "parcel-reporter-static-files-copy": "^1.3.4",
15
- "path-browserify": "^1.0.1",
16
- "process": "^0.11.10",
17
- "typescript": "^4.2.3"
18
- },
19
- "scripts": {
20
- "start": "parcel",
21
- "build": "parcel build"
22
- },
23
- "staticFiles": {
24
- "staticPath": "src/templates",
25
- "staticOutPath": "templates"
26
- }
27
- }
1
+ {
2
+ "name": "tina4js",
3
+ "source": "index.html",
4
+ "version": "0.0.3",
5
+ "description": "This is not another framework!",
6
+ "dependencies": {
7
+ "fs": "^0.0.1-security",
8
+ "tina4js": "^0.0.2",
9
+ "twig": "^1.15.4"
10
+ },
11
+ "devDependencies": {
12
+ "@parcel/resolver-glob": "^2.3.2",
13
+ "@types/node": "^17.0.21",
14
+ "parcel": "latest",
15
+ "parcel-reporter-static-files-copy": "^1.3.4",
16
+ "path-browserify": "^1.0.1",
17
+ "process": "^0.11.10",
18
+ "typescript": "^4.2.3"
19
+ },
20
+ "scripts": {
21
+ "start": "parcel",
22
+ "build": "parcel build"
23
+ },
24
+ "staticFiles": {
25
+ "staticPath": "src/templates",
26
+ "staticOutPath": "templates"
27
+ },
28
+ "bin": {
29
+ "tina4": "./bin/tina4.js"
30
+ }
31
+ }
package/readme.md CHANGED
@@ -1,165 +1,169 @@
1
- # Tina4js - This is not another Framework for Javascript #
2
-
3
- Right now there is not much to see, but you can start playing by following these instructions
4
-
5
- #### Installing Parcel
6
- ```
7
- npm install --save-dev parcel
8
- ```
9
-
10
- #### Installing Tina4js
11
- ```
12
- npm install tina4js
13
- ```
14
-
15
- #### Create the src folders
16
- Linux / MacOS
17
- ```
18
- mkdir src
19
- mkdir src/routes
20
- mkdir src/templates
21
- ```
22
- Windows
23
- ```
24
- mkdir src
25
- mkdir src\routes
26
- mkdir src\templates
27
- ```
28
-
29
- #### Create .parcelrc file
30
- ```
31
- echo {"extends": "@parcel/config-default","resolvers": ["@parcel/resolver-glob", "..."],"reporters": ["...", "parcel-reporter-static-files-copy"]} > .parcelrc
32
- ```
33
-
34
- #### Create index.html
35
-
36
- ```html
37
- <!DOCTYPE html>
38
- <html>
39
- <head>
40
- <title>Tina4 JS</title>
41
- </head>
42
- <body>
43
- <tina4-api url="https://randomuser.me/api/" token=""></tina4-api>
44
- <div id="root"></div>
45
- <script type="module" src="node_modules/tina4js/tina4.ts"></script>
46
- </body>
47
- </html>
48
- ```
49
-
50
- #### Add static paths
51
- ```json
52
- {
53
- "devDependencies": {
54
- "@parcel/resolver-glob": "^2.7.0",
55
- "parcel": "^2.7.0",
56
- "parcel-reporter-static-files-copy": "^1.4.0",
57
- "path-browserify": "^1.0.1",
58
- "process": "^0.11.10"
59
- },
60
- "dependencies": {
61
- "tina4js": "^0.0.1"
62
- },
63
- "staticFiles": {
64
- "staticPath": "src/templates",
65
- "staticOutPath": "templates"
66
- }
67
- }
68
- ```
69
-
70
- #### Examples of routes
71
-
72
- ```ts
73
- import {Tina4} from "../../tina4/Tina4";
74
- import {Get} from "../../tina4/Get";
75
-
76
- (new Get()).add('/test/hello', function (response, request) {
77
- let content = `<h1>Hello World Again!</h1>`;
78
- return response(content, 200, 'text/html')
79
- });
80
-
81
- (new Get()).add('/test', function (response, request) {
82
- Tina4.renderTemplate(`<h1>Hello {{name}}!</h1><form target="root" method="post"><input type="text" name="firstName" value="{{firstName}}"><button>Send</button></form>`, {
83
- name: "Tina4",
84
- firstName: "Tina4"
85
- }, function (html) {
86
- return response(html, 200, 'text/html')
87
- }
88
- );
89
- });
90
-
91
- (new Get()).add('/test/{id}', function (response, request) {
92
- Tina4.renderTemplate(`<h1>Hello parsing params ok {{id}}!</h1>`, request, function(html) {
93
- return response(html, 200, 'text/html');
94
- });
95
- });
96
-
97
- (new Get()).add('/', function (response, request) {
98
- Tina4.renderTemplate(`index.twig`, {test: "Hello World!", title: "Index Page"}, function(html) {
99
- return response (html, 200, 'text/html');
100
- });
101
- });
102
-
103
- ```
104
-
105
- #### Post Routes
106
- This is configured using the tina4-api tag in the index.html file
107
- ```ts
108
- import {Post} from "../../tina4/Post";
109
- import {Api} from "../../tina4/Api";
110
- import {Tina4} from "../../tina4/Tina4";
111
-
112
- (new Post()).add("/test", function (response, request) {
113
- //Send and API request
114
- console.log('POST WORKING', request);
115
- Api.sendRequest('', request, 'GET', function(result) {
116
- Tina4.renderTemplate(`contact.twig`, result, function(html){
117
- return response(html, 200);
118
- });
119
- });
120
- });
121
- ```
122
-
123
- ### Examples of templates
124
-
125
- base.twig
126
- ```twig base.twig
127
- <div>
128
- <nav>
129
- <h1>Hello World Hello</h1>
130
- <a href="#" onclick="navigate('/')">Home</a>
131
- <a href="#" onclick="navigate('/test/hello')">Test</a>
132
- <a href="#" onclick="navigate('/test/Hello')">Hello</a>
133
- <a href="#" onclick="navigate('/test')">Hello</a>
134
- </nav>
135
- </div>
136
- <div>
137
- {% block content %}
138
- Here is content
139
- {% endblock %}
140
- </div>
141
- ```
142
-
143
- index.twig
144
- ```twig index.twig
145
- {% extends "base.twig" %}
146
- {% block content %}
147
- {{ test }}
148
- {% endblock %}
149
- ```
150
-
151
- contact.twig - tied to the POST route above
152
- ```twig contact.twig
153
- <h1>API Results</h1>
154
- {% for result in results %}
155
- {{result.name.first}}
156
- <img src="{{result.picture.large}}">
157
- {% endfor %}
158
- ```
159
-
160
-
161
- Components
162
-
163
- | Component | Example |
164
- |-----------|---------------------------------------------------------------|
165
- | tina4-api | ```<tina4-api url="https://randomuser.me/api/" token="" />``` |
1
+ # Tina4js - This is not another Framework for Javascript #
2
+
3
+ Right now there is not much to see, but you can start playing by following these instructions
4
+
5
+ #### Installing Parcel
6
+ ```
7
+ npm install --save-dev parcel
8
+ ```
9
+
10
+ #### Installing Tina4js
11
+ ```
12
+ npm install tina4js
13
+ ```
14
+
15
+ #### Create the src folders
16
+ Linux / MacOS
17
+ ```
18
+ mkdir src
19
+ mkdir src/routes
20
+ mkdir src/templates
21
+ ```
22
+ Windows
23
+ ```
24
+ mkdir src
25
+ mkdir src\routes
26
+ mkdir src\templates
27
+ ```
28
+
29
+ #### Create .parcelrc file
30
+ ```
31
+ echo {"extends": "@parcel/config-default","resolvers": ["@parcel/resolver-glob", "..."],"reporters": ["...", "parcel-reporter-static-files-copy"]} > .parcelrc
32
+ ```
33
+
34
+ #### Create index.html
35
+
36
+ ```html
37
+ <!DOCTYPE html>
38
+ <html>
39
+ <head>
40
+ <title>Tina4 JS</title>
41
+ </head>
42
+ <body>
43
+ <tina4-api url="https://randomuser.me/api/" token=""></tina4-api>
44
+ <div id="root"></div>
45
+ <script type="module" src="node_modules/tina4js/tina4.ts"></script>
46
+ </body>
47
+ </html>
48
+ ```
49
+
50
+ #### Add static paths & scripts
51
+ ```json
52
+ {
53
+ "devDependencies": {
54
+ },
55
+ "dependencies": {
56
+ "tina4js": "^0.0.1"
57
+ },
58
+ "staticFiles": {
59
+ "staticPath": "src/templates",
60
+ "staticOutPath": "templates"
61
+ },
62
+ "scripts": {
63
+ "start": "parcel index.html",
64
+ "build": "parcel build"
65
+ }
66
+ }
67
+ ```
68
+
69
+ #### Examples of routes
70
+
71
+ ```ts
72
+ import {Get} from "tina4js/tina4/Get";
73
+ import {Tina4} from "tina4js/tina4/Tina4";
74
+
75
+ (new Get()).add('/test/hello', function (response, request) {
76
+ let content = `<h1>Hello World Again!</h1>`;
77
+ return response(content, 200, 'text/html')
78
+ });
79
+
80
+ (new Get()).add('/test', function (response, request) {
81
+ Tina4.renderTemplate(`<h1>Hello {{name}}!</h1><form target="root" method="post"><input type="text" name="firstName" value="{{firstName}}"><button>Send</button></form>`, {
82
+ name: "Tina4",
83
+ firstName: "Tina4"
84
+ }, function (html) {
85
+ return response(html, 200, 'text/html')
86
+ }
87
+ );
88
+ });
89
+
90
+ (new Get()).add('/test/{id}', function (response, request) {
91
+ Tina4.renderTemplate(`<h1>Hello parsing params ok {{id}}!</h1>`, request, function(html) {
92
+ return response(html, 200, 'text/html');
93
+ });
94
+ });
95
+
96
+ (new Get()).add('/', function (response, request) {
97
+ Tina4.renderTemplate(`index.twig`, {test: "Hello World!", title: "Index Page"}, function(html) {
98
+ return response (html, 200, 'text/html');
99
+ });
100
+ });
101
+
102
+ ```
103
+
104
+ #### Post Routes
105
+ This is configured using the tina4-api tag in the index.html file
106
+ ```ts
107
+ import {Post} from "tina4js/tina4/Post";
108
+ import {Api} from "tina4js/tina4/Api";
109
+ import {Tina4} from "tina4js/tina4/Tina4";
110
+
111
+ (new Post()).add("/test", function (response, request) {
112
+ //Send and API request
113
+ console.log('POST WORKING', request);
114
+ Api.sendRequest('', request, 'GET', function(result) {
115
+ Tina4.renderTemplate(`contact.twig`, result, function(html){
116
+ return response(html, 200);
117
+ });
118
+ });
119
+ });
120
+ ```
121
+
122
+ ### Examples of templates
123
+
124
+ base.twig
125
+ ```twig base.twig
126
+ <div>
127
+ <nav>
128
+ <h1>Hello World Hello</h1>
129
+ <a href="#" onclick="navigate('/')">Home</a>
130
+ <a href="#" onclick="navigate('/test/hello')">Test</a>
131
+ <a href="#" onclick="navigate('/test/Hello')">Hello</a>
132
+ <a href="#" onclick="navigate('/test')">Hello</a>
133
+ </nav>
134
+ </div>
135
+ <div>
136
+ {% block content %}
137
+ Here is content
138
+ {% endblock %}
139
+ </div>
140
+ ```
141
+
142
+ index.twig
143
+ ```twig index.twig
144
+ {% extends "base.twig" %}
145
+ {% block content %}
146
+ {{ test }}
147
+ {% endblock %}
148
+ ```
149
+
150
+ contact.twig - tied to the POST route above
151
+ ```twig contact.twig
152
+ <h1>API Results</h1>
153
+ {% for result in results %}
154
+ {{result.name.first}}
155
+ <img src="{{result.picture.large}}">
156
+ {% endfor %}
157
+ ```
158
+
159
+ #### Running
160
+
161
+ ```
162
+ npm start
163
+ ```
164
+
165
+ Components
166
+
167
+ | Component | Example |
168
+ |-----------|---------------------------------------------------------------|
169
+ | tina4-api | ```<tina4-api url="https://randomuser.me/api/" token="" />``` |
package/tina4/Api.ts CHANGED
@@ -1,42 +1,42 @@
1
- import {Globals} from "./Globals";
2
- export class Api {
3
-
4
- static sendRequest (endPoint, request, method, callback) {
5
- if (endPoint === undefined) {
6
- endPoint = "";
7
- }
8
-
9
- if (request === undefined) {
10
- request = null;
11
- }
12
-
13
- if (method === undefined) {
14
- method = 'GET';
15
- }
16
-
17
- let api = Globals.get('api');
18
- if (api !== null) {
19
- endPoint = api.url + endPoint;
20
- }
21
-
22
- const xhr = new XMLHttpRequest();
23
- xhr.open(method, endPoint, true);
24
-
25
- xhr.onload = function () {
26
- let content = xhr.response;
27
- try {
28
- content = JSON.parse(content);
29
- callback(content);
30
- } catch (exception) {
31
- callback (content);
32
- }
33
- };
34
-
35
- if (method === 'POST') {
36
- xhr.send(request);
37
- } else {
38
- xhr.send(null);
39
- }
40
- }
41
-
1
+ import {Globals} from "./Globals";
2
+ export class Api {
3
+
4
+ static sendRequest (endPoint, request, method, callback) {
5
+ if (endPoint === undefined) {
6
+ endPoint = "";
7
+ }
8
+
9
+ if (request === undefined) {
10
+ request = null;
11
+ }
12
+
13
+ if (method === undefined) {
14
+ method = 'GET';
15
+ }
16
+
17
+ let api = Globals.get('api');
18
+ if (api !== null) {
19
+ endPoint = api.url + endPoint;
20
+ }
21
+
22
+ const xhr = new XMLHttpRequest();
23
+ xhr.open(method, endPoint, true);
24
+
25
+ xhr.onload = function () {
26
+ let content = xhr.response;
27
+ try {
28
+ content = JSON.parse(content);
29
+ callback(content);
30
+ } catch (exception) {
31
+ callback (content);
32
+ }
33
+ };
34
+
35
+ if (method === 'POST') {
36
+ xhr.send(request);
37
+ } else {
38
+ xhr.send(null);
39
+ }
40
+ }
41
+
42
42
  }
package/tina4/Get.ts CHANGED
@@ -1,9 +1,9 @@
1
- import {Route} from "./Route"
2
- import {Router} from "./Router";
3
-
4
- export class Get implements Route {
5
- private method : string = 'GET';
6
- add(path: string, callback): void {
7
- Router.add(this.method, path, callback)
8
- }
1
+ import {Route} from "./Route"
2
+ import {Router} from "./Router";
3
+
4
+ export class Get implements Route {
5
+ private method : string = 'GET';
6
+ add(path: string, callback): void {
7
+ Router.add(this.method, path, callback)
8
+ }
9
9
  }