You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Mithril 1.1.1 template DSL for Haxe. Transpiles Jade/Pug like templates into Mithril hyperscript.
21
6
22
7
## Syntax
23
8
24
-
Ithril views must be declared inside brackets. If used in a method they will always return.
9
+
Mithril views can be declared inside classes that extend `ithril.Component` or implement `ithril.IthrilView`. The declaration must be inside brackets marked with the `@m` meta.
If no attributes are needed, you don't have to define a type parameter:
108
-
`class MyComponent extends Component`
125
+
Embedding javascript or CSS assets requires marking content as trusted so it is not automatically escaped. Use the `@trust` meta:
126
+
```
127
+
(style > @trust css)
128
+
(script)
129
+
[@trust javascript]
130
+
```
109
131
110
-
You can also require an instance:
111
-
`class Label extends Component<String>`
112
-
Usage would be:
113
-
`(Label ('My text'))`
132
+
## Components
114
133
115
-
State can be accessed inside the component:
134
+
Custom components can be created by extending `ithril.Component`. A component can then be used in a view like any other element:
116
135
```haxe
117
-
class MyComponent extends Component<{attr1: Int, attr2: Int}> {
118
-
public function view() [
119
-
(div.my-comp)
120
-
(span.attr > 'Attribute 1'+state.attr1)
121
-
(span.attr > 'Attribute 2'+state.attr2)
122
-
];
136
+
class Hello extends Component {
137
+
public override function view (vnode:Vnode) @m[
138
+
(div.component > 'Hello ' + vnode.attrs.name)
139
+
];
140
+
}
141
+
142
+
class World implements IthrilView {
143
+
public function helloView(vnode:Vnode) @m[
144
+
(Hello(name='World'))
145
+
]
123
146
}
124
147
```
125
148
126
149
#### Children
127
150
128
-
Children of a Component can be used however you like (`children => child` is [map syntax](#map)):
151
+
Children of a Component can be accessed via `vnode.children`:
129
152
```haxe
130
153
class List extends Component {
131
-
public function view() [
154
+
public function view(vnode:Vnode) [
132
155
(ul)
133
-
(children => child)
156
+
(vnode.children => child)
134
157
(li > child)
135
158
];
136
159
}
@@ -155,36 +178,67 @@ And would output:
155
178
156
179
#### Lifecycle
157
180
158
-
A component is cached while it's in view. You can perform an action the moment it's created or destroyed (no longer in view) by using `mount` and `unmount`. This can be useful to, for example, set/unset listeners. These methods are only called on the client side.
181
+
Mithril creates, reuses, and destroys components as specified by it's diffing algorithm. The lifecycle of a `Component` can be observed by overriding these methods:
182
+
```
183
+
public function oninit(vnode:Vnode) {}
184
+
public function oncreate(vnode:Vnode) {}
185
+
public function onupdate(vnode:Vnode) {}
186
+
public function onbeforeremove(vnode:Vnode) {}
187
+
public function onremove(vnode:Vnode) {}
188
+
public function onbeforeupdate(vnode:Vnode) {}
189
+
```
190
+
You can also specify these methods as attributes of both regular elements and components:
Mithril manages a component state by cloning a component's fields post-constructor and storing them in `vnode.state`. Because component instances can be cached and reused by Mithril, accessing state must be thru `vnode.state` unless the initial state is being set.
167
199
168
-
function resize(e)
169
-
trace('Resize event!');
200
+
```
201
+
class StatefulComponent extends Component {
202
+
var someState = "my state"; // set initial state value here or in constructor
203
+
var someMoreState:String;
204
+
205
+
override public function new(vnode:Vnode) {
206
+
someMoreState = "other state"; // can also set initial component state here
207
+
}
208
+
209
+
override public function view(vnode:Vnode) @m[
210
+
(div > vnode.state.someState) // access it via vnode.state
211
+
[vnode.state.someMoreState]
212
+
]
170
213
}
171
214
```
172
215
173
216
#### Rendering
174
217
175
-
Components can be rendered by passing an instance to mithril:
176
-
`M.mount(js.Browser.document.body, component);`
218
+
Components can be rendered by passing a Component class to Mithril:
219
+
```
220
+
M.mount(js.Browser.document.body, MyComponent);
221
+
```
222
+
223
+
Or may be rendered on the server as html (string):
mithril.M.mount(js.Browser.document.body, new Web());
263
+
M.mount(js.Browser.document.body, new Web());
210
264
#end
211
265
}
212
266
}
213
267
```
214
268
215
269
## Output
216
270
217
-
Everything gets compiled to simple objects, using [this notation](http://lhorie.github.io/mithril/optimizing-performance.html#compiling-templates) so the output can be used directly with Mithril. Use `ithril.HTMLRenderer.render` to render the output to a string.
271
+
`@m[ (div(attrs)) ]` is transpiled to Mithril hyperscript `m('div', attrs)`. On the browser end, it's passed directly to Mithril. In server instances `ithril.HTMLRenderer` can be is used to render HTML.
272
+
273
+
## Sample Website
274
+
275
+
An example website can be found at `examples/website`. You will need `node`, `npm`, `sass`, and either `closure` or `uglifyjs` installed in order to build and run it.
276
+
277
+
Initial build: (this will run `npm install`)
278
+
```
279
+
cd examples/website
280
+
haxe build.hxml
281
+
```
282
+
283
+
Start webserver: (listens on localhost:4200, and restarts when webserver.js changes)
0 commit comments