tina4js 0.0.2 → 0.0.5

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 +124 -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 = currentDir; //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.5",
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,124 @@
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
+ Begin your Tina4 journey by following these steps
4
+
5
+ #### Install Parcel
6
+ Parcel is a great tool to use whilst developing your project, not only does it allow you to use type script but it will bundle your project into a dist folder automatically.
7
+ ```
8
+ npm install --save-dev parcel
9
+ ```
10
+
11
+ #### Installing Tina4js
12
+ We've tried to make installing Tina4js as easy as possible, this should result in a working project.
13
+ ```
14
+ npm install tina4js
15
+ npm install -g tina4js
16
+ tina4 install
17
+ ```
18
+
19
+ #### Running your project
20
+ ```
21
+ npm run start
22
+ ```
23
+
24
+ #### Examples of routes
25
+
26
+ ```ts
27
+ import {Get} from "tina4js/tina4/Get";
28
+ import {Tina4} from "tina4js/tina4/Tina4";
29
+
30
+ (new Get()).add('/test/hello', function (response, request) {
31
+ let content = `<h1>Hello World Again!</h1>`;
32
+ return response(content, 200, 'text/html')
33
+ });
34
+
35
+ (new Get()).add('/test', function (response, request) {
36
+ Tina4.renderTemplate(`<h1>Hello {{name}}!</h1><form target="root" method="post"><input type="text" name="firstName" value="{{firstName}}"><button>Send</button></form>`, {
37
+ name: "Tina4",
38
+ firstName: "Tina4"
39
+ }, function (html) {
40
+ return response(html, 200, 'text/html')
41
+ }
42
+ );
43
+ });
44
+
45
+ (new Get()).add('/test/{id}', function (response, request) {
46
+ Tina4.renderTemplate(`<h1>Hello parsing params ok {{id}}!</h1>`, request, function(html) {
47
+ return response(html, 200, 'text/html');
48
+ });
49
+ });
50
+
51
+ (new Get()).add('/', function (response, request) {
52
+ Tina4.renderTemplate(`index.twig`, {test: "Hello World!", title: "Index Page"}, function(html) {
53
+ return response (html, 200, 'text/html');
54
+ });
55
+ });
56
+
57
+ ```
58
+
59
+ #### Post Routes
60
+ This is configured using the tina4-api tag in the index.html file
61
+ ```ts
62
+ import {Post} from "tina4js/tina4/Post";
63
+ import {Api} from "tina4js/tina4/Api";
64
+ import {Tina4} from "tina4js/tina4/Tina4";
65
+
66
+ (new Post()).add("/test", function (response, request) {
67
+ //Send and API request
68
+ console.log('POST WORKING', request);
69
+ Api.sendRequest('', request, 'GET', function(result) {
70
+ Tina4.renderTemplate(`contact.twig`, result, function(html){
71
+ return response(html, 200);
72
+ });
73
+ });
74
+ });
75
+ ```
76
+
77
+ ### Examples of templates
78
+
79
+ base.twig
80
+ ```twig base.twig
81
+ <div>
82
+ <nav>
83
+ <h1>Hello World Hello</h1>
84
+ <a href="#" onclick="navigate('/')">Home</a>
85
+ <a href="#" onclick="navigate('/test/hello')">Test</a>
86
+ <a href="#" onclick="navigate('/test/Hello')">Hello</a>
87
+ <a href="#" onclick="navigate('/test')">Hello</a>
88
+ </nav>
89
+ </div>
90
+ <div>
91
+ {% block content %}
92
+ Here is content
93
+ {% endblock %}
94
+ </div>
95
+ ```
96
+
97
+ index.twig
98
+ ```twig index.twig
99
+ {% extends "base.twig" %}
100
+ {% block content %}
101
+ {{ test }}
102
+ {% endblock %}
103
+ ```
104
+
105
+ contact.twig - tied to the POST route above
106
+ ```twig contact.twig
107
+ <h1>API Results</h1>
108
+ {% for result in results %}
109
+ {{result.name.first}}
110
+ <img src="{{result.picture.large}}">
111
+ {% endfor %}
112
+ ```
113
+
114
+ #### Running
115
+
116
+ ```
117
+ npm start
118
+ ```
119
+
120
+ Components
121
+
122
+ | Component | Example |
123
+ |-----------|---------------------------------------------------------------|
124
+ | 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
  }
package/tina4/Globals.ts CHANGED
@@ -1,32 +1,32 @@
1
- export class Globals {
2
-
3
- static initialize () {
4
- window['tina4'] = {};
5
- }
6
-
7
- static defined() {
8
- return (window['tina4'] !== undefined);
9
- }
10
-
11
- static set(name, value) {
12
- if (!this.defined()) {
13
- this.initialize();
14
- }
15
- window['tina4'][name] = value;
16
- }
17
-
18
- static append (name, value) {
19
- if (window['tina4'][name] === undefined) {
20
- window['tina4'][name] = [];
21
- }
22
- window['tina4'][name].push(value);
23
- }
24
-
25
- static get (name) {
26
- if (this.defined() && window['tina4'][name]) {
27
- return window['tina4'][name];
28
- } else {
29
- return null;
30
- }
31
- }
1
+ export class Globals {
2
+
3
+ static initialize () {
4
+ window['tina4'] = {};
5
+ }
6
+
7
+ static defined() {
8
+ return (window['tina4'] !== undefined);
9
+ }
10
+
11
+ static set(name, value) {
12
+ if (!this.defined()) {
13
+ this.initialize();
14
+ }
15
+ window['tina4'][name] = value;
16
+ }
17
+
18
+ static append (name, value) {
19
+ if (window['tina4'][name] === undefined) {
20
+ window['tina4'][name] = [];
21
+ }
22
+ window['tina4'][name].push(value);
23
+ }
24
+
25
+ static get (name) {
26
+ if (this.defined() && window['tina4'][name]) {
27
+ return window['tina4'][name];
28
+ } else {
29
+ return null;
30
+ }
31
+ }
32
32
  }