├── .gitignore
├── example
    ├── src
    │   ├── main.js
    │   └── App.svelte
    ├── public
    │   ├── global.css
    │   └── index.html
    └── rollup.config.js
├── .vscode
    └── settings.json
├── .editorconfig
├── src
    ├── br.svelte
    ├── hr.svelte
    ├── col.svelte
    ├── wbr.svelte
    ├── b.svelte
    ├── embed.svelte
    ├── i.svelte
    ├── input.svelte
    ├── p.svelte
    ├── param.svelte
    ├── q.svelte
    ├── s.svelte
    ├── source.svelte
    ├── track.svelte
    ├── u.svelte
    ├── bdi.svelte
    ├── bdo.svelte
    ├── dd.svelte
    ├── del.svelte
    ├── dfn.svelte
    ├── dir.svelte
    ├── div.svelte
    ├── dl.svelte
    ├── dt.svelte
    ├── em.svelte
    ├── h1.svelte
    ├── h2.svelte
    ├── h3.svelte
    ├── h4.svelte
    ├── h5.svelte
    ├── h6.svelte
    ├── ins.svelte
    ├── kbd.svelte
    ├── li.svelte
    ├── map.svelte
    ├── nav.svelte
    ├── ol.svelte
    ├── pre.svelte
    ├── rb.svelte
    ├── rp.svelte
    ├── rt.svelte
    ├── rtc.svelte
    ├── sub.svelte
    ├── sup.svelte
    ├── td.svelte
    ├── th.svelte
    ├── tr.svelte
    ├── tt.svelte
    ├── ul.svelte
    ├── var.svelte
    ├── abbr.svelte
    ├── aside.svelte
    ├── cite.svelte
    ├── code.svelte
    ├── data.svelte
    ├── form.svelte
    ├── label.svelte
    ├── main.svelte
    ├── mark.svelte
    ├── menu.svelte
    ├── meter.svelte
    ├── ruby.svelte
    ├── samp.svelte
    ├── small.svelte
    ├── span.svelte
    ├── table.svelte
    ├── tbody.svelte
    ├── tfoot.svelte
    ├── thead.svelte
    ├── time.svelte
    ├── applet.svelte
    ├── button.svelte
    ├── canvas.svelte
    ├── dialog.svelte
    ├── figure.svelte
    ├── footer.svelte
    ├── header.svelte
    ├── hgroup.svelte
    ├── legend.svelte
    ├── output.svelte
    ├── select.svelte
    ├── strong.svelte
    ├── address.svelte
    ├── article.svelte
    ├── caption.svelte
    ├── colgroup.svelte
    ├── datalist.svelte
    ├── details.svelte
    ├── fieldset.svelte
    ├── menuitem.svelte
    ├── noembed.svelte
    ├── noscript.svelte
    ├── optgroup.svelte
    ├── picture.svelte
    ├── progress.svelte
    ├── section.svelte
    ├── summary.svelte
    ├── textarea.svelte
    ├── blockquote.svelte
    ├── audio.svelte
    ├── video.svelte
    ├── img.svelte
    ├── area.svelte
    ├── a.svelte
    ├── option.svelte
    ├── iframe.svelte
    ├── object.svelte
    ├── utils.js
    └── index.js
├── rollup.config.js
├── package.json
├── README.md
└── scripts
    └── generate.js


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | example/public/bundle*
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/example/src/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 | 
3 | const app = new App({ target: document.body });
4 | export default app;
5 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "[javascript]": { "editor.formatOnSave": true },
3 |   "[typescript]": { "editor.formatOnSave": true }
4 | }
5 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | charset = utf-8
8 | 


--------------------------------------------------------------------------------
/src/br.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <br bind:this={el} use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/hr.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <hr bind:this={el} use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/col.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <col bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/wbr.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <wbr bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/b.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <b bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></b>
9 | 


--------------------------------------------------------------------------------
/src/embed.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <embed bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/i.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <i bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></i>
9 | 


--------------------------------------------------------------------------------
/src/input.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <input bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/p.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <p bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></p>
9 | 


--------------------------------------------------------------------------------
/src/param.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <param bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/q.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <q bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></q>
9 | 


--------------------------------------------------------------------------------
/src/s.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <s bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></s>
9 | 


--------------------------------------------------------------------------------
/src/source.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <source bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/track.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <track bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
9 | 


--------------------------------------------------------------------------------
/src/u.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <u bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></u>
9 | 


