├── .eslintrc.js
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── babel.config.json
├── jestconfig.json
├── mithril
    ├── index.js
    └── index.mjs
├── package-lock.json
├── package.json
├── preact
    ├── index.js
    └── index.mjs
├── react
    ├── index.js
    └── index.mjs
├── rollup.config.mjs
├── src
    ├── index.js
    └── util.js
└── tests
    ├── index.test.js
    └── util.test.js


/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['foxdonut']
3 | };
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | # seview
64 | dist
65 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .eslintrc.js
2 | .gitignore
3 | .vscode
4 | babel.config.json
5 | jestconfig.json
6 | rollup.config.mjs
7 | tests
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Fred Daoud
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # seview: S-Expression View
  2 | 
  3 | A simple way of writing views with [s-expressions](https://en.wikipedia.org/wiki/S-expression),
  4 | and meant to be used with a virtual DOM library.
  5 | 
  6 | ## Why?
  7 | 
  8 | Because plain JavaScript is simpler to write and build than JSX or HTML string literals, and it's
  9 | great to write views in a way that is independent of the virtual DOM library being used. It's also
 10 | nice to use convenient features even if the underlying virtual DOM library does not support them.
 11 | 
 12 | ## Example
 13 | 
 14 | Instead of writing this in JSX:
 15 | 
 16 | ```jsx
 17 | <div id="home">
 18 |   <span className="instruction">Enter your name:</span>
 19 |   <input type="text" id="username" name="username" size="10"/>
 20 |   {isMessage && <div className={"message" + (isError ? " error" : "")}>{message}</div>}
 21 | </div>
 22 | ```
 23 | 
 24 | Or even this in hyperscript:
 25 | 
 26 | ```js
 27 | h('div', { id: 'home' }, [
 28 |   h('span', { className: 'instruction' }, 'Enter your name:'),
 29 |   h('input', { type: 'text', id: 'username', name: 'username', size: 10 }),
 30 |   isMessage && h('div', { className: 'message' + (isError ? ' error' : '') }, message)
 31 | ])
 32 | ```
 33 | 
 34 | You can write this with `seview`:
 35 | 
 36 | ```js
 37 | ['div#home',
 38 |   ['span.instruction', 'Enter your name:'],
 39 |   ['input:text#username[name=username][size=10]'],
 40 |   isMessage && ['div.message', { class: { 'error': isError } }, message]
 41 | ]
 42 | ```
 43 | 
 44 | Besides the conveniences of the syntax, you also don't have to write `h` at every element. To
 45 | switch from one virtual DOM library to another, you only need to make changes in **one** place.
 46 | All your view code can remain the same.
 47 | 
 48 | If you are using the [Meiosis pattern](http://meiosis.js.org), `seview` is a great way to further
 49 | decouple your code from specific libraries. Your views become independent of the underlying
 50 | virtual DOM library API.
 51 | 
 52 | ## Installation
 53 | 
 54 | Using Node.js:
 55 | 
 56 | ```
 57 | npm i seview
 58 | ```
 59 | 
 60 | With a script tag:
 61 | 
 62 | ```html
 63 | <script src="http://unpkg.com/seview"></script>
 64 | ```
 65 | 
 66 | ## Usage
 67 | 
 68 | Out of the box, `seview` supports 3 view libraries:
 69 | 
 70 | - [React](https://react.dev)
 71 | - [Preact](https://preactjs.com)
 72 | - [Mithril](https://mithril.js.org)
 73 | 
 74 | Using a different library is not difficult. See
 75 | [Using a different view library](#using-a-different-view-library).
 76 | 
 77 | When using `seview` with built-in support, we assume writing views with the following attributes:
 78 | 
 79 | - `class` for the HTML `class` attribute - converted to `className` for React
 80 | - `for` for the HTML `for` attribute - converted to `htmlFor` for React
 81 | - `innerHTML` for using unescaped HTML - converted appropriately for React, Preact, and Mithril
 82 | - `onClick`, `onChange`, etc. for DOM events - converted to lowercase for Mithril
 83 | 
 84 | > By writing views with the conventions above, you can switch between React, Preact, or Mithril
 85 | without changing any of your view code! You can see this in action in the
 86 | [Meiosis Realworld Example](https://meiosis.js.org/examples/realworld/index.html),
 87 | where switching can be achieving just by editing
 88 | [one file](https://github.com/foxdonut/meiosis-examples/blob/master/examples/realworld/src/util/view.js).
 89 | 
 90 | ## React
 91 | 
 92 | To use `seview` with [React](https://react.dev):
 93 | 
 94 | ```js
 95 | import { h } from 'seview/react';
 96 | import { createRoot } from 'react-dom/client';
 97 | 
 98 | const rootView = (...) =>
 99 |   ['div.container',
100 |     [...]
101 |   ];
102 | 
103 | const root = createRoot(document.getElementById('app'));
104 | root.render(h(rootView(...)));
105 | ```
106 | 
107 | > [Click here for a live example: seview + React](https://flems.io/#0=N4IgtglgJlA2CmIBcA2FA6ALARgDQgGd4EBjAF3imRAEMAHO9AKwJHwDMIFWkBtUAHY0wiJLQboAFmTCw2IEgHsBFFdQA8UCADcABNAC8AHXF0TAPnUB6LdvMgAvrkHDRp5q3xKV8NWIhgdIoATmS6wLqSug667MGKYLoA5ETaEPAA7gACAEzoAAzo2FbB8DTkVhACUPAAHuhgLEkA3EYCbd4EYeVkEMoEugbhbbr6AiSlIipIugAUJMSwuLrCigCuKgCUg+Yjo7oLsLDoa3RQNBSzERSB8MEXa6Uzs7XbBua6tboA1Ctg6ypops2g5Wu1xv0wgAVeC3e5kR7wABq6QygzmhyWB0kXCgpQEb12AlGvCStiSuD2JKS6AotTIAFoCGsSAsCAQKckYXCHqUUZkkgBdSnE-akgh0GgCTlJbl0O68+AzTmY9BdC7wWmw+XwxHCqm6cWS6XLCJVAR3AASUIAsgAZGYmABkNQA5s0AMImaL60XU8ki-ZipIAIzWZDIynQIbIAmjsYZdGCARowQAnhSDUGIsoPbAICQANbPQkrch9AQEdBVCaw3xkeaLZbYbZOZIASXGk3rQsDQcNofDkbjMZHCZq7Boa1gZAasAZ2Ezfv7OYEeYLxbmpZ6FarNe7KkbR2WC9byySABF4LWpmQhQbfUGSDjYHjfHtBWCOrAaOzdAAlMpyH5NE6lUKABkAnp0A9BIggtQFgD2ToyGCFlI2CWYk0UOgCG2JDl2ZHUsPiXDNjBUYHD2fEakw-CDVKBFgmJWYs10TQdAOH92QAOVcYxwEZHILDY0YOL0EhuIIPiRAEulGWZVl4HZCwoOA1FrFsIl+32cTzAABV-IgoDGXRtBoWA1iVcIyBxKtsNw9BzMs+AHE0nRtJ0my7PQByq2fXF8So5cxJsDyDXIvZguCjpIRWBh0QI0YqggXoLJmJL9huHVFRmHJ8iivs0kyZ5MUJA1SXQbwyBoKo7iXHTSUkTAZVSVEfgAoCwjqYQ6AQXs2LlBUmORVEjyxUkA2SWCfEBSV2UoXRI10IbdT5VEhU2Psg14NSyBA00zIsqyZkwHJomWSadBlGbVDCebjKWxROp6EChUFB8QS-CFKzCTEBiGG14D6AgICrIgEToK54roIFvpQ3R4kUMIhj2i8AHkbSq0oNX-RRkdmKBFBINZb3QV14DIABRBBbwAITTdsoFmJJ6DoJJNki8ZFirMB6FmcbS0ypHZxou5ZkkWY2acsays5sEHC5+QlECLg7moEMaBDYhHGFEB8wEQseH4EAhBEagcfIdAam0YgcLJlh5EeOQxGkMhcKQKwrA2OhC1dKqEhKLqsmwAAOdA8nyb2wCgIPoJtu26AdzwQDINN5WoAgJggOgyEcZxTdcC2uoZImwGt+Bbdge36w8J3ghdkA3Y9r2fb9gOwDj8hS4SEPw8j6PY8txky4rqua5UOv8DTjOxCz5Nc-zlxzbnyvUSnkBneoZuCE972BF9-2VasNrMlyAp0AAZjCroT7XzIN5ntx55zvOnGXtwRBBsGmUp0568bjvPebcj6By-ooUGBBf6QyyBgbARQrDgMgdA04j907P2zovd+hcV4gBDPjMgXR7iMEgHGEg7IAHbwjC3RBNBagkCgCOAhRD6AMLIYHfByMWF0CsJgC+UdyEECsJwwhqF6ANCqFVCh090GZzTggXW+AzbP3vmiPajggA)
108 | 
109 | ## Preact
110 | 
111 | To use `seview` with [Preact](https://preactjs.com):
112 | 
113 | ```js
114 | import { h } from 'seview/preact';
115 | import { render } from 'preact';
116 | 
117 | const rootView = (...) =>
118 |   ['div.container',
119 |     [...]
120 |   ];
121 | 
122 | const element = document.getElementById('app');
123 | render(h(rootView(...)), element);
124 | ```
125 | 
126 | > [Click here for a live example: seview + Preact](https://flems.io/#0=N4IgtglgJlA2CmIBcA2FA6ALARgDQgGd4EBjAF3imRAEMAHO9AKwJHwDMIFWkBtUAHY0wiJLQboAFmTCw2IEgHsBFFdQA8UCADcABNAC8AHXF0TAPnUB6LdvMgAvrkHDRp5q3xKV8NWKsAVLoAAiwAHrp0AE7wNORSugFWRgIQYHSKUWS6wLqSug667FGKYLoA5ETaEPAA7sEATOgADOjYVtGx5FYQAlDwYehgLOUA3Ckp3gTZcWQQygS6BjkpuvoCJDEiKki6ABQkxLC4usKKAK4qAJRL5qtruoewsOjndFA0FHu5FOnwUZ9zjFdnswjcDOZdBEANSnMAXFQFK4pBzjASTBbZAAq8D+ALIQPgADUarUlvsnsdHpIuFAYgJwXcBGteOVbOVcPcWeV0BQwmQALQEc4kQ4EAgcio4vGAmIkurlAC6nOZD1ZBDoNAEkvK0ro-1l8F2ksp6Gmn3gvNx+vxhOVXN06s12pOuV6An+AAksQBZAAyuxMADJ+gBzUYAYRMBXtqu57JVDzV5QARucyGRlOgU2QBNncwLomkaFEAJ4ch1J3LKCOwCAkADWIMZp3I8wEBHQvU2uN8ZAORxO2BuTgqAEkNls+0rE0nHan05m8znlwX+uwaOdYGQhrABdgK3G59WBLX6039i3Zu3O92pyoB88TvuRydygAReA97ZkJUO2NJiQNKwHSvj3IqaKTLANDiroAAKMSzPKZIDKoUCLJ0szoBGpQZB6iLAPcUxkFEIqZlEezRIodAEDchFHsKNqUSUNFXGiawOPc9L9BRdEOjEBJRMyeyVromg6I80HisY4CCg0FiiWs4l6CQUkEDJfKCsKorwOKFgIV0ZDIdYthMnODzKeYcEwUQUDrLo2g0LA5xGjkZA0p2VE0egjnOfADgmToZnmW5HnoF5nZAbS9KcUeSk2EFDpsfcsWxRiHYzAw5L0WsvQQHMTm7DlDy-Dahq7A0zQpbO1R1CClKMg6rLoN4ZA0L0-yHuZrKSJgOpVKSuiwgZsy6AMwh0AgM6iXqBqCcSpKPlSrIJhUOE+IimripQuiZros22nKpJKlcs5JrwI3kMhroOU5Lm7JgDQFCcK06Dq62qNkW22btijwYhV3HYqir-iikEbJijxHIsyw+vA8wEBAnZEASdDfKcWUOMl6IQxlY0ID+5JQIoJDnD+6ChvAZAAKIE32ABCpZjlAezlPQdDlNjlKdmA9B7EtLbFZh8Tcf8eySHs7M+YtDWnfjvbXGiWNovISjpFw-zUCmNApsQ8hEKQcwLNQ2BIM0jjKiAdYCA2PD8CAQgiNQws7mTUAePIQJyGI0hkDRSBWFYlx0A2oYtaUHQA2QwTYK02AAMxtAl0yR4ZrxgO7LDyGQpb6tQBCbBAdBkI4zgO64+fwLVtQe-gXvUL7-uB8Hofh2AVgDXUjQtOg8fJ2QHdV6StcgDnediAXURFyXTguE7YgiAjSNClTbye1E3sgI3BAB0HAgh2HatWIviiIwQK+o8EGDYEnJ9nxfbwj2PbiT9Ppdz24KaKIoZDTACjCQDzCQcU69N7b13rzMIJAoDLm-r-Ei9BoFAIjl-H+f96BWEwD3ZoVhgEECsKg+B-8hi9BaiA-Az9845wQBbfAjsX5DzqP9QyjggA)
127 | 
128 | ## Mithril
129 | 
130 | To use `seview` with [Mithril](https://mithril.js.org):
131 | 
132 | ```js
133 | import { h } from 'seview/mithril';
134 | import m from 'mithril';
135 | 
136 | const rootView = (...) =>
137 |   ['div.container',
138 |     [...]
139 |   ];
140 | 
141 | m.mount(document.getElementById('app'), {
142 |   view: () => h(rootView(...))
143 | });
144 | ```
145 | 
146 | > [Click here for a live example: seview + Mithril](https://flems.io/#0=N4IgtglgJlA2CmIBcA2FA6ALARgDQgGd4EBjAF3imRAEMAHO9AKwJHwDMIFWkBtUAHY0wiJLQboAFmTCw2IEgHsBFFdQA8UCADcABNAC8AHXF0TAPnUB6LdvMgAvrkHDRp5q3xKV8NWIhgdIoATmS6wLqSug667MGKYLoA5ETaEPAA7gACAEzoAAzo2FaQZJLBXFYQAlDwAB7oYCxJANxGAu3eBGE05BDKBLoG4e26+gIkwfAiKki6ABQkxLC4usKKAK4qAJRD5qNjukuwsOgbdFA0FPMRFIHwwVcbU3PzdbsG5rp1ugDUa2BNipott2g42h0JgMwgAVaZ0B5PKYANXSGSGC2OKyOki4UCmAg++wEY14SVsSVwB1JSXQFDqZAAtAQNiQlgQCJTknD7o8yM94KjMkkALpUkmHMkEOg0ARcpI8hF8gVzLlY9DdK7wOnwxH8qZi6m6KUyuWrCLVAQPAASMIAsgAZOYmABktQA5i0AMImaKGiU0iniw6SpIAIw2ZDIynQYbIAlj8cZdAqYBowQAnpSjSGIsovbAICQANavIlrPoDdDVSbTXxkRbLVbYXZOZIASQmUxmZFFwZDxvDkejCbjo6TtXYNA2sDIjVgjOw2YDA7zAgLRdLC3LvTI-QEBGrXbrKkbJ1Wi9bqySABF4LWe6Kjf6QyRcbB8b4DiKIZ1obo7QgMoKlgIV0WGYADjSTJXgiK4yGCAhVjfPECRBPYjTAeZaTAJkcmXAddCw2l6SZFk2XgDl5UA4CuDApJtn7ENiKDZIAAUaA5Shxl0bQaFgDZ4FVVZ4MQ9A+IE+BGJzHFUK-FdQQEBx2j-A8egYDFIIlaogIgfi5i0kM7iVJEhN0HJ8gOJwoLRV4sSJI0yXQbwyBoaoHgIgcyUkTB5VSNE-gAoDyi4XR6mEOgED7GTFT1AUwLPbEyVYpIvWUVQwhlLioF0aNdFi5UUTRUVpJXUkaJC0C0XNXj+MEuZMByaJVmSnR5TSnxgSyogcryiqQPokURWfMFfyhNSjmWQZhjteB+gICBDyIfk6BuNYNIcbYxrARogQbKBFBIDYe3Qd14DIABRBAewAIQzdsoGw+g6AY80bJg7c9kieZnvEtFEoIeZtmBsEtpUiYpsaeh5iBr6dqmfEaAyIGwYEeQlECLgHmoMMaDDYhHDFEBCwEYseH4EAhBEahSkqjx5GeOQxGkMg6AIJArCsLY6GLd1nISEpgpA3J0DyHJBdo04WHkMgMwRagCEmCA6DIRxnEp1wFfgaCMnp-BGeoFm2Y5rmBB5vmMasfzMhFwoAGYbEWsgre1tE9ZAWX5bERWKhVtWXGpsQRHmxbmXO84GeCJmQCN9nOe53n+bAEo5sUBaCDDlasgwbAihTkOM+W853c9twfeV1WnADtww0URQyG6R5GEgBMSA5SPo9jk20zqEgoFHOuG4Q+g+9bgXa-rxv6CsTACgKKw24IKwJ6HpvGmqZz2-wUuFdlhBCfwKmy9dzIgslxwgA)
147 | 
148 | ## Features
149 | 
150 | `seview` supports CSS-style selectors in tag names, `{ class: boolean }` for toggling classes, using
151 | an array or varags for children, flattening of nested arrays, and removal of null/empty elements.
152 | 
153 | ### Element
154 | 
155 | An element is an array:
156 | 
157 | ```
158 | [tag, attrs, children]
159 | ```
160 | 
161 | or a string (text node):
162 | 
163 | ```
164 | 'this is a text node'
165 | ```
166 | 
167 | The `tag` can be a string, or something that your virtual DOM library understands; for example,
168 | a `Component` in React. For the latter, `seview` just returns the selector as-is.
169 | 
170 | ### Tag
171 | 
172 | When the tag is a string, it is assumed to be a tag name, possibly with CSS-style selectors:
173 | 
174 | - `'div'`, `'span'`, `'h1'`, `'input'`, etc.
175 | - `'div.highlighted'`, `'button.btn.btn-default'` for classes
176 | - `'div#home'` for `id`
177 | - `'input:text'` for `<input type="text">`. There can only be one type, so additional types are
178 | ignored. `'input:password:text'` would result in `<input type="password">`.
179 | - `'input[name=username][required]'` results in `<input name="username" required="true">`
180 | - if you need spaces, just use them: `'input[placeholder=Enter your name here]'`
181 | - default tag is `'div'`, so you can write `''`, `'.highlighted'`, `'#home'`, etc.
182 | - these features can all be used together, for example
183 |   `'input:password#duck.quack.yellow[name=pwd][required]'` results in
184 |   `<input type="password" id="duck" class="quack yellow" name="pwd" required="true">`
185 | 
186 | ### Attributes
187 | 
188 | If the second item is an object, it is considered to be the attributes for the element.
189 | 
190 | Of course, for everything that you can do with a CSS-style selector in a tag as shown in the
191 | previous section, you can also use attributes:
192 | 
193 | ```js
194 | ['input', { type: 'password', name: 'password', placeholder: 'Enter your password here' }]
195 | ```
196 | 
197 | You can also mix selectors and attributes. If you specify something in both places, the attribute
198 | overwrites the selector.
199 | 
200 | ```js
201 | ['input:password[name=password]', { placeholder: 'Enter your password here' }]
202 | ```
203 | ```html
204 | <input type="password" name="password" placeholder="Enter password name here">
205 | ```
206 | 
207 | ```js
208 | ['input:password[name=username]', { type: 'text', placeholder: 'Enter your username here' }]
209 | ```
210 | ```html
211 | <input type="text" name="username" placeholder="Enter your username here">
212 | ```
213 | 
214 | ### Classes
215 | 
216 | Classes can be specified in the tag as a selector (as shown above), and/or in attributes using
217 | `class`:
218 | 
219 | ```js
220 | ['button.btn.info', { class: 'btn-default special' }]
221 | ```
222 | ```html
223 | <button class="btn info btn-default special">
224 | ```
225 | 
226 | If you specify an object instead of a string for `class`, the keys are classes and the values
227 | indicate whether or not to include the class. The class is only included if the value is truthy.
228 | 
229 | ```js
230 | // isDefault is true
231 | // isError is false
232 | ['button.btn', { class: { 'btn-default': isDefault, 'error': isError } }]
233 | ```
234 | ```html
235 | <button class="btn btn-default">
236 | ```
237 | 
238 | ### Children (array or varags)
239 | 
240 | The last item(s), (starting with the second if there are no attributes, and starting with the
241 | third if attributes are present), are the children. The children can be:
242 | 
243 | - an array, or
244 | - varargs.
245 | 
246 | #### Using an array
247 | 
248 | You can specify children as an array:
249 | 
250 | ```js
251 | ['div', [
252 |   ['span', ['Hello']],
253 |   ['b', ['World']]
254 | ]
255 | ```
256 | ```html
257 | <div>
258 |   <span>Hello</span>
259 |   <b>World</b>
260 | </div>
261 | ```
262 | 
263 | #### Using varargs
264 | 
265 | You can specify children as varargs:
266 | 
267 | ```js
268 | ['div',
269 |   ['span', 'Hello'],
270 |   ['b', 'World']
271 | ]
272 | ```
273 | ```html
274 | <div>
275 |   <span>Hello</span>
276 |   <b>World</b>
277 | </div>
278 | ```
279 | 
280 | ### Varargs and text nodes
281 | 
282 | The problem with supporting varargs is, how do you differentiate a single element from two text nodes?
283 | 
284 | For example:
285 | 
286 | ```js
287 | ['div', ['b', 'hello']]
288 | ```
289 | 
290 | vs
291 | 
292 | ```js
293 | ['div', ['hello', 'there']]
294 | ```
295 | 
296 | For the second case, varargs **must** be used:
297 | 
298 | ```js
299 | ['div', 'hello', 'there']
300 | ```
301 | 
302 | ### Flattened arrays
303 | 
304 | Whether using an array of children or varargs, nested arrays are automatically flattened:
305 | 
306 | ```js
307 | ['div', [
308 |   ['div', 'one'],
309 |   [
310 |     ['div', 'two'],
311 |     [
312 |       ['div', 'three']
313 |     ]
314 |   ]
315 | ]]
316 | ```
317 | 
318 | or
319 | 
320 | ```js
321 | ['div',
322 |   ['div', 'one'],
323 |   [
324 |     ['div', 'two'],
325 |     [
326 |       ['div', 'three']
327 |     ]
328 |   ]
329 | ]
330 | ```
331 | 
332 | Both result in
333 | 
334 | ```html
335 | <div>
336 |   <div>one</div>
337 |   <div>two</div>
338 |   <div>three</div>
339 | </div>
340 | ```
341 | 
342 | ### Ignored elements
343 | 
344 | The following elements are ignored and not included in the output:
345 | 
346 | - `undefined`
347 | - `null`
348 | - `false`
349 | - `''`
350 | - `[]`
351 | 
352 | This makes it simple to conditionally include an element by writing:
353 | 
354 | ```js
355 | condition && ['div', 'message']
356 | ```
357 | 
358 | If `condition` is falsy, the `div` will not be included in the output. Because it is completely
359 | excluded, this will work even if the virtual DOM library that you are using does not handle
360 | `false`, `null`, or `undefined`.
361 | 
362 | ### Elements converted to a string
363 | 
364 | The following elements will be converted to a string:
365 | 
366 | - `true`
367 | - numbers
368 | - `NaN`
369 | - `Infinity`
370 | 
371 | ## Using a different view library
372 | 
373 | `seview` exports a single function, `seview`, that you use to create an `h` function that works with
374 | the view library of your choice. Calling `h(view)`, where `view` is the view expressed as arrays as
375 | we have seen above, produces the final result suitable for your view library.
376 | 
377 | To set up your view library, call `seview` and pass it a function that gets called for every node in
378 | the view. Each node has the following structure:
379 | 
380 | ```js
381 | {
382 |   tag: 'button',
383 |   attrs: { id: 'save', class: 'btn btn-default', ... }
384 |   children: [ ... ]
385 | }
386 | ```
387 | 
388 | The function that you write needs to convert the structure above to what is expected by the view
389 | library that you are using. Note that your function will also be called for each element in
390 | `children`.
391 | 
392 | ```js
393 | import { seview } from 'seview';
394 | import { myViewLibrary } from 'my-view-library';
395 | 
396 | export const h = seview((node) => {
397 |   const tag = processTagAsNecessary(node.tag);
398 |   const attrs = processAttrsAsNecessary(node.tag);
399 | 
400 |   return myViewLibrary(tag, attrs, node.children || []);
401 | });
402 | ```
403 | 
404 | Then you can use `h` with your view library in a similar way as we saw in the [Usage](#usage)
405 | section.
406 | 
407 | ## Credits
408 | 
409 | `seview` is inspired by the following. Credit goes to the authors and their communities - thank you
410 | for your excellent work!
411 | 
412 | - [How to UI in 2018](https://medium.com/@thi.ng/how-to-ui-in-2018-ac2ae02acdf3)
413 | - [ijk](https://github.com/lukejacksonn/ijk)
414 | - [JSnoX](https://github.com/af/JSnoX)
415 | - [Mithril](http://mithril.js.org)
416 | - [domvm](https://domvm.github.io/domvm/)
417 | 
418 | ----
419 | 
420 | _seview is developed by [foxdonut](https://github.com/foxdonut)
421 | ([@foxdonut00](http://twitter.com/foxdonut00)) and is released under the MIT license._
422 | 


--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "@babel/preset-env"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jestconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "testRegex": "tests/.*\\.js$",
3 |   "testPathIgnorePatterns": ["/dist/"],
4 |   "moduleFileExtensions": ["js"]
5 | }
6 | 


--------------------------------------------------------------------------------
/mithril/index.js:
--------------------------------------------------------------------------------
 1 | import m from 'mithril';
 2 | import { seview } from '../src';
 3 | 
 4 | const processAttrs = (attrs = {}) => {
 5 |   Object.keys(attrs).forEach((key) => {
 6 |     if (key.startsWith('on')) {
 7 |       attrs[key.toLowerCase()] = attrs[key];
 8 |       delete attrs[key];
 9 |     }
10 |   });
11 |   return attrs;
12 | };
13 | 
14 | export const h = seview((node) =>
15 |   (typeof node === 'string')
16 |     ? { tag: '#', children: node }
17 |     : node.attrs && node.attrs.innerHTML
18 |       ? m(node.tag, m.trust(node.attrs.innerHTML))
19 |       : m(node.tag, processAttrs(node.attrs), node.children || [])
20 | );
21 | 


--------------------------------------------------------------------------------
/mithril/index.mjs:
--------------------------------------------------------------------------------
 1 | /* global m, seview */
 2 | const processAttrs = (attrs = {}) => {
 3 |   Object.keys(attrs).forEach((key) => {
 4 |     if (key.startsWith('on')) {
 5 |       attrs[key.toLowerCase()] = attrs[key];
 6 |       delete attrs[key];
 7 |     }
 8 |   });
 9 |   return attrs;
10 | };
11 | 
12 | const h = seview.seview((node) =>
13 |   (typeof node === 'string')
14 |     ? { tag: '#', children: node }
15 |     : node.attrs && node.attrs.innerHTML
16 |       ? m(node.tag, m.trust(node.attrs.innerHTML))
17 |       : m(node.tag, processAttrs(node.attrs), node.children || [])
18 | );
19 | 
20 | export { h };
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "seview",
 3 |   "version": "2.0.5",
 4 |   "description": "S-Expression View",
 5 |   "main": "dist/seview.js",
 6 |   "scripts": {
 7 |     "start": "rollup -c",
 8 |     "watch": "rollup -c -w",
 9 |     "test": "jest --config jestconfig.json"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/foxdonut/seview.git"
14 |   },
15 |   "keywords": [
16 |     "data",
17 |     "hyperscript",
18 |     "s-expression",
19 |     "view",
20 |     "virtual dom"
21 |   ],
22 |   "author": "foxdonut",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/foxdonut/seview/issues"
26 |   },
27 |   "homepage": "https://github.com/foxdonut/seview#readme",
28 |   "devDependencies": {
29 |     "@babel/core": "^7.22.9",
30 |     "@babel/preset-env": "^7.22.9",
31 |     "@rollup/plugin-babel": "^6.0.3",
32 |     "@rollup/plugin-commonjs": "^25.0.3",
33 |     "@rollup/plugin-node-resolve": "^15.1.0",
34 |     "@rollup/plugin-terser": "^0.4.3",
35 |     "eslint": "^8.45.0",
36 |     "eslint-config-foxdonut": "^2.1.0",
37 |     "eslint-plugin-jest": "^27.2.3",
38 |     "jest": "^29.6.1",
39 |     "rollup": "^3.26.3"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/preact/index.js:
--------------------------------------------------------------------------------
 1 | import { h as preactH } from 'preact';
 2 | import { seview } from '../src';
 3 | 
 4 | export const h = seview((node) => {
 5 |   if (typeof node === 'string') {
 6 |     return node;
 7 |   }
 8 |   const attrs = node.attrs || {};
 9 |   if (attrs.innerHTML) {
10 |     attrs.dangerouslySetInnerHTML = { __html: attrs.innerHTML };
11 |     delete attrs.innerHTML;
12 |   }
13 |   return preactH(node.tag, attrs, node.children || []);
14 | });
15 | 


--------------------------------------------------------------------------------
/preact/index.mjs:
--------------------------------------------------------------------------------
 1 | /* global preact, seview */
 2 | const h = seview.seview((node) => {
 3 |   if (typeof node === 'string') {
 4 |     return node;
 5 |   }
 6 |   const attrs = node.attrs || {};
 7 |   if (attrs.innerHTML) {
 8 |     attrs.dangerouslySetInnerHTML = { __html: attrs.innerHTML };
 9 |     delete attrs.innerHTML;
10 |   }
11 |   return preact.h(node.tag, attrs, node.children || []);
12 | });
13 | 
14 | export { h };
15 | 


--------------------------------------------------------------------------------
/react/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { seview } from '../src';
 3 | 
 4 | const attrMap = {
 5 |   onInput: 'onChange',
 6 |   class: 'className',
 7 |   for: 'htmlFor'
 8 | };
 9 | 
10 | const processAttrs = (attrs = {}) => {
11 |   Object.keys(attrs).forEach((key) => {
12 |     const mappedKey = attrMap[key];
13 |     if (mappedKey) {
14 |       attrs[mappedKey] = attrs[key];
15 |       delete attrs[key];
16 |     }
17 |   });
18 |   return attrs;
19 | };
20 | 
21 | export const h = seview((node) => {
22 |   if (typeof node === 'string') {
23 |     return node;
24 |   }
25 |   const attrs = processAttrs(node.attrs);
26 |   if (attrs.innerHTML) {
27 |     attrs.dangerouslySetInnerHTML = { __html: attrs.innerHTML };
28 |     delete attrs.innerHTML;
29 |   }
30 |   const args = [node.tag, attrs].concat(node.children || []);
31 |   return React.createElement.apply(null, args);
32 | });
33 | 


--------------------------------------------------------------------------------
/react/index.mjs:
--------------------------------------------------------------------------------
 1 | /* global React, seview */
 2 | const attrMap = {
 3 |   onInput: 'onChange',
 4 |   class: 'className',
 5 |   for: 'htmlFor'
 6 | };
 7 | 
 8 | const processAttrs = (attrs = {}) => {
 9 |   Object.keys(attrs).forEach((key) => {
10 |     const mappedKey = attrMap[key];
11 |     if (mappedKey) {
12 |       attrs[mappedKey] = attrs[key];
13 |       delete attrs[key];
14 |     }
15 |   });
16 |   return attrs;
17 | };
18 | 
19 | const h = seview.seview((node) => {
20 |   if (typeof node === 'string') {
21 |     return node;
22 |   }
23 |   const attrs = processAttrs(node.attrs);
24 |   if (attrs.innerHTML) {
25 |     attrs.dangerouslySetInnerHTML = { __html: attrs.innerHTML };
26 |     delete attrs.innerHTML;
27 |   }
28 |   const args = [node.tag, attrs].concat(node.children || []);
29 |   return React.createElement.apply(null, args);
30 | });
31 | 
32 | export { h };
33 | 


--------------------------------------------------------------------------------
/rollup.config.mjs:
--------------------------------------------------------------------------------
 1 | import commonjs from '@rollup/plugin-commonjs';
 2 | import resolve from '@rollup/plugin-node-resolve';
 3 | import babel from '@rollup/plugin-babel';
 4 | import terser from '@rollup/plugin-terser';
 5 | 
 6 | const name = 'seview';
 7 | const input = './src/index.js';
 8 | const outFileReg = 'dist/seview.js';
 9 | const outFileMin = 'dist/seview.min.js';
10 | const extensions = ['.js'];
11 | const babelHelpers = 'bundled';
12 | 
13 | const plugins = [
14 |   resolve({ extensions }),
15 |   commonjs(),
16 |   babel({
17 |     babelHelpers,
18 |     extensions,
19 |     include: ['src/**']
20 |   })
21 | ];
22 | 
23 | const output = {
24 |   name,
25 |   format: 'umd'
26 | };
27 | 
28 | export default [
29 |   {
30 |     input,
31 |     plugins,
32 |     output: Object.assign(
33 |       {
34 |         file: outFileReg
35 |       },
36 |       output
37 |     )
38 |   },
39 |   {
40 |     input,
41 |     plugins: plugins.concat(terser()),
42 |     output: Object.assign(
43 |       {
44 |         file: outFileMin
45 |       },
46 |       output
47 |     )
48 |   }
49 | ];
50 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { isArray, isIterable, isString, nodeDef } from './util';
 2 | 
 3 | const transformNodeDef = (transform, def) => {
 4 |   if (isArray(def.children) || isIterable(def.children)) {
 5 |     const result = [];
 6 |     def.children.forEach((child) => {
 7 |       result.push(isString(child) ? transform(child) : transformNodeDef(transform, child));
 8 |     });
 9 |     def.children = result;
10 |   }
11 |   return transform(def);
12 | };
13 | 
14 | export const seview = (transform, options) => (node) => {
15 |   const def = nodeDef(node, options);
16 |   return transformNodeDef(transform, def);
17 | };
18 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
  1 | export const isString = (x) => typeof x === 'string';
  2 | export const isNumber = (x) => typeof x === 'number';
  3 | export const isBoolean = (x) => typeof x === 'boolean';
  4 | export const isArray = (x) => Array.isArray(x);
  5 | export const isIterable = (x) => x != null && typeof x[Symbol.iterator] === 'function'
  6 |   && !isString(x);
  7 | export const isObject = (x) => x != null && typeof x === 'object' && !isArray(x) && !isIterable(x);
  8 | 
  9 | export const getString = (value) => {
 10 |   let result = undefined;
 11 | 
 12 |   if (isString(value) && value.length > 0) {
 13 |     result = value;
 14 |   }
 15 |   else if (isNumber(value)) {
 16 |     result = String(value);
 17 |   }
 18 |   else if (isBoolean(value) && value) {
 19 |     result = String(value);
 20 |   }
 21 |   return result;
 22 | };
 23 | 
 24 | export const get = (object, path) =>
 25 |   object == null
 26 |     ? undefined
 27 |     : path.length === 1
 28 |       ? object[path[0]]
 29 |       : get(object[path[0]], path.slice(1));
 30 | 
 31 | export const set = (object, path, value) => {
 32 |   if (path.length === 1) {
 33 |     if (isObject(object[path[0]])) {
 34 |       Object.assign(object[path[0]], value);
 35 |     }
 36 |     else {
 37 |       object[path[0]] = value;
 38 |     }
 39 |   }
 40 |   else {
 41 |     if (object[[path[0]]] == null) {
 42 |       object[[path[0]]] = {};
 43 |     }
 44 |     set(object[path[0]], path.slice(1), value);
 45 |   }
 46 |   return object;
 47 | };
 48 | 
 49 | // Credit: JSnoX https://github.com/af/JSnoX/blob/master/jsnox.js
 50 | 
 51 | // matches 'input', 'input:text'
 52 | const tagTypeRegex = /^([A-Za-z0-9-]+)(?::([a-z]+))?/;
 53 | 
 54 | // matches '#id', '.class', '[name=value]', '[required]'
 55 | const propsRegex = /((?:#|\.|@)[\w-]+)|(\[.*?\])/g;
 56 | 
 57 | // matches '[name=value]' or '[required]'
 58 | const attrRegex = /\[([\w-]+)(?:=([^\]]+))?\]/;
 59 | 
 60 | /*
 61 | returns tag properties: for example, 'input:password#duck.quack.yellow[name=pwd][required]'
 62 | {
 63 |   tag: 'input',
 64 |   class: 'quack yellow',
 65 |   attrs: { type: 'password', id: 'duck', name: 'pwd', required: true }
 66 | }
 67 | */
 68 | export const getTagProperties = (selector) => {
 69 |   const result = {};
 70 | 
 71 |   let tagType = selector.match(tagTypeRegex);
 72 | 
 73 |   // Use div by default
 74 |   if (!tagType) {
 75 |     tagType = ['div', 'div'];
 76 |   }
 77 |   result.tag = tagType[1];
 78 | 
 79 |   if (tagType[2]) {
 80 |     result.attrs = { type: tagType[2] };
 81 |   }
 82 | 
 83 |   const tagProps = selector.match(propsRegex);
 84 | 
 85 |   if (tagProps) {
 86 |     const classes = [];
 87 | 
 88 |     tagProps.forEach((tagProp) => {
 89 |       const ch = tagProp[0];
 90 |       const prop = tagProp.slice(1);
 91 | 
 92 |       if (ch === '#') {
 93 |         set(result, ['attrs', 'id'], prop);
 94 |       }
 95 |       else if (ch === '.') {
 96 |         classes.push(prop);
 97 |       }
 98 |       else if (ch === '[') {
 99 |         const attrs = tagProp.match(attrRegex);
100 |         set(result, ['attrs', attrs[1]], (attrs[2] || true));
101 |       }
102 |     });
103 | 
104 |     if (classes.length > 0) {
105 |       set(result, ['attrs', 'class'], classes.join(' '));
106 |     }
107 |   }
108 | 
109 |   return result;
110 | };
111 | 
112 | /*
113 | returns node definition, expanding on the above tag properties and adding to obtain:
114 | {
115 |   tag: 'input',
116 |   class: 'quack yellow',
117 |   attrs: { type: 'password', id: 'duck', name: 'pwd', required: true, onClick: ... },
118 |   children: [ { tag: ... }, 'text', ... ]
119 | }
120 | */
121 | const processChildren = (rest, result = []) => {
122 |   rest.forEach((child) => {
123 |     if (isIterable(child)) {
124 |       child = Array.from(child);
125 |     }
126 |     // Text node
127 |     if (getString(child)) {
128 |       result.push(getString(child));
129 |     }
130 |     else if (isArray(child)) {
131 |       // Nested array
132 |       if (isArray(child[0]) || isIterable(child[0])) {
133 |         processChildren(child, result);
134 |       }
135 |       // Regular node
136 |       else if (child.length > 0) {
137 |         result.push(nodeDef(child));
138 |       }
139 |     }
140 |   });
141 |   return result;
142 | };
143 | 
144 | export const nodeDef = (node) => {
145 |   // Tag
146 |   let rest = node[2];
147 |   let varArgsLimit = 3;
148 | 
149 |   // Process tag
150 |   const result = isString(node[0])
151 |     ? getTagProperties(node[0], 'class')
152 |     : { tag: node[0] };
153 | 
154 |   // Process attrs
155 |   if (isObject(node[1])) {
156 |     const attrs = node[1];
157 | 
158 |     // Process class
159 |     if (attrs['class'] !== undefined) {
160 |       const classAttr = attrs['class'];
161 |       delete attrs['class'];
162 | 
163 |       let addClasses = [];
164 |       if (isString(classAttr)) {
165 |         addClasses = classAttr.split(' ');
166 |       }
167 |       else if (isObject(classAttr)) {
168 |         Object.keys(classAttr).forEach((key) => {
169 |           if (classAttr[key]) {
170 |             addClasses.push(key);
171 |           }
172 |         });
173 |       }
174 |       if (addClasses.length > 0) {
175 |         const existingClass = get(result, ['attrs', 'class']);
176 |         const addClass = addClasses.join(' ');
177 |         set(result, ['attrs', 'class'],
178 |           (existingClass ? existingClass + ' ' : '')
179 |           + addClass
180 |         );
181 |       }
182 |     }
183 | 
184 |     // Add remaining attributes
185 |     if (Object.keys(attrs).length > 0) {
186 |       if (result.attrs === undefined) {
187 |         result.attrs = attrs;
188 |       }
189 |       else {
190 |         result.attrs = Object.assign(result.attrs, attrs);
191 |       }
192 |     }
193 |   }
194 |   // No attrs, use second argument as rest
195 |   else {
196 |     rest = node[1];
197 |     varArgsLimit = 2;
198 |   }
199 | 
200 |   // Process children: varargs
201 |   if (node.length > varArgsLimit) {
202 |     result.children = processChildren(node.slice(varArgsLimit - 1));
203 |   }
204 |   // Process children: one child arg
205 |   else {
206 |     // Text node
207 |     if (getString(rest)) {
208 |       result.children = [getString(rest)];
209 |     }
210 | 
211 |     if (isIterable(rest)) {
212 |       rest = Array.from(rest);
213 |     }
214 |     if (isArray(rest)) {
215 |       // Array of children vs One child node
216 |       result.children = processChildren(isArray(rest[0]) ? rest : [rest]);
217 |     }
218 |   }
219 |   return result;
220 | };
221 | 


--------------------------------------------------------------------------------
/tests/index.test.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env jest */
  2 | 
  3 | import { seview } from '../src/index';
  4 | import { isString } from '../src/util';
  5 | 
  6 | const transform = (node) => {
  7 |   if (isString(node)) {
  8 |     return node;
  9 |   }
 10 |   const children = node.children || [];
 11 |   const childrenObj = children.length > 0 ? { children } : {};
 12 | 
 13 |   return {
 14 |     type: node.tag,
 15 |     props: Object.assign({}, node.attrs, childrenObj)
 16 |   };
 17 | };
 18 | 
 19 | const h = seview(transform);
 20 | 
 21 | const p = seview((node) => {
 22 |   if (isString(node)) {
 23 |     return node;
 24 |   }
 25 |   const result = {
 26 |     nodeName: node.tag
 27 |   };
 28 |   if (node.attrs) {
 29 |     result.attributes = node.attrs;
 30 |   }
 31 |   if (node.children) {
 32 |     result.subs = node.children;
 33 |   }
 34 |   return result;
 35 | });
 36 | 
 37 | const f = seview((node) => {
 38 |   if (isString(node)) {
 39 |     return {
 40 |       type: '#text',
 41 |       nodeValue: node
 42 |     };
 43 |   }
 44 |   return {
 45 |     type: node.tag,
 46 |     attributes: node.attrs || {},
 47 |     content: node.children || []
 48 |   };
 49 | });
 50 | 
 51 | describe('seview index', () => {
 52 |   it('basicText', () => {
 53 |     expect(h(['div', { id: 'test' }, 'test']))
 54 |       .toEqual({
 55 |         type: 'div',
 56 |         props: { id: 'test', children: ['test'] }
 57 |       });
 58 |   });
 59 | 
 60 |   it('basicChildren', () => {
 61 |     expect(h(['div', { id: 'test' }, [
 62 |       ['div', {}, 'test1'],
 63 |       ['div', {}, 'test2']
 64 |     ]]))
 65 |       .toEqual({
 66 |         type: 'div',
 67 |         props: {
 68 |           id: 'test',
 69 |           children: [
 70 |             { type: 'div', props: { children: ['test1'] } },
 71 |             { type: 'div', props: { children: ['test2'] } }
 72 |           ]
 73 |         }
 74 |       });
 75 |   });
 76 | 
 77 |   it('justATag', () => {
 78 |     expect(h(['hr']))
 79 |       .toEqual({ type: 'hr', props: {} });
 80 |   });
 81 | 
 82 |   it('optionalAttrs', () => {
 83 |     expect(h(['div', 'test']))
 84 |       .toEqual({ type: 'div', props: { children: ['test'] } }
 85 |       );
 86 |   });
 87 | 
 88 |   it('optionalAttrsChildren', () => {
 89 |     expect(h(['div', [
 90 |       ['div', 'test1'],
 91 |       ['div', 'test2']
 92 |     ]]))
 93 |       .toEqual({
 94 |         type: 'div',
 95 |         props: {
 96 |           children: [
 97 |             { type: 'div', props: { children: ['test1'] } },
 98 |             { type: 'div', props: { children: ['test2'] } }
 99 |           ]
100 |         }
101 |       });
102 |   });
103 | 
104 |   it('combineClass', () => {
105 |     expect(h(['button.btn', { class: 'btn-default other' }]))
106 |       .toEqual({
107 |         type: 'button',
108 |         props: { class: 'btn btn-default other' }
109 |       });
110 |   });
111 | 
112 |   it('combineClassWithDifferentProp', () => {
113 |     expect(h(['button.btn', { class: 'btn-default other' }], { class: 'class' }))
114 |       .toEqual({
115 |         type: 'button',
116 |         props: { class: 'btn btn-default other' }
117 |       });
118 |   });
119 | 
120 |   it('classToggles', () => {
121 |     expect(h(['button.btn', { class: { 'btn-primary': true, 'btn-default': false } }]))
122 |       .toEqual({
123 |         type: 'button',
124 |         props: { class: 'btn btn-primary' }
125 |       });
126 |   });
127 | 
128 |   it('classTogglesFalsy', () => {
129 |     expect(h(['button.btn',
130 |       { class: { 'btn-primary': true, 'one': null, 'two': undefined, 'three': 0 } }]))
131 |       .toEqual({
132 |         type: 'button',
133 |         props: { class: 'btn btn-primary' }
134 |       });
135 |   });
136 | 
137 |   it('basicVarArgs', () => {
138 |     expect(p(['div', {},
139 |       ['div', 'test1'],
140 |       ['div', 'test2']]))
141 |       .toEqual({
142 |         nodeName: 'div',
143 |         subs: [
144 |           { nodeName: 'div', subs: ['test1'] },
145 |           { nodeName: 'div', subs: ['test2'] }
146 |         ]
147 |       });
148 |   });
149 | 
150 |   it('varArgsNoAttrs', () => {
151 |     expect(p(['div',
152 |       ['div', 'test1'],
153 |       ['div', 'test2']]))
154 |       .toEqual({
155 |         nodeName: 'div',
156 |         subs: [
157 |           { nodeName: 'div', subs: ['test1'] },
158 |           { nodeName: 'div', subs: ['test2'] }
159 |         ]
160 |       });
161 |   });
162 | 
163 |   it('oneVarArg', () => {
164 |     expect(p(['div',
165 |       ['div', 'test1']]))
166 |       .toEqual({
167 |         nodeName: 'div',
168 |         subs: [
169 |           { nodeName: 'div', subs: ['test1'] }
170 |         ]
171 |       });
172 |   });
173 | 
174 |   it('mixedChildrenVarArgs', () => {
175 |     expect(p(['div',
176 |       'text 1',
177 |       ['b', 'in bold']]))
178 |       .toEqual({
179 |         nodeName: 'div',
180 |         subs: [
181 |           'text 1',
182 |           { nodeName: 'b', subs: ['in bold'] }
183 |         ]
184 |       });
185 |   });
186 | 
187 |   it('mixedChildrenArray', () => {
188 |     expect(p(['div', [
189 |       ['b', 'in bold'],
190 |       'text 2'
191 |     ]]))
192 |       .toEqual({
193 |         nodeName: 'div',
194 |         subs: [
195 |           { nodeName: 'b', subs: ['in bold'] },
196 |           'text 2'
197 |         ]
198 |       });
199 |   });
200 | 
201 |   it('deeplyNestedChildren', () => {
202 |     expect(p(['div',
203 |       ['div',
204 |         ['input:checkbox#sports', { checked: true }],
205 |         ['label', { htmlFor: 'sports' }, 'Sports']]]))
206 |       .toEqual({
207 |         nodeName: 'div',
208 |         subs: [
209 |           {
210 |             nodeName: 'div',
211 |             subs: [
212 |               {
213 |                 nodeName: 'input',
214 |                 attributes: { type: 'checkbox', id: 'sports', checked: true }
215 |               },
216 |               {
217 |                 nodeName: 'label',
218 |                 attributes: { htmlFor: 'sports' },
219 |                 subs: ['Sports']
220 |               }
221 |             ]
222 |           }
223 |         ]
224 |       });
225 |   });
226 | 
227 |   it('processTextNodes', () => {
228 |     expect(f(['div',
229 |       ['span', 'test']]))
230 |       .toEqual({
231 |         type: 'div',
232 |         attributes: {},
233 |         content: [
234 |           {
235 |             type: 'span',
236 |             attributes: {},
237 |             content: [
238 |               {
239 |                 type: '#text',
240 |                 nodeValue: 'test'
241 |               }
242 |             ]
243 |           }
244 |         ]
245 |       });
246 |   });
247 | });
248 | 


--------------------------------------------------------------------------------
/tests/util.test.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env jest */
  2 | 
  3 | import {
  4 |   isString, isNumber, isBoolean, isArray, isIterable, isObject, get, set,
  5 |   getString, getTagProperties, nodeDef
  6 | } from '../src/util';
  7 | 
  8 | const string = 'test';
  9 | const number = 42;
 10 | const boolean = false;
 11 | const object = { key: 'value' };
 12 | const array = ['div', 'test'];
 13 | const iter = new Set(['div', 'test']);
 14 | const func = (x) => x;
 15 | 
 16 | describe('seview util', () => {
 17 |   describe('isString', () => {
 18 |     it('is true for string', () => {
 19 |       expect(isString(string)).toEqual(true);
 20 |     });
 21 | 
 22 |     it('is false for number', () => {
 23 |       expect(isString(number)).toEqual(false);
 24 |     });
 25 | 
 26 |     it('is false for boolean', () => {
 27 |       expect(isString(boolean)).toEqual(false);
 28 |     });
 29 | 
 30 |     it('is false for object', () => {
 31 |       expect(isString(object)).toEqual(false);
 32 |     });
 33 | 
 34 |     it('is false for array', () => {
 35 |       expect(isString(array)).toEqual(false);
 36 |     });
 37 | 
 38 |     it('is false for iterable', () => {
 39 |       expect(isString(iter)).toEqual(false);
 40 |     });
 41 | 
 42 |     it('is false for function', () => {
 43 |       expect(isString(func)).toEqual(false);
 44 |     });
 45 | 
 46 |     it('is false for null', () => {
 47 |       expect(isString(null)).toEqual(false);
 48 |     });
 49 | 
 50 |     it('is false for undefined', () => {
 51 |       expect(isString(undefined)).toEqual(false);
 52 |     });
 53 |   });
 54 | 
 55 |   describe('isNumber', () => {
 56 |     it('is false for string', () => {
 57 |       expect(isNumber(string)).toEqual(false);
 58 |     });
 59 | 
 60 |     it('is true for number', () => {
 61 |       expect(isNumber(number)).toEqual(true);
 62 |     });
 63 | 
 64 |     it('is false for boolean', () => {
 65 |       expect(isNumber(boolean)).toEqual(false);
 66 |     });
 67 | 
 68 |     it('is false for object', () => {
 69 |       expect(isNumber(object)).toEqual(false);
 70 |     });
 71 | 
 72 |     it('is false for array', () => {
 73 |       expect(isNumber(array)).toEqual(false);
 74 |     });
 75 | 
 76 |     it('is false for iterable', () => {
 77 |       expect(isNumber(iter)).toEqual(false);
 78 |     });
 79 | 
 80 |     it('is false for function', () => {
 81 |       expect(isNumber(func)).toEqual(false);
 82 |     });
 83 | 
 84 |     it('is false for null', () => {
 85 |       expect(isNumber(null)).toEqual(false);
 86 |     });
 87 | 
 88 |     it('is false for undefined', () => {
 89 |       expect(isNumber(undefined)).toEqual(false);
 90 |     });
 91 | 
 92 |   });
 93 | 
 94 |   describe('isBoolean', () => {
 95 |     it('is false for string', () => {
 96 |       expect(isBoolean(string)).toEqual(false);
 97 |     });
 98 | 
 99 |     it('is false for number', () => {
100 |       expect(isBoolean(number)).toEqual(false);
101 |     });
102 | 
103 |     it('is true for boolean', () => {
104 |       expect(isBoolean(boolean)).toEqual(true);
105 |     });
106 | 
107 |     it('is false for object', () => {
108 |       expect(isBoolean(object)).toEqual(false);
109 |     });
110 | 
111 |     it('is false for array', () => {
112 |       expect(isBoolean(array)).toEqual(false);
113 |     });
114 | 
115 |     it('is false for iterable', () => {
116 |       expect(isBoolean(iter)).toEqual(false);
117 |     });
118 | 
119 |     it('is false for function', () => {
120 |       expect(isBoolean(func)).toEqual(false);
121 |     });
122 | 
123 |     it('is false for null', () => {
124 |       expect(isBoolean(null)).toEqual(false);
125 |     });
126 | 
127 |     it('is false for undefined', () => {
128 |       expect(isBoolean(undefined)).toEqual(false);
129 |     });
130 |   });
131 | 
132 |   describe('isArray', () => {
133 |     it('is false for string', () => {
134 |       expect(isArray(string)).toEqual(false);
135 |     });
136 | 
137 |     it('is false for number', () => {
138 |       expect(isArray(number)).toEqual(false);
139 |     });
140 | 
141 |     it('is false for boolean', () => {
142 |       expect(isArray(boolean)).toEqual(false);
143 |     });
144 | 
145 |     it('is false for object', () => {
146 |       expect(isArray(object)).toEqual(false);
147 |     });
148 | 
149 |     it('is true for array', () => {
150 |       expect(isArray(array)).toEqual(true);
151 |     });
152 | 
153 |     it('is false for iterable', () => {
154 |       expect(isArray(iter)).toEqual(false);
155 |     });
156 | 
157 |     it('is false for function', () => {
158 |       expect(isArray(func)).toEqual(false);
159 |     });
160 | 
161 |     it('is false for null', () => {
162 |       expect(isArray(null)).toEqual(false);
163 |     });
164 | 
165 |     it('is false for undefined', () => {
166 |       expect(isArray(undefined)).toEqual(false);
167 |     });
168 |   });
169 | 
170 |   describe('isIterable', () => {
171 |     it('is false for string', () => {
172 |       expect(isIterable(string)).toEqual(false);
173 |     });
174 | 
175 |     it('is false for number', () => {
176 |       expect(isIterable(number)).toEqual(false);
177 |     });
178 | 
179 |     it('is false for boolean', () => {
180 |       expect(isIterable(boolean)).toEqual(false);
181 |     });
182 | 
183 |     it('is false for object', () => {
184 |       expect(isIterable(object)).toEqual(false);
185 |     });
186 | 
187 |     it('is false for array', () => {
188 |       expect(isIterable(array)).toEqual(true);
189 |     });
190 | 
191 |     it('is true for Set', () => {
192 |       expect(isIterable(iter)).toEqual(true);
193 |     });
194 | 
195 |     it('is false for function', () => {
196 |       expect(isIterable(func)).toEqual(false);
197 |     });
198 | 
199 |     it('is false for null', () => {
200 |       expect(isIterable(null)).toEqual(false);
201 |     });
202 | 
203 |     it('is false for undefined', () => {
204 |       expect(isIterable(undefined)).toEqual(false);
205 |     });
206 |   });
207 | 
208 |   describe('isObject', () => {
209 |     it('is false for string', () => {
210 |       expect(isObject(string)).toEqual(false);
211 |     });
212 | 
213 |     it('is false for number', () => {
214 |       expect(isObject(number)).toEqual(false);
215 |     });
216 | 
217 |     it('is false for boolean', () => {
218 |       expect(isObject(boolean)).toEqual(false);
219 |     });
220 | 
221 |     it('is true for object', () => {
222 |       expect(isObject(object)).toEqual(true);
223 |     });
224 | 
225 |     it('is false for array', () => {
226 |       expect(isObject(array)).toEqual(false);
227 |     });
228 | 
229 |     it('is false for iterable', () => {
230 |       expect(isObject(iter)).toEqual(false);
231 |     });
232 | 
233 |     it('is false for function', () => {
234 |       expect(isObject(func)).toEqual(false);
235 |     });
236 | 
237 |     it('is false for null', () => {
238 |       expect(isObject(null)).toEqual(false);
239 |     });
240 | 
241 |     it('is false for undefined', () => {
242 |       expect(isObject(undefined)).toEqual(false);
243 |     });
244 |   });
245 | 
246 |   describe('getString', () => {
247 |     it('basic', () => {
248 |       expect(getString(string)).toEqual(string);
249 |     });
250 | 
251 |     it('excluded', () => {
252 |       expect([
253 |         getString(undefined),
254 |         getString(null),
255 |         getString(''),
256 |         getString(false),
257 |         getString(['test']),
258 |         getString({ id: 'test' })
259 |       ])
260 |         .toEqual([undefined, undefined, undefined, undefined, undefined, undefined]);
261 |     });
262 | 
263 |     it('included', () => {
264 |       expect([getString(42), getString(NaN), getString(Infinity), getString(true)])
265 |         .toEqual(['42', 'NaN', 'Infinity', 'true']);
266 |     });
267 |   });
268 | 
269 |   describe('get', () => {
270 |     it('basic', () => {
271 |       expect(get({ tag: 'div' }, ['tag'])).toEqual('div');
272 |     });
273 | 
274 |     it('deep', () => {
275 |       expect(get({ attrs: { onClick: func } }, ['attrs', 'onClick'])).toEqual(func);
276 |     });
277 | 
278 |     it('noValue', () => {
279 |       expect(get({ tag: 'div' }, ['type'])).toBeUndefined();
280 |     });
281 | 
282 |     it('noPath', () => {
283 |       expect(get({ tag: 'div' }, ['type', 'value'])).toBeUndefined();
284 |     });
285 |   });
286 | 
287 |   describe('set', () => {
288 |     it('basic', () => {
289 |       expect(set({ tag: 'div' }, ['tag'], 'span'))
290 |         .toEqual({ tag: 'span' });
291 |     });
292 | 
293 |     it('deep', () => {
294 |       expect(set({ attrs: { onClick: null } }, ['attrs', 'onClick'], func))
295 |         .toEqual({ attrs: { onClick: func } });
296 |     });
297 | 
298 |     it('noValue', () => {
299 |       expect(set({ tag: 'input' }, ['type'], 'password'))
300 |         .toEqual({ tag: 'input', type: 'password' });
301 |     });
302 | 
303 |     it('noPath', () => {
304 |       expect(set({ tag: 'input' }, ['attrs', 'type'], 'password'))
305 |         .toEqual({ tag: 'input', attrs: { type: 'password' } });
306 |     });
307 | 
308 |     it('merge', () => {
309 |       expect(set({ tag: 'input', props: { id: 'test' } }, ['props', 'children'], ['test']))
310 |         .toEqual({ tag: 'input', props: { id: 'test', children: ['test'] } });
311 |     });
312 |   });
313 | 
314 |   describe('getTagProperties', () => {
315 |     it('divByDefault', () => {
316 |       expect(getTagProperties(''))
317 |         .toEqual({
318 |           tag: 'div'
319 |         });
320 |     });
321 | 
322 |     it('divByDefaultWithClass', () => {
323 |       expect(getTagProperties('.btn'))
324 |         .toEqual({
325 |           tag: 'div',
326 |           attrs: { class: 'btn' }
327 |         });
328 |     });
329 | 
330 |     it('divByDefaultWithId', () => {
331 |       expect(getTagProperties('#home'))
332 |         .toEqual({
333 |           tag: 'div',
334 |           attrs: { id: 'home' }
335 |         });
336 |     });
337 | 
338 |     it('customTag', () => {
339 |       expect(getTagProperties('my-tag09.home'))
340 |         .toEqual({
341 |           tag: 'my-tag09',
342 |           attrs: { class: 'home' }
343 |         });
344 |     });
345 | 
346 |     it('all', () => {
347 |       expect(getTagProperties('input:password#duck.quack.yellow[name=pwd][required]'))
348 |         .toEqual({
349 |           tag: 'input',
350 |           attrs: {
351 |             type: 'password',
352 |             id: 'duck',
353 |             class: 'quack yellow',
354 |             name: 'pwd',
355 |             required: true
356 |           }
357 |         });
358 |     });
359 | 
360 |     it('valueWithSpaces', () => {
361 |       expect(getTagProperties('input[placeholder=Enter your name here]'))
362 |         .toEqual({
363 |           tag: 'input',
364 |           attrs: { placeholder: 'Enter your name here' }
365 |         });
366 |     });
367 | 
368 |     it('extraTypesIgnored', () => {
369 |       expect(getTagProperties('input:text:password.form-input'))
370 |         .toEqual({
371 |           tag: 'input',
372 |           attrs: { type: 'text', class: 'form-input' }
373 |         });
374 |     });
375 | 
376 |     it('optionForClass', () => {
377 |       expect(getTagProperties('input.form-input', 'class'))
378 |         .toEqual({
379 |           tag: 'input',
380 |           attrs: { class: 'form-input' }
381 |         });
382 |     });
383 |   });
384 | 
385 |   describe('nodeDef', () => {
386 |     it('basicText', () => {
387 |       expect(nodeDef(['div', { width: '100%' }, 'test']))
388 |         .toEqual({
389 |           tag: 'div',
390 |           attrs: { width: '100%' },
391 |           children: ['test']
392 |         });
393 |     });
394 | 
395 |     it('basicChildren', () => {
396 |       expect(nodeDef(['div', { id: 'test' }, [
397 |         ['div', 'test1'],
398 |         ['div', 'test2']
399 |       ]]))
400 |         .toEqual({
401 |           tag: 'div',
402 |           attrs: { id: 'test' },
403 |           children: [
404 |             { tag: 'div', children: ['test1'] },
405 |             { tag: 'div', children: ['test2'] }
406 |           ]
407 |         });
408 |     });
409 | 
410 |     it('uppercaseTag', () => {
411 |       expect(nodeDef(['MY-DIV', 'test']))
412 |         .toEqual({
413 |           tag: 'MY-DIV',
414 |           children: ['test']
415 |         });
416 |     });
417 | 
418 |     it('basicIterable', () => {
419 |       expect(nodeDef(['div', { id: 'test' }, new Set([
420 |         ['span[key=a]', 'hi'],
421 |         ['span[key=b]', 'bye']
422 |       ])]))
423 |         .toEqual({
424 |           tag: 'div',
425 |           attrs: { id: 'test' },
426 |           children: [
427 |             { tag: 'span', attrs: { key: 'a' }, children: ['hi'] },
428 |             { tag: 'span', attrs: { key: 'b' }, children: ['bye'] }
429 |           ]
430 |         });
431 |     });
432 | 
433 |     it('nestedArrays', () => {
434 |       expect(nodeDef(['div', [
435 |         ['div', 'test1'],
436 |         [
437 |           ['div', 'test2'],
438 |           ['div', 'test3']
439 |         ],
440 |         [],
441 |         [[]],
442 |         [
443 |           ['div', 'test4'],
444 |           [
445 |             ['div', 'test5']
446 |           ]
447 |         ]
448 |       ]]))
449 |         .toEqual({
450 |           tag: 'div',
451 |           children: [
452 |             { tag: 'div', children: ['test1'] },
453 |             { tag: 'div', children: ['test2'] },
454 |             { tag: 'div', children: ['test3'] },
455 |             { tag: 'div', children: ['test4'] },
456 |             { tag: 'div', children: ['test5'] }
457 |           ]
458 |         });
459 |     });
460 | 
461 |     it('nestedArraysVarargs', () => {
462 |       expect(nodeDef(['div',
463 |         ['div', 'test1'],
464 |         [
465 |           ['div', 'test2'],
466 |           ['div', 'test3']
467 |         ],
468 |         [],
469 |         [[]],
470 |         [
471 |           ['div', 'test4'],
472 |           [
473 |             ['div', 'test5']
474 |           ]
475 |         ]]))
476 |         .toEqual({
477 |           tag: 'div',
478 |           children: [
479 |             { tag: 'div', children: ['test1'] },
480 |             { tag: 'div', children: ['test2'] },
481 |             { tag: 'div', children: ['test3'] },
482 |             { tag: 'div', children: ['test4'] },
483 |             { tag: 'div', children: ['test5'] }
484 |           ]
485 |         });
486 |     });
487 | 
488 |     it('justATag', () => {
489 |       expect(nodeDef(['hr'])).toEqual({ tag: 'hr' });
490 |     });
491 | 
492 |     it('tagWithNumber', () => {
493 |       expect(nodeDef(['span', 0])).toEqual({ tag: 'span', children: ['0'] });
494 |     });
495 | 
496 |     it('oneVarArg', () => {
497 |       expect(nodeDef(['div',
498 |         ['div', 'test1']]))
499 |         .toEqual({
500 |           tag: 'div',
501 |           children: [
502 |             { tag: 'div', children: ['test1'] }
503 |           ]
504 |         });
505 |     });
506 | 
507 |     it('mixedChildrenVarArgs', () => {
508 |       expect(nodeDef(['div',
509 |         'text 1',
510 |         42,
511 |         undefined,
512 |         null,
513 |         false,
514 |         [],
515 |         [[]],
516 |         '',
517 |         true,
518 |         NaN,
519 |         Infinity,
520 |         ['b', 'in bold']]))
521 |         .toEqual({
522 |           tag: 'div',
523 |           children: [
524 |             'text 1',
525 |             '42',
526 |             'true',
527 |             'NaN',
528 |             'Infinity',
529 |             { tag: 'b', children: ['in bold'] }
530 |           ]
531 |         });
532 |     });
533 | 
534 |     it('combineAttrs', () => {
535 |       expect(nodeDef(['input[name=duck]', { value: 'quack' }]))
536 |         .toEqual({
537 |           tag: 'input',
538 |           attrs: { name: 'duck', value: 'quack' }
539 |         });
540 |     });
541 | 
542 |     it('combineAttrsOverride', () => {
543 |       expect(nodeDef(['input:text#one[name=horse]', { type: 'password', id: 'two', name: 'duck' }]))
544 |         .toEqual({
545 |           tag: 'input',
546 |           attrs: { type: 'password', id: 'two', name: 'duck' }
547 |         });
548 |     });
549 | 
550 |     it('combineClass', () => {
551 |       expect(nodeDef(['button.btn', { class: 'btn-default other' }]))
552 |         .toEqual({
553 |           tag: 'button',
554 |           attrs: { class: 'btn btn-default other' }
555 |         });
556 |     });
557 | 
558 |     it('combineClassWithDifferentProp', () => {
559 |       expect(nodeDef(['button.btn', { class: 'btn-default other' }], { class: 'class' }))
560 |         .toEqual({
561 |           tag: 'button',
562 |           attrs: { class: 'btn btn-default other' }
563 |         });
564 |     });
565 | 
566 |     it('classToggles', () => {
567 |       expect(nodeDef(['button.btn', { class: { 'btn-primary': true, 'btn-default': false } }]))
568 |         .toEqual({
569 |           tag: 'button',
570 |           attrs: { class: 'btn btn-primary' }
571 |         });
572 |     });
573 | 
574 |     it('classTogglesFalsy', () => {
575 |       expect(nodeDef([
576 |         'button.btn',
577 |         { class: { 'btn-primary': true, 'one': null, 'two': undefined, 'three': 0 } }
578 |       ]))
579 |         .toEqual({
580 |           tag: 'button',
581 |           attrs: { class: 'btn btn-primary' }
582 |         });
583 |     });
584 | 
585 |     it('events', () => {
586 |       expect(nodeDef(['button', { onClick: func, onBlur: func }]))
587 |         .toEqual({
588 |           tag: 'button',
589 |           attrs: {
590 |             onClick: func,
591 |             onBlur: func
592 |           }
593 |         });
594 |     });
595 | 
596 |     it('functionTag', () => {
597 |       expect(nodeDef([func, { name: 'test' }, [func, { id: 'child' }]]))
598 |         .toEqual({
599 |           tag: func,
600 |           attrs: { name: 'test' },
601 |           children: [
602 |             { tag: func, attrs: { id: 'child' } }
603 |           ]
604 |         });
605 |     });
606 | 
607 |     it('objectTag', () => {
608 |       expect(nodeDef([object, { name: 'test' }, [object, { id: 'child' }]]))
609 |         .toEqual({
610 |           tag: object,
611 |           attrs: { name: 'test' },
612 |           children: [
613 |             { tag: object, attrs: { id: 'child' } }
614 |           ]
615 |         });
616 |     });
617 |   });
618 | });
619 | 


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