├── .gitignore
├── bun.lockb
├── ssr
    ├── index.js
    ├── expr.js
    ├── fn.js
    ├── compile.js
    └── render.js
├── test
    ├── compile.js
    ├── client
    │   ├── loops.html
    │   ├── basics.html
    │   ├── basics.nue
    │   ├── img
    │   │   ├── paint.svg
    │   │   ├── box.svg
    │   │   ├── spray.svg
    │   │   ├── pin.svg
    │   │   └── glue.svg
    │   ├── test.css
    │   └── loops.nue
    ├── parse.test.js
    ├── compile.test.js
    └── render.test.js
├── package.json
├── .prettierrc.yaml
├── scripts
    └── minify.js
├── LICENSE
├── src
    ├── if.js
    ├── for.js
    └── nue.js
├── CONTRIBUTING.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 | .idea
5 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenzofox3/nuejs/master/bun.lockb


--------------------------------------------------------------------------------
/ssr/index.js:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | // for server-side rendering (SSG)
4 | export { parse, render, parseFile, renderFile } from './render.js'
5 | 
6 | // for client-side / reactive apps
7 | export { compile, compileFile } from './compile.js'
8 | 
9 | 


--------------------------------------------------------------------------------
/test/compile.js:
--------------------------------------------------------------------------------
1 | 
2 | import { compileFile } from '..'
3 | 
4 | for (const name of ['basics', 'loops']) {
5 |   const to = `dist/${name}.js`
6 |   await compileFile(`client/${name}.nue`, to)
7 |   console.log('created', `test/${to}`)
8 | }
9 | 


--------------------------------------------------------------------------------
/test/client/loops.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="stylesheet" href="test.css">
 3 | 
 4 | <div id="plain"></div>
 5 | 
 6 | <script type="module">
 7 |   import createApp from '../../src/nue.js'
 8 |   import { lib } from '../dist/loops.js'
 9 |   const [ App, ...deps ] = lib
10 |   createApp(App, {}, deps).mount(plain)
11 | </script>


--------------------------------------------------------------------------------
/test/client/basics.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="stylesheet" href="test.css">
 3 | 
 4 | <h1>Basics</h1>
 5 | 
 6 | <div id="basics"></div>
 7 | 
 8 | <script type="module">
 9 |   import createApp from '../../src/nue.js'
10 |   import { lib } from '../dist/basics.js'
11 |   const [ App, ...deps ] = lib
12 |   createApp(App, {}, deps).mount(basics)
13 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"type": "module",
 3 | 	"name": "nuejs-core",
 4 | 	"main": "ssr/index.js",
 5 | 	"version": "0.1.2",
 6 | 	"scripts": {
 7 | 		"test": "cd test && bun test",
 8 | 		"minify": "bun scripts/minify.js",
 9 | 		"compile": "cd test && bun compile.js"
10 | 	},
11 | 	"dependencies": {
12 | 		"htmlparser2": "^9.0.0"
13 | 	},
14 | 	"engines": {
15 | 		"bun": ">= 1"
16 | 	}
17 | }
18 | 


--------------------------------------------------------------------------------
/.prettierrc.yaml:
--------------------------------------------------------------------------------
 1 | printWidth: 100
 2 | tabWidth: 2
 3 | useTabs: false
 4 | semi: false
 5 | singleQuote: true
 6 | quoteProps: 'as-needed'
 7 | trailingComma: 'es5'
 8 | bracketSpacing: true
 9 | arrowParens: 'avoid'
10 | requirePragma: false
11 | insertPragma: false
12 | proseWrap: 'preserve'
13 | htmlWhitespaceSensitivity: 'css'
14 | endOfLine: 'lf'
15 | embeddedLanguageFormatting: 'auto'
16 | singleAttributePerLine: false
17 | 


--------------------------------------------------------------------------------
/scripts/minify.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /*
 4 |   Minifies source files into a single executable: dist/nue.js
 5 | */
 6 | 
 7 | import { promises as fs } from 'node:fs'
 8 | import { join } from 'node:path'
 9 | 
