|
9 | 9 |
|
10 | 10 | WIP come back soon
|
11 | 11 |
|
12 |
| -## Idea |
13 |
| - |
14 |
| -The idea is to generate valid javascript files from riot tag files |
15 |
| -For example `my-tag.tag`: |
16 |
| -```html |
17 |
| -<template> |
18 |
| - <p onclick={ updateMessage('goodbye') }> |
19 |
| - { message } |
20 |
| - </p> |
21 |
| - |
22 |
| - {#if error} |
23 |
| - <div> |
24 |
| - <p>{ error }</p> |
25 |
| - </div> |
26 |
| - {#else} |
27 |
| - no errors |
28 |
| - {/if} |
29 |
| - |
30 |
| - <ul> |
31 |
| - {#each item in items} |
32 |
| - <li>{ item.value }</li> |
33 |
| - {/each} |
34 |
| - </ul> |
35 |
| -</template> |
36 |
| - |
37 |
| -<script> |
38 |
| -export default { |
39 |
| - error: 'this is an error', |
40 |
| - message: 'nice message', |
41 |
| - items: [{ value: 'one'}, { value: 'two'}] |
42 |
| - updateMessage(message) { |
43 |
| - this.update({ message, error: false }) |
44 |
| - } |
45 |
| -} |
46 |
| -</script> |
47 |
| - |
48 |
| -<style> |
49 |
| - :root { |
50 |
| - background: red; |
51 |
| - } |
52 |
| -</style> |
53 |
| -``` |
54 |
| - |
55 |
| -Will become: |
56 |
| - |
57 |
| -```js |
58 |
| -riot.define('my-tag', { |
59 |
| - error: 'this is an error', |
60 |
| - message: 'nice message', |
61 |
| - items: [{ value: 'one'}, { value: 'two'}], |
62 |
| - updateMessage(message) { |
63 |
| - this.update({ message, error: false }) |
64 |
| - } |
65 |
| - get css() { |
66 |
| - return ` |
67 |
| - :root { |
68 |
| - background: red; |
69 |
| - } |
70 |
| - ` |
71 |
| - }, |
72 |
| - render(h) { |
73 |
| - return h` |
74 |
| - <p onclick="${ this.updateMessage.bind(this, 'goodbye') }"> |
75 |
| - ${ this.message } |
76 |
| - </p>${ |
77 |
| - this.error ? ` |
78 |
| - <div> |
79 |
| - <p>${ this.error }</p> |
80 |
| - </div> |
81 |
| - ` : `no errors` |
82 |
| - }<ul>${ |
83 |
| - Array.from(this.items).map((item) => { |
84 |
| - return (` |
85 |
| - <li>${ item.value }</li> |
86 |
| - `) |
87 |
| - }) |
88 |
| - }</ul> |
89 |
| - `; |
90 |
| - } |
91 |
| -}) |
92 |
| -``` |
93 |
| - |
94 |
| -Check for example [this demo](https://jsfiddle.net/gianlucaguarini/ed31q3qk/) to see how it's going to work |
95 |
| - |
96 | 12 | ## New specs
|
97 | 13 |
|
98 | 14 | - All the code in the `<script>` tag will be left untouched without adding any extra riot magic
|
99 |
| -- The tag templates must be wrapped into a `<template>` tag |
100 | 15 | - The relation `riot tag => file.tag` will be 1 to 1 so it will be not possible to define multiple tags in the same file
|
101 | 16 | - It will be not possible to define multiple `<script><template><style>` tags in the same file
|
102 | 17 |
|
|
0 commit comments