--------------------------------------------------------------------------------
/src/bdi.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <bdi bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></bdi>
9 | 


--------------------------------------------------------------------------------
/src/bdo.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <bdo bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></bdo>
9 | 


--------------------------------------------------------------------------------
/src/dd.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <dd bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></dd>
9 | 


--------------------------------------------------------------------------------
/src/del.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <del bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></del>
9 | 


--------------------------------------------------------------------------------
/src/dfn.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <dfn bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></dfn>
9 | 


--------------------------------------------------------------------------------
/src/dir.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <dir bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></dir>
9 | 


--------------------------------------------------------------------------------
/src/div.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <div bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></div>
9 | 


--------------------------------------------------------------------------------
/src/dl.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <dl bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></dl>
9 | 


--------------------------------------------------------------------------------
/src/dt.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <dt bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></dt>
9 | 


--------------------------------------------------------------------------------
/src/em.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <em bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></em>
9 | 


--------------------------------------------------------------------------------
/src/h1.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <h1 bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></h1>
9 | 


--------------------------------------------------------------------------------
/src/h2.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <h2 bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></h2>
9 | 


--------------------------------------------------------------------------------
/src/h3.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <h3 bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></h3>
9 | 


--------------------------------------------------------------------------------
/src/h4.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <h4 bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></h4>
9 | 


--------------------------------------------------------------------------------
/src/h5.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <h5 bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></h5>
9 | 


--------------------------------------------------------------------------------
/src/h6.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <h6 bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></h6>
9 | 


--------------------------------------------------------------------------------
/src/ins.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <ins bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></ins>
9 | 


--------------------------------------------------------------------------------
/src/kbd.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <kbd bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></kbd>
9 | 


--------------------------------------------------------------------------------
/src/li.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <li bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></li>
9 | 


--------------------------------------------------------------------------------
/src/map.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <map bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></map>
9 | 


--------------------------------------------------------------------------------
/src/nav.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <nav bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></nav>
9 | 


--------------------------------------------------------------------------------
/src/ol.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <ol bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></ol>
9 | 


--------------------------------------------------------------------------------
/src/pre.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <pre bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></pre>
9 | 


--------------------------------------------------------------------------------
/src/rb.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <rb bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></rb>
9 | 


--------------------------------------------------------------------------------
/src/rp.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <rp bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></rp>
9 | 


--------------------------------------------------------------------------------
/src/rt.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <rt bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></rt>
9 | 


--------------------------------------------------------------------------------
/src/rtc.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <rtc bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></rtc>
9 | 


--------------------------------------------------------------------------------
/src/sub.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <sub bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></sub>
9 | 


--------------------------------------------------------------------------------
/src/sup.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <sup bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></sup>
9 | 


--------------------------------------------------------------------------------
/src/td.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <td bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></td>
9 | 


--------------------------------------------------------------------------------
/src/th.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <th bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></th>
9 | 


--------------------------------------------------------------------------------
/src/tr.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <tr bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></tr>
9 | 


--------------------------------------------------------------------------------
/src/tt.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <tt bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></tt>
9 | 


--------------------------------------------------------------------------------
/src/ul.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <ul bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></ul>
9 | 


--------------------------------------------------------------------------------
/src/var.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <var bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></var>
9 | 


--------------------------------------------------------------------------------
/src/abbr.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <abbr bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></abbr>
9 | 


--------------------------------------------------------------------------------
/src/aside.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <aside bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></aside>
9 | 


--------------------------------------------------------------------------------
/src/cite.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <cite bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></cite>
9 | 


--------------------------------------------------------------------------------
/src/code.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <code bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></code>
9 | 


--------------------------------------------------------------------------------
/src/data.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <data bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></data>
9 | 


--------------------------------------------------------------------------------
/src/form.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <form bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></form>
9 | 


--------------------------------------------------------------------------------
/src/label.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <label bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></label>
9 | 


--------------------------------------------------------------------------------
/src/main.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <main bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></main>
9 | 


--------------------------------------------------------------------------------
/src/mark.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <mark bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></mark>
9 | 


--------------------------------------------------------------------------------
/src/menu.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <menu bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></menu>
9 | 


--------------------------------------------------------------------------------
/src/meter.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <meter bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></meter>
9 | 


--------------------------------------------------------------------------------
/src/ruby.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <ruby bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></ruby>
9 | 


--------------------------------------------------------------------------------
/src/samp.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <samp bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></samp>
9 | 


