components

1.6 KB

1. // demo.hl — `/code-editor`: two editors (Hybriel and JavaScript) and the text each holds shown below. The editor announces a change
2. // with a bubbling DOM `input` event on its hidden field: `e.target.value` is the text.
3. parent '../main.hl'
4. import CodeEditor from './code-editor.hl'
6. __title = 'Code editor · Hybriel components'
7. static NL = "
8. "
9. static TAB = " "
10. String hl = '// a Hybriel component' + NL + 'String title = \'Hello\'' + NL + NL + 'greet(name) {' + NL + TAB + 'return "Hi " + name' + NL + '}' + NL + NL + 'View {' + NL + TAB + 'h1 { title }' + NL + '}'
11. String js = 'function add(a, b) {' + NL + TAB + '/* sum */' + NL + TAB + 'return a + b + 42' + NL + '}' + NL + 'const text = `sum: ${add(1, 2)}`'
12. View {
13. codeEditorDemo {
14. h1 { "Code editor" }
15. p { class = "muted" "Type code: it is coloured while you type and the line numbers follow. Tab indents, Shift+Tab outdents, Ctrl+Z / Ctrl+Shift+Z undo and redo, Enter keeps the indent, brackets and quotes close themselves." }
16. form { id = "code-form" method = "get" action = "/code-editor" on input(e) { emit demoCode(e) }
17. h2 { "Hybriel" }
18. CodeEditor { name = "hybriel" value = hl language = "hybriel" }
19. pre { id = "code-value-hybriel" hl }
20. h2 { "JavaScript, indented with 2 spaces" }
21. CodeEditor { name = "js" value = js language = "js" spaces = 2 }
22. pre { id = "code-value-js" js }
23. p { button { type = "submit" "Send (posts both texts)" } }
24. }
25. p { a { id = "readme" href = "/code-editor/README.md" "README (how to use it)" } }
26. }
27. }
28. on demoCode(e) {
29. if (e.target.name == 'hybriel') { hl = e.target.value }
30. if (e.target.name == 'js') { js = e.target.value }
31. }