10 | 
11 | try {
12 |   let Bundler = process.isBun ? Bun : await import('esbuild')
13 | 
14 |   // recursive forces creation
15 |   await fs.mkdir('dist', { recursive: true })
16 | 
17 |   // minify (with Bun or esbuild)
18 |   await Bundler.build({
19 |     entryPoints: [join('src', 'nue.js')],
20 |     outdir: 'dist',
21 |     format: 'esm',
22 |     minify: true,
23 |     bundle: true,
24 |   })
25 | 
26 |   console.log('Minified Nue to dist/nue.js with', process.isBun ? 'Bun' : 'ESBuild')
27 | 
28 | } catch (e) {
29 |   console.log('No bundler found. Please install Bun or ESbuild')
30 | 
31 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023-present, Tero Piirainen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/src/if.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Internal use only
 3 | 
 4 | import createApp from './nue.js'
 5 | 
 6 | export default function(opts) {
 7 |   const { root, fn, fns, deps, ctx } = opts
 8 |   const blocks = []
 9 |   var node = root
10 |   var anchor
11 |   var next
12 | 
13 |   function addBlock(node, fn) {
14 |     opts.processAttrs(node) // run event handlers on the parent context
15 |     const impl = createApp({ fns, dom: node }, ctx, deps, ctx)
16 |     blocks.push(impl)
17 |     impl.fn = fn
18 |   }
19 | 
20 |   addBlock(root, fn)
21 | 
22 |   while (node = node.nextElementSibling) {
23 |     const val = node.getAttribute(':else-if')
24 |     if (val) {
25 |       addBlock(node, fns[val])
26 |       node.removeAttribute(':else-if')
27 | 
28 |     } else if (node.hasAttribute(':else')) {
29 |       addBlock(node, () => true)
30 |       node.removeAttribute(':else')
31 | 
32 |     } else {
33 |       next = node
34 |       break
35 |     }
36 |   }
37 | 
38 |   var _prev
39 | 
40 |   function update() {
41 |     if (!anchor) {
42 |       const wrap = root.parentElement
43 |       anchor = new Text('')
44 |       wrap.insertBefore(anchor, root)
45 |     }
46 | 
47 |     const active = blocks.find(bl => bl.fn(ctx))
48 |     blocks.forEach(bl => bl == active ? bl.before(anchor) : bl.unmount())
49 |   }
50 | 
51 |   return { update, next }
52 | 
53 | }
54 | 


--------------------------------------------------------------------------------
/test/parse.test.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { parseFor, parseClass, setContext, setContextTo, parseExpr } from '../ssr/expr.js'
 3 | 
 4 | 
 5 | // helper function to run multiple tests at once
 6 | function runTests(fn, tests) {
 7 |   Object.keys(tests).slice(0, 100).forEach(key => {
 8 |     const val = fn(key)
 9 |     // console.info(val)
10 |     expect(val).toEqual(tests[key])
11 |   })
12 | }
13 | 
14 | test('For loop expression', () => {
15 |   runTests(parseFor, {
16 |     'el in items': [ "el", "_.items", "$index" ],
17 |     'el, i of cat.items': [ "el", "_.cat.items", "i" ],
18 |     '{ name, age } in items': [[ "name", "age" ], "_.items", "$index"],
19 |     '({ name, age }) in items': [[ "name", "age" ], "_.items", "$index"],
20 |     '({ name, age } , $i) in items': [[ "name", "age" ], "_.items", "$i"],
21 |     '[ name, age, $i ] in entries': [[ "name", "age" ], "_.entries", "$i", true],
22 |   })
23 | })
24 | 
25 | test('Class attributes', () => {
26 |   runTests(parseClass, {
27 |     'active: foo && Date.now()': [ "_.foo && Date.now() && 'active '" ],
28 | 
29 |     'is-active: isActive, danger: hasError()':
30 |       [ "_.isActive && 'is-active '", "_.hasError() && 'danger '" ],
31 |   })
32 | })
33 | 
34 | test('Context (_.variable)', () => {
35 |   runTests(setContext, {
36 |     'foo': '_.foo',
37 |     "foo + 'yo foo'" : "_.foo + 'yo foo'",
38 |     'a/b + !foo': '_.a/_.b + !_.foo',
39 |     'location.href': 'location.href',
40 |     '$foo + _bar + baz/5': '_.$foo + _._bar + _.baz/5',
41 |   })
42 | })
43 | 
44 | 
45 | test('Expressions', () => {
46 | 
47 |   runTests(parseExpr, {
48 |     'Hey { name }': [ "'Hey '", '_.name' ],
49 |     'foo { alarm } is-alert': [ "'foo '", '_.alarm', "' is-alert'" ],
50 |     'is-cool { danger: hasError }': [ "'is-cool '", "_.hasError && 'danger '" ],
51 | 
52 |     '{ is-active: isActive } is-cool { danger: hasError }': [
53 |       "_.isActive && 'is-active '",
54 |       "' is-cool '",
55 |       "_.hasError && 'danger '"
56 |     ]
57 |   })
58 | })
59 | 
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Contributing to Nue
 3 | 
 4 | First and foremost: thank you for helping with Nue! ❤️❤️
 5 | 
 6 | 
 7 | ### Guidelines
 8 | 
 9 | 1. **Most important** If you are adding a new feature, please _discuss it first_ by creating a new issue with the tag "New feature". You probably avoid doing redundant work, because not all features are automatically accepted. Nue JS strives for minimalism.
10 | 
11 | 2. Features that add lots of new code, complexity, or several new/heavy NPM packages are most likely rejected. Particularly if the first rule wasn't applied.
12 | 
13 | 3. Please add one fix/feature per pull request. Easier to accept and less potential merge conflicts.
14 | 
15 | 3. Please add a test for every bug fix
16 | 
17 | 3. Please write JavaScript (Not TypeScript)
18 | 
19 | 
20 | ### Formatting rules
21 | Please try to use the original style in the codebase. Do not introduce new rules or patterns. The most notable rules are:
22 | 
23 | 1. No semicolons, because it's redundant
24 | 
25 | 2. Strings with single quotes
26 | 
27 | 3. Indent with two spaces
28 | 
29 | 4. Prefer `==` over `===`. Only strict equality only when truly needed, which is rarely
30 | 
31 | Nue is not using Prettier or ESLint because they will increase the project size to 40MB. A single `.prettierrc.csj` file is preferred on the root directory. Not sure if [Biome](//biomejs.dev/) is better.
32 | 
33 | 
34 | ### Nue JS codebase
35 | Nues JS codebase has two distinct parts:
36 | 
37 | * The reactive client is under [src](src) directory
38 | * Server parts are under [ssr](ssr) directory (SSR: "Server Side Rendering")
39 | 
40 | [Bun](//bun.sh) is the preferred test and development environment because it's noticeably faster than Node or Deno.
41 | 
42 | 
43 | ### Running tests
44 | Nue uses [Bun](//bun.sh) for running tests:
45 | 
46 | 1. Go to root directory: `cd nuejs`
47 | 2. Run `bun test`
48 | 
49 | 
50 | ### Running client tests
51 | 
52 | 1. Go to root directory: `cd nuejs`
53 | 2. Start a web server, for example: `python -m SimpleHTTPServer`
54 | 2. Open a test page. Either [basics][basics] or [loops][loops]
55 | 
56 | [basics]: http://localhost:8000/test/client/basics.html
57 | [loops]: http://localhost:8000/test/client/loops.html
58 | 
59 | 
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/test/client/basics.nue:
--------------------------------------------------------------------------------
  1 | 
  2 | <main class="grid">
  3 |   <refs-test class="card"/>
  4 |   <if-test class="card"/>
  5 |   <slot-test class="card"/>
  6 |   <inherit-test class="card"/>
  7 | </main>
  8 | 
  9 | <div @name="refs-test">
 10 |   <h3>Ref: { $refs.email.placeholder }</h3>
 11 |   <input name="email" placeholder="Your email">
 12 | 
 13 |   <script>
 14 |     mounted(args) {
 15 |       args.$refs.email.value = 'Hey'
 16 |     }
 17 |   </script>
 18 | </div>
 19 | 
 20 | <div @name="if-test">
 21 |   <h2>Count: { count }</h2>
 22 |   <p>
 23 |     <img :if="!count" class="icon" src="img/box.svg">
 24 |     <img :else-if="count % 2 == 0" class="icon" src="img/spray.svg">
 25 |     <img :else class="icon" src="img/pin.svg">
 26 |   </p>
 27 | 
 28 |   <p>
 29 |     <button @click="toggle" :if="!flag">Set flag</button>
 30 |     <button @click="toggle" :else>Unset</button>
 31 |   </p>
 32 | 
 33 |   <div :if="flag"><media :bind="item"/></div>
 34 | 
 35 |   <script>
 36 |     item = { title: 'Item title', desc: 'Item desc' }
 37 |     count = 0
 38 | 
 39 |     toggle() {
 40 |       this.flag = !this.flag
 41 |       this.count++
 42 |     }
 43 |   </script>
 44 | </div>
 45 | 
 46 | <div @name="slot-test">
 47 | 
 48 |   <media :bind="item" desc="Desc override">
 49 |     <h2>${ price }.00</h2>
 50 |     <field type="number" value="1"/>
 51 |     <button @click="buy" :hidden="bought">Add to bag</button>
 52 |     <b :if="bought" class="tag">🛒 In the bag</b>
 53 |   </media>
 54 | 
 55 |   <script>
 56 |     item = { title: 'Item title', desc: 'Item desc', img: 'img/paint.svg' }
 57 |     price = 50
 58 | 
 59 |     buy() {
 60 |       this.bought = true
 61 |     }
 62 |   </script>
 63 | </div>
 64 | 
 65 | 
 66 | <div @name="media">
 67 |   <img :if="img" :src="img" class="icon">
 68 | 
 69 |   <aside>
 70 |     <h3>{ title || 'Default title'}</h3>
 71 |     <p>{ desc || 'Default desc'}</p>
 72 |     <slot/>
 73 |   </aside>
 74 | </div>
 75 | 
 76 | 
 77 | <form @name="inherit-test">
 78 |   <h3>Inheritance tests</h3>
 79 |   <field title="Email" type="email" placeholder="your@email.org" required/>
 80 |   <field title="Email" class="error" :style="max-width: { max_width }%"/>
 81 |   <field title="Email" class="error { severity }" id="my-error"
 82 |     data-min="10" :data-max="max_val"/>
 83 | 
 84 |   <script>
 85 |     severity = 'is-fatal'
 86 |     max_width = 90
 87 |     max_val = 100
 88 |   </script>
 89 | 
 90 | </form>
 91 | 
 92 | <label @name="field" class="field { required: required }">
 93 |   <h5>{ label }</h5>
 94 |   <input :attr="attr">
 95 | 
 96 |   <script>
 97 |     constructor(data) {
 98 |       this.attr = { type: 'text', ...data.$attrs }
 99 |       delete this.attr.label
100 |     }
101 |   </script>
102 | </label>
103 | 
104 | 


--------------------------------------------------------------------------------
/test/client/img/paint.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m30.74 62.47h-.88c-11.93-.35-25.29-6.07-26.42-17.82-.51-5.37 3.43-11 8.79-12.66a22.07 22.07 0 0 1 3.44-.67q.92-.12 1.83-.21c3.77-.42 7.68-.85 10.4-3.83 2.44-2.67 2.8-6.37 3.12-9.63.06-.62.12-1.24.19-1.84.52-4.23 1.88-7.42 4-9.48a11.17 11.17 0 0 1 7.79-2.86 13.6 13.6 0 0 1 4.83.88c12.9 4.88 17.58 23.79 13 36.79a32 32 0 0 1 -30.09 21.33z" fill="#acd2fe"/><path d="m45.58 21.53a5.2 5.2 0 1 1 5.2-5.2 5.2 5.2 0 0 1 -5.2 5.2z" fill="#fff"/><path d="m51.75 40.73a5.2 5.2 0 1 1 5.2-5.2 5.2 5.2 0 0 1 -5.2 5.2z" fill="#fff"/><path d="m38.8 56a5.2 5.2 0 1 1 5.2-5.2 5.21 5.21 0 0 1 -5.2 5.2z" fill="#fff"/><path d="m17.43 51.23a5.2 5.2 0 1 1 5.2-5.2 5.21 5.21 0 0 1 -5.2 5.2z" fill="#fff"/><g fill="#0229d5"><path d="m29.77 63.92h-.95c-.25 0-.51 0-.76 0a1 1 0 0 1 -.93-1 1 1 0 0 1 1-.93h.72.9a31.92 31.92 0 0 0 13.05-2.79 32.64 32.64 0 0 0 17.5-18.86 32.93 32.93 0 0 0 1.76-10.84c0-.37 0-.76 0-1.14a1 1 0 0 1 .94-1 1 1 0 0 1 1 .94v1.19a35.19 35.19 0 0 1 -1.84 11.51 34.65 34.65 0 0 1 -18.5 20 33.89 33.89 0 0 1 -13.89 2.92zm-4.57-.28h-.11a1 1 0 0 1 -.85-1.07 1 1 0 0 1 1.08-.86 1.08 1.08 0 0 1 .65.37 1 1 0 0 1 .19.71 1 1 0 0 1 -.96.85zm-2.87-.44h-.18a34.52 34.52 0 0 1 -14.43-6 18.49 18.49 0 0 1 -7.66-13.29c-.06-.41-.06-.82-.06-1.21a14.56 14.56 0 0 1 2.79-8.34 15 15 0 0 1 7.78-5.66 24.32 24.32 0 0 1 3.82-.7l1.61-.24c3.64-.4 7.08-.78 9.12-3.08a7.45 7.45 0 0 0 1.49-2.54 1 1 0 0 1 1.24-.58 1 1 0 0 1 .58 1.24 9.31 9.31 0 0 1 -1.86 3.2c-2.66 2.85-6.35 3.26-9.92 3.64-.67.07-1.36.15-2 .24a21.24 21.24 0 0 0 -3.52.69 13 13 0 0 0 -6.75 4.93 12.5 12.5 0 0 0 -2.44 7.2c0 .33 0 .68.05 1 .81 8.74 8.48 15.3 20.52 17.58a1 1 0 0 1 .77 1.13 1 1 0 0 1 -.95.79zm40.49-36.8a1 1 0 0 1 -1-.86 1 1 0 0 1 1.93-.2 1 1 0 0 1 -.87 1.07zm-.42-2.88a1 1 0 0 1 -.95-.8 30.21 30.21 0 0 0 -6-13.61 20 20 0 0 0 -8.44-6.18 14.19 14.19 0 0 0 -5-.91 11.57 11.57 0 0 0 -8.01 2.98c-2.22 2.11-3.67 5.48-4.19 9.77-.07.59-.13 1.19-.19 1.82v.25a1 1 0 0 1 -1 .89h-.09a1 1 0 0 1 -.87-1.06v-.22c.05-.62.12-1.27.2-1.9.56-4.79 2.14-8.48 4.75-10.94a13.54 13.54 0 0 1 9.44-3.53 16.14 16.14 0 0 1 5.68 1 21.73 21.73 0 0 1 9.27 6.79 32.16 32.16 0 0 1 6.38 14.5 1 1 0 0 1 -.79 1.14zm-34.17-2.9h-.16a1 1 0 0 1 -.63-.39 1.05 1.05 0 0 1 -.17-.71 1 1 0 0 1 1.11-.8 1 1 0 0 1 .81 1.1 1 1 0 0 1 -.96.8z"/><path d="m44.61 22.5a7.14 7.14 0 1 1 7.14-7.14 7.14 7.14 0 0 1 -7.14 7.14zm0-12.34a5.2 5.2 0 1 0 5.2 5.2 5.21 5.21 0 0 0 -5.2-5.2z"/><path d="m50.78 41.7a7.14 7.14 0 1 1 7.14-7.14 7.14 7.14 0 0 1 -7.14 7.14zm0-12.33a5.2 5.2 0 1 0 5.22 5.19 5.2 5.2 0 0 0 -5.22-5.19z"/><path d="m37.83 57a7.14 7.14 0 1 1 7.17-7.14 7.15 7.15 0 0 1 -7.17 7.14zm0-12.34a5.2 5.2 0 1 0 5.2 5.2 5.2 5.2 0 0 0 -5.2-5.2z"/><path d="m16.46 52.2a7.14 7.14 0 1 1 7.14-7.14 7.14 7.14 0 0 1 -7.14 7.14zm0-12.33a5.2 5.2 0 1 0 5.2 5.19 5.2 5.2 0 0 0 -5.2-5.19z"/></g></svg>


--------------------------------------------------------------------------------
/test/client/img/box.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><g fill="#acd2fe"><path d="m12.63 16.09-.02 11.29 4.12-2.35 4.11 6 .02-11.95z"/><path d="m62.52 12.05-30.51 11.06-30.53-11.06 30.53-11.08z"/><path d="m3.9 49.47v-34.38l27.62 10.01v36.66z"/><path d="m34.43 25.11 27.61-10.02v34.38l-27.61 12.29z"/></g><path d="m6.71 13.02 26.27-9.54 26.25 9.54-26.25 9.52z" fill="#fff"/><path d="m32 64a1.07 1.07 0 0 1 -.39-.07l-11.37-5.08a1 1 0 0 1 -.52-.54 1 1 0 0 1 0-.74 1 1 0 0 1 1.28-.49l10 4.45v-18.05a1 1 0 0 1 1.94 0v19.52a1 1 0 0 1 -1 1zm-14-6.25a.85.85 0 0 1 -.39-.08 1 1 0 0 1 -.51-.54.91.91 0 0 1 0-.74 1 1 0 0 1 1.28-.49 1 1 0 0 1 .51.54 1 1 0 0 1 0 .74 1 1 0 0 1 -.89.57zm-2.66-1.18a.91.91 0 0 1 -.39-.08l-13.87-6.16a1 1 0 0 1 -.58-.88v-16.87a1 1 0 0 1 1.94 0v16.23l13.27 5.9a1 1 0 0 1 .5.54.93.93 0 0 1 0 .73 1 1 0 0 1 -.9.59zm16.7-15a1 1 0 1 1 1-1 1 1 0 0 1 -1.04.97zm0-2.91a1 1 0 0 1 -1-1v-13.86l-8.18-3a1 1 0 0 1 -.59-1.24 1 1 0 0 1 1.25-.56l8.82 3.2a1 1 0 0 1 .64.91v14.54a1 1 0 0 1 -.98.98zm-30.54-8a1 1 0 1 1 1-1 1 1 0 0 1 -1.03.98zm0-2.91a1 1 0 0 1 -1-1v-14.75a1 1 0 0 1 .42-.79 1 1 0 0 1 .88-.12l16.26 5.91a1 1 0 0 1 .58 1.24 1 1 0 0 1 -1.25.58l-14.95-5.39v13.33a1 1 0 0 1 -.97.97zm19-7.83a1 1 0 0 1 -.33-.06 1 1 0 1 1 .62-1.86 1 1 0 0 1 -.34 1.88z" fill="#0229d5"/><path d="m32 64a.92.92 0 0 1 -.53-.16 1 1 0 0 1 -.47-.84v-39.88a1 1 0 0 1 .64-.92l15.36-5.56a1 1 0 0 1 .66 1.82l-14.66 5.34v37.74l21.68-9.65a1 1 0 0 1 1.28.49 1 1 0 0 1 -.49 1.28l-23.07 10.26a1 1 0 0 1 -.4.08zm25.7-11.44a1 1 0 0 1 -.89-.58 1 1 0 0 1 .49-1.28l4.25-1.89v-4.76a1 1 0 0 1 1.94 0v5.39a1 1 0 0 1 -.58.89l-4.81 2.14a.92.92 0 0 1 -.39.09zm4.82-10.45a1 1 0 0 1 -1-1v-29.06a1 1 0 1 1 1.94 0v29.09a1 1 0 0 1 -.93.97z" fill="#0229d5"/><path d="m32 24.09a.88.88 0 0 1 -.33-.06l-26-9.44a1 1 0 0 1 -.58-1.24 1 1 0 0 1 1.24-.58l25.67 9.31 7.4-2.68a1 1 0 0 1 .65 1.84l-7.71 2.76a1 1 0 0 1 -.34.09zm10.45-3.8a1 1 0 0 1 -.33-1.88 1 1 0 0 1 1.24.58 1 1 0 0 1 -.57 1.24 1 1 0 0 1 -.33.06zm2.74-1a1 1 0 0 1 -.91-.64.94.94 0 0 1 0-.75.9.9 0 0 1 .54-.49l14.86-5.41-18.39-6.64a.89.89 0 0 1 -.55-.49.93.93 0 0 1 0-.75 1 1 0 0 1 1.26-.57l20.91 7.58a1 1 0 0 1 0 1.83l-17.37 6.28a1 1 0 0 1 -.34.06zm-41.92-5.63a1.14 1.14 0 0 1 -.33-.05 1 1 0 0 1 -.64-.95 1 1 0 0 1 -.21-1.87l29.59-10.73a.94.94 0 0 1 .66 0l4.14 1.5a1 1 0 0 1 .58 1.24 1 1 0 0 1 -1.24.58l-3.82-1.38-27.94 10.14a.93.93 0 0 1 .12.88 1 1 0 0 1 -.91.64zm35.61-9.23a.92.92 0 0 1 -.33-.06 1 1 0 0 1 -.55-1.24 1 1 0 0 1 1.24-.58.94.94 0 0 1 .55.5 1 1 0 0 1 0 .74 1 1 0 0 1 -.91.64z" fill="#0229d5"/><path d="m17.55 23.76-3.11 1.76.01-6.71 5.32 1.93v6.25z" fill="#fff"/><path d="m20.84 32a1 1 0 0 1 -.8-.42l-3.6-5.26-3.35 1.9a1 1 0 0 1 -1 0 1 1 0 0 1 -.49-.84v-11.3a1 1 0 0 1 .41-.79 1 1 0 0 1 .89-.12l8.23 3a1 1 0 0 1 .64.92v12a1 1 0 0 1 -.68.92.93.93 0 0 1 -.25-.01zm-4.11-7.94a1 1 0 0 1 .8.43l2.35 3.41v-8.14l-6.3-2.29v8.24l2.67-1.52a1 1 0 0 1 .48-.13z" fill="#0229d5"/></svg>


--------------------------------------------------------------------------------
/test/compile.test.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { compile, compileFile } from '../ssr/compile.js'
 3 | 
 4 | 
 5 | /*
 6 |   Format of individual tests on the TESTS array:
 7 |   [
 8 |     nue_source_code,
 9 |     compiled_code_match1,
10 |     compiled_code_match2
11 |   ]
12 | */
13 | const TESTS = [
14 | 
15 |   // basics
16 |   ['<div :data-node="item"/>', '<div :data-node="0"></div>', '_.item'],
17 | 
18 |   ['<div @name="foo">{{ title }}</div>', '<div :html="0"></div>', '_.title'],
19 | 
20 |   ['<img :class="`_ || src`"/>', '<img :class="0">', '`_ || _.src`'],
21 | 
22 |   ['<img loading="lazy" :alt="alt" :src="_ || src">',
23 |    '<img loading="lazy" :alt="0" :src="1">', '_._ || _.src'],
24 |   [`<a>{ time || '12:00' }</a>`, '<a>:0:</a>', "[_.time || '12:00']"],
25 | 
26 |   // class name
27 |   ['<div class="item { is-active: isActive(el) }">{ flag ? "ok" : "fail"}</div>',
28 |     '<div :class="0">:1:</div>', "['item ',_.isActive(_.el) && 'is-active ']"],
29 | 
30 |   // for loop
31 |   ['<span @name="loop" :for="{ foo, bar } in items">{ foo }</span>',
32 |     '<span :for="0">:1:</span>', "[['foo','bar'], _.items, '$index']"],
33 | 
34 |   ['<label :for="el, j in survey.sources">{ el }</label>',
35 |     ':for="0"', "['el', _.survey.sources, 'j']"],
36 | 
37 |   ['<p :for="[key, value, i] in Object.entries(person)"></p>',
38 |     ':for="0"', "[['key','value'], Object.entries(_.person), 'i', true]"],
39 | 
40 | 
41 |   // global script tag
42 |   ['<script>const a = 10</script>', 'const a = 10', 'lib = [\n]'],
43 | 
44 |   ['<b><noscript>Ignore</noscript><script>s = 1</script><script>g = 1</script></b>',
45 |     '<b></b>', 'class { s = 1\ng = 1 }'],
46 | 
47 |   // event handlers
48 |   ['<button @click="count++">{ count }</button>', '<button @click="0">:1:</button>', '_.count++'],
49 |   ['<a @click="foo(); bar()">{ baz }</a>', '@click="0"', "{ _.foo(); _.bar() }"],
50 | 
51 |   // click modifiers
52 |   ['<a @click.prevent.once="do"/>',
53 |     '@click="0"', 'e.preventDefault();_.do.call(_, e);e.target.onclick = null'],
54 | 
55 |   ['<a @keyup.space="do"/>', '@keyup="0"', "if (!['space'"],
56 | 
57 |   ['<a @keyup.up="do"/>','@keyup="0"', "if (!['up'"],
58 | 
59 |   ['<a @click.self="do"/>','@click="0"', "if (e.target != this)"],
60 | 
61 | 
62 |   // event argument
63 |   [`<a @click="say('yo', $event)"/>`, '@click', "_.say('yo', e)"],
64 |   [`<a @click="say($event, 'yo')"/>`, '@click', "_.say(e, 'yo')"],
65 | 
66 |   // newline
67 |   ['<a>\n<b @click="open"></b></a>', '@click="0"', '_.open.call'],
68 | 
69 | ]
70 | 
71 | function testOne([src, ...matches]) {
72 |   const js = compile(src)
73 |   const [ok1, ok2] = matches.map(m => js.includes(m))
74 | 
75 |   // debug
76 |   if (!ok1 || !ok2) console.info('Error in', src, '-->\n\n', js)
77 | 
78 |   // run tests
79 |   expect(ok1).toBe(true)
80 |   expect(ok2).toBe(true)
81 | }
82 | 
83 | test('All compile tests', () => {
84 |   TESTS.forEach(testOne)
85 | })
86 | 
87 | // good for testing a single thing with test.only()
88 | test('Unit test', () => {
89 |   const last = TESTS.slice(-1)[0]
90 |   testOne(last)
91 | })
92 | 
93 | 
94 | 


--------------------------------------------------------------------------------
/test/client/test.css:
--------------------------------------------------------------------------------
  1 | 
  2 | body {
  3 |   font-family: -apple-system, BlinkMacSystemFont;
  4 |   background-color: #f9f9f9;
  5 |   padding: 6%;
  6 | }
  7 | 
  8 | a {
  9 |   color: blue;
 10 |   cursor: pointer;
 11 | }
 12 | 
 13 | a:hover {
 14 |   text-decoration: underline;
 15 | }
 16 | 
 17 | h3, h4, h5 {
 18 |   margin: 0 0 .3em;
 19 | }
 20 | 
 21 | h4 {
 22 |   color: #789;
 23 | }
 24 | 
 25 | .card > h3:first-child {
 26 |   margin-bottom: 1em;
 27 | }
 28 | 
 29 | p {
 30 |   margin: 0 0 1.2em;
 31 |   color: #777;
 32 | }
 33 | 
 34 | .mb {
 35 |   margin-bottom: 1.2em;
 36 | }
 37 | 
 38 | hr {
 39 |   border-width: 0 0 1px;
 40 |   margin-bottom: 1em;
 41 | }
 42 | 
 43 | .icon {
 44 |   width: 5em;
 45 |   margin-bottom: 1em;
 46 | }
 47 | 
 48 | input {
 49 |   padding: .8em;
 50 |   font-family: inherit;
 51 |   font-size: 95%;
 52 | }
 53 | 
 54 | button {
 55 |   border: 1px solid #f9f9f9;
 56 |   background-color: #f2f2f2;
 57 |   font-family: inherit;
 58 |   padding: .3em 1em;
 59 |   border-radius: 8px;
 60 |   cursor: pointer;
 61 |   margin-right: .6em;
 62 |   font-weight: 500;
 63 | }
 64 | 
 65 | button:hover {
 66 |   border-color: #bbb;
 67 | }
 68 | 
 69 | button:active {
 70 |   box-shadow: 0 0 4px #ccc inset;
 71 |   transform: scale(0.97);
 72 | }
 73 | 
 74 | .primary {
 75 |   background-color: #2196f3;
 76 |   color: white;
 77 | }
 78 | 
 79 | .field {
 80 |   margin-bottom: 1.5em;
 81 |   display: block;
 82 | }
 83 | 
 84 | .field input {
 85 |   width: 100%;
 86 | }
 87 | 
 88 | .error input {
 89 |   border-color: red;
 90 | }
 91 | 
 92 | .is-fatal h5:after {
 93 |   content: " \01F525";
 94 |   font-size: 120%;
 95 | }
 96 | 
 97 | .required h5:after {
 98 |   content: ' *';
 99 |   color: orange;
100 |   font-size: 110%;
101 | }
102 | 
103 | .tag {
104 |   background-color: #d0f3ff;
105 |   margin-right: .6em;
106 |   font-size: 90%;
107 |   padding: .3em .6em;
108 |   border-radius: 5px;
109 |   color: #21718b;
110 |   font-weight: 500;
111 | }
112 | 
113 | /* grid */
114 | .grid {
115 |   grid-template-columns: repeat( auto-fit, minmax(320px, 1fr));
116 |   display: grid;
117 |   gap: 2.2em;
118 | }
119 | 
120 | .card {
121 |   background-color: white;
122 |   box-shadow: 1px 1px .3em #ddd;
123 |   border-radius: 4px;
124 |   padding: 2em;
125 |   max-width: 350px;
126 | }
127 | 
128 | 
129 | /* loop items */
130 | .row {
131 |   border-bottom: 1px solid #eee;
132 |   align-items: center;
133 |   display: flex;
134 |   padding: .3em;
135 |   font-size: 90%;
136 | }
137 | 
138 | .row > * {
139 |   flex: 1;
140 | }
141 | 
142 | .right {
143 |   text-align: right;
144 | }
145 | 
146 | .fade-in {
147 |   transition: .4s;
148 |   max-height: 0;
149 |   opacity: 0;
150 | }
151 | 
152 | .faded-in {
153 |   max-height: 40px;
154 |   opacity: 1;
155 | }
156 | 
157 | /* tabs */
158 | .tabs {
159 |   margin-bottom: 1em;
160 |   display: flex;
161 |   gap: 1em;
162 | }
163 | 
164 | .selected {
165 |   border-bottom: 3px solid black;
166 | }
167 | 
168 | 
169 | /* dark mode */
170 | .dark {
171 |   background-color: #222;
172 |   color: #c9d1d9;
173 | }
174 | 
175 | .dark h3 {
176 |   color: white;
177 | }
178 | 


--------------------------------------------------------------------------------
/src/for.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // Internal use only
  3 | 
  4 | import createApp from './nue.js'
  5 | 
  6 | export default function(opts) {
  7 |   const { root, fn, fns, deps, ctx } = opts
  8 |   var anchor, current, items, $keys, $index, is_object_loop, blocks = []
  9 | 
 10 | 
 11 |   function createProxy(item) {
 12 |     return new Proxy({}, {
 13 |       get(__, key) {
 14 |         if (is_object_loop) {
 15 |           const i = $keys.indexOf(key)
 16 |           if (i >= 0) return item[i]
 17 |         }
 18 |         return key === $keys ? item :
 19 |           $keys.includes(key) ? item[key] :
 20 |           key == $index ? items.indexOf(item) :
 21 |           ctx[key]
 22 |       }
 23 |     })
 24 |   }
 25 | 
 26 |   function mountItem(item, i, arr, first) {
 27 |     const block = createApp({ fns, dom: root.cloneNode(true) }, createProxy(item), deps, ctx)
 28 | 
 29 |     blocks[first ? 'unshift' : 'push'](block)
 30 |     block.before(first || anchor)
 31 | 
 32 |     // oninsert callback for transition/animation purposes
 33 |     ctx.oninsert?.call(ctx, block.$el, item, {
 34 |       index: i,
 35 |       is_repaint: !!arr,
 36 |       is_first: !i,
 37 |       is_last: i == items.length -1,
 38 |       items
 39 |     })
 40 | 
 41 |   }
 42 | 
 43 |   function repaint() {
 44 |     blocks.forEach(el => el.unmount())
 45 |     blocks = []
 46 |     items.forEach(mountItem)
 47 |   }
 48 | 
 49 |   function arrProxy(arr) {
 50 |     const { unshift, splice, push, sort, reverse } = arr
 51 | 
 52 |     return Object.assign(arr, {
 53 | 
 54 |       // adding
 55 |       push(item) {
 56 |         push.call(items, item)
 57 |         mountItem(item, items.length - 1)
 58 |       },
 59 | 
 60 |       unshift(item) {
 61 |         unshift.call(items, item)
 62 |         mountItem(item, 0, null, blocks[0].$el)
 63 |       },
 64 | 
 65 |       // sorting
 66 |       sort(fn) {
 67 |         sort.call(items, fn)
 68 |         repaint()
 69 |       },
 70 | 
 71 |       reverse() {
 72 |         reverse.call(items)
 73 |         repaint()
 74 |       },
 75 | 
 76 |       // removing
 77 |       splice(i, len) {
 78 |         blocks.slice(i, i + len).forEach(el => el.unmount())
 79 |         blocks.splice(i, len)
 80 |         splice.call(items, i, len)
 81 |       },
 82 | 
 83 |       shift() { arr.splice(0, 1) },
 84 | 
 85 |       pop() { arr.splice(arr.length -1, 1) },
 86 | 
 87 |       // handy shortcut for a common operation
 88 |       remove(item) {
 89 |         const i = items.indexOf(item)
 90 |         if (i >= 0) arr.splice(i, 1)
 91 |       }
 92 |     })
 93 |   }
 94 | 
 95 |   // update function
 96 |   function update() {
 97 |     var arr
 98 |     [$keys, arr, $index, is_object_loop] = fn(ctx)
 99 | 
100 |     if (items) {
101 |       // change of current array --> repaint
102 |       if (arr !== current) {
103 |         items = arrProxy(arr); repaint(); current = arr
104 |       }
105 |       return blocks.forEach(el => el.update())
106 |     }
107 | 
108 |     if (arr) {
109 |       // anchor
110 |       const p = root.parentElement
111 |       anchor = new Text('')
112 |       p.insertBefore(anchor, root)
113 | 
114 |       p.removeChild(root)
115 |       items = arrProxy(arr)
116 |       arr.forEach(mountItem)
117 |       current = arr
118 |     }
119 |   }
120 | 
121 |   return { update }
122 | 
123 | }


--------------------------------------------------------------------------------
/test/client/img/spray.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m35.68 2.59v5.84h-7.36v-5.84a1.62 1.62 0 0 1 1.61-1.59h4.13a1.63 1.63 0 0 1 1.62 1.59z" fill="#acd2fe"/><path d="m45.61 19.77h-27.22l2.86-4.93a2.39 2.39 0 0 1 2.07-1.2h17.36a2.37 2.37 0 0 1 2.06 1.2z" fill="#acd2fe"/><path d="m18.39 33.03h27.23v16.75h-27.23z" fill="#acd2fe"/><path d="m22.73 63a2.4 2.4 0 0 1 -2.4-2.41v-8.88h25.28v8.91a2.41 2.41 0 0 1 -2.41 2.38z" fill="#acd2fe"/><path d="m20.33 21.71h25.29v11.32h-25.29z" fill="#acd2fe"/><path d="m21 19.77 2-3.48a1.41 1.41 0 0 1 1.23-.71h17.42a1.41 1.41 0 0 1 1.22.71l2 3.48z" fill="#fff"/><path d="m26.49 13.64v-2.09a1.18 1.18 0 0 1 1.19-1.18h10.58a1.18 1.18 0 0 1 1.19 1.18v2.09z" fill="#acd2fe"/><path d="m30.25 8.43v-4.87a.66.66 0 0 1 .65-.65h4.1a.66.66 0 0 1 .65.65v4.87z" fill="#fff"/><path d="m20.33 34.97h25.29v14.81h-25.29z" fill="#fff"/><g fill="#0229d5"><path d="m41.91 64a1 1 0 1 1 1-1 1 1 0 0 1 -1 1zm-2.91 0h-17.52a4.35 4.35 0 0 1 -4.06-4.33v-7.54a1 1 0 0 1 1.94 0v7.53a2.4 2.4 0 0 0 2.24 2.39h17.4a1 1 0 0 1 0 1.95zm5.58-.94a1 1 0 0 1 -.68-1.67 2.37 2.37 0 0 0 .74-1.73v-8.92h-22.79a1 1 0 1 1 0-1.93h23.76a.94.94 0 0 1 .69.28 1 1 0 0 1 .28.69v9.88a4.34 4.34 0 0 1 -1.34 3.13 1 1 0 0 1 -.66.27zm-25.64-12.32a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z"/><path d="m32.69 34h-2.91a1 1 0 0 1 0-1.94h14.86v-3.56a1 1 0 0 1 1.94 0v4.5a.91.91 0 0 1 -.28.68 1 1 0 0 1 -.69.29zm-5.82 0a1 1 0 1 1 1-1 1 1 0 0 1 -1 1zm-2.87 0h-5.61a1 1 0 0 1 -1-1v-13.23a1 1 0 0 1 1-1h1.53a1 1 0 0 1 0 1.94h-.56v11.35h4.64a1 1 0 0 1 0 1.94zm21.65-7.44a1 1 0 1 1 1-1 1 1 0 0 1 -1.04 1zm0-2.91a1 1 0 0 1 -1-1v-1.91h-18.91a1 1 0 0 1 0-1.94h19.87a.93.93 0 0 1 .69.29 1 1 0 0 1 .28.68v2.91a1 1 0 0 1 -.97.97zm-22.82-2.91a1 1 0 0 1 0-1.94 1 1 0 1 1 0 1.94z"/><path d="m45.61 20.74h-27.22a1 1 0 0 1 -.84-.48.94.94 0 0 1 0-1l2.86-4.94a3.38 3.38 0 0 1 2.91-1.68h17.36a3.38 3.38 0 0 1 2.9 1.68l2.87 4.93a1 1 0 0 1 -.84 1.46zm-25.54-1.94h23.86l-2-3.48a1.44 1.44 0 0 0 -1.23-.71h-17.38a1.41 1.41 0 0 0 -1.23.71z"/><path d="m39.45 14.61h-3.73a1 1 0 1 1 0-1.94h2.76v-2.09a.86.86 0 0 1 0-.16.53.53 0 0 1 -.05-.15 1.19 1.19 0 0 0 -1.15-.87h-4.92a1 1 0 1 1 0-1.94h4.93a3.12 3.12 0 0 1 3 2.32.9.9 0 0 1 0 .4.9.9 0 0 1 .09.4v3.06a1 1 0 0 1 -.93.97zm-6.64 0h-7.75a1 1 0 0 1 0-1.94h7.75a1 1 0 0 1 0 1.94zm-8.26-2.4a1 1 0 0 1 -1-1v-.66a3.13 3.13 0 0 1 3.13-3.12h2.74a1 1 0 1 1 0 1.94h-2.71a1.18 1.18 0 0 0 -1.19 1.18v.66a1 1 0 0 1 -.97 1z"/><path d="m35.68 9.4h-7.36a1 1 0 0 1 -1-1v-5.81a2.59 2.59 0 0 1 2.61-2.59h4.13a2.6 2.6 0 0 1 2.59 2.59v5.84a1 1 0 0 1 -.97.97zm-6.39-1.94h5.42v-4.87a.66.66 0 0 0 -.65-.65h-4.13a.65.65 0 0 0 -.64.65z"/><path d="m32 4.06a1 1 0 0 1 -1-1v-2.06a1 1 0 1 1 2 0v2.09a1 1 0 0 1 -1 .97z"/><path d="m45.61 50.74h-27.22a1 1 0 0 1 -1-1v-16.74a1 1 0 0 1 1-1h27.22a1 1 0 0 1 1 1v16.77a1 1 0 0 1 -1 .97zm-26.25-1.94h25.28v-14.8h-25.28z"/></g><path d="m33 45.57a2 2 0 0 1 -2-2c0-.65.93-2.28 2-3.76 1.05 1.48 2 3.11 2 3.76a2 2 0 0 1 -2 2z" fill="#acd2fe"/><path d="m32 46.54a3.94 3.94 0 0 1 -3.93-3.93 4.39 4.39 0 0 1 .45-1.71 1 1 0 0 1 1.28-.49 1 1 0 0 1 .49 1.28 2.59 2.59 0 0 0 -.28.92 2 2 0 0 0 4 0v-.07a.29.29 0 0 1 0-.09 12.59 12.59 0 0 0 -2-3.59c-.11.14-.22.3-.33.47a1 1 0 0 1 -1.35.25 1 1 0 0 1 -.25-1.34c.62-.91 1.14-1.58 1.17-1.61a1 1 0 0 1 1.52 0c.28.35 2.75 3.52 3.11 5.46a1.06 1.06 0 0 1 0 .25 1.17 1.17 0 0 1 0 .27 3.94 3.94 0 0 1 -3.88 3.93z" fill="#0229d5"/></svg>


--------------------------------------------------------------------------------
/ssr/expr.js:
--------------------------------------------------------------------------------
  1 | 
  2 | const VARIABLE = /(^|[\-\+\*\/\!\s\(\[]+)([\$a-z_]\w*)\b/g
  3 | const STRING = /('[^']+'|"[^"]+")/
  4 | const EXPR = /\{([^{}]+)\}/g
  5 | 
  6 | 
  7 | // https://github.com/vuejs/core/blob/main/packages/shared/src/globalsWhitelist.ts
  8 | const RESERVED = `
  9 |   alert arguments Array as BigInt Boolean confirm console delete Date decodeURI decodeURIComponent
 10 |   document else encodeURI encodeURIComponent false get history if in Infinity instanceof
 11 |   Intl isFinite isNaN JSON localStorage location Map Math NaN navigator new null Number
 12 |   number Object of parseFloat parseInt prompt RegExp sessionStorage Set String this
 13 |   throw top true typeof undefined window $event`.trim().split(/\s+/)
 14 | 
 15 | 
 16 | // foo -> _.foo
 17 | export function setContextTo(expr) {
 18 |   return expr.replace(VARIABLE, function(match, prefix, varname, i) {
 19 |     const is_reserved = RESERVED.includes(varname)
 20 |     return prefix + (is_reserved ? varname == '$event' ? 'e' : varname : '_.' + varname.trimStart())
 21 |   })
 22 | }
 23 | 
 24 | // 'the foo' + foo -> 'the foo' + _.foo
 25 | export function setContext(expr) {
 26 |   return ('' + expr).split(STRING).map((el, i) => i % 2 == 0 ? setContextTo(el) : el).join('')
 27 | }
 28 | 
 29 | 
 30 | // style="color: blue; font-size: { size }px"
 31 | export function parseExpr(str, is_style) {
 32 |   const ret = []
 33 | 
 34 |   str.trim().split(EXPR).map((str, i) => {
 35 | 
 36 |     // normal string
 37 |     if (i % 2 == 0) {
 38 |       if (str) ret.push(`'${str}'`)
 39 | 
 40 |     // Object: { is-active: isActive() }
 41 |     } else if (isObject(str.trim())) {
 42 |       const vals = parseClass(str)
 43 |       ret.push(...vals)
 44 | 
 45 |     } else {
 46 |       ret.push(setContext(str.trim()))
 47 |     }
 48 | 
 49 |   })
 50 | 
 51 |   return ret
 52 | }
 53 | 
 54 | function isObject(str) {
 55 |   const i = str.indexOf(':')
 56 |   return i > 0 && !str.includes('?') && /^[\w-]+$/.test(str.slice(0, i))
 57 | }
 58 | 
 59 | /*
 60 |   is-active: isActive, danger: hasError
 61 |   --> [_.isActive && 'is-active', _.hasError && 'danger']
 62 | */
 63 | export function parseClass(str) {
 64 |   return str.split(',').map(el => {
 65 |     const [name, expr] = el.trim().split(':').map(el => el.trim())
 66 |     return setContextTo(expr) + ' && ' + (name[0] == "'" ? name : `'${name} '`)
 67 |   })
 68 | }
 69 | 
 70 | /* { color: 'blue',  }
 71 | export function parseStyle(str) {
 72 |   return str.split(',').map(el => {
 73 |     const [name, expr] = el.trim().split(':').map(el => el.trim())
 74 |     const exp = setContextTo(expr)
 75 |     return  exp + ' && ' + `'${name}: ' + (${exp})`
 76 |   })
 77 | }
 78 | */
 79 | 
 80 | 
 81 | function parseObjectKeys(str) {
 82 |   const i = str.indexOf('}') + 1
 83 |   if (!i) throw `Parse error: ${str}`
 84 |   const keys = parseKeys(str.slice(0, i))
 85 |   const j = str.slice(i).indexOf(',')
 86 |   const index = j >= 0 ? str.slice(i + j + 1).trim() : undefined
 87 |   return { keys, index }
 88 | }
 89 | 
 90 | function parseKeys(str) {
 91 |   return str.trim().slice(1, -1).split(',').map(el => el.trim())
 92 | }
 93 | 
 94 | export function parseFor(str) {
 95 |   let [prefix, _, expr ] = str.trim().split(/\s+(in|of)\s+/)
 96 |   prefix = prefix.replace('(', '').replace(')', '').trim()
 97 |   expr = setContextTo(expr)
 98 | 
 99 |   // Object.entries()
100 |   if (prefix[0] == '[') {
101 |     const keys = parseKeys(prefix)
102 |     return [ keys.slice(0, 2), expr, keys[2] || '$index', true ]
103 | 
104 |   // Object deconstruction
105 |   } else if (prefix[0] == '{') {
106 |     const { keys, index } = parseObjectKeys(prefix)
107 |     return [ keys, expr, index || '$index' ]
108 | 
109 |   // Normal loop variable
110 |   } else {
111 |     const [ key, index='$index' ] = prefix.split(/\s?,\s?/)
112 |     return [ key, expr, index ]
113 |   }
114 | }
115 | 
116 | 
117 | 
118 | 
119 | 


--------------------------------------------------------------------------------
/ssr/fn.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { parseDocument, DomUtils } from 'htmlparser2'
  3 | 
  4 | // shared by render.js and compile.js
  5 | 
  6 | export const STD = 'a abbr acronym address applet area article aside audio b base basefont bdi bdo big\
  7 |  blockquote body br button canvas caption center circle cite clipPath code col colgroup data datalist\
  8 |  dd defs del details dfn dialog dir div dl dt ellipse em embed fieldset figcaption figure font footer\
  9 |  foreignObject form frame frameset g head header hgroup h1 h2 h3 h4 h5 h6 hr html i iframe image img\
 10 |  input ins kbd keygen label legend li line link main map mark marker mask menu menuitem meta meter\
 11 |  nav noframes noscript object ol optgroup option output p param path pattern picture polygon polyline\
 12 |  pre progress q rect rp rt ruby s samp script section select small source span strike strong style sub\
 13 |  summary sup svg switch symbol table tbody td template text textarea textPath tfoot th thead time\
 14 |  title tr track tspan tt u ul use var video wbr'.split(' ')
 15 | 
 16 | const SVG = 'animate animateMotion animateTransform circle clipPath defs desc ellipse\
 17 |  feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting\
 18 |  feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR\
 19 |  feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting\
 20 |  feSpotLight feTile feTurbulence filter foreignObject g hatch hatchpath image line linearGradient\
 21 |  marker mask metadata mpath path pattern polygon polyline radialGradient rect set stop style svg\
 22 |  switch symbol text textPath title tspan use view'.split(' ')
 23 | 
 24 | STD.push(...SVG)
 25 | 
 26 | const BOOLEAN = 'allowfullscreen async autofocus autoplay checked controls default\
 27 |  defer disabled formnovalidate hidden ismap itemscope loop multiple muted nomodule\
 28 |  novalidate open playsinline readonly required reversed selected truespeed'.split(/\s+/)
 29 | 
 30 | export function isBoolean(key) {
 31 |   return BOOLEAN.includes(key)
 32 | }
 33 | 
 34 | export function getComponentName(root) {
 35 |   const { attribs } = root
 36 |   const name = attribs['@name'] || attribs['data-name'] || attribs.id
 37 |   delete attribs['@name']
 38 |   return name
 39 | }
 40 | 
 41 | export function selfClose(str) {
 42 |   return str.replace(/\/>/g, function(match, i) {
 43 |     const tag = str.slice(str.lastIndexOf('<', i), i)
 44 |     const name = /<([\w-]+)/.exec(tag)
 45 |     return `></${name[1]}>`
 46 |   })
 47 | }
 48 | 
 49 | export function walk(node, fn) {
 50 |   fn(node)
 51 |   node = node.firstChild
 52 |   let next = null
 53 |   while (node) {
 54 |     next = node.nextSibling
 55 |     walk(node, fn)
 56 |     node = next
 57 |   }
 58 | }
 59 | 
 60 | export function objToString(obj, minify) {
 61 |   if (!obj) return null
 62 | 
 63 |   const prefix = minify ? '' : '  '
 64 |   const keys = Object.keys(obj)
 65 |   const ret = ['{']
 66 | 
 67 |   keys.forEach((key, i) => {
 68 |     const comma = i + 1 < keys.length ? ',' : ''
 69 |     const val = obj[key]
 70 |     if (val) ret.push(`${prefix}${key}: ${quote(val)}${comma}`)
 71 |   })
 72 | 
 73 |   ret.push('}')
 74 |   return ret.join(minify ? '' : '\n')
 75 | }
 76 | 
 77 | function quote(val) {
 78 |   return val.endsWith('}') || val.endsWith(']') || 1 * val ? val : `'${val}'`
 79 | }
 80 | 
 81 | export function mkdom(src) {
 82 |   const dom = parseDocument(selfClose(src))
 83 |   walk(dom, (el) => { if (el.type == 'comment') DomUtils.removeElement(el) }) // strip comments
 84 |   return dom
 85 | }
 86 | 
 87 | // render.js only
 88 | const isJS = val => val?.constructor === Object || Array.isArray(val) || typeof val == 'function'
 89 | 
 90 | 
 91 | // exec('`font-size:${_.size + "px"}`;', data)
 92 | export function exec(expr, data={}) {
 93 |   const fn = new Function('_', 'return ' + expr)
 94 | 
 95 |   try {
 96 |     const val = fn(data)
 97 |     return val == null ? '' : isJS(val) ? val : '' + val
 98 | 
 99 |   } catch (e) {
100 |     console.info('🔻 expr', expr, e)
101 |     return ''
102 |   }
103 | }
104 | 
105 | 
106 | function isStdAttr(name) {
107 |   return ['style', 'class', 'id', 'hidden'].includes(name) || name.startsWith('data-')
108 | }
109 | 
110 | export function mergeAttribs(to, from) {
111 |   for (const name in from) {
112 |     if (isStdAttr(name)) {
113 |       let val = from[name]
114 |       const toval = to[name]
115 |       if (toval && ['class'].includes(name)) val += ' ' + toval
116 |       to[name] = val
117 |     }
118 |   }
119 | }
120 | 
121 | 
122 | 


--------------------------------------------------------------------------------
/test/client/loops.nue:
--------------------------------------------------------------------------------
  1 | 
  2 | <main class="grid">
  3 |   <component-loop class="card"/>
  4 |   <loop-bind class="card"/>
  5 |   <if-loop class="card"/>
  6 |   <nested-loop class="card"/>
  7 |   <array-methods class="card"/>
  8 |   <object-loop class="card"/>
  9 |   <loop-tabs class="card"/>
 10 | </main>
 11 | 
 12 | <section @name="if-loop">
 13 |   <h3>Conditional loops</h3>
 14 |   <p :if="false" :for="name in ['show', 'these', 'items']">Name: { name }</p>
 15 |   <p :else-if="false">Else if</p>
 16 |   <p :else>Else</p>
 17 | </section>
 18 | 
 19 | <section @name="loop-tabs">
 20 |   <h3>Tabs test</h3>
 21 | 
 22 |   <div class="tabs">
 23 |     <span :for="name, i in items"
 24 |       :class="{ selected: i == index }" @click="ontab(name, i)">{ name }</span>
 25 |   </div>
 26 | 
 27 |   <p>Index: { index }</p>
 28 | 
 29 |   <script>
 30 |     index = 0
 31 |     items = ['First', 'Second', 'Third']
 32 | 
 33 |     ontab(name, i) {
 34 |       this.index = i
 35 |     }
 36 |   </script>
 37 | 
 38 | </section>
 39 | 
 40 | 
 41 | <section @name="loop-bind">
 42 |   <h3>Loop binding</h3>
 43 | 
 44 |   <bind-item :for="el in items" :bind="el"/>
 45 | 
 46 |   <hr>
 47 | 
 48 |   <bind-item :bind="item"/>
 49 | 
 50 |   <script>
 51 |     item = { title: 'Normal bind', desc: 'Normal desc' }
 52 | 
 53 |     items = [
 54 |       { title: 'Looped #1', desc: 'Desc 1' },
 55 |       { title: 'Looped #2', desc: 'Desc 2' }
 56 |     ]
 57 |   </script>
 58 | 
 59 | </section>
 60 | 
 61 | <div @name="bind-item">
 62 |   <h4>{ title }</h4>
 63 |   <p>{ desc }</p>
 64 | </div>
 65 | 
 66 | <section @name="nested-loop">
 67 | 
 68 |   <h3>Nested loop</h3>
 69 | 
 70 |   <div :for="{ title, tags }, $i in items" class="mb">
 71 |     <h5>{ $i }: { title } <sup>{ star }</sup></h5>
 72 |     <span :for="tag, i in tags" class="tag">{ tag } <sup>({ i }{ star })</sup></span>
 73 |   </div>
 74 | 
 75 |   <script>
 76 |     // access to all parent scopes
 77 |     star = '*'
 78 | 
 79 |     items = [
 80 |       { title: 'First', tags: 'foo bar baz'.split(' ') },
 81 |       { title: 'Second', tags: 'lol bruh lmao'.split(' ') },
 82 |     ]
 83 |   </script>
 84 | 
 85 | </section>
 86 | 
 87 | <section @name="component-loop">
 88 | 
 89 |   <loop-item :item="item"/>
 90 | 
 91 |   <h5>Loop items</h5>
 92 |   <loop-item :for="item in items" :item="item"/>
 93 | 
 94 |   <script>
 95 |     items = [{ title: 'Loop item #1' }]
 96 |     item = { title: 'Self item' }
 97 |   </script>
 98 | 
 99 | </section>
100 | 
101 | <div @name="loop-item">
102 |   <h3>{ item.title }</h3>
103 |   <p>{ desc }</p>
104 | 
105 |   <script>
106 |     constructor({ item }) {
107 |       this.desc = `Lower: ${ item.title.toLowerCase() }`
108 |     }
109 |   </script>
110 | </div>
111 | 
112 | 
113 | <section @name="object-loop">
114 | 
115 |   <h3>Object loop</h3>
116 | 
117 |   <p><button @click="change">Change values</button></p>
118 | 
119 |   <p :for="[key, value, i] in Object.entries(person)" class="row">
120 |     <b>{ i }</b>
121 |     <label>{ key }</label>
122 |     <strong>{ value }</strong>
123 |   </p>
124 | 
125 |   <script>
126 |     person = {
127 |       name: 'Nick',
128 |       email: 'nick@acme.org',
129 |       age: 10
130 |     }
131 | 
132 |     change() {
133 |       this.person.name = 'Alice'
134 |       this.person.email = 'alic@police.com'
135 |       this.person.age = '89'
136 |     }
137 |   </script>
138 | </section>
139 | 
140 | <section @name="array-methods">
141 |   <h3>Animation</h3>
142 |   <p>
143 |     <button @click="push">Push</button>
144 |     <button @click="unshift">Unshift</button>
145 |     <button @click="items.reverse()">Reverse</button>
146 |     <button @click="reset" :if="items[2]">Reset</button>
147 |   </p>
148 | 
149 |   <!-- items -->
150 |   <p :for="el in items" class="row fade-in">
151 |     <label>{ el.name }</label>
152 |     <a @click="items.remove(el)" class="right">Remove</a>
153 |   </p>
154 | 
155 |   <script>
156 |     push() {
157 |       this.items.push({ name: 'Push: ' + this.items.length })
158 |     }
159 | 
160 |     unshift() {
161 |       this.items.unshift({ name: 'Unshift: ' + this.items.length })
162 |     }
163 | 
164 |     // transition
165 |     oninsert(node, item, loop) {
166 |       const fadeIn = () => node.classList.add('faded-in')
167 |       if (loop.is_repaint) fadeIn()
168 |       else setTimeout(fadeIn, 1)
169 |     }
170 | 
171 |     reset() {
172 |       this.items = [{ name: 'John Doe' }, { name: 'Mick Jagger' }]
173 |     }
174 | 
175 |     constructor() {
176 |       this.reset()
177 |     }
178 |   </script>
179 | 
180 | </section>
181 | 
182 | 
183 | 
184 | 
185 | 


--------------------------------------------------------------------------------
/test/client/img/pin.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m39.59 43.17c-1.72 1.72-7.3-1.07-12.46-6.23s-7.94-10.73-6.22-12.45l.37-.27 3.22-2.36 20.28-14.86a32.17 32.17 0 0 0 5.37 6.91 31.93 31.93 0 0 0 6.91 5.37l-14.84 20.29-2.36 3.22z" fill="#acd2fe"/><path d="m62.11 20.18a8.14 8.14 0 0 1 -3.38-1.18 31.07 31.07 0 0 1 -6.58-5.13 31.07 31.07 0 0 1 -5.15-6.58c-1.44-2.62-1.2-3.71-1.1-3.82a.84.84 0 0 1 .44-.08c1.81 0 5.82 2.17 10 6.31 5.45 5.45 6.76 9.86 6.22 10.39-.04.03-.16.09-.45.09z" fill="#acd2fe"/><path d="m39.1 43.19c-1.82 0-5.83-2.17-10-6.31a29.13 29.13 0 0 1 -5.41-7.13c-1-2.07-.93-3-.83-3.22l22.46-16.43a36.32 36.32 0 0 0 4.77 5.82 36.31 36.31 0 0 0 5.82 4.78l-16.42 22.43a.93.93 0 0 1 -.39.06z" fill="#fff"/><path d="m44.09 54.78c-3.65 0-10-3.44-16.23-8.77-1.4-1.19-2.77-2.46-4.08-3.78s-2.58-2.68-3.78-4.07c-7.5-8.76-10.08-16.25-8.15-18.16a2.61 2.61 0 0 1 1.93-.61c2.22 0 5.48 1.27 9.14 3.52l-2 1.46-.08.07c-.92.93-1.63 2.83.26 6.62a32.09 32.09 0 0 0 6 7.89c4.34 4.35 9.06 7.16 12 7.16a3.43 3.43 0 0 0 2.49-.93l.07-.08 1.46-2c3.66 5.9 4.13 9.9 2.88 11.07a2.67 2.67 0 0 1 -1.91.61z" fill="#acd2fe"/><path d="m19.05 41.48c.86 1 1.76 1.9 2.67 2.81s1.86 1.81 2.82 2.71l-17.06 11.54z" fill="#acd2fe"/><g fill="#0229d5"><path d="m61.16 21.64a10.14 10.14 0 0 1 -4.55-1.49 27.2 27.2 0 0 1 -3.28-2.15.92.92 0 0 1 -.37-.64.9.9 0 0 1 .19-.72 1 1 0 0 1 1.36-.18 25.11 25.11 0 0 0 3 2 8.62 8.62 0 0 0 3.59 1.24 1.07 1.07 0 0 0 .78-.22.75.75 0 0 0 .13-.22 1 1 0 0 1 1.26-.54.93.93 0 0 1 .54.51 1.07 1.07 0 0 1 0 .75 2.58 2.58 0 0 1 -.57.87 3 3 0 0 1 -2.08.79zm1.57-3.9a1 1 0 0 1 -.92-.66 1 1 0 0 1 .6-1.23 1 1 0 0 1 .59 1.83.81.81 0 0 1 -.27.06zm-11-1.4a1 1 0 0 1 -.73-.24 1 1 0 0 1 0-1.38 1 1 0 0 1 1.37-.07 1 1 0 0 1 -.65 1.68zm9.8-1.23a1 1 0 0 1 -.83-.49 32.66 32.66 0 0 0 -5-6.23c-.32-.32-.66-.65-1-1-3.85-3.59-7.7-5.49-9.31-5.45a1.12 1.12 0 0 0 -.78.22 1.11 1.11 0 0 0 -.23.78 8.66 8.66 0 0 0 1.24 3.62 30.6 30.6 0 0 0 4.67 6.11 1 1 0 0 1 0 1.38 1 1 0 0 1 -1.37 0 32.5 32.5 0 0 1 -5-6.53 10.05 10.05 0 0 1 -1.49-4.55 3 3 0 0 1 .81-2.17 2.94 2.94 0 0 1 2.12-.8c2.72.05 6.48 2.17 10.64 6 .38.35.74.7 1.08 1a34.13 34.13 0 0 1 5.26 6.63 1 1 0 0 1 .1.74.93.93 0 0 1 -.44.63 1 1 0 0 1 -.52.11z"/><path d="m38.13 44.65c-2.29 0-5.79-1.83-9.37-4.88a1 1 0 1 1 1.24-1.48c3.15 2.68 6.33 4.42 8.11 4.42a1.1 1.1 0 0 0 .77-.23 1 1 0 0 1 1.37 1.37 2.87 2.87 0 0 1 -2.12.8zm2.87-2.42a1 1 0 0 1 -.79-1.55l15.43-21.08a35.12 35.12 0 0 1 -6.1-4.91 1 1 0 0 1 1.37-1.38 31 31 0 0 0 6.62 5.14 1 1 0 0 1 .48.64 1 1 0 0 1 -.17.78l-16.07 22a1 1 0 0 1 -.77.36zm-13.75-4.23a.94.94 0 0 1 -.68-.29l-.11-.1c-4.27-4.27-7-8.86-7-11.69a2.91 2.91 0 0 1 .8-2.15l.11-.09.36-.27h.06l16.5-12.11a1 1 0 1 1 1.15 1.56l-16.58 12.14h-.06l-.24.18a1.25 1.25 0 0 0 -.19.73c0 1.86 2 5.88 6.45 10.31l.12.11a1 1 0 0 1 0 1.37 1 1 0 0 1 -.69.3zm21-25.18a1 1 0 0 1 -.73-.34 32.41 32.41 0 0 1 -3-4.07l-3.7 2.71a1 1 0 0 1 -1.14-1.57l4.52-3.31a1 1 0 0 1 .8-.17 1 1 0 0 1 .64.48 27.68 27.68 0 0 0 3.36 4.69 1 1 0 0 1 -.74 1.61z"/><path d="m43.14 56.24a16.33 16.33 0 0 1 -6.6-1.82 1 1 0 0 1 -.47-1.28 1 1 0 0 1 1.29-.47 14.91 14.91 0 0 0 5.77 1.63 3.14 3.14 0 0 0 2.28-.75 3.05 3.05 0 0 0 .75-2.29c0-2.37-1.43-6-4-10l-1.91 2.59a3 3 0 0 1 -2.12.8 10.6 10.6 0 0 1 -5-1.73 1 1 0 0 1 -.44-.59 1 1 0 0 1 1.42-1.09 9.28 9.28 0 0 0 4 1.47 1.21 1.21 0 0 0 .74-.2l2.59-3.51a1 1 0 0 1 .78-.39 1 1 0 0 1 .78.39c3.29 4.88 5 9.12 5.06 12.24a4.56 4.56 0 0 1 -5 5zm-8.78-3.07a1.18 1.18 0 0 1 -.49-.12 1 1 0 0 1 -.36-1.33 1 1 0 0 1 1.33-.36 1 1 0 0 1 .36 1.33 1 1 0 0 1 -.84.48zm-2.48-1.53a.9.9 0 0 1 -.53-.17 60.89 60.89 0 0 1 -6-4.58c-1.44-1.24-2.85-2.55-4.21-3.91s-2.67-2.77-3.91-4.21a62.68 62.68 0 0 1 -5.12-6.77v-.05a27.37 27.37 0 0 1 -4-9.09.94.94 0 0 1 .76-1.13 1 1 0 0 1 1.14.77 26 26 0 0 0 3.81 8.46 56.9 56.9 0 0 0 4.92 6.56c1.19 1.4 2.47 2.77 3.8 4.11s2.71 2.61 4.1 3.8a61.23 61.23 0 0 0 5.85 4.45 1 1 0 0 1 -.54 1.78zm-.68-10.19a1 1 0 0 1 -.56-.19 1 1 0 0 1 -.2-1.35 1 1 0 0 1 1.36-.2 1 1 0 0 1 .2 1.35 1 1 0 0 1 -.8.39zm-2.26-1.84a1 1 0 0 1 -.64-.24c-.64-.56-1.26-1.15-1.85-1.74a35.24 35.24 0 0 1 -4.7-5.73c-1.54-2.41-2.3-4.36-2.32-5.95a3 3 0 0 1 .8-2.14l.49-.38 2.1-1.53c-3.95-2.52-7.58-4-10-4a3.82 3.82 0 0 0 -1.81.39 1 1 0 0 1 -1.31-.38 1 1 0 0 1 -.09-.74 1 1 0 0 1 .46-.57 5.51 5.51 0 0 1 2.75-.6c3.12 0 7.36 1.78 12.24 5.07a1 1 0 0 1 0 1.59l-3.53 2.58a1.12 1.12 0 0 0 -.19.73 10.8 10.8 0 0 0 2 4.91 34.25 34.25 0 0 0 4.44 5.4c.56.56 1.15 1.12 1.76 1.66a1 1 0 0 1 .09 1.36.92.92 0 0 1 -.69.31zm-20-18.87h-.2a1 1 0 0 1 -.74-1.17 1 1 0 0 1 1.15-.75 1 1 0 0 1 .73 1.18 1 1 0 0 1 -.95.74z"/><path d="m1.05 64a1 1 0 0 1 -.69-.28 1 1 0 0 1 -.12-1.23l13.06-19.25a1 1 0 0 1 1.34-.24 1 1 0 0 1 .26 1.35l-10.21 15.04 6.31-4.25a1 1 0 0 1 1 1.61l-10.41 7.08a.91.91 0 0 1 -.54.17zm12.85-8.72a1 1 0 0 1 -.8-.42 1 1 0 0 1 .26-1.35l11-7.46c-1.11-1-2.21-2-3.26-3.07s-2.1-2.15-3.1-3.26l-1.5 2.2a1 1 0 1 1 -1.6-1.09l2.2-3.24a1 1 0 0 1 1.53-.09c1.21 1.4 2.49 2.79 3.81 4.11 1.18 1.15 2.39 2.28 3.56 3.39a.94.94 0 0 1 .22.28 1 1 0 0 1 .48.37 1 1 0 0 1 -.21 1.35l-12 8.17a1 1 0 0 1 -.59.11z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <a href="https://nuejs.org">
  4 |   <img src="https://nuejs.org/global/logo/logo.png" width="275" alt="Nue logo">
  5 | </a>
  6 | 
  7 | [Documentation](//nuejs.org/docs/nuejs/) •
  8 | [Examples](//nuejs.org/docs/nuejs/examples/) •
  9 | [Getting started](//nuejs.org/docs/nuejs/getting-started.html)
 10 | [Rethinking reactivity](//nuejs.org/blog/blog/rethinking-reactivity/) •
 11 | 
 12 | 
 13 | # What is Nue JS?
 14 | 
 15 | Nue JS is an exceptionally small (2.3kb minzipped) JavaScript library for building web interfaces. It is the core of the upcoming [Nue toolset](//nuejs.org/tools/). It’s like **Vue.js, React.js**, or **Svelte** but there are no hooks, effects, props, portals, watchers, provides, injects, suspension, or other unusual abstractions on your way. Learn the basics of HTML, CSS, and JavaScript and you are good to go.
 16 | 
 17 | 
 18 | ## Build user interfaces with cleaner code
 19 | With Nue your UI code is cleaner and usually smaller:
 20 | 
 21 | ![The difference in coding style](https://nuejs.org/docs/img/react-listbox.jpg?1)
 22 | 
 23 | It's not unusual to see [2x-10x differences](//nuejs.org/compare/component.html) in the amount of code you need to write.
 24 | 
 25 | 
 26 | ## "It's just HTML"
 27 | Nue uses an HTML-based template syntax:
 28 | 
 29 | ``` html
 30 | <div class="{ type }">
 31 |   <img src="{ img }">
 32 |   <aside>
 33 |     <h3>{ title }</h3>
 34 |     <p :if="desc">{ desc }</p>
 35 |     <slot/>
 36 |   </aside>
 37 | </div>
 38 | ```
 39 | 
 40 | While React and JSX claim to be "Just JavaScript", Nue can be thought of as "Just HTML". Nue is perfect for [UX developers][divide] focusing on interaction design, accessibility, and user experience.
 41 | 
 42 | 
 43 | ## Built to scale
 44 | Three reasons why Nue scales extremely well:
 45 | 
 46 | 1. [Minimalism](//nuejs.org/why/#minimalism), a hundred lines of code is easier to scale than a thousand lines of code
 47 | 
 48 | 1. [Separation of concerns](//nuejs.org//why/#soc), easy-to-understand code is easier to scale than "spaghetti code"
 49 | 
 50 | 1. **Separation of talent**, when UX developers focus on the [front of the frontend][back] and JS/TS developers focus on the back of the frontend your team skills are optimally aligned:
 51 | 
 52 | ![The best results are gained when UX developers and JavaScript developers work together without overlaps](https://nuejs.org/docs/img/ux-developer-big.png)
 53 | 
 54 | 
 55 | 
 56 | ## Reactive, hybrid, and isomorphic
 57 | Nue has a rich component model and it allows you to create all kinds of applications using different kinds of components:
 58 | 
 59 | 1. [Server components](//nuejs.org/docs/nuejs/server-components.html) are rendered on the server. They help you build content-focused websites that load faster without JavaScript and are crawled by search engines.
 60 | 
 61 | 2. [Reactive components](//nuejs.org/docs/nuejs/reactive-components.html) are rendered on the client. They help you build dynamic islands or single-page applications.
 62 | 
 63 | 3. [Hybrid components](//nuejs.org/docs/nuejs/isomorphic-components.html#hybrid) are partly rendered on the server side, and partly on the client side. These components help you build reactive, SEO-friendly components like video tags or image galleries.
 64 | 
 65 | 3. [Universal components](//nuejs.org/docs/nuejs/isomorphic-components.html) are used identically on both server- and client side.
 66 | 
 67 | 
 68 | 
 69 | ## UI library files
 70 | Nue allows you to define multiple components on a single file. This is a great way to group related components together and simplify dependency management.
 71 | 
 72 | 
 73 | ``` html
 74 | <!-- shared variables and methods -->
 75 | <script>
 76 |   import { someMethod } from './util.js'
 77 | </script>
 78 | 
 79 | <!-- first component -->
 80 | <article @name="todo">
 81 |   ...
 82 | </article>
 83 | 
 84 | <!-- second component -->
 85 | <div @name="todo-item">
 86 |   ...
 87 | </div>
 88 | 
 89 | <!-- third component -->
 90 | <time @name="cute-date">
 91 |   ...
 92 | </time>
 93 | ```
 94 | 
 95 | With library files, your filesystem hierarchy looks cleaner and you need less boilerplate code to tie connected pieces together. They help in packaging libraries for others.
 96 | 
 97 | 
 98 | ## Simpler tooling
 99 | Nue JS comes with a simple `render` function for server-side rendering and a `compile` function to generate components for the browser. There is no need for toolchains like Webpack or Vite to hijack your natural workflow. Just import Nue to your project and you are good to go.
100 | 
101 | You can of course use a bundler on the business model if your application becomes more complex with tons of dependencies. [Bun](//bun.sh) and [esbuild](//esbuild.github.io/) are great options.
102 | 
103 | 
104 | ## Use cases
105 | Nue JS is a versatile tool that supports both server- and client-side rendering and helps you build both content-focused websites and reactive single-page applications.
106 | 
107 | 1. **UI library development** Create reusable components for reactive frontends or server-generated content.
108 | 
109 | 2. **Progressive enhancement** Nue JS is a perfect micro library to enhance your content-focused website with dynamic components or "islands"
110 | 
111 | 3. **Static website generators** Just import it into your project and you are ready to render. No bundlers are needed.
112 | 
113 | 4. **Single-page applications** Build simpler and more scalable apps together with an upcoming *Nue MVC*- project.
114 | 
115 | 5. **Templating** Nue is a generic tool to generate your websites and HTML emails.
116 | 
117 | 
118 | [fourteen]: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#tcp_slow_start_14kb_rule
119 | 
120 | [divide]: https://css-tricks.com/the-great-divide/
121 | 
122 | [back]: https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/
123 | 
124 | 
125 | 


--------------------------------------------------------------------------------
/ssr/compile.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { mkdom, getComponentName, isBoolean, walk, objToString, STD } from './fn.js'
  3 | import { parseExpr, parseFor, setContext, setContextTo } from './expr.js'
  4 | import { promises as fs } from 'node:fs'
  5 | import { DomUtils } from 'htmlparser2'
  6 | import { dirname } from 'node:path'
  7 | const { getOuterHTML, getInnerHTML, removeElement } = DomUtils
  8 | 
  9 | function compileNode(root) {
 10 |   const expr = []
 11 | 
 12 |   // push expression
 13 |   function push(fn, is_handler) {
 14 |     const len = expr.length
 15 |     expr.push({ fn, is_handler })
 16 |     return '' + len
 17 |   }
 18 | 
 19 |   walk(root, function(node) {
 20 |     const { attribs={}, tagName } = node
 21 |     const content = node.data
 22 | 
 23 |     if (node.type == 'comment' || attribs.server || tagName == 'noscript') removeElement(node)
 24 | 
 25 |     // attributes
 26 |     for (let key in attribs) {
 27 |       const val = attribs[key]
 28 |       const has_expr = val.includes('{')
 29 | 
 30 |       // class="{}" --> :class="{}"
 31 |       if (key[0] != ':' && has_expr) {
 32 |         delete attribs[key]
 33 |         key = ':' + key
 34 |       }
 35 | 
 36 |       // after above clause
 37 |       const char = key[0]
 38 | 
 39 |       // :disabled -> $disabled
 40 |       if (char == ':' && isBoolean(key.slice(1))) {
 41 |         delete attribs[key]
 42 |         key = '$' + key.slice(1)
 43 |         attribs[key] = val
 44 |       }
 45 | 
 46 |       // event handler
 47 |       if (char == '@') {
 48 |         const { name, body } = getEventHandler(key, val)
 49 | 
 50 |         if (body) {
 51 |           delete attribs[key]
 52 |           attribs[name] = push(body, true)
 53 |         }
 54 | 
 55 |       // for expression
 56 |       } else if (key == ':for') {
 57 |         attribs[key] = push(compileLoop(val))
 58 | 
 59 |       // attributes
 60 |       } else if (':$'.includes(char) && val && key != ':is') {
 61 |         const expr = has_expr ? arrwrap(parseExpr(val)) : setContext(val)
 62 |         attribs[key] = push(expr)
 63 |       }
 64 |     }
 65 | 
 66 |     // The { content } --> :1:
 67 |     const _attr = node.parentNode?.attribs || {}
 68 | 
 69 |     if (!_attr[':pre'] && content?.includes('{')) {
 70 |       const html = getHTML(content)
 71 |       const i = push(html ? setContext(html) : arrwrap(parseExpr(content)))
 72 |       if (html) _attr[':html'] = '' + i
 73 |       node.data = html ? '' : `:${i}:`
 74 |     }
 75 |   })
 76 | 
 77 |   const fns = expr.map(el => {
 78 |     return el.is_handler ? `(_,e) => { ${el.fn} }` : `_ => ${el.fn}`
 79 |   })
 80 | 
 81 |   return { tmpl: getOuterHTML(root).replace(/\s{2,}/g, ' '), fns }
 82 | }
 83 | 
 84 | const quote = str => `'${str}'`
 85 | const arrwrap = str => '[' + str + ']'
 86 | 
 87 | function getHTML(str) {
 88 |   str = str.trim()
 89 |   if (str.startsWith('{{') && str.endsWith('}}')) {
 90 |     return str.slice(2, -2)
 91 |   }
 92 | }
 93 | 
 94 | export function compileLoop(str) {
 95 |   const [key, expr, index, is_object] = parseFor(str)
 96 |   const keys = Array.isArray(key) ? '[' + key.map(quote) + ']' : quote(key)
 97 | 
 98 |   return '[' + [keys, expr, quote(index)].join(', ') + (is_object ? ', true' : '') + ']'
 99 | }
100 | 
101 | 
102 | // event handlers
103 | const MODIFIERS = {
104 |   stop: 'e.stopPropagation()',
105 |   prevent: 'e.preventDefault()',
106 |   self: 'if (e.target != this) return',
107 | }
108 | 
109 | const KEY_ALIAS = {
110 |   enter: ['return'],
111 |   delete: ['backspace'],
112 |   esc: ['escape'],
113 |   space: [' ', 'spacebar', 'space bar'],
114 |   up: ['arrowup'],
115 |   down: ['arrowdown'],
116 |   left: ['arrowleft'],
117 |   right: ['arrowright'],
118 | }
119 | 
120 | function getModifiers(name, mods) {
121 |   let keycode = ''
122 | 
123 |   const ret = mods.map((key) => {
124 |     const mod = MODIFIERS[key]
125 |     if (!mod && key != 'once') keycode = key
126 |     return mod
127 | 
128 |   }).filter(el => !!el)
129 | 
130 |   if (name.startsWith('@key') && keycode) {
131 |     const code = keycode.replace('-', '')
132 |     const codes = [`'${code}'`]
133 |     const alias = KEY_ALIAS[code]
134 |     if (alias) alias.forEach(code => codes.push(`'${code}'`))
135 |     ret.unshift(`if (![${codes.join(',')}].includes(e.key.toLowerCase())) return`)
136 |   }
137 | 
138 |   return ret
139 | }
140 | 
141 | // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
142 | export function getEventHandler(key, val) {
143 |   const [name, ...mods] = key.split('.')
144 |   const is_expr = /\W/.exec(val)
145 | 
146 |   const handler = is_expr ? setContextTo(val) : `_.${val}.call(_, e)`
147 |   const els = getModifiers(name, mods)
148 | 
149 |   els.push(handler)
150 |   if (mods.includes('once')) els.push(`e.target.on${name.slice(1)} = null`)
151 |   return { name, body: els[1] ? '{' + els.join(';') + '}' : els[0] }
152 | }
153 | 
154 | /*
155 | function toKebabCase(str) {
156 |   return str.replace(/([A-Z])/, (m, _, i) => '-' + m.toLowerCase())
157 | }
158 | */
159 | 
160 | function getJS(nodes) {
161 |   const scripts = nodes.filter(el => el.type == 'script')
162 |   const js = scripts.map(getInnerHTML)
163 |   scripts.forEach(removeElement)
164 |   return js.join('\n')
165 | }
166 | 
167 | 
168 | function createComponent(node) {
169 |   const name = getComponentName(node)
170 | 
171 |   if (STD.includes(name)) {
172 |     throw `Invalid tag name: "${name}". Cannot use standard HTML5 tag names.`
173 |   }
174 | 
175 |   const js = getJS(node.children)
176 | 
177 |   // must be after getJS()
178 |   const { tmpl, fns } = compileNode(node)
179 | 
180 |   return objToString({
181 |     name,
182 |     tagName: node.tagName,
183 |     tmpl: tmpl.replace(/\n/g, ''),
184 |     Impl: js && `class { ${js} }`,
185 |     fns: fns[0] && `[\n    ${fns.join(',\n    ')}\n  ]`
186 |   })
187 | }
188 | 
189 | export function parse(src) {
190 |   const { children } = mkdom(src)
191 |   const components = children.filter(el => el.type == 'tag').map(el => createComponent(el))
192 |   const js = getJS(children)
193 |   return { js, components }
194 | }
195 | 
196 | export function compile(src) {
197 |   const { js, components } = parse(src)
198 |   return [ js,
199 |     'export const lib = [', components.join(',') + ']',
200 |     'export default lib[0]'
201 | 
202 |   ].join('\n')
203 | }
204 | 
205 | // optional dest
206 | export async function compileFile(path, dest) {
207 |   const template = await fs.readFile(path, 'utf-8')
208 |   const js = compile(template)
209 |   if (dest) {
210 |     const destDir = dirname(dest)
211 |     await fs.mkdir(destDir, { recursive: true })
212 |     await fs.writeFile(dest, js)
213 |   }
214 |   return js
215 | }
216 | 


--------------------------------------------------------------------------------
/test/client/img/glue.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m12.34 55.9a6.09 6.09 0 0 0 -1.94-4.33l1-1a6.22 6.22 0 0 0 4.2 2h.13l1.51 1.43-3.42 3.42z" fill="#acd2fe"/><path d="m28.89 22.92-2.21 9.15h-4.61l1.56-9.15z" fill="#acd2fe"/><path d="m24.19 32.08 1.22-7.22h3.22l-1.74 7.22z" fill="#fff"/><path d="m14.45 17.66v-5.56h1.55a8.18 8.18 0 0 0 -.06 1v3.59a8.22 8.22 0 0 0 .06 1z" fill="#acd2fe"/><path d="m7.93 16.09v-2.42l4.58-.72v3.86z" fill="#acd2fe"/><path d="m2.91 14.39v-.3l3.09-.32v.94z" fill="#acd2fe"/><path d="m46.41 9.83h7.15v1.89h-7.15z" fill="#acd2fe"/><path d="m46.41 13.67h7.15v2.18h-7.15z" fill="#acd2fe"/><path d="m44.47 4.91v10.94h-18.81l-4.17-10.76a7.34 7.34 0 0 1 1.63-.18z" fill="#acd2fe"/><path d="m48.18 49.4a1.59 1.59 0 0 1 -1.38-.6c-.72-.93-.65-2.8-.28-4.14a25 25 0 0 0 .63-10.38c-.11-.88-.28-1.77-.47-2.67-.49-2.24-1.5-6.92-4.57-8.33a4 4 0 0 0 -1.75-.36h-16.61a6.27 6.27 0 0 1 -5.91-6.24v-3.6a5.93 5.93 0 0 1 .24-1.68 6.17 6.17 0 0 1 3.8-4.15l4.12 10.54h29.5v-10.94h2.4c.13.2.35.58.71 1.25l.16.29a40.41 40.41 0 0 1 2.64 5 14 14 0 0 1 1.59 6.09 3.23 3.23 0 0 1 -1.86 2.71l-.72.45c-.34.21-.69.42-1 .65-2 1.38-3.15 3.63-3.38 6.7a26.29 26.29 0 0 0 .74 8l.16.68a41.84 41.84 0 0 1 1.16 6.59c.12 1.82 0 4-1.2 4.19z" fill="#acd2fe"/><path d="m27.3 15.85-3.49-9h20.66v9z" fill="#fff"/><g fill="#0229d5"><path d="m47.13 50.38a3.55 3.55 0 0 1 -3.23-2 1 1 0 1 1 1.73-.87 1.58 1.58 0 0 0 1.58.91h8.69c.43-.08.61-.23.88-.75a6.32 6.32 0 0 0 .37-2.42c0-.31 0-.66 0-1a42.66 42.66 0 0 0 -1.17-6.61l-.19-.64a32.57 32.57 0 0 1 -.64-3.64 1 1 0 1 1 1.93-.22 30.66 30.66 0 0 0 .6 3.43c0 .18.09.42.16.71a42.44 42.44 0 0 1 1.16 6.83v1.16a7.82 7.82 0 0 1 -.54 3.22 3 3 0 0 1 -2.47 1.88h-8.86zm-2.8-4.29h-.06a1 1 0 1 1 .12-1.93 1 1 0 0 1 .67.33 1 1 0 0 1 -.73 1.61zm.58-2.85h-.22a1 1 0 0 1 -.69-1.18 22.87 22.87 0 0 0 .55-5 26.6 26.6 0 0 0 -.24-3.49c-.12-.81-.28-1.66-.46-2.51a18 18 0 0 0 -1.85-5.3 4.12 4.12 0 0 0 -1.7-1.7 2.18 2.18 0 0 0 -.91-.16h-7.26a1 1 0 0 1 0-1.94h7.26a4 4 0 0 1 1.75.35 5.86 5.86 0 0 1 2.53 2.45 19.81 19.81 0 0 1 2 5.88c.2.9.37 1.8.49 2.67a27.36 27.36 0 0 1 .27 3.75 24.81 24.81 0 0 1 -.61 5.42 1 1 0 0 1 -.91.76zm11.09-11.96a1 1 0 0 1 -1-1 1 1 0 1 1 1 1zm.29-2.88a.68.68 0 0 1 -.2 0 1 1 0 0 1 -.75-1.16 7.61 7.61 0 0 1 3.13-4.9c.36-.24.71-.45 1-.65l.71-.45c1.11-.76 1.74-1.25 1.86-2.7 0-.14 0-.27 0-.38a14.92 14.92 0 0 0 -1.62-5.76c-.36-.8-.76-1.65-1.23-2.51-.43-.78-.89-1.59-1.38-2.39l-.16-.3c-.1-.17-.21-.4-.34-.63s-.31-.57-.38-.69h-2.4v7.42a1 1 0 1 1 -1.94 0v-8.39a1 1 0 0 1 1-1h3.77a1.08 1.08 0 0 1 .74.28s0 0 .06.07a1.5 1.5 0 0 1 .29.34c.16.22.31.47.46.72s.4.72.5.92l.08.14c.53.87 1 1.69 1.43 2.49.47.89.92 1.79 1.3 2.66a16.69 16.69 0 0 1 1.78 6.61v.48a5.11 5.11 0 0 1 -2.74 4.23l-.75.46c-.34.21-.67.41-1 .62a5.67 5.67 0 0 0 -2.32 3.71 1 1 0 0 1 -.94.76zm-27-4.5a1 1 0 1 1 1-1 1 1 0 0 1 -1.06 1zm-5.61 0h-.49a8.22 8.22 0 0 1 -7.89-6 8.38 8.38 0 0 1 -.31-2.22v-3.57a8.3 8.3 0 0 1 .31-2.21 8.16 8.16 0 0 1 6-5.76 1 1 0 0 1 1.13.59l.45 1.18a1 1 0 0 1 0 .74 1 1 0 0 1 -.55.52 1 1 0 0 1 -1.33-.55l-.13-.34a6.22 6.22 0 0 0 -3.81 4.15 6.36 6.36 0 0 0 -.23 1.68v3.59a6.51 6.51 0 0 0 .23 1.7 6.27 6.27 0 0 0 6 4.56h3.22a1 1 0 0 1 0 1.94h-2.66zm29.52-7.08a1 1 0 1 1 1-1 1 1 0 0 1 -1 1zm-2.91 0h-24.62a1 1 0 0 1 -.91-.61l-1.61-4.21a.93.93 0 0 1 0-.75.87.87 0 0 1 .53-.5 1 1 0 0 1 1.25.55l1.38 3.54h24a1 1 0 0 1 0 1.94zm-27.29-6.88a1 1 0 0 1 -.9-.62 1 1 0 0 1 .55-1.25 1 1 0 0 1 1.26.55 1 1 0 0 1 0 .74 1 1 0 0 1 -.89.58z"/><path d="m28.89 23.89h-5.26a1 1 0 1 1 0-1.94h5.26a1 1 0 0 1 1 1 1 1 0 0 1 -1 .94z"/><path d="m26.68 33h-4.61a1 1 0 0 1 -.95-1.13l1.55-9.15a1 1 0 0 1 1-.81h5.26a1 1 0 0 1 .77.37 1 1 0 0 1 .18.83l-2.26 9.19a1 1 0 0 1 -.94.7zm-3.46-1.9h2.7l1.74-7.21h-3.22z"/><path d="m28.89 23.89h-5.26a1 1 0 1 1 0-1.94h5.26a1 1 0 0 1 1 1 1 1 0 0 1 -1 .94z"/><path d="m42.91 34.56a34.12 34.12 0 0 1 -4.58-.34 1 1 0 0 1 -.74-.56 1 1 0 0 1 .06-.91 9.24 9.24 0 0 0 .05-9.33.94.94 0 0 1 0-1 1 1 0 0 1 .84-.5h.86a4 4 0 0 1 1.75.36c3.07 1.41 4.08 6.09 4.57 8.34.19.89.36 1.79.48 2.66a1 1 0 0 1 -.82 1.09 16.4 16.4 0 0 1 -2.47.19zm-2.91-2.1a25.75 25.75 0 0 0 4.12.12c-.08-.5-.18-1-.3-1.52-.39-1.79-1.29-6-3.48-7l-.24-.06a11 11 0 0 1 -.1 8.46z"/><path d="m16.17 18.63h-3.66a1 1 0 0 1 -1-1v-7.46a1 1 0 0 1 1-1h3.66a1 1 0 0 1 .94 1.23 6 6 0 0 0 -.24 1.69v3.59a6 6 0 0 0 .24 1.68 1 1 0 0 1 -.94 1.24zm-2.69-1.94h1.52a8.18 8.18 0 0 1 -.06-1v-3.57a8.22 8.22 0 0 1 .06-1h-1.52z"/><path d="m12.51 18h-.16l-6.51-1a1 1 0 0 1 -.84-1v-4.13a1 1 0 0 1 .81-.95l6.51-1a.94.94 0 0 1 .79.22 1 1 0 0 1 .34.73v6.13a1 1 0 0 1 -.34.73 1 1 0 0 1 -.6.27zm-5.51-2.88 4.57.72v-3.84l-4.57.7z"/><path d="m6 16.43h-.1l-5-.53a1 1 0 0 1 -.87-1v-2.02a1 1 0 0 1 .87-1l5-.52a1 1 0 0 1 .75.25 1 1 0 0 1 .32.72v3.09a1 1 0 0 1 -.32.72 1 1 0 0 1 -.65.29zm-4.06-2.37 3.06.33v-1l-3.09.32z"/><path d="m53.56 12.7h-9.09a1 1 0 0 1 -1-1v-3.81a1 1 0 0 1 1-1h9.09a1 1 0 0 1 1 1v3.84a1 1 0 0 1 -1 .97zm-8.12-1.94h7.15v-1.9h-7.15z"/><path d="m44.47 8.86a1 1 0 1 1 1-1 1 1 0 0 1 -1.01 1z"/><path d="m53.56 16.82h-9.09a1 1 0 0 1 -1-1v-4.09a1 1 0 0 1 1-1h9.09a1 1 0 0 1 1 1v4.12a1 1 0 0 1 -1 .97zm-8.12-1.94h7.15v-2.18h-7.15z"/><path d="m44.47 12.7a1 1 0 1 1 1-1 1 1 0 0 1 -1.01 1z"/><path d="m40 9.74h-10.19a1 1 0 1 1 0-1.94h10.19a1 1 0 1 1 0 1.94z"/><path d="m40 13h-10.19a1 1 0 0 1 0-1.94h10.19a1 1 0 0 1 0 1.94z"/><path d="m51.34 59.2a28.91 28.91 0 0 1 -8.19-1.34 13.24 13.24 0 0 1 -3.21-1.47 1 1 0 0 1 1-1.65 11.82 11.82 0 0 0 2.78 1.26 27 27 0 0 0 7.62 1.25c3.36 0 6-.89 7.94-2.65a6.16 6.16 0 0 0 1.63-4.44c0-2-.8-4.48-3.07-5.06a1 1 0 0 1 -.7-1.17 1 1 0 0 1 1.18-.71c2.75.7 4.53 3.42 4.53 6.94a8 8 0 0 1 -2.26 5.84c-2.27 2.14-5.38 3.2-9.25 3.2zm-13.2-4.41a1 1 0 0 1 -.65-.24 45.06 45.06 0 0 1 -4-4.27 44 44 0 0 0 -3.91-4.15c-3-2.65-9-7.1-15.47-7.1a12.64 12.64 0 0 0 -2.77.29 6 6 0 0 0 -2.56 1.08 1 1 0 0 1 -1.21-1.52 8.13 8.13 0 0 1 3.32-1.46 15.28 15.28 0 0 1 3.19-.33c7.1 0 13.55 4.75 16.76 7.59a45.09 45.09 0 0 1 4.09 4.32 44.43 44.43 0 0 0 3.85 4.09 1 1 0 0 1 -.64 1.69zm-28.88-4.42a1 1 0 0 1 -.79-.37 12.63 12.63 0 0 1 -2.81-7 5.32 5.32 0 0 1 .1-1.07 1 1 0 1 1 1.9.35 4.2 4.2 0 0 0 -.06.72 10.88 10.88 0 0 0 2.4 5.83 1 1 0 0 1 -.21 1.35.93.93 0 0 1 -.53.19z"/><path d="m44.47 16.82h-18.81a1 1 0 0 1 -.9-.62l-4.17-10.76a1 1 0 0 1 .69-1.3 9 9 0 0 1 1.84-.2h21.35a1 1 0 0 1 1 1v10.91a1 1 0 0 1 -1 .97zm-18.14-1.94h17.17v-9h-20.66z"/><path d="m12.85 58.76a1 1 0 0 1 -.68-.28l-2.49-2.48a1 1 0 0 1 -.28-.82c.29-2.09-1.93-3.72-2-3.74a1 1 0 0 1 -.39-.71.94.94 0 0 1 .31-.73l2.49-2.49a1 1 0 0 1 .76-.28.94.94 0 0 1 .71.4s1.66 2.24 3.74 2a1 1 0 0 1 .82.28l2.49 2.49a1 1 0 0 1 0 1.37l-4.79 4.79a1 1 0 0 1 -.69.2zm-1.48-3.83 1.48 1.49 3.42-3.42-1.49-1.49a6 6 0 0 1 -4.33-1.94l-1 1a6.09 6.09 0 0 1 1.92 4.36z"/><path d="m16.19 60.06a1 1 0 0 1 -.68-.28l-2.32-2.32a1 1 0 0 1 1.37-1.37l2.32 2.32a1 1 0 0 1 -.69 1.65z"/><path d="m19 57.31a1 1 0 0 1 -.69-.28l-2.32-2.32a1 1 0 1 1 1.37-1.38l2.32 2.33a1 1 0 0 1 -.68 1.65z"/></g></svg>


--------------------------------------------------------------------------------
/test/render.test.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { parse, render } from '../ssr/render.js'
  3 | 
  4 | 
  5 | // helper function to run multiple tests at once
  6 | function runTests(tests, data) {
  7 |   for (const tmpl in tests) {
  8 |     const html = render(tmpl, data)
  9 |     const val = tests[tmpl]
 10 |     expect(html).toBe(val)
 11 |   }
 12 | }
 13 | 
 14 | function debug(tmpl, data) {
 15 |   console.info(render(tmpl, data))
 16 | }
 17 | 
 18 | 
 19 | test('Expressions', () => {
 20 |   runTests({
 21 |     '<b :class="type">Hey</b>': "<b class=\"bold\">Hey</b>",
 22 |     '<b class="item { type }"/>': "<b class=\"item bold\"></b>",
 23 |     '<img src="/img/icon/{type}.svg">': "<img src=\"/img/icon/bold.svg\">",
 24 |     '<b :class="item { type }">Hey</b>': "<b class=\"item bold\">Hey</b>",
 25 |     '<time :datetime="date.getDay()">{ date.getDay() }</time>': `<time datetime="6">6</time>`,
 26 | 
 27 |     // skip event attributes
 28 |     '<a @click="click"/>': '<a></a>',
 29 | 
 30 |     '<input :type>': '<input type="bold">',
 31 | 
 32 |     // HTML
 33 |     '<h2>{ title }</h2>': '<h2>Hey &lt;em&gt;!&lt;/em&gt;</h2>',
 34 |     '<h2>{{ title }}</h2>': '<h2>Hey <em>!</em></h2>',
 35 |     '<h2 :html="title"/>': '<h2>Hey <em>!</em></h2>',
 36 | 
 37 |   }, {
 38 |     type: 'bold',
 39 |     date: new Date('2000-01-01'),
 40 |     title: 'Hey <em>!</em>',
 41 |   })
 42 | })
 43 | 
 44 | test('Comments', () => {
 45 |   runTests({ '<!-- hello --><b>World</b>': '<b>World</b>' })
 46 |   runTests({ '<!-- hello --><!-- Another --><b>World</b>': '<b>World</b>' })
 47 | })
 48 | 
 49 | test('Conditionals', () => {
 50 | 
 51 |   runTests({
 52 |     '<b :if="flag">{ val }</b>': '',
 53 |     '<html><style :if="nope">{ nope }</style></html>': '<html></html>',
 54 |     '<html><style :if="css">{ css }</style></html>': '<html><style>body { font-family: 100; }</style></html>',
 55 |     '<div><b :if="am > 100">No</b><p>Yes</p></div>': '<div><p>Yes</p></div>',
 56 |     '<a><em :if="flag"></em><b :else>{ val }</b></a>': '<a><b>A</b></a>',
 57 |     '<div><b :if="am > 100">No</b><b :else-if="am == 100">Yes</b><b :else>No</b></div>': '<div><b>Yes</b></div>',
 58 |     '<div><custom :if="bad"/></div> <b @name="custom">Hey</b>': '<div></div>',
 59 |     '<div><custom :if="am > 10"/></div> <b @name="custom">Yes</b>': '<div><b>Yes</b></div>',
 60 |   }, {
 61 |     css: 'body { font-family: 100; }',
 62 |     am: 100,
 63 |     val: 'A',
 64 |   })
 65 | })
 66 | 
 67 | test('Methods and variables', () => {
 68 |   runTests({
 69 |     '<b>{ bg() }<script>bg = () => "/bg"</script></b>': '<b>/bg</b>',
 70 |     '<b>{ bg }<script>get bg() { return "/bg" }</script></b>': '<b>/bg</b>',
 71 |     '<b>{ foo }<script>foo = 1</script></b>': '<b>1</b>',
 72 |   })
 73 | })
 74 | 
 75 | test('Class and style', () => {
 76 |   runTests({
 77 |     '<b class="this { thing } { should: true, be: 1, baz: 0, lol: null, great: -1 }"/>':
 78 |       '<b class=\"this thing should be great\"></b>',
 79 | 
 80 |     '<b style="font-weight: calc(2em + 5%); color: { color}"/>':
 81 |       '<b style="font-weight: calc(2em + 5%); color: #ccc"></b>',
 82 | 
 83 |   }, {
 84 |     color: '#ccc',
 85 |     thing: 'thing',
 86 |   })
 87 | })
 88 | 
 89 | 
 90 | test('Loops', () => {
 91 | 
 92 |   runTests({
 93 | 
 94 |     '<p :for="n in nums">{ n }</p>': '<p>1</p><p>2</p><p>3</p>',
 95 | 
 96 |     '<p :for="[key, value, i] in Object.entries(person)">{ i }: { key } = { value }</p>':
 97 |       '<p>0: name = Nick</p><p>1: email = nick@acme.org</p><p>2: age = 10</p>',
 98 | 
 99 |     '<p :for="({ name }, i) in items">{ i }. { name }</p>' : '<p>0. John</p><p>1. Alice</p>',
100 | 
101 |     // loop custom tag
102 |     '<show :for="el in items" :value="el.name"/> <b @name="show">{ value }</b>' :
103 |       '<b>John</b><b>Alice</b>',
104 | 
105 |     // loop slots
106 |     '<thing :for="el in items" :bind="el"><b>{ el.age }</b></thing><u @name="thing">{name}: <slot/></u>' :
107 |       '<u>John:<b>22</b></u><u>Alice:<b>33</b></u>',
108 | 
109 |     // successive loops
110 |     '<div><p :for="x in nums">{ x }</p><a :for="y in nums">{ y }</a></div>':
111 |       '<div><p>1</p><p>2</p><p>3</p><a>1</a><a>2</a><a>3</a></div>',
112 | 
113 |   }, {
114 |     items: [ { name: 'John', age: 22 }, { name: 'Alice', age: 33 }],
115 |     person: { name: 'Nick', email: 'nick@acme.org', age: 10 },
116 |     nums: [1, 2, 3],
117 |   })
118 | })
119 | 
120 | 
121 | test('Custom tags', () => {
122 |   const btn = '<button @name="btn">{ label || "Press"}</button>'
123 | 
124 |   runTests({
125 |     '<foo/> <a @name="foo">Test</a>': '<a>Test</a>',
126 |     '<media/><label @name="media"/>': '<label></label>',
127 | 
128 |     // $attrs
129 |     '<field name="foo" value="bar"/><label @name="field"><input :attr="$attrs"/></label>':
130 |       '<label><input name="foo" value="bar"></label>',
131 |   })
132 | })
133 | 
134 | 
135 | test('Advanced', () => {
136 | 
137 |   // return debug('<html><slot for="page"/></html>', { page: '<main>Hello</main>' })
138 | 
139 |   runTests({
140 | 
141 |     // :attr (:bind works the same on server side)
142 |     '<dd :attr="person"></dd>': '<dd name="Nick" age="10"></dd>',
143 | 
144 |     '<hey :val/>': '<nue-island island="hey">\n  <script type="application/json">{"val":"1"}</script>\n</nue-island>',
145 | 
146 |     // nue element
147 |     // '<foo :nums="nums" :person="person" data-x="bar"/>':
148 |     //   '<nue-island island="foo" data-x="bar">\n  <script type="application/json">{"nums":[1,2],"person":{"name":"Nick","age":10}}</script>\n</nue-island>',
149 | 
150 |     '<html><slot for="page"/></html>': '<html><main>Hello</main></html>',
151 | 
152 |     // custom tag and slots
153 |     '<parent><p>{{ am }}</p><p>{ person.name }</p></parent><div @name="parent"><h3>Parent</h3><slot/></div>':
154 |       '<div><h3>Parent</h3><p></p><p>Nick</p></div>',
155 | 
156 |   }, {
157 |     person: { name: 'Nick', age: 10 },
158 |     page: '<main>Hello</main>',
159 |     nums: [1, 2],
160 |     val: 1
161 |   })
162 | 
163 | })
164 | 
165 | 
166 | const GLOBAL_SCRIPT = `
167 | <script>
168 |   function toLower(str) { return str.toLowerCase() }
169 | </script>
170 | 
171 | <div>
172 |   { lower(title) }
173 |   <script>
174 |     lower(str) {
175 |       return toLower(str)
176 |     }
177 |   </script>
178 | </div>`
179 | 
180 | test('Global script', () => {
181 |   const html = render(GLOBAL_SCRIPT, { title: 'Hey' })
182 |   expect(html).toBe('<div>hey</div>')
183 | })
184 | 
185 | 
186 | const IF_SIBLING = `
187 | <nav @name="navi">
188 |   <a :for="el in els">
189 |     <img :if="el.img">
190 |     <span :if="el.label">{ el.label }</span>
191 |   </a>
192 | </nav>
193 | `
194 | 
195 | test('If sibling', () => {
196 |   const els = [{ label: 'First'}]
197 |   const html = render(IF_SIBLING, { els })
198 |   expect(html).toInclude('First')
199 | })
200 | 
201 | 
202 | 


--------------------------------------------------------------------------------
/src/nue.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import For from './for.js'
  3 | import If from './if.js'
  4 | 
  5 | const CONTROL_FLOW = { ':if': If, ':for': For } // :if must be first
  6 | const CORE_ATTR = ['class', 'style', 'id']
  7 | 
  8 | 
  9 | /**
 10 |  * Creates a new application instance (aka. reactive component)
 11 |  *
 12 |  * https://nuejs.org/docs/nuejs/reactive-components.html
 13 |  *
 14 |  * @typedef {{ name: string, tagName: string, tmpl: string, ... }} Component
 15 |  * @param { Component } component - a (compiled) component instance to be mounted
 16 |  * @param { Object } [data = {}] - optional data or data model for the component
 17 |  * @param { Array<Component> } [deps = {}] - optional array of nested/dependant components
 18 |  * @param { Object } $parent - (for internal use only)
 19 | */
 20 | export default function createApp(component, data={}, deps=[], $parent={}) {
 21 |   const { Impl, tmpl, fns=[], dom, inner } = component
 22 |   const expr = []
 23 | 
 24 |   function walk(node) {
 25 |     const type = node.nodeType
 26 | 
 27 |     // text content
 28 |     if (type == 3) {
 29 |       const [_, i] = /:(\d+):/.exec(node.textContent.trim()) || []
 30 |       const fn = fns[i]
 31 |       if (fn) expr.push(_ => node.textContent = renderVal(fn(ctx)))
 32 |     }
 33 | 
 34 |     // element
 35 |     if (type == 1) {
 36 | 
 37 |       // loops & conditionals
 38 |       for (const key in CONTROL_FLOW) {
 39 |         const fn = fns[node.getAttribute(key)]
 40 | 
 41 |         // TODO: for + if work reactively on the same node
 42 |         if (key == ':if' && fn && node.getAttribute(':for')) {
 43 | 
 44 |           // if (true) -> quick continue
 45 |           if (fn(ctx)) continue
 46 | 
 47 |           // if (false) -> disable for loop
 48 |           else node.removeAttribute(':for')
 49 |         }
 50 | 
 51 |         if (fn) {
 52 |           node.removeAttribute(key)
 53 |           const ext = CONTROL_FLOW[key]({ root: node, fn, fns, deps, ctx, processAttrs })
 54 |           expr.push(ext.update)
 55 |           return ext
 56 |         }
 57 |       }
 58 | 
 59 |       const tagName = node.tagName.toLowerCase()
 60 |       const next = node.nextSibling
 61 | 
 62 |       // slot
 63 |       if (inner && tagName == 'slot') {
 64 |         inner.replace(node)
 65 |         return { next }
 66 |       }
 67 | 
 68 |       // custom child
 69 |       const child = deps.find(el => el.name == tagName)
 70 | 
 71 |       if (child) {
 72 | 
 73 |         // inner <slot/> content
 74 |         if (node.firstChild) {
 75 |           const dom = document.createElement('_')
 76 |           dom.append(...node.childNodes)
 77 |           child.inner = createApp({ fns, dom }, ctx, deps)
 78 |         }
 79 | 
 80 |         const parent = createParent(node)
 81 |         const comp = createApp(child, data, deps, parent).mount(node)
 82 | 
 83 |         // Root node changes -> re-point to the new DOM element
 84 |         if (dom?.tagName.toLowerCase() == child.name) self.$el = comp.$el
 85 | 
 86 |         expr.push(_ => setAttrs(comp.$el, parent))
 87 | 
 88 |         // component refs
 89 |         self.$refs[node.getAttribute('ref') || tagName] = comp.impl
 90 | 
 91 |         return { next }
 92 | 
 93 |       } else {
 94 |         processAttrs(node)
 95 |         walkChildren(node, walk)
 96 |       }
 97 |     }
 98 |   }
 99 | 
100 |   function processAttrs(node) {
101 |     for (const el of [...node.attributes]) {
102 |       processAttr(node, el.name, el.value)
103 |     }
104 |   }
105 | 
106 |   function setAttr(node, key, val) {
107 |     const orig = node.getAttribute(key)
108 |     if (orig !== val) node.setAttribute(key, val)
109 |   }
110 | 
111 |   function processAttr(node, name, value) {
112 |     if (name == 'ref' || name == 'name') self.$refs[value] = node
113 | 
114 |     const fn = fns[value]
115 |     if (!fn) return
116 | 
117 |     const real = name.slice(1)
118 |     const char = name[0]
119 | 
120 |     // remove special attributes
121 |     if (':@$'.includes(char)) node.removeAttribute(name)
122 | 
123 | 
124 |     // set all attributes from object
125 |     if (real == 'attr') {
126 |       return expr.push(_=> {
127 |         for (const [name, val] of Object.entries(fn(ctx))) {
128 |           setAttr(node, name, val === true ? '' : val)
129 |         }
130 |       })
131 |     }
132 | 
133 |     if (char == ':') {
134 |       if (real != 'bind') {
135 |         // dynamic attributes
136 |         expr.push(_ => {
137 |           let val = fn(ctx)
138 |           setAttr(node, real, renderVal(val))
139 |         })
140 |       }
141 |     } else if (char == '@') {
142 |       // event handler
143 |       node[`on${real}`] = evt => {
144 |         fn.call(ctx, ctx, evt)
145 |         const up = $parent?.update || update
146 |         up()
147 |       }
148 |     } else if (char == '$') {
149 |       // boolean attribute
150 |       expr.push(_ => {
151 |         const flag = node[real] = !!fn(ctx)
152 |         if (!flag) node.removeAttribute(real)
153 |       })
154 |     }
155 | 
156 |     // html
157 |     if (real == 'html') expr.push(_=> node.innerHTML = fn(ctx))
158 | 
159 |   }
160 | 
161 |   function walkChildren(node, fn) {
162 |     let child = node.firstChild
163 |     while (child) {
164 |       child = fn(child)?.next || child.nextSibling
165 |     }
166 |   }
167 | 
168 |   // node[key] --> dataset, node.title = '' -> undefined (to not override :bind)
169 |   function getAttr(node, key) {
170 |     const val = node.getAttribute(':' + key)
171 |     const fn = fns[val]
172 |     return fn ? fn(ctx) : ctx[val] || node.getAttribute(key) || node[key] || undefined
173 |   }
174 | 
175 |   // non-core (id, class, style) attributes with primitive value
176 |   function getAttrs(node) {
177 |     const attr = {}
178 |     for (const el of [...node.attributes]) {
179 |       const name = el.name.replace(':', '')
180 |       const val = getAttr(node, name)
181 |       if (!CORE_ATTR.includes(name) && typeof(val) != 'object') {
182 |         attr[name] = val == null ? true : val
183 |       }
184 |     }
185 |     return attr
186 |   }
187 | 
188 |   function createParent(node) {
189 |     node.$attrs = getAttrs(node)
190 |     return new Proxy(node, {
191 |       get(__, key) {
192 |         return getAttr(node, key)
193 |       }
194 |     })
195 |   }
196 | 
197 |   function setAttrs(root, parent) {
198 |     const arr = mergeVals(getAttr(root, 'class') || [], parent.class)
199 |     if (arr[0]) root.className = renderVal(arr, ' ')
200 | 
201 |     const { id, style } = parent
202 |     if (style && style.x != '') root.style = renderVal(style)
203 |     if (id) root.id = renderVal(id)
204 |   }
205 | 
206 |   function update(obj) {
207 |     if (obj) Object.assign(impl, obj)
208 |     expr.map(el => el())
209 |     impl.updated?.call(ctx, ctx)
210 |     return self
211 |   }
212 | 
213 | 
214 |   // context
215 |   let impl = {}
216 | 
217 |   const self = {
218 |     update,
219 | 
220 |     $el: dom,
221 | 
222 |     // root === $el
223 |     get root() { return self.$el },
224 | 
225 |     $refs: {},
226 | 
227 |     $parent,
228 | 
229 |     impl,
230 | 
231 | 
232 |     mount(wrap) {
233 |       const root = dom || (self.$el = mkdom(tmpl))
234 | 
235 |       // Isomorphic JSON. Saved for later hot-reloading
236 |       let script = wrap.querySelector('script')
237 |       if (script) {
238 |         Object.assign(data, JSON.parse(script.textContent))
239 |         wrap.insertAdjacentElement('afterend', script)
240 |       }
241 | 
242 |       // setup refs
243 | 
244 |       // constructor
245 |       if (Impl) {
246 |         impl = self.impl = new Impl(ctx)
247 | 
248 |         // for
249 |         impl.$refs = self.$refs
250 |         impl.update = update
251 |       }
252 | 
253 |       walk(root)
254 | 
255 |       wrap.replaceWith(root)
256 | 
257 |       // copy root attributes
258 |       for (const a of [...wrap.attributes]) setAttr(root, a.name, a.value)
259 | 
260 |       // callback: mounted()
261 |       impl.mounted?.call(ctx, ctx)
262 | 
263 |       return update()
264 |     },
265 | 
266 |     // used by slots
267 |     replace(wrap) {
268 |       walk(dom)
269 |       wrap.replaceWith(...dom.children)
270 |       update()
271 |     },
272 | 
273 |     // used by loops and conditionals
274 |     before(anchor) {
275 |       if (dom) {
276 |         self.$el = dom
277 | 
278 |         // TODO: more performant check?
279 |         if (!document.body.contains(dom)) anchor.before(dom)
280 |         if (!dom.walked) { walk(dom); dom.walked = 1 }
281 |         return update()
282 |       }
283 |     },
284 | 
285 |     unmount() {
286 |       try {
287 |         self.root.remove()
288 |       } catch (e) {}
289 |       impl.unmounted?.call(ctx, ctx)
290 |       update()
291 |     }
292 | 
293 |   }
294 | 
295 |   const ctx = new Proxy({}, {
296 |     get(__, key) {
297 | 
298 |       // keep this order
299 |       for (const el of [self, impl, data, $parent, $parent.bind]) {
300 |         const val = el && el[key]
301 |         if (val != null) return val
302 |       }
303 |     },
304 | 
305 |     set(__, key, val) {
306 | 
307 |       // parent key? (loop items)
308 |       if ($parent && $parent[key] !== undefined) {
309 |         $parent[key] = val
310 |         $parent.update()
311 | 
312 |       } else {
313 |         self[key] = val
314 |       }
315 |       return true
316 |     }
317 | 
318 |   })
319 | 
320 |   return self
321 | 
322 | }
323 | 
324 | // good for async import
325 | export { createApp }
326 | 
327 | 
328 | function mkdom(tmpl) {
329 |   const el = document.createElement('_')
330 |   el.innerHTML = tmpl.trim()
331 |   return el.firstChild
332 | }
333 | 
334 | 
335 | // render expression return value
336 | function renderVal(val, separ='') {
337 |   return val?.join ? val.filter(el => el || el === 0).join(separ).trim().replace(/\s+/g, ' ') : val || ''
338 | }
339 | 
340 | // to merge the class attribute from original mount point
341 | function mergeVals(a, b) {
342 |   if (a == b) return [a]
343 |   if (!a.join) a = [a]
344 |   if (b && !b.join) b = [b]
345 |   return a.concat(b)
346 | }
347 | 
348 | 


--------------------------------------------------------------------------------
/ssr/render.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | import { mkdom, getComponentName, mergeAttribs, isBoolean, exec, STD, walk } from './fn.js'
  4 | import { parseExpr, parseFor, setContext } from './expr.js'
  5 | import { parseDocument, DomUtils as DOM } from 'htmlparser2'
  6 | import { promises as fs } from 'node:fs'
  7 | 
  8 | const { getInnerHTML, getOuterHTML, removeElement } = DOM
  9 | 
 10 | 
 11 | // name == optional
 12 | function renderExpr(str, data, is_class) {
 13 |   const arr = exec('[' + parseExpr(str) + ']', data)
 14 |   return arr.filter(el => is_class ? el : el != null).join('').trim()
 15 | }
 16 | 
 17 | 
 18 | function setContent(node, data) {
 19 |   // run once
 20 |   if (node.__is_set) return
 21 | 
 22 |   const str = node.data || ''
 23 | 
 24 |   if (str.includes('{')) {
 25 |     if (str.startsWith('{{')) {
 26 |       if (str.endsWith('}}')) {
 27 |         node.data = ''
 28 |         const expr = setContext(str.slice(2, -2))
 29 |         DOM.appendChild(node.parentNode, parseDocument(exec(expr, data)))
 30 |       }
 31 | 
 32 |     } else {
 33 |       node.data = renderExpr(str, data)
 34 |       node.__is_set = true
 35 |     }
 36 |   }
 37 | }
 38 | 
 39 | // attributes must be strings
 40 | function toString(val) {
 41 |   return 1 * val ? '' + val : typeof val != 'string' ? val.toString() : val
 42 | }
 43 | 
 44 | function setAttribute(key, attribs, data) {
 45 |   let val = attribs[key]
 46 | 
 47 | 
 48 |   // TODO: check all non-strings here
 49 |   if (val.constructor === Object) return
 50 | 
 51 |   // attributes must be strings
 52 |   if (1 * val) val = attribs[key] = '' + val
 53 | 
 54 |   const has_expr = val.includes('{')
 55 | 
 56 |   // strip event handlers
 57 |   if (key[0] == '@') return delete attribs[key]
 58 | 
 59 |   // foo="{}" --> :foo="{}"
 60 |   if (key[0] != ':' && has_expr) {
 61 |     delete attribs[key]
 62 |     key = ':' + key
 63 |   }
 64 | 
 65 |   // expression
 66 |   if (key[0] != ':') return
 67 | 
 68 |   const name = key.slice(1)
 69 |   const value = has_expr ? renderExpr(val, data, name == 'class') : exec(setContext(val), data)
 70 | 
 71 |   // boolean attribute
 72 |   if (isBoolean(name)) {
 73 |     if (value != 'false') attribs[name] = ''
 74 |     else delete attribs[name]
 75 |     return delete attribs[key]
 76 |   }
 77 | 
 78 |   // other attribute
 79 |   if (value) attribs[name] = value
 80 |   else delete attribs[name]
 81 |   delete attribs[key]
 82 | }
 83 | 
 84 | function getIfBlocks(root, expr) {
 85 |   const arr = [{ root, expr }]
 86 |   while (root = DOM.nextElementSibling(root)) {
 87 |     const { attribs } = root
 88 |     const expr = getDel(':else-if', attribs) || getDel(':else', attribs) != null
 89 |     if (expr) arr.push({ root, expr })
 90 |     else break
 91 |   }
 92 |   return arr
 93 | }
 94 | 
 95 | function processIf(node, expr, data, deps) {
 96 |   const blocks = getIfBlocks(node, expr)
 97 | 
 98 |   const active = blocks.find(el => {
 99 |     const val = exec(setContext(el.expr), data)
100 |     return val && val != 'false'
101 |   })
102 | 
103 |   blocks.forEach(el => {
104 |     const { root } = el
105 |     if (el == active) processNode({ root, data, deps })
106 |     else removeElement(root)
107 |   })
108 |   return active
109 | }
110 | 
111 | 
112 | // for
113 | function processFor(node, expr, data, deps) {
114 |   const [ $keys, for_expr, $index, is_object_loop ] = parseFor(expr)
115 |   const items = exec(for_expr, data) || []
116 | 
117 |   items.forEach((item, i) => {
118 | 
119 |     // proxy
120 |     const proxy = new Proxy({}, {
121 |       get(_, key) {
122 |         if (is_object_loop) {
123 |           const i = $keys.indexOf(key)
124 |           if (i >= 0) return item[i]
125 |         }
126 | 
127 |         return key === $keys ? item || data[key] :
128 |           key == $index ? items.indexOf(item) :
129 |           $keys.includes(key) ? item[key] :
130 |           data[key]
131 |       }
132 |     })
133 | 
134 |     // clone
135 |     const root = parseDocument(getOuterHTML(node))
136 | 
137 |     DOM.prepend(node, processNode({ root, data: proxy, deps, inner: node.children }))
138 |   })
139 | 
140 |   // mark as dummy (removeElement(node) does not work here)
141 |   node.attribs.__dummy = 'true'
142 | }
143 | 
144 | // child component
145 | function processChild(comp, node, deps, data) {
146 |   const { attribs } = node
147 | 
148 |   // merge attributes
149 |   const child = comp.create({ ...data, ...attribs }, deps, node.children)
150 |   if (child.children.length == 1) mergeAttribs(child.firstChild.attribs, attribs)
151 | 
152 |   DOM.replaceElement(node, child)
153 | }
154 | 
155 | function getDel(key, attribs) {
156 |   const val = attribs[key]
157 |   delete attribs[key]
158 |   return val
159 | }
160 | 
161 | 
162 | function processNode(opts) {
163 |   const { root, data, deps, inner } = opts
164 | 
165 |   function walk(node) {
166 |     const { name, type, attribs, nextSibling } = node
167 | 
168 |     // setup empty attributes (:date --> :date="date")
169 |     for (let key in attribs) {
170 |       if (key[0] == ':' && attribs[key] == '') attribs[key] = key.slice(1)
171 |     }
172 | 
173 |     // root
174 |     if (type == 'root') {
175 |       walkChildren(node)
176 | 
177 |     // content
178 |     } else if (type == 'text') {
179 |       setContent(node, data)
180 | 
181 |     // element
182 |     } else if (type == 'tag' || type == 'style' || type == 'script') {
183 | 
184 |       // if
185 |       let expr = getDel(':if', attribs)
186 |       if (expr && !processIf(node, expr, data, deps)) return nextSibling
187 | 
188 |       // for
189 |       expr = getDel(':for', attribs)
190 |       if (expr) return processFor(node, expr, data, deps)
191 | 
192 |       // html
193 |       expr = getDel(':html', attribs)
194 |       if (expr) {
195 |         const html = exec(setContext(expr), data)
196 |         DOM.appendChild(node, parseDocument(html))
197 |       }
198 | 
199 |       walkChildren(node)
200 | 
201 |       // bind
202 |       expr = getDel(':bind', attribs) || getDel(':attr', attribs)
203 |       if (expr) {
204 |         const attr = expr == '$attrs' ? data : exec(setContext(expr), data)
205 |         Object.assign(attribs, attr)
206 |       }
207 | 
208 |       // slots
209 |       if (name == 'slot') {
210 |         if (attribs.for) {
211 |           const html = data[attribs.for]
212 |           if (html) DOM.replaceElement(node, mkdom(html))
213 | 
214 |         } else if (inner) {
215 |           while (inner[0]) DOM.prepend(node, inner[0])
216 |           removeElement(node)
217 |         }
218 |       }
219 | 
220 | 
221 |       // custom component
222 |       const is_custom = !STD.includes(name)
223 |       const component = deps.find(el => el.name == name)
224 | 
225 |       // client side component
226 |       if (is_custom && !component) {
227 |         setJSONData(node, data)
228 |         node.attribs.island = name
229 |         node.name = 'nue-island'
230 |         return // must return
231 |       }
232 | 
233 |       // after custom, but before SSR components (for all nodes)
234 |       for (let key in attribs) setAttribute(key, attribs, data)
235 | 
236 |       // server side component
237 |       if (component) processChild(component, node, deps, data)
238 | 
239 |     }
240 |   }
241 | 
242 |   function walkChildren(node) {
243 |     let child = node.firstChild
244 |     while (child) {
245 |       child = walk(child)?.next || child.nextSibling
246 |     }
247 |   }
248 | 
249 |   walk(root)
250 |   return root
251 | }
252 | 
253 | function getJS(nodes) {
254 |   const scripts = nodes.filter(el => el.type == 'script' && !el.attribs.type)
255 |   const js = scripts.map(getInnerHTML)
256 |   scripts.forEach(removeElement)
257 |   return js.join('\n')
258 | }
259 | 
260 | function createComponent(node, global_js='') {
261 |   const name = getComponentName(node)
262 | 
263 |   // javascript
264 |   const js = getJS(node.children)
265 |   const Impl = js[0] && exec(`class Impl { ${ js } }\n${global_js}`)
266 |   const tmpl = getOuterHTML(node)
267 | 
268 |   function create(data, deps=[], inner) {
269 |     if (Impl) data = Object.assign(new Impl(data), data) // ...spread won't work
270 |     return processNode({ root: mkdom(tmpl), data, deps, inner })
271 |   }
272 | 
273 |   return {
274 |     name,
275 |     tagName: node.tagName,
276 |     create,
277 | 
278 |     render: function(data, deps) {
279 |       const node = create(data, deps)
280 | 
281 |       // cleanup / remove dummy elements
282 |       walk(node, el => { if (el.attribs?.__dummy) removeElement(el) })
283 | 
284 |       return getOuterHTML(node)
285 |     }
286 |   }
287 | }
288 | 
289 | function appendData(node, data) {
290 |   const script = `\n  <script type="application/json">${JSON.stringify(data)}</script>\n`
291 |   DOM.appendChild(node.firstChild || node, parseDocument(script))
292 | }
293 | 
294 | function setJSONData(node, ctx) {
295 |   const { attribs } = node
296 |   const json = {}
297 |   for (const key in attribs) {
298 |     if (key[0] == ':') {
299 |       const expr = getDel(key, attribs)
300 |       const val = exec(setContext(expr), ctx)
301 |       const real = key.slice(1)
302 |       if (['id', 'class'].includes(real) || real.startsWith('data-')) {
303 |         if (val) attribs[real] = val
304 |       } else {
305 |         json[real] = val
306 |       }
307 |     }
308 |   }
309 |   if (Object.keys(json)[0]) appendData(node, json)
310 | }
311 | 
312 | 
313 | export function parse(template) {
314 |   const { children } = mkdom(template)
315 |   const nodes = children.filter(el => el.type == 'tag')
316 |   const global_js = getJS(children)
317 |   return nodes.map(node => createComponent(node, global_js))
318 | }
319 | 
320 | export function render(template, data, deps) {
321 |   const comps = parse(template)
322 |   if (Array.isArray(deps)) comps.push(...deps)
323 |   return comps[0] ? comps[0].render(data, comps) : ''
324 | }
325 | 
326 | export async function parseFile(path) {
327 |   const src = await fs.readFile(path, 'utf-8')
328 |   return parse(src)
329 | }
330 | 
331 | export async function renderFile(path, data, deps) {
332 |   const src = await fs.readFile(path, 'utf-8')
333 |   return render(src, data, deps)
334 | }
335 | 
336 | 
337 | 


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