--------------------------------------------------------------------------------
/src/small.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <small bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></small>
9 | 


--------------------------------------------------------------------------------
/src/span.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <span bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></span>
9 | 


--------------------------------------------------------------------------------
/src/table.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <table bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></table>
9 | 


--------------------------------------------------------------------------------
/src/tbody.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <tbody bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></tbody>
9 | 


--------------------------------------------------------------------------------
/src/tfoot.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <tfoot bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></tfoot>
9 | 


--------------------------------------------------------------------------------
/src/thead.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <thead bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></thead>
9 | 


--------------------------------------------------------------------------------
/src/time.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <time bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></time>
9 | 


--------------------------------------------------------------------------------
/src/applet.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <applet bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></applet>
9 | 


--------------------------------------------------------------------------------
/src/button.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <button bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></button>
9 | 


--------------------------------------------------------------------------------
/src/canvas.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <canvas bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></canvas>
9 | 


--------------------------------------------------------------------------------
/src/dialog.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <dialog bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></dialog>
9 | 


--------------------------------------------------------------------------------
/src/figure.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <figure bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></figure>
9 | 


--------------------------------------------------------------------------------
/src/footer.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <footer bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></footer>
9 | 


--------------------------------------------------------------------------------
/src/header.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <header bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></header>
9 | 


--------------------------------------------------------------------------------
/src/hgroup.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <hgroup bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></hgroup>
9 | 


--------------------------------------------------------------------------------
/src/legend.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <legend bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></legend>
9 | 


--------------------------------------------------------------------------------
/src/output.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <output bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></output>
9 | 


--------------------------------------------------------------------------------
/src/select.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <select bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></select>
9 | 


--------------------------------------------------------------------------------
/src/strong.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <strong bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></strong>
9 | 


--------------------------------------------------------------------------------
/src/address.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <address bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></address>
9 | 


--------------------------------------------------------------------------------
/src/article.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <article bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></article>
9 | 


--------------------------------------------------------------------------------
/src/caption.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <caption bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></caption>
9 | 


--------------------------------------------------------------------------------
/src/colgroup.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <colgroup bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></colgroup>
9 | 


--------------------------------------------------------------------------------
/src/datalist.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <datalist bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></datalist>
9 | 


--------------------------------------------------------------------------------
/src/details.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <details bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></details>
9 | 


--------------------------------------------------------------------------------
/src/fieldset.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <fieldset bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></fieldset>
9 | 


--------------------------------------------------------------------------------
/src/menuitem.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <menuitem bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></menuitem>
9 | 


--------------------------------------------------------------------------------
/src/noembed.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <noembed bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></noembed>
9 | 


--------------------------------------------------------------------------------
/src/noscript.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <noscript bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></noscript>
9 | 


--------------------------------------------------------------------------------
/src/optgroup.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <optgroup bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></optgroup>
9 | 


--------------------------------------------------------------------------------
/src/picture.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <picture bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></picture>
9 | 


--------------------------------------------------------------------------------
/src/progress.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <progress bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></progress>
9 | 


--------------------------------------------------------------------------------
/src/section.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <section bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></section>
9 | 


--------------------------------------------------------------------------------
/src/summary.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <summary bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></summary>
9 | 


--------------------------------------------------------------------------------
/src/textarea.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <textarea bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></textarea>
9 | 


--------------------------------------------------------------------------------
/src/blockquote.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <blockquote bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></blockquote>
9 | 


--------------------------------------------------------------------------------
/src/audio.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <audio bind:this={el} on:focus on:blur on:keypress on:click on:pause on:play use:subscribe={listen} {...$$props}><slot /></audio>
9 | 


--------------------------------------------------------------------------------
/src/video.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import { subscribe } from './utils';
3 | 
4 |   export let el = undefined;
5 |   export let listen = undefined;
6 | </script>
7 | 
8 | <video bind:this={el} on:focus on:blur on:keypress on:click on:pause on:play use:subscribe={listen} {...$$props}><slot /></video>
9 | 


--------------------------------------------------------------------------------
/src/img.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { subscribe } from './utils';
 3 | 
 4 |   export let alt;
 5 |   export let el = undefined;
 6 |   export let listen = undefined;
 7 | </script>
 8 | 
 9 | <img alt={alt || ''} bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
10 | 


