├── .editorconfig
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── example
├── public
│ ├── global.css
│ └── index.html
├── rollup.config.js
└── src
│ ├── App.svelte
│ └── main.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── scripts
└── generate.js
└── src
├── a.svelte
├── abbr.svelte
├── address.svelte
├── applet.svelte
├── area.svelte
├── article.svelte
├── aside.svelte
├── audio.svelte
├── b.svelte
├── bdi.svelte
├── bdo.svelte
├── blockquote.svelte
├── br.svelte
├── button.svelte
├── canvas.svelte
├── caption.svelte
├── cite.svelte
├── code.svelte
├── col.svelte
├── colgroup.svelte
├── data.svelte
├── datalist.svelte
├── dd.svelte
├── del.svelte
├── details.svelte
├── dfn.svelte
├── dialog.svelte
├── dir.svelte
├── div.svelte
├── dl.svelte
├── dt.svelte
├── em.svelte
├── embed.svelte
├── fieldset.svelte
├── figure.svelte
├── footer.svelte
├── form.svelte
├── h1.svelte
├── h2.svelte
├── h3.svelte
├── h4.svelte
├── h5.svelte
├── h6.svelte
├── header.svelte
├── hgroup.svelte
├── hr.svelte
├── i.svelte
├── iframe.svelte
├── img.svelte
├── index.js
├── input.svelte
├── ins.svelte
├── kbd.svelte
├── label.svelte
├── legend.svelte
├── li.svelte
├── main.svelte
├── map.svelte
├── mark.svelte
├── menu.svelte
├── menuitem.svelte
├── meter.svelte
├── nav.svelte
├── noembed.svelte
├── noscript.svelte
├── object.svelte
├── ol.svelte
├── optgroup.svelte
├── option.svelte
├── output.svelte
├── p.svelte
├── param.svelte
├── picture.svelte
├── pre.svelte
├── progress.svelte
├── q.svelte
├── rb.svelte
├── rp.svelte
├── rt.svelte
├── rtc.svelte
├── ruby.svelte
├── s.svelte
├── samp.svelte
├── section.svelte
├── select.svelte
├── small.svelte
├── source.svelte
├── span.svelte
├── strong.svelte
├── sub.svelte
├── summary.svelte
├── sup.svelte
├── table.svelte
├── tbody.svelte
├── td.svelte
├── textarea.svelte
├── tfoot.svelte
├── th.svelte
├── thead.svelte
├── time.svelte
├── tr.svelte
├── track.svelte
├── tt.svelte
├── u.svelte
├── ul.svelte
├── utils.js
├── var.svelte
├── video.svelte
└── wbr.svelte
/.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 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | example/public/bundle*
3 | node_modules
4 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "[javascript]": { "editor.formatOnSave": true },
3 | "[typescript]": { "editor.formatOnSave": true }
4 | }
5 |
--------------------------------------------------------------------------------
/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 |
7 |
12 |
13 |
14 |
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 |
31 |
32 | ...
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 `...
50 | ```
51 |
--------------------------------------------------------------------------------
/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 |
2 |
3 |
4 | svelte-elements
8 |
9 | A
13 | clicked = true}>Howdy!
14 |
15 | Results
16 | Input
20 | Results
23 | ",
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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`
35 |
36 | <${tag} bind:this={el} ${events} {...$$props}${isVoid(tag) ? ' />' : `>
10 |
12 |
--------------------------------------------------------------------------------
/src/abbr.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/dl.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | <![CDATA[<slot />]]>
9 |
--------------------------------------------------------------------------------
/src/noscript.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
10 |
12 |
--------------------------------------------------------------------------------
/src/ol.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/param.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |