├── template
    ├── public
    │   ├── footer.html
    │   ├── header.html
    │   ├── examples
    │   │   ├── search.html
    │   │   ├── list.html
    │   │   ├── counter.html
    │   │   ├── icon-list.html
    │   │   ├── bind.html
    │   │   ├── form.html
    │   │   ├── article.html
    │   │   ├── fragment.html
    │   │   ├── edit.html
    │   │   └── data-show.html
    │   ├── style.css
    │   ├── index.html
    │   ├── base.js
    │   └── app.html
    ├── .gitignore
    ├── server
    │   ├── error.ts
    │   ├── env.ts
    │   ├── main.ts
    │   └── api.ts
    ├── tsconfig.json
    ├── package.json
    └── README.md
├── .npmignore
├── .gitignore
├── scripts
    ├── size.sh
    ├── update-hash.sh
    ├── hash.sh
    └── du.js
├── tsconfig.json
├── cli.ts
├── package.json
├── LICENSE
└── README.md


/template/public/footer.html:
--------------------------------------------------------------------------------
1 | this is footer (loaded from footer.html)


--------------------------------------------------------------------------------
/template/public/header.html:
--------------------------------------------------------------------------------
1 | this is header (loaded form header.html)


--------------------------------------------------------------------------------
/template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | *.tgz
6 | dist/
7 | .env
8 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .dccache
2 | *.tgz
3 | pnpm-lock.yaml
4 | cli.ts
5 | scripts/
6 | tsconfig.json
7 | !template/tsconfig.json
8 | tsconfig.tsbuildinfo
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | package-lock.json
 3 | pnpm-lock.yaml
 4 | yarn.lock
 5 | *.min.js
 6 | *.gz
 7 | *.tgz
 8 | dist/
 9 | tsconfig.tsbuildinfo
10 | cli.js
11 | base.js
12 | 


--------------------------------------------------------------------------------
/template/server/error.ts:
--------------------------------------------------------------------------------
1 | export class HttpError extends Error {
2 |   status?: number
3 |   constructor(public statusCode: number, message: string) {
4 |     super(message)
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/scripts/size.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -e
 3 | set -o pipefail
 4 | 
 5 | cd template/public
 6 | npx --yes esbuild base.js --minify > base.min.js
 7 | gzip -f -k base.min.js
 8 | 
 9 | ../../scripts/du.js base.*
10 | 


--------------------------------------------------------------------------------
/scripts/update-hash.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 | set -o pipefail
4 | ./scripts/size.sh
5 | cp template/public/base.js .
6 | cp template/public/base.min.js .
7 | ./scripts/hash.sh base.js >> README.md
8 | ./scripts/hash.sh base.min.js >> README.md
9 | 


--------------------------------------------------------------------------------
/template/server/env.ts:
--------------------------------------------------------------------------------
 1 | import { config } from 'dotenv'
 2 | import populateEnv from 'populate-env'
 3 | 
 4 | config()
 5 | 
 6 | export let env = {
 7 |   NODE_ENV: 'development',
 8 |   PORT: 8100,
 9 | }
10 | 
11 | populateEnv(env, { mode: 'halt' })
12 | 


--------------------------------------------------------------------------------
/template/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2017",
 4 |     "module": "commonjs",
 5 |     "esModuleInterop": true,
 6 |     "forceConsistentCasingInFileNames": true,
 7 |     "strict": true,
 8 |     "skipLibCheck": true,
 9 |     "outDir": "dist",
10 |     "incremental": true
11 |   }
12 | }


--------------------------------------------------------------------------------
/template/public/examples/search.html:
--------------------------------------------------------------------------------
 1 | <script src="base.js"></script>
 2 | <form action="/search" onsubmit="submitForm(event).then(handleSearchRes)">
 3 |   <input name="q" />
 4 |   <button>search</button>
 5 | </form>
 6 | <script>
 7 |   function handleSearchRes(res) {
 8 |     console.log('res:', res)
 9 |   }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2017",
 4 |     "module": "commonjs",
 5 |     "esModuleInterop": true,
 6 |     "forceConsistentCasingInFileNames": true,
 7 |     "strict": true,
 8 |     "skipLibCheck": true,
 9 |     "incremental": true
10 |   },
11 |   "include": [
12 |     "cli.ts"
13 |   ]
14 | }


--------------------------------------------------------------------------------
/scripts/hash.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | # generate integrity attribute
 3 | set -e
 4 | set -o pipefail
 5 | hash=$(shasum -b -a 384 $1 | awk '{print $1}' | xxd -r -p | base64)
 6 | echo "<script
 7 |   src=\"https://cdn.jsdelivr.net/npm/data-template@1.10.1/$1\"
 8 |   crossorigin=\"anonymous\"
 9 |   integrity=\"sha384-$hash\"
10 | ></script>"
11 | 


--------------------------------------------------------------------------------
/scripts/du.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | // using readFile instead of stat to be compatible to MacOS
 4 | let { readFileSync } = require('fs')
 5 | let { argv } = process
 6 | 
 7 | let files = argv.slice(2)
 8 | 
 9 | let maxFileLength = Math.max(0, ...files.map(file => file.length))
10 | 
11 | for (let file of files) {
12 |   let size = readFileSync(file).length
13 |   let padding = ' '.repeat(maxFileLength - file.length)
14 |   let line = file + padding + '\t' + size
15 |   if (size >= 1024) {
16 |     line += `\t(${(size / 1024).toFixed(1)} KB)`
17 |   }
18 |   console.log(line)
19 | }
20 | 


--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-server",
 3 |   "version": "0.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "ts-node-dev server/main.ts",
 8 |     "prod": "NODE_ENV=production node dist/main.js",
 9 |     "test": "tsc --noEmit",
10 |     "minify": "esbuild public/base.js --minify > public/base.min.js",
11 |     "tsc": "tsc -p .",
12 |     "build": "run-p minify tsc"
13 |   },
14 |   "keywords": [],
15 |   "author": "",
16 |   "license": "ISC",
17 |   "devDependencies": {
18 |     "@types/express": "^4.17.14",
19 |     "@types/node": "^18.7.23",
20 |     "esbuild": "^0.15.9",
21 |     "npm-run-all": "^4.1.5",
22 |     "ts-node": "^10.9.1",
23 |     "ts-node-dev": "^2.0.0",
24 |     "typescript": "^4.8.4"
25 |   },
26 |   "dependencies": {
27 |     "cast.ts": "^1.5.1",
28 |     "dotenv": "^16.0.2",
29 |     "express": "^4.18.1",
30 |     "listening-on": "^2.0.9",
31 |     "populate-env": "^2.0.0"
32 |   }
33 | }


--------------------------------------------------------------------------------
/template/public/style.css:
--------------------------------------------------------------------------------
 1 | @media (prefers-color-scheme: dark) {
 2 |   body {
 3 |     background-color: #222;
 4 |     color: #eee;
 5 |   }
 6 |   a {
 7 |     color: #cc0;
 8 |   }
 9 |   a:visited {
10 |     color: #0c0;
11 |   }
12 |   button[disabled] {
13 |     color: #000;
14 |   }
15 | }
16 | 
17 | [hidden] {
18 |   display: none !important;
19 | }
20 | 
21 | .error {
22 |   border: 1px solid red;
23 |   padding: 0.5rem;
24 |   width: fit-content;
25 | }
26 | 
27 | .highlight {
28 |   font-weight: bold;
29 | }
30 | 
31 | article img {
32 |   width: 200px;
33 |   height: 200px;
34 | }
35 | 
36 | img.small {
37 |   width: 64px;
38 |   height: 64px;
39 | }
40 | 
41 | ul.tags {
42 |   padding: 0;
43 | }
44 | ul.tags li {
45 |   list-style: none;
46 |   display: inline-block;
47 |   padding: 0.5rem;
48 |   border-radius: 1.5rem;
49 |   font-size: 0.8rem;
50 | }
51 | @media (prefers-color-scheme: dark) {
52 |   ul.tags li {
53 |     background-color: #555;
54 |   }
55 | }
56 | @media (prefers-color-scheme: light) {
57 |   ul.tags li {
58 |     background-color: #ccc;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/template/public/examples/list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Array Value Demo</title>
 8 |     <style>
 9 |       ul li + p {
10 |         display: none;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <h1>Array Value Demo</h1>
16 |     <main id="main" data-template="list" data-bind="lists"></main>
17 |     <template data-name="list">
18 |       <h2 data-text="title"></h2>
19 |       <ul>
20 |         <li data-text="items"></li>
21 |         <p>No items</p>
22 |       </ul>
23 |     </template>
24 |     <script src="base.js"></script>
25 |     <script>
26 |       // multiple class names separated by spaces are supported
27 |       let lists = [
28 |         { title: 'list 1', items: [1, 2, 3] },
29 |         { title: 'list 2', items: [] },
30 |         { title: 'list 3', items: [1, 3] },
31 |         { title: 'list 4', items: [3] },
32 |       ]
33 |       renderTemplate(main, { lists })
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/cli.ts:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | import { readFileSync, writeFileSync } from 'fs'
 3 | import { copyTemplate, getDest, hasExec } from 'npm-init-helper'
 4 | import { basename, join } from 'path'
 5 | 
 6 | async function main() {
 7 |   let srcDir = join(__dirname, 'template')
 8 |   let dest = await getDest()
 9 |   await copyTemplate({
10 |     srcDir,
11 |     dest,
12 |     updatePackageJson: true,
13 |     verbose: true,
14 |   })
15 |   let name = basename(dest)
16 |   if (name !== 'my-app') {
17 |     // update project name in README.md
18 |     let file = join(dest, 'README.md')
19 |     let text = readFileSync(file)
20 |       .toString()
21 |       .replace(/my-app/g, name)
22 |     writeFileSync(file, text)
23 |   }
24 |   console.log(
25 |     `
26 | Done.
27 | 
28 | Get started by typing:
29 | 
30 |   cd ${dest}
31 | `.trim(),
32 |   )
33 | 
34 |   if (hasExec('pnpm')) {
35 |     console.log(`  pnpm i`)
36 |     console.log(`  npm run dev`)
37 |   } else if (hasExec('yarn')) {
38 |     console.log(`  yarn install`)
39 |     console.log(`  yarn dev`)
40 |   } else {
41 |     console.log(`  npm i`)
42 |     console.log(`  npm run dev`)
43 |   }
44 | }
45 | main().catch(e => console.error(e))
46 | 


--------------------------------------------------------------------------------
/template/public/examples/counter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <script src="base.js"></script>
11 |     <div>
12 |       <button onclick="dec()">-</button>
13 |       <span id="count"></span>
14 |       <button onclick="inc()">+</button>
15 |     </div>
16 |     <div>
17 |       <label>
18 |         <button onclick="overwrite()">overwrite value</button>:
19 |         <input id="input" type="number" />
20 |       </label>
21 |     </div>
22 |     <script>
23 |       getJSON('/counter', counter => (count.textContent = counter))
24 |       function updateValue(res) {
25 |         res.json().then(value => (count.textContent = value))
26 |       }
27 |       function inc() {
28 |         postJSON('/counter/inc', {}).then(updateValue)
29 |       }
30 |       function dec() {
31 |         postJSON('/counter/dec', {}).then(updateValue)
32 |       }
33 |       function overwrite() {
34 |         patchJSON('/counter', { value: input.valueAsNumber }).then(updateValue)
35 |       }
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/template/public/examples/icon-list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Icon List</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
10 |       integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
11 |       crossorigin="anonymous"
12 |       referrerpolicy="no-referrer"
13 |     />
14 |   </head>
15 |   <body>
16 |     <div id="fieldList" data-template="icon" data-bind="fields"></div>
17 |     <template data-name="icon">
18 |       <button>
19 |         <i data-class="icon"></i>
20 |         <span data-text="name"></span>
21 |       </button>
22 |     </template>
23 |     <script src="base.js"></script>
24 |     <script>
25 |       // multiple class names separated by spaces are supported
26 |       let fields = [
27 |         { icon: 'fa-solid fa-house', name: 'home' },
28 |         { icon: 'fa-solid fa-message', name: 'message' },
29 |         { icon: 'fa-regular fa-bell', name: 'notice' },
30 |       ]
31 |       renderTemplate(fieldList, { fields })
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/template/public/examples/bind.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>bind demo</title>
 8 |     <style>
 9 |       h1 {
10 |         font-size: 1.25rem;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <div>
16 |       <h1>renderData without bind</h1>
17 |       <div id="main0">
18 |         <div>title: <span data-text="title"></span></div>
19 |       </div>
20 |     </div>
21 |     <div>
22 |       <h1>renderTemplate with bind</h1>
23 |       <div id="main1" data-template="main" data-bind="data"></div>
24 |     </div>
25 |     <div>
26 |       <h1>renderTemplate without bind</h1>
27 |       <div id="main2" data-template="main"></div>
28 |     </div>
29 |     <template data-name="main">
30 |       <div>title: <span data-text="title"></span></div>
31 |     </template>
32 |     <script src="base.js"></script>
33 |     <script>
34 |       let json = {
35 |         data: { title: 'Hello inner world' },
36 |         title: 'Hello outer world',
37 |       }
38 |       renderData(main0, json)
39 |       renderTemplate(main1, json)
40 |       renderTemplate(main2, json)
41 |     </script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/template/server/main.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | import { print } from 'listening-on'
 3 | import { join } from 'path'
 4 | import { env } from './env'
 5 | import { readFileSync, readdirSync } from 'fs'
 6 | import { api } from './api'
 7 | import { HttpError } from './error'
 8 | 
 9 | let app = express()
10 | 
11 | if (
12 |   env.NODE_ENV == 'production' &&
13 |   readdirSync('public').includes('base.min.js')
14 | ) {
15 |   let base_min_js = readFileSync(join('public', 'base.min.js'))
16 |   app.get('/base.js', (req, res) => {
17 |     res.contentType('text/javascript')
18 |     res.end(base_min_js)
19 |   })
20 | }
21 | 
22 | app.use(express.static('public'))
23 | app.use(express.static('public/examples'))
24 | app.use(express.json())
25 | app.use(express.urlencoded({ extended: false }))
26 | 
27 | app.use(api)
28 | 
29 | let errorHandler: express.ErrorRequestHandler = (
30 |   error: HttpError,
31 |   req,
32 |   res,
33 |   next,
34 | ) => {
35 |   if (!(error instanceof HttpError)) {
36 |     console.error(error)
37 |   }
38 |   res.status(error.status || error.statusCode || 500)
39 |   if (req.header('Sec-Fetch-Mode') == 'navigate') {
40 |     res.end(String(error))
41 |   } else {
42 |     res.json({ error: String(error) })
43 |   }
44 | }
45 | app.use(errorHandler)
46 | 
47 | let port = env.PORT
48 | app.listen(port, () => {
49 |   print(port)
50 | })
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "data-template",
 3 |   "version": "1.10.1",
 4 |   "description": "Lightweight and minimal HTML template helpers powered by native DOM",
 5 |   "main": "base.js",
 6 |   "bin": {
 7 |     "data-template": "cli.js"
 8 |   },
 9 |   "scripts": {
10 |     "test": "tsc --noEmit",
11 |     "build": "run-p tsc base",
12 |     "base": "bash scripts/size.sh && cp template/public/base.*js .",
13 |     "tsc": "tsc -p ."
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/beenotung/data-template.git"
18 |   },
19 |   "keywords": [
20 |     "html",
21 |     "template",
22 |     "native",
23 |     "dom",
24 |     "data",
25 |     "dataset",
26 |     "attribute",
27 |     "render",
28 |     "lightweight",
29 |     "minimal",
30 |     "ajax",
31 |     "html-template",
32 |     "data-template",
33 |     "data-attribute",
34 |     "data-binding"
35 |   ],
36 |   "author": "",
37 |   "license": "BSD-2-Clause",
38 |   "bugs": {
39 |     "url": "https://github.com/beenotung/data-template/issues"
40 |   },
41 |   "homepage": "https://github.com/beenotung/data-template#readme",
42 |   "devDependencies": {
43 |     "@types/node": "^16.18.52",
44 |     "npm-run-all": "^4.1.5",
45 |     "ts-node": "^10.9.1",
46 |     "typescript": "^5.2.2"
47 |   },
48 |   "dependencies": {
49 |     "npm-init-helper": "^1.5.0"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 2-Clause License
 2 | 
 3 | Copyright (c) [2022], [Beeno Tung (Tung Cheung Leong)]
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | 1. Redistributions of source code must retain the above copyright notice, this
10 |    list of conditions and the following disclaimer.
11 | 
12 | 2. Redistributions in binary form must reproduce the above copyright notice,
13 |    this list of conditions and the following disclaimer in the documentation
14 |    and/or other materials provided with the distribution.
15 | 
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 | 


--------------------------------------------------------------------------------
/template/public/examples/form.html:
--------------------------------------------------------------------------------
 1 | <link rel="stylesheet" href="style.css" />
 2 | <style>
 3 |   form label {
 4 |     display: block;
 5 |   }
 6 | </style>
 7 | 
 8 | <div id="list" data-template="form" data-bind="items"></div>
 9 | 
10 | <template data-name="form">
11 |   <form onsubmit="submitForm(event)" method="post">
12 |     <fieldset>
13 |       <label>
14 |         input checked:
15 |         <input type="checkbox" data-checked="active" name="active" />
16 |       </label>
17 |       <label>
18 |         input readonly: <span data-text="readonly"></span>
19 |         <input data-readonly="readonly" name="title" />
20 |       </label>
21 |       <label>
22 |         input disabled: <span data-text="disabled"></span>
23 |         <input data-disabled="disabled" name="desc" />
24 |       </label>
25 |       <div>
26 |         dialog open: <span data-text="open"></span>
27 |         <dialog data-open="open">dialog content</dialog>
28 |       </div>
29 |       <pre data-text="json"></pre>
30 |       <input type="submit" value="submit" />
31 |     </fieldset>
32 |   </form>
33 | </template>
34 | 
35 | <script src="base.js"></script>
36 | <script>
37 |   let items = [
38 |     { active: true, readonly: true, disabled: true, open: true },
39 |     { active: false, readonly: false, disabled: false, open: false },
40 |   ]
41 |   for (let item of items) {
42 |     item.json = JSON.stringify(item, null, 2)
43 |   }
44 |   renderTemplate(list, { items })
45 | </script>
46 | 


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # my-app
 2 | 
 3 | Powered by [data-template](https://github.com/beenotung/data-template)
 4 | 
 5 | ## Get Started
 6 | 
 7 | ### Install dependencies
 8 | 
 9 | Run: `npm install`
10 | 
11 | Tips, you can also use below alternative installers:
12 | 
13 | - `pnpm i`
14 | - `yarn install`
15 | - `slnpm`
16 | 
17 | ### Start development server
18 | 
19 | Run: `npm run dev`
20 | 
21 | You will see output like below:
22 | 
23 | ```
24 | listening on http://localhost:8100
25 | listening on http://127.0.0.1:8100 (lo)
26 | listening on http://192.168.1.2:8100 (wlp3s0)
27 | ```
28 | 
29 | Then you can open http://localhost:8100 with a browser
30 | 
31 | The port number may be changed by the `PORT` variable in the `.env` file
32 | 
33 | ### Deploy production server
34 | 
35 | 1. Run `npm run build` to compile the typescript project and minify the `base.js`
36 | 2. Run `npm start` to start the node.js server
37 | 
38 | If you have installed pm2, you can start the server with: `pm2 start --name my-app dist/main.js`
39 | 
40 | In the production mode, the server will enable compression (e.g. gzip) when the client supports it.
41 | 
42 | It will also use the minified `base.min.js` when requested `base.min`, so you don't have to change the `src` attribute in the `<script>` tags.
43 | 
44 | ## Extra Tips
45 | 
46 | Checkout the `spdy` package, it supports http2 to reduce the network overhead when doing ajax.
47 | However, it requires https cert to function practically. Hence, it is not included in the template for simplicity.
48 | 
49 | If you are new to https cert, checkout `mkcert` for local development, and `certbot` for production deployment.
50 | 


--------------------------------------------------------------------------------
/template/public/examples/article.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Article Detail</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div id="app">
12 |       <header id="header" data-template="header.html"></header>
13 |       <main id="main" data-template="article" data-bind="article">
14 |         loading article...
15 |       </main>
16 |       <a href="/">Back to homepage</a>
17 |       <footer id="footer" data-template="footer.html"></footer>
18 |     </div>
19 |     <template data-name="article">
20 |       <p class="error" data-text="error" data-show="error"></p>
21 |       <article data-hidden="error">
22 |         <h1>
23 |           #<span data-text="id"></span>
24 |           <span data-text="title"></span>
25 |         </h1>
26 |         <p data-text="intro" data-class="highlight"></p>
27 |         <div>
28 |           <img
29 |             data-src="cover_image"
30 |             data-alt="cover_alt"
31 |             data-title="cover_title"
32 |           />
33 |         </div>
34 |         <ul class="tags">
35 |           <li data-show="passed">passed</li>
36 |           <li data-show="archived">archived</li>
37 |         </ul>
38 |       </article>
39 |     </template>
40 |     <script src="base.js"></script>
41 |     <script>
42 |       renderTemplate(header)
43 |       renderTemplate(footer)
44 |       getJSON('/article' + location.search, article => {
45 |         renderTemplate(main, { article })
46 |       })
47 |     </script>
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/template/public/examples/fragment.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="main" data-template="rows" data-bind="data"></div>
11 |     <template data-name="rows">
12 |       <div class="title"><span data-text="n"></span> records</div>
13 |       <table>
14 |         <template data-value="groups">
15 |           <thead>
16 |             <tr>
17 |               <td data-text="title"></td>
18 |             </tr>
19 |             <tr>
20 |               <td data-text="headings"></td>
21 |             </tr>
22 |           </thead>
23 |           <tbody>
24 |             <tr data-value="rows">
25 |               <td data-text="id"></td>
26 |               <td data-text="value"></td>
27 |             </tr>
28 |           </tbody>
29 |         </template>
30 |       </table>
31 |     </template>
32 |     <script src="base.js"></script>
33 |     <script>
34 |       renderTemplate(main, {
35 |         data: {
36 |           n: 5,
37 |           groups: [
38 |             {
39 |               title: 'Part 1',
40 |               headings: ['id', 'username'],
41 |               rows: [
42 |                 { id: 1, value: 'alice' },
43 |                 { id: 2, value: 'bob' },
44 |               ],
45 |               total: 2,
46 |             },
47 |             {
48 |               title: 'Part 2',
49 |               headings: ['id', 'time'],
50 |               rows: [
51 |                 { id: 1, value: '1:00' },
52 |                 { id: 2, value: '2:00' },
53 |                 { id: 3, value: '3:00' },
54 |               ],
55 |               total: 3,
56 |             },
57 |           ],
58 |         },
59 |       })
60 |     </script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/template/public/examples/edit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>View and Edit Form</title>
 7 |     <style>
 8 |       .radio-group,
 9 |       form label input:not([type='radio']) {
10 |         display: block;
11 |         margin-top: 0.25rem;
12 |         margin-bottom: 1rem;
13 |       }
14 |       input[type='submit'] {
15 |         display: block;
16 |         margin-block-start: 1rem;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <script src="base.js"></script>
22 | 
23 |     <form
24 |       method="POST"
25 |       action="/profile"
26 |       id="profileForm"
27 |       data-template="form"
28 |       data-bind="profile"
29 |     ></form>
30 |     <template data-name="form">
31 |       <label>
32 |         Username:
33 |         <input type="text" name="username" />
34 |       </label>
35 |       <div>
36 |         Size:
37 |         <div class="radio-group">
38 |           <label><input type="radio" name="size" value="S" /> Small </label>
39 |           <label><input type="radio" name="size" value="M" /> Middle </label>
40 |           <label><input type="radio" name="size" value="L" /> Large </label>
41 |         </div>
42 |       </div>
43 |       <label>
44 |         Address:
45 |         <input type="text" name="address" />
46 |       </label>
47 |       <label>
48 |         District:
49 |         <select
50 |           name="district_id"
51 |           data-template="option"
52 |           data-bind="districts"
53 |         ></select>
54 |       </label>
55 |       <input type="submit" value="Update Profile" class="input" />
56 |     </template>
57 |     <template data-name="option">
58 |       <option data-value="id" data-text="name"></option>
59 |     </template>
60 |     <script>
61 |       let json = {
62 |         profile: {
63 |           user_id: 1,
64 |           username: 'alice',
65 |           address: 'sesame street',
66 |           size: 'M',
67 |           district_id: 3,
68 |         },
69 |         districts: [
70 |           { id: 1, name: 'Earth' },
71 |           { id: 2, name: 'Mars' },
72 |           { id: 3, name: 'Mercury' },
73 |           { id: 4, name: 'Moon' },
74 |         ],
75 |       }
76 |       renderTemplate(profileForm, json)
77 |       renderTemplate(profileForm.district_id, json)
78 |       fillForm(profileForm, json.profile)
79 |     </script>
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/template/public/examples/data-show.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>data-show examples</title>
  8 |     <style>
  9 |       table {
 10 |         border-collapse: collapse;
 11 |       }
 12 |       th,
 13 |       td {
 14 |         border: 1px solid black;
 15 |         padding: 0.25rem;
 16 |       }
 17 |       [hidden] {
 18 |         display: block;
 19 |       }
 20 |       [hidden]::after {
 21 |         content: ' (hidden, not removed)';
 22 |       }
 23 |     </style>
 24 |   </head>
 25 |   <body>
 26 |     <div id="main" data-template="main" data-bind="data"></div>
 27 |     <template data-name="main">
 28 |       <table>
 29 |         <thead>
 30 |           <tr>
 31 |             <th>host</th>
 32 |             <th>data-show</th>
 33 |             <th>output</th>
 34 |           </tr>
 35 |         </thead>
 36 |         <tbody>
 37 |           <tr>
 38 |             <td>span element</td>
 39 |             <td>off</td>
 40 |             <td><span data-show="off">text</span></td>
 41 |           </tr>
 42 |           <tr>
 43 |             <td>span element</td>
 44 |             <td>on</td>
 45 |             <td><span data-show="on">text</span></td>
 46 |           </tr>
 47 |           <tr>
 48 |             <td>fragment template</td>
 49 |             <td>off</td>
 50 |             <td><template data-show="off">text</template></td>
 51 |           </tr>
 52 |           <tr>
 53 |             <td>fragment template</td>
 54 |             <td>on</td>
 55 |             <td><template data-show="on">text</template></td>
 56 |           </tr>
 57 |         </tbody>
 58 |         <thead>
 59 |           <tr>
 60 |             <th>host</th>
 61 |             <th>data-if</th>
 62 |             <th>output</th>
 63 |           </tr>
 64 |         </thead>
 65 |         <tbody>
 66 |           <tr>
 67 |             <td>span element</td>
 68 |             <td>off</td>
 69 |             <td><span data-if="off">text</span></td>
 70 |           </tr>
 71 |           <tr>
 72 |             <td>span element</td>
 73 |             <td>on</td>
 74 |             <td><span data-if="on">text</span></td>
 75 |           </tr>
 76 |           <tr>
 77 |             <td>fragment template</td>
 78 |             <td>off</td>
 79 |             <td><template data-if="off">text</template></td>
 80 |           </tr>
 81 |           <tr>
 82 |             <td>fragment template</td>
 83 |             <td>on</td>
 84 |             <td><template data-if="on">text</template></td>
 85 |           </tr>
 86 |         </tbody>
 87 |       </table>
 88 |     </template>
 89 |     <script src="base.js"></script>
 90 |     <script>
 91 |       renderTemplate(main, {
 92 |         data: {
 93 |           on: true,
 94 |           off: false,
 95 |         },
 96 |       })
 97 |     </script>
 98 |   </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/template/server/api.ts:
--------------------------------------------------------------------------------
  1 | import { checkbox, object, string } from 'cast.ts'
  2 | import { Router } from 'express'
  3 | 
  4 | export let api = Router()
  5 | 
  6 | type Article = {
  7 |   id: number
  8 |   title: string
  9 |   tags: string[]
 10 |   intro: string
 11 |   cover_image: string
 12 |   cover_alt: string
 13 |   cover_title: string
 14 |   detail: string
 15 |   archived?: boolean
 16 |   passed?: boolean
 17 |   highlight?: boolean
 18 | }
 19 | let articles: Article[] = [
 20 |   {
 21 |     id: 1,
 22 |     title: 'Hello World',
 23 |     tags: ['tag1', 'tag2', 'tag3'],
 24 |     intro: 'This is a sample article',
 25 |     cover_image: 'https://picsum.photos/seed/1/200',
 26 |     cover_alt: 'brown tune photo of bridge',
 27 |     cover_title: 'sample image 1',
 28 |     detail: '/article.html?id=1',
 29 |   },
 30 |   {
 31 |     id: 2,
 32 |     title: 'Hello Blog',
 33 |     tags: ['tag1'],
 34 |     intro: 'This is the second sample article',
 35 |     cover_image: 'https://picsum.photos/seed/2/200',
 36 |     cover_alt:
 37 |       'desk with laptop, keyboard, mouse, notebook and a pair of glasses',
 38 |     cover_title: 'sample image 2',
 39 |     detail: '/article.html?id=2',
 40 |     archived: true,
 41 |   },
 42 |   {
 43 |     id: 3,
 44 |     title: 'Hello Article',
 45 |     tags: [],
 46 |     intro: 'This is text should be bolded',
 47 |     cover_image: 'https://picsum.photos/seed/3/200',
 48 |     cover_alt: 'a small waterfall in the forest',
 49 |     cover_title: 'sample image 3',
 50 |     detail: '/article.html?id=3',
 51 |     passed: true,
 52 |     highlight: true,
 53 |   },
 54 | ]
 55 | 
 56 | api.get('/articles', (req, res) => {
 57 |   res.json(articles)
 58 | })
 59 | 
 60 | api.get('/article', (req, res) => {
 61 |   let article = articles.find(article => article.id == +req.query.id!)
 62 |   if (!article) {
 63 |     res.status(404).json({ error: 'article not found' })
 64 |     return
 65 |   }
 66 |   res.json(article)
 67 | })
 68 | 
 69 | let postArticleRequestParser = object({
 70 |   body: object({
 71 |     title: string({ nonEmpty: true }),
 72 |     intro: string({ nonEmpty: true }),
 73 |     cover_image: string({ nonEmpty: true }),
 74 |     cover_alt: string({ nonEmpty: true }),
 75 |     cover_title: string({ nonEmpty: true }),
 76 |     archived: checkbox(),
 77 |     passed: checkbox(),
 78 |     highlight: checkbox(),
 79 |   }),
 80 | })
 81 | api.post('/articles', (req, res) => {
 82 |   let { body } = postArticleRequestParser.parse(req)
 83 |   let id = articles.reduce((id, article) => Math.max(id, article.id), 0) + 1
 84 |   articles.push({
 85 |     id,
 86 |     detail: '/article.html?id=' + id,
 87 |     tags: [],
 88 |     ...body,
 89 |   })
 90 |   res.json({ id })
 91 | })
 92 | 
 93 | let counter = 0
 94 | api.get('/counter', (req, res) => {
 95 |   res.json(counter)
 96 | })
 97 | api.post('/counter/inc', (req, res) => {
 98 |   res.json(++counter)
 99 | })
100 | api.post('/counter/dec', (req, res) => {
101 |   res.json(--counter)
102 | })
103 | api.patch('/counter', (req, res) => {
104 |   res.json((counter = req.body.value))
105 | })
106 | 


--------------------------------------------------------------------------------
/template/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>data-template Demo</title>
  8 |     <link rel="stylesheet" href="style.css" />
  9 |     <style>
 10 |       main {
 11 |         display: flex;
 12 |         flex-wrap: wrap;
 13 |       }
 14 |       article {
 15 |         margin: 0.25rem;
 16 |         padding: 0.5rem;
 17 |         border-radius: 0.5rem;
 18 |       }
 19 |       .tags {
 20 |         display: flex;
 21 |       }
 22 |       .tag {
 23 |         display: inline-block;
 24 |         border: 1px solid #888;
 25 |         padding: 0.25rem;
 26 |         margin: 0 0.25rem;
 27 |         border-radius: 0.5rem;
 28 |       }
 29 |       .tag::before {
 30 |         content: '#';
 31 |       }
 32 |       @media screen and (max-width: 750px) {
 33 |         main {
 34 |           flex-direction: column;
 35 |         }
 36 |         article {
 37 |           min-width: 300px;
 38 |           margin-left: auto;
 39 |           margin-right: auto;
 40 |         }
 41 |       }
 42 |       @media (prefers-color-scheme: dark) {
 43 |         article {
 44 |           background-color: #444;
 45 |         }
 46 |       }
 47 |       @media (prefers-color-scheme: light) {
 48 |         article {
 49 |           background-color: #ccc;
 50 |         }
 51 |       }
 52 |     </style>
 53 |   </head>
 54 |   <body>
 55 |     <div id="app">
 56 |       <header id="header" data-template="header.html"></header>
 57 |       <nav>
 58 |         <a href="app.html">SPA version</a> (with vanilla ionic)
 59 |         <br />
 60 |         <a href="form.html">form demo</a>
 61 |         <a href="counter.html">counter demo</a>
 62 |         <a href="search.html">search demo</a>
 63 |         <a href="edit.html">view and edit demo (fill form)</a>
 64 |         <a href="icon-list.html">multi-class name demo</a>
 65 |       </nav>
 66 |       <main id="main" data-template="article" data-bind="articles">
 67 |         loading articles...
 68 |       </main>
 69 |       <footer id="footer" data-template="footer.html"></footer>
 70 |     </div>
 71 |     <template data-name="article">
 72 |       <article>
 73 |         <input name="id" data-value="id" hidden />
 74 |         <h2 data-text="title"></h2>
 75 |         <div class="tags">
 76 |           <div class="tag" data-text="tags"></div>
 77 |         </div>
 78 |         <p data-text="intro" data-class="highlight"></p>
 79 |         <div>
 80 |           <img
 81 |             class="small"
 82 |             data-src="cover_image"
 83 |             data-alt="cover_alt"
 84 |             data-title="cover_title"
 85 |           />
 86 |         </div>
 87 |         <button data-disabled="archived" data-onclick="seeMore">
 88 |           see more
 89 |         </button>
 90 |         <div data-hidden="passed">Status: active</div>
 91 |         <div>
 92 |           <a data-href="detail">Details</a>
 93 |         </div>
 94 |       </article>
 95 |     </template>
 96 |     <script src="base.js"></script>
 97 |     <script>
 98 |       // scanTemplates(app) // scan all templates recursively
 99 |       renderTemplate(header) // or apply template on specific element
100 |       renderTemplate(footer)
101 |       /* see articles in server/main.ts */
102 |       getJSON('/articles', articles => {
103 |         articles.forEach(article => {
104 |           article.seeMore = event => seeMore(event, article.id)
105 |         })
106 |         renderTemplate(main, { articles })
107 |       })
108 |       function seeMore(event, id) {
109 |         console.log('see more:', { event, id })
110 |       }
111 |     </script>
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/template/public/base.js:
--------------------------------------------------------------------------------
  1 | ;(w => {
  2 |   // shortcuts to reduce minified size
  3 |   let t = 'template'
  4 | 
  5 |   let bindTemplate = (host, template, values) => {
  6 |     let node = template.content.cloneNode(true)
  7 |     let container = document.createElement('div')
  8 |     container.appendChild(node)
  9 |     renderData(container, values)
 10 |     while (container.childNodes.length) {
 11 |       host.appendChild(container.childNodes.item(0))
 12 |     }
 13 |   }
 14 | 
 15 |   let parse = JSON.parse
 16 | 
 17 |   let useGet = use => (url, options, cb) =>
 18 |     typeof options == 'function'
 19 |       ? use(url, {}, options)
 20 |       : use(url, options, cb)
 21 | 
 22 |   let toForm = (event_or_form = event) =>
 23 |     event_or_form instanceof HTMLFormElement
 24 |       ? event_or_form
 25 |       : (event_or_form.preventDefault(), event_or_form.target)
 26 | 
 27 |   let fetchJSON = method => (url, body) =>
 28 |     fetch(url, {
 29 |       method,
 30 |       headers: { 'Content-Type': 'application/json' },
 31 |       body: JSON.stringify(body),
 32 |     })
 33 | 
 34 |   w.renderData = (container, values) => {
 35 |     let apply = (attr, f) => {
 36 |       container.querySelectorAll(`[data-${attr}]`).forEach(e => {
 37 |         let key = e.dataset[attr],
 38 |         value = values[key],
 39 |         t = e.tagName == 'TEMPLATE',
 40 |         last = e
 41 |         if (t && value && (attr == 'show' || attr == 'if')) value = [1]
 42 |         if (!Array.isArray(value)) return f(e, value, key)
 43 |         value.forEach(value => {
 44 |           let node = (t ? e.content : e).cloneNode(true)
 45 |           f(node, value, key)
 46 |           value && typeof value == 'object' && renderData(node, value)
 47 |           if (!t)
 48 |             return last.insertAdjacentElement('afterend', node), last = node
 49 |           for (let child of node.childNodes)
 50 |             child.nodeType == Node.TEXT_NODE
 51 |               ? last.insertAdjacentText('afterend', child.textContent)
 52 |               : (last.insertAdjacentElement('afterend', child), last = child)
 53 |         })
 54 |         e.remove()
 55 |       })
 56 |     }
 57 |     apply('text', (e, v) => e.textContent = v)
 58 |     apply('class', (e, v, k) => v == true ? e.classList.add(k) : v && e.classList.add(...v.split(' ')))
 59 |     apply('show', (e, v) => e.hidden = !v)
 60 |     apply('if', (e, v) => v || e.remove())
 61 |     apply('readonly', (e, v) => e.readOnly = !!v)
 62 |     for (let attr of ['open', 'checked', 'disabled', 'selected', 'hidden'])
 63 |       apply(attr, (e, v) => e[attr] = !!v)
 64 |     for (let attr of [
 65 |       'id',
 66 |       'title',
 67 |       'href',
 68 |       'src',
 69 |       'alt',
 70 |       'value',
 71 |       'action',
 72 |       'onsubmit',
 73 |       'onclick',
 74 |     ])
 75 |       apply(attr, (e, v) => v && (e[attr] = v))
 76 |   }
 77 | 
 78 |   w.renderTemplate = async (host, binds = {}) => {
 79 |     let name = host.dataset.template
 80 |     let values = binds[host.dataset.bind] || binds
 81 |     let template
 82 |     host.textContent = ''
 83 |     if (name.endsWith('.html')) {
 84 |       template = document.createElement(t)
 85 |       getText(name, html => {
 86 |         // deepcode ignore DOMXSS: the template is authored by the application developer, not from untrusted users
 87 |         template.innerHTML = html
 88 |         next()
 89 |       })
 90 |     } else {
 91 |       template = document.querySelector(`${t}[data-name="${name}"]`)
 92 |       template ? next() : console.error(t, `not found:`, name)
 93 |     }
 94 |     function next() {
 95 |       Array.isArray(values)
 96 |         ? values.forEach(values => bindTemplate(host, template, values))
 97 |         : bindTemplate(host, template, values)
 98 |     }
 99 |   }
100 | 
101 |   w.scanTemplates = (root = document.body, binds = {}) =>
102 |     root
103 |       .querySelectorAll(`[data-${t}]`)
104 |       .forEach(host => renderTemplate(host, binds))
105 | 
106 |   w.fillForm = (form, o) => {
107 |     let e
108 |     for (let k in o) (e = form[k]) && (e.value = o[k])
109 |   }
110 | 
111 |   w.d2 = x => x < 10 ? '0' + x : x
112 | 
113 |   w.toInputDate = date => {
114 |     let d = new Date(date)
115 |     return d.getFullYear() + '-' + d2(d.getMonth() + 1) + '-' + d2(d.getDate())
116 |   }
117 | 
118 |   w.toInputTime = date => {
119 |     let d = new Date(date)
120 |     return d2(d.getHours()) + ':' + d2(d.getMinutes())
121 |   }
122 | 
123 |   w.getText = useGet(async (url, options, cb) => {
124 |     let text = localStorage.getItem(url)
125 |     let p = fetch(url, options).then(res => res.text())
126 |     let cache = options && options.cache
127 |     let skipCache = cache && cache != 'force-cache'
128 |     p.then(newText => {
129 |       let diff = newText != text
130 |       ;(skipCache || diff) && cb?.(newText)
131 |       diff && localStorage.setItem(url, newText)
132 |     })
133 |     return !skipCache && text ? (cb?.(text), text) : p
134 |   })
135 | 
136 |   w.getJSON = useGet((url, options, cb) =>
137 |     getText(url, options, cb && (text => cb(parse(text)))).then(parse),
138 |   )
139 | 
140 |   w.submitJSON = event_or_form => {
141 |     let form = toForm(event_or_form)
142 |     let body = {}
143 |     for (let input of form.elements)
144 |       if (input.name && (input.type != 'checkbox' || input.checked))
145 |         body[input.name] = input.value
146 |     return fetchJSON(form.method)(form.action, body)
147 |   }
148 | 
149 |   w.submitForm = event_or_form => {
150 |     let form = toForm(event_or_form)
151 |     let body = new URLSearchParams(new FormData(form))
152 |     let { method, action } = form
153 |     return method == 'get'
154 |       ? fetch(action + '?' + body)
155 |       : fetch(action, {
156 |           method,
157 |           headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
158 |           body,
159 |         })
160 |   }
161 | 
162 |   w.uploadForm = event_or_form => {
163 |     let form = toForm(event_or_form)
164 |     return fetch(form.action, {
165 |       method: form.method,
166 |       body: new FormData(form),
167 |     })
168 |   }
169 | 
170 |   w.postJSON = fetchJSON('POST')
171 |   w.patchJSON = fetchJSON('PATCH')
172 |   w.putJSON = fetchJSON('PUT')
173 |   w.del = url => fetch(url, { method:'DELETE' })
174 | })(window)
175 | 


--------------------------------------------------------------------------------
/template/public/app.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" dir="ltr">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta
  6 |       name="viewport"
  7 |       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8 |     />
  9 |     <meta name="format-detection" content="telephone=no" />
 10 |     <meta name="msapplication-tap-highlight" content="no" />
 11 |     <!-- ionic over CDN -->
 12 |     <script
 13 |       type="module"
 14 |       src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"
 15 |     ></script>
 16 |     <script
 17 |       nomodule
 18 |       src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.js"
 19 |     ></script>
 20 |     <link
 21 |       rel="stylesheet"
 22 |       href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css"
 23 |     />
 24 |   </head>
 25 |   <body>
 26 |     <ion-page>
 27 |       <ion-header>
 28 |         <ion-toolbar color="primary">
 29 |           <ion-title>Articles</ion-title>
 30 |           <ion-buttons slot="end">
 31 |             <ion-button id="open-add-modal">
 32 |               <ion-icon slot="icon-only" name="add"></ion-icon>
 33 |             </ion-button>
 34 |           </ion-buttons>
 35 |         </ion-toolbar>
 36 |       </ion-header>
 37 |       <ion-content>
 38 |         <ion-list
 39 |           id="list"
 40 |           data-template="article"
 41 |           data-bind="articles"
 42 |         ></ion-list>
 43 |         <template data-name="article">
 44 |           <ion-item data-onclick="showDetail" href="#">
 45 |             <ion-thumbnail slot="start">
 46 |               <img
 47 |                 data-src="cover_image"
 48 |                 data-alt="cover_alt"
 49 |                 data-title="cover_title"
 50 |               />
 51 |             </ion-thumbnail>
 52 |             <ion-label>
 53 |               <h2 data-text="title"></h2>
 54 |               <p data-text="intro"></p>
 55 |             </ion-label>
 56 |           </ion-item>
 57 |         </template>
 58 |         <ion-modal trigger="open-add-modal" id="addModal">
 59 |           <ion-header>
 60 |             <ion-toolbar>
 61 |               <ion-buttons slot="start">
 62 |                 <ion-button onclick="addModal.dismiss()">Cancel</ion-button>
 63 |               </ion-buttons>
 64 |               <ion-title>Add Article</ion-title>
 65 |               <ion-buttons slot="end">
 66 |                 <ion-button onclick="submitAdd(addForm)">Submit</ion-button>
 67 |               </ion-buttons>
 68 |             </ion-toolbar>
 69 |           </ion-header>
 70 |           <ion-content>
 71 |             <form
 72 |               onsubmit="submitAdd(event)"
 73 |               id="addForm"
 74 |               action="/articles"
 75 |               method="POST"
 76 |             >
 77 |               <ion-list>
 78 |                 <ion-item>
 79 |                   <ion-label position="floating">Title</ion-label>
 80 |                   <ion-input type="text" name="title" />
 81 |                 </ion-item>
 82 |                 <ion-item>
 83 |                   <ion-label position="floating">Introduction</ion-label>
 84 |                   <ion-input type="text" name="intro" />
 85 |                 </ion-item>
 86 |                 <ion-item>
 87 |                   <ion-label position="floating">Cover Image</ion-label>
 88 |                   <ion-input
 89 |                     type="text"
 90 |                     name="cover_image"
 91 |                     id="cover_image"
 92 |                     oninput="preview.src=cover_image.value"
 93 |                   ></ion-input>
 94 |                 </ion-item>
 95 |                 <ion-item>
 96 |                   <ion-thumbnail>
 97 |                     <img id="preview" />
 98 |                   </ion-thumbnail>
 99 |                 </ion-item>
100 |                 <ion-item>
101 |                   <ion-label position="floating">Alt Text</ion-label>
102 |                   <ion-input type="text" name="cover_alt"></ion-input>
103 |                 </ion-item>
104 |                 <ion-item>
105 |                   <ion-label position="floating">Cover Title</ion-label>
106 |                   <ion-input type="text" name="cover_title"></ion-input>
107 |                 </ion-item>
108 |                 <ion-item>
109 |                   <ion-label>Archived</ion-label>
110 |                   <ion-checkbox slot="start" name="archived"></ion-checkbox>
111 |                 </ion-item>
112 |                 <ion-item>
113 |                   <ion-label>Passed</ion-label>
114 |                   <ion-checkbox slot="start" name="passed"></ion-checkbox>
115 |                 </ion-item>
116 |                 <ion-item>
117 |                   <ion-label>Highlight</ion-label>
118 |                   <ion-checkbox slot="start" name="highlight"></ion-checkbox>
119 |                 </ion-item>
120 |               </ion-list>
121 |             </form>
122 |           </ion-content>
123 |         </ion-modal>
124 |         <ion-modal id="detailModal">
125 |           <ion-header>
126 |             <ion-toolbar>
127 |               <ion-buttons slot="end">
128 |                 <ion-button onclick="detailModal.dismiss()">Close</ion-button>
129 |               </ion-buttons>
130 |               <ion-title>Details</ion-title>
131 |             </ion-toolbar>
132 |           </ion-header>
133 |           <ion-content class="ion-padding-horizontal">
134 |             <h1 data-text="title"></h1>
135 |             <figure>
136 |               <img
137 |                 width="200"
138 |                 height="200"
139 |                 data-src="cover_image"
140 |                 data-alt="cover_alt"
141 |                 data-title="cover_title"
142 |               />
143 |               <figcaption>
144 |                 <p>alt text: <span data-text="cover_alt"></span></p>
145 |                 <p>image title: <span data-text="cover_title"></span></p>
146 |               </figcaption>
147 |             </figure>
148 |             <p data-text="intro"></p>
149 |             <ion-chip data-show="archived">Archived</ion-chip>
150 |             <ion-chip data-show="passed">Passed</ion-chip>
151 |             <ion-chip data-show="highlight">Highlight</ion-chip>
152 |           </ion-content>
153 |         </ion-modal>
154 |       </ion-content>
155 |     </ion-page>
156 |     <script src="base.js"></script>
157 |     <script>
158 |       function loadArticles(options) {
159 |         getJSON('/articles', options, articles => {
160 |           articles.forEach(article => {
161 |             article.showDetail = () => showDetail(article)
162 |           })
163 |           renderTemplate(list, { articles })
164 |         })
165 |       }
166 |       loadArticles()
167 |       function showDetail(article) {
168 |         renderData(detailModal, article)
169 |         detailModal.present()
170 |       }
171 |       async function submitAdd(event_or_form) {
172 |         let json = await submitForm(event_or_form)
173 |           .then(res => res.json())
174 |           .catch(e => ({ error: String(e) }))
175 |         if (json.error) {
176 |           let toast = document.createElement('ion-toast')
177 |           toast.message = json.error
178 |           toast.duration = 5000
179 |           toast.position = 'top'
180 |           document.body.appendChild(toast)
181 |           return toast.present()
182 |         }
183 |         addModal.dismiss()
184 |         loadArticles({ cache: 'reload' })
185 |       }
186 |       let r = Math.random().toString(36).slice(2)
187 |       cover_image.value = `https://picsum.photos/seed/${r}/200/200`
188 |       preview.src = cover_image.value
189 |     </script>
190 |   </body>
191 | </html>
192 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # data-template
  2 | 
  3 | Lightweight and minimal HTML template helpers powered by native DOM
  4 | 
  5 | [![npm Package Version](https://img.shields.io/npm/v/data-template)](https://www.npmjs.com/package/data-template)
  6 | [![Minified Package Size](https://img.shields.io/bundlephobia/min/data-template)](https://bundlephobia.com/package/data-template)
  7 | [![Minified and Gzipped Package Size](https://img.shields.io/bundlephobia/minzip/data-template)](https://bundlephobia.com/package/data-template)
  8 | 
  9 | Server-side-rendering (SSR) mode available via [node-data-template](https://github.com/beenotung/node-data-template)
 10 | 
 11 | ## Installation (with CDN)
 12 | 
 13 | Drop below line in your html with automatic patch updates:
 14 | 
 15 | ```html
 16 | <script src="https://cdn.jsdelivr.net/npm/data-template@1.10/base.js"></script>
 17 | ```
 18 | 
 19 | <details>
 20 | <summary>Or specify the exact version with integrity protection:</summary>
 21 | 
 22 | ```html
 23 | <script
 24 |   src="https://cdn.jsdelivr.net/npm/data-template@1.10.1/base.js"
 25 |   crossorigin="anonymous"
 26 |   integrity="sha384-i35RjawhK9lVyGUZOl8bMw50PRHWqwOuSPnMCq69WytKJ5Tqx9FhZ4SRIjQfp6yZ"
 27 | ></script>
 28 | ```
 29 | 
 30 | </details>
 31 | 
 32 | <details>
 33 | <summary>You can use the minified version as well:</summary>
 34 | 
 35 | ```html
 36 | <script
 37 |   src="https://cdn.jsdelivr.net/npm/data-template@1.10.1/base.min.js"
 38 |   crossorigin="anonymous"
 39 |   integrity="sha384-HdiWx6gZdhakPcyhM4tZ1XImMYkFBV5QPz+F+e3J6gJub1djlJk8DbWTd8tub0Ib"
 40 | ></script>
 41 | ```
 42 | 
 43 | </details>
 44 | 
 45 | ## Get Started (with template project)
 46 | 
 47 | For new project without existing files, you can use the `data-template` cli to setup a simple project from template.
 48 | 
 49 | ```bash
 50 | npx data-template my-app
 51 | cd my-app
 52 | # then see the guides in the console output and README.md file
 53 | ```
 54 | 
 55 | ## Features
 56 | 
 57 | - [x] apply data into dom based on dataset (`data-*`) attributes
 58 | - [x] auto repeat elements if the value is an array
 59 | - [x] support fragments with [nested template](./template/public/examples/fragment.html#:L14)
 60 | - [x] fetch and cache html template and api response with localStorage
 61 | - [x] helper functions to do ajax and input format (date/time)
 62 | - [x] lightweight, [1KB minified and gzipped](#size)
 63 | 
 64 | **Supported `data-*` attributes**:
 65 | 
 66 | | category | attributes                                   |
 67 | | -------- | -------------------------------------------- |
 68 | | general  | text, class, id, title                       |
 69 | | link     | href                                         |
 70 | | media    | src, alt                                     |
 71 | | display  | hidden, show, if                             |
 72 | | input    | value, checked, selected, disabled, readonly |
 73 | | dialog   | open                                         |
 74 | | form     | action, onsubmit                             |
 75 | | event    | onclick                                      |
 76 | 
 77 | ## Quick Example with CDN
 78 | 
 79 | (For script tag with exact version and integrity checksum, see [above section](#installation-with-cdn))
 80 | 
 81 | ```html
 82 | <script src="https://cdn.jsdelivr.net/npm/data-template@1.7/base.js"></script>
 83 | 
 84 | <header id="header" data-template="header.html"></header>
 85 | 
 86 | <main id="main" data-template="article" data-bind="articles">
 87 |   loading articles...
 88 | </main>
 89 | 
 90 | <template data-name="article">
 91 |   <article>
 92 |     <h2 data-text="title"></h2>
 93 |     <ul class="tags">
 94 |       <li class="tag" data-text="tags"></li>
 95 |     </ul>
 96 |     <p data-text="intro"></p>
 97 |     <a data-href="detail" data-class="highlight">Details</a>
 98 |   </article>
 99 | </template>
100 | 
101 | <script>
102 |   renderTemplate(header)
103 | 
104 |   getJSON('/articles').then(articles => renderTemplate(main, { articles }))
105 |   /* sample data:
106 |   [
107 |     {
108 |       title: '...',
109 |       tags: ['a', 'b'],
110 |       intro: '...',
111 |       detail: '/article.html?id=1',
112 |       highlight: false,
113 |     },
114 |     {
115 |       title: '...',
116 |       tags: [],
117 |       intro: '...',
118 |       detail: '/article.html?id=2',
119 |       highlight: true,
120 |     },
121 |   ]
122 |   */
123 | </script>
124 | ```
125 | 
126 | More examples see [template/public](template/public)
127 | 
128 | ## Functions
129 | 
130 | **Render Functions**:
131 | 
132 | ```javascript
133 | // render data-* attributes
134 | function renderData(container, values);
135 | 
136 | // render template on specific host element
137 | function renderTemplate(hostElement, binds);
138 | 
139 | // recursive scan for templates and render them
140 | function scanTemplates(rootElement, binds);
141 | 
142 | // populate the form using values from the object
143 | function fillForm(form, object);
144 | ```
145 | 
146 | **Format Functions**:
147 | 
148 | ```javascript
149 | // prepend '0' of the number is less than ten
150 | function d2(number);
151 | 
152 | // convert to 'YYYY-MM-DD' format for input[type=date]
153 | function toInputDate(date_or_time_or_string);
154 | 
155 | // convert to 'HH:mm' format for input[type=time]
156 | function toInputTime(date_or_time_or_string);
157 | ```
158 | 
159 | **AJAX Functions**:
160 | 
161 | ```javascript
162 | // return promise of string, cached with localStorage
163 | function getText(url, options, callback);
164 | 
165 | // return promise of json value, cached with localStorage
166 | function getJSON(url, options, callback);
167 | 
168 | // submit form with ajax request in application/json
169 | function submitJSON(event_or_form): Promise<Response>
170 | 
171 | // submit form with ajax request in application/x-www-form-urlencoded or url search parameters
172 | function submitForm(event_or_form): Promise<Response>
173 | 
174 | // submit form with ajax request in multipart/form-data
175 | function uploadForm(event_or_form): Promise<Response>
176 | 
177 | // send ajax request in application/json
178 | function postJSON(url, body): Promise<Response>
179 | function patchJSON(url, body): Promise<Response>
180 | function putJSON(url, body): Promise<Response>
181 | 
182 | // send ajax request with DELETE method
183 | function del(url): Promise<Response>
184 | ```
185 | 
186 | For the `getText()` and `getJSON()` functions, the `options` and `cb` arguments are optional.
187 | 
188 | The `options` object is the second argument passed to the `fetch` function.
189 | 
190 | The `callback` function will be called with cached _and/or_ fetched data [(details)](#when-will-the-callback-function-be-called).
191 | 
192 | If is recommended to provide `{ cache: 'reload' }` in the `options` or use callback function to receive the data if you want to avoid staled view.
193 | 
194 | The returned promise can be used to do error handling.
195 | 
196 | ### When will the callback function be called
197 | 
198 | If the fetching data is already cached by url, the callback will be called immediately.
199 | Then the data will be fetched no matter cached or not.
200 | If the newly fetched data is different from the cached data, the callback will be called again.
201 | 
202 | ## Size
203 | 
204 | | Format         | File Size |
205 | | -------------- | --------- |
206 | | base.js        | 5.3 KB    |
207 | | base.min.js    | 2.9 KB    |
208 | | base.min.js.gz | 1.4 KB    |
209 | 
210 | ## License
211 | 
212 | This project is licensed with [BSD-2-Clause](./LICENSE)
213 | 
214 | This is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):
215 | 
216 | - The freedom to run the program as you wish, for any purpose
217 | - The freedom to study how the program works, and change it so it does your computing as you wish
218 | - The freedom to redistribute copies so you can help others
219 | - The freedom to distribute copies of your modified versions to others
220 | 


--------------------------------------------------------------------------------