--------------------------------------------------------------------------------
/src/area.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { subscribe } from './utils';
 3 | 
 4 |   export let alt;
 5 |   export let el = undefined;
 6 |   export let listen = undefined;
 7 | </script>
 8 | 
 9 | <area alt={alt = ''} bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props} />
10 | 


--------------------------------------------------------------------------------
/src/a.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { subscribe } from './utils';
 3 | 
 4 |   export let href;
 5 |   export let el = undefined;
 6 |   export let listen = undefined;
 7 | </script>
 8 | 
 9 | <a {href} bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}>
10 |   <slot />
11 | </a>
12 | 


--------------------------------------------------------------------------------
/src/option.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { subscribe } from './utils';
 3 | 
 4 |   export let value;
 5 |   export let el = undefined;
 6 |   export let listen = undefined;
 7 | </script>
 8 | 
 9 | <option {value} bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}><slot /></option>
10 | 


--------------------------------------------------------------------------------
/src/iframe.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { subscribe } from './utils';
 3 | 
 4 |   export let title;
 5 |   export let el = undefined;
 6 |   export let listen = undefined;
 7 | </script>
 8 | 
 9 | <iframe title={title || ''} bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}>
10 |   <slot />
11 | </iframe>
12 | 


--------------------------------------------------------------------------------
/src/object.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { subscribe } from './utils';
 3 | 
 4 |   export let title;
 5 |   export let el = undefined;
 6 |   export let listen = undefined;
 7 | </script>
 8 | 
 9 | <object title={title || ''} bind:this={el} on:focus on:blur on:keypress on:click use:subscribe={listen} {...$$props}>
10 |   <slot />
11 | </object>
12 | 


--------------------------------------------------------------------------------
/example/public/global.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 | 	position: relative;
 3 | 	width: 100%;
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | body {
 8 | 	color: #333;
 9 | 	margin: 0;
10 | 	padding: 8px;
11 | 	box-sizing: border-box;
12 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset='utf8'>
 5 | 	<meta name='viewport' content='width=device-width'>
 6 | 
 7 | 	<title>svelte-elements</title>
 8 | 
 9 | 	<link rel='stylesheet' href='global.css'>
10 | 	<link rel='stylesheet' href='bundle.css'>
11 | </head>
12 | 
13 | <body>
14 | 	<script src='bundle.js'></script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import filesize from 'rollup-plugin-filesize';
 3 | 
 4 | export default [
 5 |   {
 6 |     input: 'src/index.js',
 7 |     external: ['svelte', 'svelte/internal', 'svelte/store'],
 8 |     output: [
 9 |       {
10 |         file: 'dist/svelte-elements.es.js',
11 |         format: 'es',
12 |         sourcemap: true
13 |       },
14 |       {
15 |         file: 'dist/svelte-elements.cjs.js',
16 |         format: 'cjs',
17 |         sourcemap: true
18 |       }
19 |     ],
20 |     plugins: [svelte(), filesize()]
21 |   }
22 | ];
23 | 


--------------------------------------------------------------------------------
/example/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | import replace from 'rollup-plugin-replace';
 5 | 
 6 | export default {
 7 |   input: 'src/main.js',
 8 |   output: {
 9 |     sourcemap: true,
10 |     format: 'iife',
11 |     name: 'app',
12 |     file: 'public/bundle.js'
13 |   },
14 |   external: [],
15 |   plugins: [
16 |     svelte({
17 |       dev: true,
18 |       css: css => {
19 |         css.write('public/bundle.css');
20 |       }
21 |     }),
22 |     resolve(),
23 |     commonjs(),
24 |     replace({
25 |       'process.env.NODE_ENV': process.env.NODE_ENV || JSON.stringify('development')
26 |     })
27 |   ]
28 | };
29 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export function subscribe(node, listeners) {
 2 |   let subscriptions = listen(node, listeners);
 3 | 
 4 |   return {
 5 |     update(listeners) {
 6 |       unsubscribe(subscriptions);
 7 |       subscriptions = listen(node, listeners);
 8 |     },
 9 |     destroy() {
10 |       unsubscribe(subscriptions);
11 |     }
12 |   };
13 | }
14 | 
15 | function listen(node, listeners) {
16 |   if (!listeners) return [];
17 | 
18 |   return Object.keys(listeners).map(event => {
19 |     const handler = listeners[event];
20 | 
21 |     node.addEventListener(event, handler);
22 |     return () => node.removeEventListener(event, handler);
23 |   });
24 | }
25 | 
26 | function unsubscribe(subscriptions) {
27 |   return subscriptions.forEach(unsubscribe => unsubscribe());
28 | }
29 | 


--------------------------------------------------------------------------------
/example/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { A, Input } from '../../';
 3 | 
 4 |   let clicked = false;
 5 |   let focused = false;
 6 |   let keydown = false;
 7 |   let el, correct;
 8 | 
 9 |   $: correct = el instanceof HTMLElement;
10 | </script>
11 | 
12 | <h2>A</h2>
13 | <A bind:el href="#" on:click|preventDefault={() => clicked = true}>Howdy!</A>
14 | 
15 | <h3>Results</h3>
16 | <label><input type="checkbox" disabled bind:checked={clicked} /> Click</label><br>
17 | <label><input type="checkbox" disabled bind:checked={correct} /> Element</label>
18 | 
19 | <h2>Input</h2>
20 | <Input type="text" on:focus={() => focused = true} listen={{ keydown: () => keydown = true}} />
21 | 
22 | <h3>Results</h3>
23 | <label><input type="checkbox" disabled bind:checked={focused} /> Focus</label><br>
24 | <label><input type="checkbox" disabled bind:checked={keydown} /> listen</label>
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-elements",
 3 |   "version": "0.4.2",
 4 |   "author": "Tim Hall <tim.hall.engr@gmail.com>",
 5 |   "license": "MIT",
 6 |   "description": "Component wrappers for built-in html elements",
 7 |   "repository": "https://github.com/timhall/svelte-elements.git",
 8 |   "main": "dist/svelte-elements.cjs.js",
 9 |   "module": "dist/svelte-elements.es.js",
10 |   "svelte": "src/index.js",
11 |   "keywords": [
12 |     "svelte",
13 |     "elements",
14 |     "html"
15 |   ],
16 |   "scripts": {
17 |     "build": "rollup -c",
18 |     "prepublishOnly": "npm run build",
19 |     "example": "run-p example:*",
20 |     "example:build": "cd example && rollup -c --watch",
21 |     "example:serve": "serve example/public"
22 |   },
23 |   "peerDependencies": {
24 |     "svelte": "^3.0.0"
25 |   },
26 |   "devDependencies": {
27 |     "dedent": "^0.7.0",
28 |     "npm-run-all": "^4.1.5",
29 |     "rollup": "^1.11.3",
30 |     "rollup-plugin-commonjs": "^9.3.4",
31 |     "rollup-plugin-filesize": "^6.0.1",
32 |     "rollup-plugin-node-resolve": "^4.2.4",
33 |     "rollup-plugin-replace": "^2.2.0",
34 |     "rollup-plugin-svelte": "^5.0.3",
35 |     "serve": "^11.0.0",
36 |     "svelte": "^3.0.0"
37 |   },
38 |   "prettier": {
39 |     "singleQuote": true,
40 |     "printWidth": 100
41 |   },
42 |   "files": [
43 |     "src",
44 |     "dist"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-elements
 2 | 
 3 | `svelte:component` is a powerful primitive for rendering _components_ dynamically in svelte, but it doesn't handle html _elements_... until now.
 4 | 
 5 | ```html
 6 | <!-- Block.svelte -->
 7 | <script>
 8 |   import { P, Blockquote } from 'svelte-elements';
 9 | 
10 |   export let type;
11 | </script>
12 | 
13 | <svelte:component this="{type === 'blockquote' ? Blockquote : P}">
14 |   <slot />
15 | </svelte:component>
16 | ```
17 | 
18 | There are some limitations in this approach, namely `bind:this` does not point to the native element and events are not forwarded by default from the native element. This can be addressed in two ways:
19 | 
20 | ### `bind:el`
21 | 
22 | Instead of `bind:this={ref}`, use `bind:el={ref}`. `this` points to the wrapper component, `el` points to the native element
23 | 
24 | ```html
25 | <script>
26 |   import { A } from 'svelte-elements';
27 | 
28 |   let el;
29 |   $: console.log(el); // -> HTMLElement
30 | </script>
31 | 
32 | <A bind:el href="#">...</A>
33 | ```
34 | 
35 | ### `listen`
36 | 
37 | Forwarding events from the native element through the wrapper element comes with a cost, so to avoid adding extra event handlers only a few are forwarded. For all elements except `<br>` and `<hr>`, `on:focus`, `on:blur`, `on:keypress`, and `on:click` are forwarded. For `audio` and `video`, `on:pause` and `on:play` are also forwarded.
38 | 
39 | For any other events that need to be listened to, you can use the `listen` property:
40 | 
41 | ```html
42 | <script>
43 |   import { A } from 'svelte-elements';
44 | 
45 |   const preload = () => {};
46 |   const navigate = () => {};
47 | </script>
48 | 
49 | <A on:click="{navigate}" listen="{{ mouseenter: preload }}">...</A>
50 | ```
51 | 


--------------------------------------------------------------------------------
/scripts/generate.js:
--------------------------------------------------------------------------------
  1 | const { join } = require('path');
  2 | const { existsSync, readFileSync, writeFileSync } = require('fs');
  3 | const dedent = require('dedent');
  4 | 
  5 | // Load existing exports from src/index.js
  6 | const src = join(__dirname, '../src');
  7 | const index = join(src, 'index.js');
  8 | 
  9 | const list = new Set(
 10 |   readFileSync(index, 'utf8')
 11 |     .split('\n')
 12 |     .filter(Boolean)
 13 | );
 14 | 
 15 | // Get tags from stdin or all tags
 16 | let tags = process.argv.slice(2);
 17 | if (!tags.length) tags = allTags();
 18 | 
 19 | // Generate tags
 20 | for (const tag of tags) {
 21 |   const path = join(src, `${tag}.svelte`);
 22 |   if (existsSync(path)) {
 23 |     console.log(`<${tag}> - Skipped`);
 24 |     continue;
 25 |   }
 26 | 
 27 |   const events = `${matchingEvents(tag)}use:subscribe={listen}`;
 28 | 
 29 |   const data = dedent`<script>
 30 |     import { subscribe } from './utils';
 31 | 
 32 |     export let el = undefined;
 33 |     export let listen = undefined;
 34 |   </script>
 35 | 
 36 |   <${tag} bind:this={el} ${events} {...$$props}${isVoid(tag) ? ' />' : `><slot /></${tag}>`}\n`;
 37 | 
 38 |   writeFileSync(path, data, 'utf8');
 39 |   list.add(`export { default as ${capitalize(tag)} } from './${tag}.svelte';`);
 40 | 
 41 |   console.log(`<${tag}> - Created`);
 42 | }
 43 | 
 44 | writeFileSync(index, `${[...list].sort(byExport).join('\n')}\n`, 'utf8');
 45 | 
 46 | //
 47 | // utils
 48 | //
 49 | 
 50 | function capitalize(tag) {
 51 |   return tag[0].toUpperCase() + tag.slice(1);
 52 | }
 53 | 
 54 | function exportName(line) {
 55 |   return line.replace(`export { default as }`, '');
 56 | }
 57 | 
 58 | function byExport(a, b) {
 59 |   const a_name = exportName(a);
 60 |   const b_name = exportName(b);
 61 | 
 62 |   if (a_name < b_name) return -1;
 63 |   if (a_name > b_name) return 1;
 64 |   return 0;
 65 | }
 66 | 
 67 | // All events:
 68 | // (https://developer.mozilla.org/en-US/docs/Web/Events)
 69 | //
 70 | // on:focus on:blur
 71 | // on:cut on:copy on:paste
 72 | // on:keydown on:keypress on:keyup
 73 | // on:auxclick on:click on:contextmenu on:dblclick on:mousedown on:mouseenter on:mouseleave on:mousemove on:mouseover on:mouseout on:mouseup on:pointerlockchange on:pointerlockerror on:select on:wheel
 74 | // on:drag on:dragend on:dragenter on:dragstart on:dragleave on:dragover on:drop
 75 | // on:audioprocess on:canplay on:canplaythrough on:complete on:durationchange on:emptied on:ended on:loadeddata on:loadedmetadata on:pause on:play on:playing on:ratechange on:seeked on:seeking on:stalled on:suspend on:timeupdate on:volumechange on:waiting
 76 | //
 77 | // Forwarding events adds an event listener per event, which could get fairly expensive
 78 | // Instead, forward common events:
 79 | //
 80 | // everything: on:focus on:blur on:keypress on:click
 81 | // media: on:pause on:play
 82 | function matchingEvents(tag) {
 83 |   let events = !['br', 'hr'].includes(tag)
 84 |     ? ['on:focus', 'on:blur', 'on:keypress', 'on:click']
 85 |     : [];
 86 |   if (['audio', 'video'].includes(tag)) events = events.concat(['on:pause', 'on:play']);
 87 | 
 88 |   return events.length ? `${events.join(' ')} ` : '';
 89 | }
 90 | 
 91 | function isVoid(tag) {
 92 |   return [
 93 |     'area',
 94 |     'br',
 95 |     'col',
 96 |     'embed',
 97 |     'hr',
 98 |     'img',
 99 |     'input',
100 |     'param',
101 |     'source',
102 |     'track',
103 |     'wbr'
104 |   ].includes(tag);
105 | }
106 | 
107 | function allTags() {
108 |   return [
109 |     'a',
110 |     'abbr',
111 |     'address',
112 |     'applet',
113 |     'area',
114 |     'article',
115 |     'aside',
116 |     'audio',
117 |     'b',
118 |     'bdi',
119 |     'bdo',
120 |     'blockquote',
121 |     'br',
122 |     'button',
123 |     'canvas',
124 |     'caption',
125 |     'cite',
126 |     'code',
127 |     'col',
128 |     'colgroup',
129 |     'data',
130 |     'datalist',
131 |     'dd',
132 |     'del',
133 |     'details',
134 |     'dfn',
135 |     'dialog',
136 |     'dir',
137 |     'div',
138 |     'dl',
139 |     'dt',
140 |     'em',
141 |     'embed',
142 |     'fieldset',
143 |     // Unlikely to need, throws annoying a11y warning
144 |     // 'figcaption',
145 |     'figure',
146 |     'footer',
147 |     'form',
148 |     'h1',
149 |     'h2',
150 |     'h3',
151 |     'h4',
152 |     'h5',
153 |     'h6',
154 |     'header',
155 |     'hgroup',
156 |     'hr',
157 |     'i',
158 |     'iframe',
159 |     'img',
160 |     'input',
161 |     'ins',
162 |     'kbd',
163 |     'label',
164 |     'legend',
165 |     'li',
166 |     'main',
167 |     'map',
168 |     'mark',
169 |     'menu',
170 |     'menuitem',
171 |     'meter',
172 |     'nav',
173 |     'noembed',
174 |     'noscript',
175 |     'object',
176 |     'ol',
177 |     'optgroup',
178 |     'option',
179 |     'output',
180 |     'p',
181 |     'param',
182 |     'picture',
183 |     'pre',
184 |     'progress',
185 |     'q',
186 |     'rb',
187 |     'rp',
188 |     'rt',
189 |     'rtc',
190 |     'ruby',
191 |     's',
192 |     'samp',
193 |     'section',
194 |     'select',
195 |     'small',
196 |     'source',
197 |     'span',
198 |     'strong',
199 |     'sub',
200 |     'summary',
201 |     'sup',
202 |     'table',
203 |     'tbody',
204 |     'td',
205 |     'textarea',
206 |     'tfoot',
207 |     'th',
208 |     'thead',
209 |     'time',
210 |     'tr',
211 |     'track',
212 |     'tt',
213 |     'u',
214 |     'ul',
215 |     'var',
216 |     'video',
217 |     'wbr'
218 |   ];
219 | }
220 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | export { default as A } from './a.svelte';
  2 | export { default as Abbr } from './abbr.svelte';
  3 | export { default as Address } from './address.svelte';
  4 | export { default as Applet } from './applet.svelte';
  5 | export { default as Area } from './area.svelte';
  6 | export { default as Article } from './article.svelte';
  7 | export { default as Aside } from './aside.svelte';
  8 | export { default as Audio } from './audio.svelte';
  9 | export { default as B } from './b.svelte';
 10 | export { default as Bdi } from './bdi.svelte';
 11 | export { default as Bdo } from './bdo.svelte';
 12 | export { default as Blockquote } from './blockquote.svelte';
 13 | export { default as Br } from './br.svelte';
 14 | export { default as Button } from './button.svelte';
 15 | export { default as Canvas } from './canvas.svelte';
 16 | export { default as Caption } from './caption.svelte';
 17 | export { default as Cite } from './cite.svelte';
 18 | export { default as Code } from './code.svelte';
 19 | export { default as Col } from './col.svelte';
 20 | export { default as Colgroup } from './colgroup.svelte';
 21 | export { default as Data } from './data.svelte';
 22 | export { default as Datalist } from './datalist.svelte';
 23 | export { default as Dd } from './dd.svelte';
 24 | export { default as Del } from './del.svelte';
 25 | export { default as Details } from './details.svelte';
 26 | export { default as Dfn } from './dfn.svelte';
 27 | export { default as Dialog } from './dialog.svelte';
 28 | export { default as Dir } from './dir.svelte';
 29 | export { default as Div } from './div.svelte';
 30 | export { default as Dl } from './dl.svelte';
 31 | export { default as Dt } from './dt.svelte';
 32 | export { default as Em } from './em.svelte';
 33 | export { default as Embed } from './embed.svelte';
 34 | export { default as Fieldset } from './fieldset.svelte';
 35 | export { default as Figure } from './figure.svelte';
 36 | export { default as Footer } from './footer.svelte';
 37 | export { default as Form } from './form.svelte';
 38 | export { default as H1 } from './h1.svelte';
 39 | export { default as H2 } from './h2.svelte';
 40 | export { default as H3 } from './h3.svelte';
 41 | export { default as H4 } from './h4.svelte';
 42 | export { default as H5 } from './h5.svelte';
 43 | export { default as H6 } from './h6.svelte';
 44 | export { default as Header } from './header.svelte';
 45 | export { default as Hgroup } from './hgroup.svelte';
 46 | export { default as Hr } from './hr.svelte';
 47 | export { default as I } from './i.svelte';
 48 | export { default as Iframe } from './iframe.svelte';
 49 | export { default as Img } from './img.svelte';
 50 | export { default as Input } from './input.svelte';
 51 | export { default as Ins } from './ins.svelte';
 52 | export { default as Kbd } from './kbd.svelte';
 53 | export { default as Label } from './label.svelte';
 54 | export { default as Legend } from './legend.svelte';
 55 | export { default as Li } from './li.svelte';
 56 | export { default as Main } from './main.svelte';
 57 | export { default as Map } from './map.svelte';
 58 | export { default as Mark } from './mark.svelte';
 59 | export { default as Menu } from './menu.svelte';
 60 | export { default as Menuitem } from './menuitem.svelte';
 61 | export { default as Meter } from './meter.svelte';
 62 | export { default as Nav } from './nav.svelte';
 63 | export { default as Noembed } from './noembed.svelte';
 64 | export { default as Noscript } from './noscript.svelte';
 65 | export { default as Object } from './object.svelte';
 66 | export { default as Ol } from './ol.svelte';
 67 | export { default as Optgroup } from './optgroup.svelte';
 68 | export { default as Option } from './option.svelte';
 69 | export { default as Output } from './output.svelte';
 70 | export { default as P } from './p.svelte';
 71 | export { default as Param } from './param.svelte';
 72 | export { default as Picture } from './picture.svelte';
 73 | export { default as Pre } from './pre.svelte';
 74 | export { default as Progress } from './progress.svelte';
 75 | export { default as Q } from './q.svelte';
 76 | export { default as Rb } from './rb.svelte';
 77 | export { default as Rp } from './rp.svelte';
 78 | export { default as Rt } from './rt.svelte';
 79 | export { default as Rtc } from './rtc.svelte';
 80 | export { default as Ruby } from './ruby.svelte';
 81 | export { default as S } from './s.svelte';
 82 | export { default as Samp } from './samp.svelte';
 83 | export { default as Section } from './section.svelte';
 84 | export { default as Select } from './select.svelte';
 85 | export { default as Small } from './small.svelte';
 86 | export { default as Source } from './source.svelte';
 87 | export { default as Span } from './span.svelte';
 88 | export { default as Strong } from './strong.svelte';
 89 | export { default as Sub } from './sub.svelte';
 90 | export { default as Summary } from './summary.svelte';
 91 | export { default as Sup } from './sup.svelte';
 92 | export { default as Table } from './table.svelte';
 93 | export { default as Tbody } from './tbody.svelte';
 94 | export { default as Td } from './td.svelte';
 95 | export { default as Textarea } from './textarea.svelte';
 96 | export { default as Tfoot } from './tfoot.svelte';
 97 | export { default as Th } from './th.svelte';
 98 | export { default as Thead } from './thead.svelte';
 99 | export { default as Time } from './time.svelte';
100 | export { default as Tr } from './tr.svelte';
101 | export { default as Track } from './track.svelte';
102 | export { default as Tt } from './tt.svelte';
103 | export { default as U } from './u.svelte';
104 | export { default as Ul } from './ul.svelte';
105 | export { default as Var } from './var.svelte';
106 | export { default as Video } from './video.svelte';
107 | export { default as Wbr } from './wbr.svelte';
108 | 


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