tina4js 0.0.1 → 0.0.2

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 (8) hide show
  1. package/package.json +1 -1
  2. package/readme.md +154 -3
  3. package/tina4.ts +1 -0
  4. package/src/routes/example.ts +0 -35
  5. package/src/routes/testing.ts +0 -13
  6. package/src/templates/base.twig +0 -14
  7. package/src/templates/contact.twig +0 -5
  8. package/src/templates/index.twig +0 -4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tina4js",
3
3
  "source": "index.html",
4
- "version": "0.0.1",
4
+ "version": "0.0.2",
5
5
  "description" : "This is not another framework!",
6
6
  "dependencies": {
7
7
  "fs": "^0.0.1-security",
package/readme.md CHANGED
@@ -1,12 +1,163 @@
1
1
  # Tina4js - This is not another Framework for Javascript #
2
2
 
3
- Right now there is not much to see, but you can start playing by doing the following
3
+ Right now there is not much to see, but you can start playing by following these instructions
4
4
 
5
+ #### Installing Parcel
5
6
  ```
6
- npm install
7
- npm run start
7
+ npm install --save-dev parcel
8
8
  ```
9
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
+
10
161
  Components
11
162
 
12
163
  | Component | Example |
package/tina4.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import {Tina4} from "./tina4/Tina4";
2
2
  Tina4.initialize({defaultTarget: 'root'});
3
3
  import "./src/routes/**";
4
+ import "../../src/routes/**";
4
5
  let tina4 = new Tina4();
package/src/routes/example.ts DELETED
@@ -1,35 +0,0 @@
1
- import {Tina4} from "../../tina4/Tina4";
2
- import {Get} from "../../tina4/Get";
3
- import {Post} from "../../tina4/Post";
4
- import {Api} from "../../tina4/Api";
5
-
6
- (new Get()).add('/test/hello', function (response, request) {
7
- let content = `<h1>Hello World Again!</h1>`;
8
- response(content, 200, 'text/html')
9
- });
10
-
11
- (new Get()).add('/test', function (response, request) {
12
- Tina4.renderTemplate(`<h1>Hello {{name}}!</h1><form target="root" method="post"><input type="text" name="firstName" value="{{firstName}}"><button>Send</button></form>`, {
13
- name: "Andre",
14
- firstName: "Andre"
15
- }, function (html) {
16
- console.log('OOO');
17
- response(html, 200, 'text/html')
18
- }
19
- );
20
- });
21
-
22
- (new Get()).add('/test/{id}', function (response, request) {
23
- Tina4.renderTemplate(`<h1>Hello parsing params ok {{id}}!</h1>`, request, function(html) {
24
- response(html, 200, 'text/html');
25
- });
26
- });
27
-
28
-
29
-
30
-
31
- (new Get()).add('/', function (response, request) {
32
- Tina4.renderTemplate(`index.twig`, {test: "Hello World!", title: "Index Page"}, function(html) {
33
- response (html, 200, 'text/html');
34
- });
35
- });
package/src/routes/testing.ts DELETED
@@ -1,13 +0,0 @@
1
- import {Post} from "../../tina4/Post";
2
- import {Api} from "../../tina4/Api";
3
- import {Tina4} from "../../tina4/Tina4";
4
-
5
- (new Post()).add("/test", function (response, request) {
6
- //Send and API request
7
- console.log('POST WORKING', request);
8
- Api.sendRequest('', request, 'GET', function(result) {
9
- Tina4.renderTemplate(`contact.twig`, result, function(html){
10
- response(html, 200);
11
- });
12
- });
13
- });
package/src/templates/base.twig DELETED
@@ -1,14 +0,0 @@
1
- <div>
2
- <nav>
3
- <h1>Hello World Hello</h1>
4
- <a href="#" onclick="navigate('/')">Home</a>
5
- <a href="#" onclick="navigate('/test/hello')">Test</a>
6
- <a href="#" onclick="navigate('/test/Hello')">Hello</a>
7
- <a href="#" onclick="navigate('/test')">Hello</a>
8
- </nav>
9
- </div>
10
- <div>
11
- {% block content %}
12
- Here is content
13
- {% endblock %}
14
- </div>
package/src/templates/contact.twig DELETED
@@ -1,5 +0,0 @@
1
- <h1>Hello</h1>
2
- {% for result in results %}
3
- {{result.name.first}}
4
- <img src="{{result.picture.large}}">
5
- {% endfor %}
package/src/templates/index.twig DELETED
@@ -1,4 +0,0 @@
1
- {% extends "base.twig" %}
2
- {% block content %}
3
- {{ test }}
4
- {% endblock %}