|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="ja"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <title>micro-template.js Demo</title> |
| 6 | + <style> |
| 7 | + body { font-family: sans-serif; margin: 2em; } |
| 8 | + textarea { width: 100%; height: 7em; margin-bottom: 1em; font-family: monospace; } |
| 9 | + pre { background: #f8f8f8; padding: 1em; border: 1px solid #ccc; min-height: 3em; } |
| 10 | + label { font-weight: bold; display: block; margin-top: 1em; } |
| 11 | + .error { color: red; font-weight: bold; } |
| 12 | + </style> |
| 13 | +</head> |
| 14 | +<body> |
| 15 | + <h1>micro-template.js Demo</h1> |
| 16 | + <label for="template">Template</label> |
| 17 | + <textarea id="template" placeholder="<h1><%= title %></h1>\n<p><%= message %></p>"></textarea> |
| 18 | + |
| 19 | + <label for="stash">Stash (JSON)</label> |
| 20 | + <textarea id="stash" placeholder='{"title": "Hello", "message": "こんにちは micro-template.js!"}'></textarea> |
| 21 | + |
| 22 | + <button id="render">Render</button> |
| 23 | + <span id="status"></span> |
| 24 | + |
| 25 | + <label for="output">Output</label> |
| 26 | + <pre id="output"></pre> |
| 27 | + |
| 28 | + <script type="module"> |
| 29 | + // micro-template.js を ESMとしてimport |
| 30 | + import { template } from "../lib/micro-template.js"; |
| 31 | + |
| 32 | + window.template = template; |
| 33 | + |
| 34 | + // UI |
| 35 | + const templateEl = document.getElementById('template'); |
| 36 | + const stashEl = document.getElementById('stash'); |
| 37 | + const outputEl = document.getElementById('output'); |
| 38 | + const statusEl = document.getElementById('status'); |
| 39 | + const renderBtn = document.getElementById('render'); |
| 40 | + |
| 41 | + function render() { |
| 42 | + statusEl.textContent = ''; |
| 43 | + let stash; |
| 44 | + try { |
| 45 | + stash = JSON.parse(stashEl.value); |
| 46 | + } catch (e) { |
| 47 | + outputEl.textContent = ''; |
| 48 | + statusEl.textContent = 'JSON parse error: ' + e.message; |
| 49 | + statusEl.className = 'error'; |
| 50 | + return; |
| 51 | + } |
| 52 | + try { |
| 53 | + const html = template(templateEl.value, stash); |
| 54 | + outputEl.textContent = html; |
| 55 | + statusEl.textContent = 'OK'; |
| 56 | + statusEl.className = ''; |
| 57 | + } catch (e) { |
| 58 | + console.log(e) |
| 59 | + console.error(e); |
| 60 | + outputEl.textContent = ''; |
| 61 | + statusEl.textContent = 'Template error: ' + String(e); |
| 62 | + statusEl.className = 'error'; |
| 63 | + } |
| 64 | + } |
| 65 | + renderBtn.addEventListener('click', render); |
| 66 | + // デフォルト値 |
| 67 | + templateEl.value = `<h1><%= title %></h1>\n<p><%= message %></p>`; |
| 68 | + stashEl.value = JSON.stringify({ |
| 69 | + title: "Hello", |
| 70 | + message: "こんにちは micro-template.js!" |
| 71 | + }, null, 2); |
| 72 | + render(); |
| 73 | + </script> |
| 74 | +</body> |
| 75 | +</html> |
0 commit comments