Skip to content

Commit a23409e

Browse files
marcodptmarcodpt
committed
text attribute set the full text, with remove null values, greatly simplify index.js function (it also compile the node tag), greatly simplify all wrappers
1 parent d4e728d commit a23409e

15 files changed

+192
-188
lines changed

‎README.md

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,29 @@ It works with all javascript frameworks that support
1313
[hyperscript](https://github.com/hyperhype/hyperscript).
1414

1515
## Usage as a template engine
16-
### render(templateId, scope, target)
17-
Renders the template using the scope. If a target node is passed, the result
18-
will be inserted into the node, otherwise it will return the DOM element.
16+
### compile(element) -> render(scope)
17+
Compiles the element as a template.
18+
Returns a function that interpolate the scope inside the element.
19+
You can render as many times you like.
1920

20-
- templateId: the id of the view template tag in the current page.
21+
- element: Any DOM element.
2122
- scope: template scope to be used.
22-
- target: optional DOM element where the result will be displayed. If none
23-
target is passed it will return a DOM element with the result.
2423

2524
```html
2625
<html>
2726
<head>
2827
<script type="module">
29-
import render from "https://cdn.jsdelivr.net/gh/marcodpt/tint/template.js"
30-
31-
render('my-view', {
28+
import compile from "./template.js"
29+
const render = compile(document.getElementById("app"))
30+
render({
3231
message: "Hello World!"
33-
}, document.getElementById("app"))
32+
})
3433
</script>
3534
</head>
3635
<body>
37-
<div id="app"></div>
38-
39-
<template id="my-view">
40-
<h1 :text="message"></h1>
41-
</template>
36+
<div id="app">
37+
<h1 :text="message">Loading...</h1>
38+
</div>
4239
</body>
4340
</html>
4441
```
@@ -54,63 +51,55 @@ You can check the result:
5451
- [source](https://raw.githubusercontent.com/marcodpt/tint/main/hello.html)
5552

5653
## Building a todo app
57-
Now we gonna show examples wrappers you can use with some hyperscript
58-
frameworks that you can use to construct real world applications.
54+
Now we will show examples with hyperscript frameworks to build real world
55+
applications.
5956

6057
In all examples we use the same `body`. This is a full demonstration of the
6158
power of layout separation.
6259

6360
```html
6461
<body>
65-
<main id="app"></main>
66-
<template id="todo">
62+
<main id="app">
6763
<h1>To do list</h1>
6864
<input type="text" :value="value" :oninput="NewValue">
6965
<ul>
7066
<li :each="todos" :text></li>
7167
</ul>
7268
<button :onclick="AddTodo">New!</button>
73-
</template>
69+
</main>
7470
</body>
7571
```
7672

7773
### Todo without any framework or virtual DOM
78-
This is not the recommended way to do it.
79-
You will update the DOM more than necessary, you will lose focus and maybe
80-
other things.
74+
This is not the recommended way to do this.
75+
You'll update the DOM more than necessary, lose focus, and maybe other things.
8176
But here's a demo anyway.
8277

8378
```js
84-
import render from "https://cdn.jsdelivr.net/gh/marcodpt/tint/template.js"
79+
import compile from "https://cdn.jsdelivr.net/gh/marcodpt/tint/template.js"
80+
81+
const render = compile(document.getElementById("app"))
8582

8683
const state = {
8784
todos: [],
8885
value: "",
8986
AddTodo: () => {
9087
state.todos.push(state.value)
9188
state.value = ""
92-
rerender()
89+
render(state)
9390
},
9491
NewValue: ev => {
9592
state.value = ev.target.value
9693
}
9794
}
9895

99-
const node = document.getElementById("app")
100-
const rerender = () => render('todo', state, node)
101-
102-
rerender()
96+
render(state)
10397
```
10498

10599
- [live](https://marcodpt.github.io/tint/template.html)
106100
- [source](https://raw.githubusercontent.com/marcodpt/tint/main/template.html)
107101

108102
### Todo with [Superfine](https://github.com/jorgebucaran/superfine)
109-
Here we changed a little bit the usage of superfine, you must pass an object as
110-
state, and you need to add inside the object:
111-
- nodeId: The id of the DOM element where you will mount the app.
112-
- templateId: The id of the template tag with your view.
113-
114103
```js
115104
import superfine from "https://cdn.jsdelivr.net/gh/marcodpt/tint/superfine.js"
116105

@@ -136,22 +125,20 @@ const setState = superfine(state)
136125
- [source](https://raw.githubusercontent.com/marcodpt/tint/main/superfine.html)
137126

138127
### Todo with [Hyperapp](https://github.com/jorgebucaran/hyperapp)
139-
We eliminated `view` property because `tint` will generate it automatically
140-
based on `templateId` that you pass to `app`.
128+
We delete the `view` property because `tint` will automatically generate it
129+
based on the `node` that is passed to the `app`.
141130

142-
We've also introduced an `actions` object for your static methods, but you can
143-
also enter any variable that is a constant here.
131+
We've also introduced an `actions` object for your static methods.
144132

145133
Everything else is exactly equals on hyperapp.
146134

147-
[Here](https://github.com/jorgebucaran/hyperapp/issues/1098) is a nice
148-
discussion where this wrapper came to existence.
135+
[Here](https://github.com/jorgebucaran/hyperapp/issues/1098) is the thread
136+
that gave rise to this wrapper.
149137

150138
```js
151139
import app from "https://cdn.jsdelivr.net/gh/marcodpt/tint/hyperapp.js"
152140

153141
app({
154-
templateId: 'todo',
155142
actions: {
156143
AddTodo: state => ({
157144
...state,
@@ -175,17 +162,17 @@ app({
175162
- [source](https://raw.githubusercontent.com/marcodpt/tint/main/hyperapp.html)
176163

177164
### Todo with [Mithril.js](https://github.com/MithrilJS/mithril.js)
178-
In this example you also must import mithril in the page by yourself before the
165+
In this example, you must also import mithril into the page yourself before the
179166
wrapper.
180167

181-
You can pass any of the components methods like: `oninit`, `oncreate`, etc.
182-
And it will work fine.
168+
The `view` method is generated by the `state` property.
169+
All other components methods are available. Ex: `oninit`, `oncreate`, etc.
183170

184171
```js
185172
import component from 'https://cdn.jsdelivr.net/gh/marcodpt/tint/mithril.js'
186173

174+
const app = document.getElementById("app")
187175
const state = {
188-
templateId: 'todo',
189176
todos: [],
190177
value: "",
191178
AddTodo: () => {
@@ -196,17 +183,23 @@ const state = {
196183
state.value = ev.target.value
197184
}
198185
}
186+
const todo = component(app, {
187+
oninit: () => {
188+
console.log('component oninit')
189+
},
190+
state: state
191+
})
199192

200-
m.mount(document.getElementById("app"), component(state))
193+
m.mount(app, todo)
201194
```
202195

203196
- [live](https://marcodpt.github.io/tint/mithril.html)
204197
- [source](https://raw.githubusercontent.com/marcodpt/tint/main/mithril.html)
205198

206199
### Todo with [preact](https://github.com/preactjs/preact)
207-
Our preact wrapper is not the best. But it serves to show an example
200+
Our `preact` wrapper is not the best. But it serves to show an example
208201
with a global state and no components. If you think you can improve this
209-
wrapper please send a pull request.
202+
wrapper, please submit a pull request.
210203

211204
```js
212205
import preact from "https://cdn.jsdelivr.net/gh/marcodpt/tint/preact.js"
@@ -231,8 +224,8 @@ const render = preact(state, document.getElementById("app"))
231224
- [live](https://marcodpt.github.io/tint/preact.html)
232225
- [source](https://raw.githubusercontent.com/marcodpt/tint/main/preact.html)
233226

234-
## Usage as a low level library
235-
To build all the wrappers for the TODO application, we use this package as a
227+
## Usage as a low-level library
228+
To build all the wrappers for the `TODO` application, we use this package as a
236229
low-level library.
237230

238231
```js
@@ -255,7 +248,7 @@ If you created something interesting, or a wrapper for another framework or
255248
improved any example. Submit a pull request or open an issue with your
256249
code.
257250

258-
### tint(h, text) -> render
251+
### tint(h, text) -> compile
259252

260253
Transforms all template tags (with id attribute) within the current page into a
261254
[hyperscript](https://github.com/hyperhype/hyperscript) function.
@@ -268,20 +261,22 @@ DOM or virtual DOM element, if no function is passed, it will use
268261
[hyperscript](https://github.com/hyperhype/hyperscript) function that create
269262
DOM or vDOM text nodes.
270263

271-
### render(templateId, scope, rootTag, rootAttributes) -> element
264+
### compile(element, templateId) -> render(scope) -> DOM/vDOM element
272265

273266
Return the DOM or vDOM element (based on the `h` function) that is generated
274-
by renderering the `scope` with the template.
275-
276-
- templateId: The name of the template. Observe that you can only use as
277-
custom tags templates that id contains `-`. As described
278-
[here](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
279-
- scope: The data passed to interpolate the template, any JSON object even
280-
with javascript functions is valid!
281-
- rootTag: The optional root where the resulted should be mounted. If no root
282-
is passed it will be mounted inside a `div` tag.
283-
- rootAttributes: The optional attributes object (with the exactly hypescript
284-
syntax of the `h` function). No attributes is the default.
267+
by renderering the `scope` within the `element`.
268+
269+
Optionally, you can use a `templateId` to replace the `element`'s inner HTML
270+
with your own contents.
271+
272+
- element: The `element` that will be the root of the result. If you don't
273+
pass a `templateId`, it will be treated as a complete template. in case you
274+
provide a `templateId` it will only be used as the root of the result,
275+
ignoring its content.
276+
- templateId: The optional name of the template you want to render.
277+
- scope: The data passed to interpolate the `element`
278+
(or `templateId` if passed),
279+
any JSON object even with javascript functions is valid!
285280

286281
## Docs for the template engine
287282
### :attribute
@@ -374,12 +369,12 @@ el.innerHTML
374369
#### Append text to node
375370
```html
376371
<template id="text-1">
377-
<h1 :text="name">Hello </h1>
372+
<h1 :text="content">Hello World!</h1>
378373
</template>
379374
```
380375
```js
381376
render('text-1', {
382-
name: "John"
377+
content: "Hello John!"
383378
}).innerHTML
384379
```
385380
```html
@@ -654,13 +649,20 @@ render('with-2', {
654649
<template id="with-3">
655650
<div :with="0">
656651
<p :text="0"></p>
657-
<p :text="1"></p>
652+
<template :with="1">
653+
<p :text=""></p>
654+
</template>
658655
</div>
659656
<div :with="1">
660657
<p :text=""></p>
661658
</div>
662659
<div :with="2">
663-
<p :text=""></p>
660+
<template :with="">
661+
<p :text=""></p>
662+
</template>
663+
</div>
664+
<div :with="3">
665+
<p>This will not render</p>
664666
</div>
665667
</template>
666668
```
@@ -801,7 +803,7 @@ With the following tag in your `HTML` `body`
801803
```html
802804
<template id="custom-1">
803805
<div>
804-
<my-button :btn="button" :text="title">Go </my-button>
806+
<my-button :btn="button" :text="title">Action</my-button>
805807
</div>
806808
</template>
807809
```
@@ -813,15 +815,15 @@ render('custom-1', {
813815
```
814816
```html
815817
<div>
816-
<button class="btn btn-primary">Go Submit</button>
818+
<button class="btn btn-primary">Submit</button>
817819
</div>
818820
```
819821

820822
#### Iterate with custom tags.
821823
```html
822824
<template id="custom-2">
823825
<div>
824-
<my-button :each="" :btn="button" :text="title">Go </my-button>
826+
<my-button :each="" :btn="button" :text="title"></my-button>
825827
</div>
826828
</template>
827829
```
@@ -833,8 +835,8 @@ render('custom2', [
833835
```
834836
```html
835837
<div>
836-
<button class="btn btn-secondary">Go Cancel</button>
837-
<button class="btn btn-primary">Go Submit</button>
838+
<button class="btn btn-secondary">Cancel</button>
839+
<button class="btn btn-primary">Submit</button>
838840
</div>
839841
```
840842

@@ -936,19 +938,19 @@ render('my-list', [
936938
```
937939

938940
## Philosophy
939-
- Separation: Functions and data transformations belong to javascript, design
940-
and visual presentation to html and css, and the data belongs to database.
941+
- Separation: Functions and data transformations belong in javascript, design
942+
and visual presentation to the html and css, and the data belongs to the database.
941943
- Designers and people with no javascript knowledge should understand it
942944
and quickly become productive.
943945
- Templates must be valid `XML`/`HTML` that can be inserted into a
944946
`template` tag.
945-
- Should not conflict with other templates engines and frameworks.
946-
- Every layout should be written only once, without repetition.
947+
- It must not conflict with other templates engines and frameworks.
948+
- Each layout should be written only once, without repetition.
947949
- Simplicity matters.
948-
- Beautiful syntax matters.
950+
- Elegant syntax is important.
949951

950952
## Influences and thanks
951-
This work is hugely influenced by this amazing template engines and frameworks:
953+
This work is hugely influenced by these amazing template engines and frameworks:
952954
- [mustache](https://mustache.github.io/mustache.5.html)
953955
- [transparency](https://github.com/leonidas/transparency)
954956
- [thymeleaf](https://www.thymeleaf.org/)
@@ -968,12 +970,12 @@ First, thanks for reading this far.
968970

969971
Everything within this documentation is tested
970972
[here](https://marcodpt.github.io/tint/).
971-
And it will always be so. Any changes to the documentation, any contributions
972-
MUST be present in the tests.
973+
And it will always like this. Any changes to the documentation,
974+
any contributions MUST be present in the tests.
973975

974976
If the tests do not pass in your browser, if you find any bugs, please raise
975977
an issue.
976978

977979
Any syntax changes must be within the philosophy of this project.
978980

979-
It's a very simple project. Any contribution is highly appreciated.
981+
It's a very simple project. Any contribution is greatly appreciated.

‎hello.html

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,16 @@
55
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
66
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
77
<script type="module">
8-
import render from "./template.js"
9-
10-
render('my-view', {
8+
import compile from "./template.js"
9+
const render = compile(document.getElementById("app"))
10+
render({
1111
message: "Hello World!"
12-
}, document.getElementById("app"))
12+
})
1313
</script>
1414
</head>
1515
<body>
16-
<div id="app"></div>
17-
18-
<template id="my-view">
19-
<h1 :text="message"></h1>
20-
</template>
16+
<div id="app">
17+
<h1 :text="message">Loading...</h1>
18+
</div>
2119
</body>
2220
</html>

0 commit comments

Comments
 (0)