alfredringstad/format-message 0
Internationalization Made Easy
alfredringstad/lighthouse-ci 0
A useful wrapper around Google Lighthouse CLI
Documentation site for Rebass
Cybernetically enhanced web apps
slojdlager-se/slojdlager-se.github.io 0
Homepage for slöjdläger.se
Pull request review commentsveltejs/svelte
Dynamic elements implementation `<svelte:element>`
+import {+ get_attribute_value,+ get_class_attribute_value+} from './shared/get_attribute_value';+import { get_slot_scope } from './shared/get_slot_scope';+import { boolean_attributes } from './shared/boolean_attributes';+import Renderer, { RenderOptions } from '../Renderer';+import DynamicElement from '../../nodes/DynamicElement';+import ElementHandler from './Element';+import { x } from 'code-red';+import Expression from '../../nodes/shared/Expression';+import remove_whitespace_children from './utils/remove_whitespace_children';+import Element from '../../nodes/Element';++export default function (+ node: DynamicElement,+ renderer: Renderer,+ options: RenderOptions & {+ slot_scopes: Map<any, any>;+ }+) {+ const dependencies = node.tag.dynamic_dependencies();++ if (dependencies.length === 0) {+ ((node as unknown) as Element).dynamic_tag = node.tag;+ ElementHandler((node as unknown) as Element, renderer, options);+ } else {+ const children = remove_whitespace_children(node.children, node.next);++ // awkward special case+ let node_contents;++ const contenteditable = node.attributes.some(+ (attribute) => attribute.name === 'contenteditable'+ );++ const slot = node.get_static_attribute_value('slot');+ const nearest_inline_component = node.find_nearest(/InlineComponent/);++ if (slot && nearest_inline_component) {+ renderer.push();+ }++ renderer.add_string('<');+ renderer.add_expression(node.tag.node);++ const class_expression_list = node.classes.map((class_directive) => {+ const { expression, name } = class_directive;+ const snippet = expression ? expression.node : x`#ctx.${name}`; // TODO is this right?+ return x`${snippet} ? "${name}" : ""`;+ });+ // if (node.needs_manual_style_scoping) {
Thanks, I overlooked that part. Since this is a duplicate of the Element node, I've copied the add_css_class implementation from there.
comment created time in 16 days
push eventalfredringstad/svelte
commit sha 2f6a8866ead30def5d66d70079b3c0a3bce538aa
Add add_css_class method to DynamicElement
push time in 16 days
push eventalfredringstad/svelte
commit sha fe4158a22776a0e5c6214382c79ed3e1dde34ed0
Implement svelte:element for dynamically setting HTML DOM type
push time in 22 days
PR opened sveltejs/svelte
This PR is based of #2324 and implements a new tag in Svelte called <svelte:element>. This is used to dynamically render a HTML tag where you don't know the type upfront.
Use cases
When rendering data from a CMS you may end up with a structure looking like this:
[
{
"type": "div",
"children": [
{
"type": "h1",
"children": ["Lorem ipsum"]
},
{
"type": "p",
"children": ["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus accumsan sollicitudin. Proin accumsan id eros nec placerat. Maecenas ullamcorper ullamcorper nisi."]
}
]
}
]
The way to render this today is by creating a Svelte component that renders the corresponding HTML tag by defining all of them. However, this adds a lot of boilerplate and unnecessary weight to the compiled bundle. The implemented solution in this PR solves this problem.
Usage
The <svelte:element> takes a special property called tag, which is the type of DOM element you want to render (e.g. div, h1 etc). All other props/attributes are passed through to the DOM element itself, meaning you can use it just like you would use any HTML element.
Example: Passing tag as a string
<svelte:element tag="div">
This is rendered as a regular div.
</svelte:element>
Example: Passing tag as a variable
<script>
export let tag = 'h1';
</script>
<svelte:element {tag} {...$$props}>
This renders as whatever is passed as a prop to this component and forwards any props supplied.
</svelte:element>
Implementation details
The implementation is based on the works of erzr (see PR #3928) as well as the new implementation of the {#key} block. It works with ssr and hydration.
This PR introduces a new Node type called DynamicElement that wraps the regular Element implementation. The Element node has also been extended with a prop called dynamic_tag, which is used instead of the name to render the element, if this is present.
When the tag is changed the element is destroyed and a new one is created. If other props change except the tag, the element is re-used.
The server side implementation of DynamicElement is a copy of the Element implementation, with one important difference. Since we don't know upfront what kind of HTML element this is, we cannot do many of the optimizations/special cases (e.g. handling events in different ways depending on the element type or having textarea content be set both via value and as children). I think these tradeoffs are okay, since most of the time this should be used with more or less "static" content (if you want to have full control of it, you should probably create a Svelte component for this anyway).
Remaining
- [ ] Add to documentation
pr created time in 22 days
push eventalfredringstad/svelte
commit sha 346eb46a8386340da2b22ae8d41a0acd9f36cd3b
Make server side rendering of Dynamic Elements work similar to the client side version
push time in 22 days
push eventalfredringstad/svelte
commit sha 296e81af4d26050f9b45fab1291f533e76e4dc2d
add EventSource to the known globals (#5468)
commit sha 3970def5eba83d3b9086fa50fe1e9cffe478fe4d
fix sibling combinators with spread attributes (#5467)
commit sha 0645631b28bc9d3429268ef5d2d1ead0feee77f9
Use TypeScript in tests (#5433)
commit sha 8056829a9163a09930a453aff42dacf711943549
allow <slot> to be part of a slot (#4295)
commit sha 2c5f1c466ebe1aab2a38e0030c4946954688e227
add typings to `get_store_value` (#5269) Co-authored-by: Julian Laubstein <[email protected]>
commit sha fd0c6ee4d8dbe10c5f73922e04db170ff03d341d
fix unmounting components delayed bidirectional transitions (#5353)
commit sha 99e2cfca11f5dc611eec10c5a12074f51e9d1bb3
update changelog
commit sha 2d88dc460e687f15ac181be587edebead1a8aedb
warn for possible use of component without uppercase tag name (#5302)
commit sha c24b313b1af8c55db4fe0ce1ea689000042a2531
-> v3.29.0
commit sha 229a16d6e78dd5a11c75cc439c1a88e1079d452b
upgrade ESLint config (#5472)
commit sha 324f74b427d3ce9dcd9648fbf9c1303db15693ed
"What's new in Svelte" October newsletter (#5429)
push time in 22 days
push eventalfredringstad/svelte
commit sha 324f74b427d3ce9dcd9648fbf9c1303db15693ed
"What's new in Svelte" October newsletter (#5429)
commit sha 5d252c0788ad6a11873980a51acd0566304dbb72
Implement svelte:element for dynamically setting HTML DOM type
commit sha 6c81c84d5955c9763f4ec9bd00ea1f77e9cf3935
Use code from KeyBlock implementation
commit sha e6d3f1a0741f8036472a706fadfbec8f7405bd53
Rename dynamic_name to dynamic_tag
commit sha 6457b1e467a7753e5168a919a834e0e0496c89bb
Convert dynamic tag string to string literal
commit sha e16b36d6eb535050bde4f5812ac886cf6a7de5a5
Fix linter warnings
commit sha d0d9dff71f580b883742eb4115088c15f83c2cf9
Add test for passing props and fix test vars
push time in 22 days
push eventalfredringstad/svelte
commit sha 3845284723800fc9fa16beb6a7c8e7039504e25c
Fix linter warnings
commit sha 643c93b09010256f1b46e5266f26f43cc24d5c96
Add test for passing props and fix test vars
push time in 22 days
push eventalfredringstad/svelte
commit sha b1c67a16c607fdd3e2150122f58604d7a1f1dcbc
site: update to [email protected]
commit sha 51e2626f42e00df15730152c2d0cedf06ace0f49
fix $$props reactivity in fallback of a slot (#5375)
commit sha 8a28d1bb382e75546ca8b53e5235113bf82f9ecd
valid XHTML syntax in innerHTML for static elements (#5317)
commit sha 80e474a2442e109e5e2a39bf02bb11e6c6b7b029
site: Replace "active" with "selected" as an example class name (#5309)
commit sha ae971f80ae11659c8885748a5aeaac82eb5ec17b
docs: adjust explanations of `$$props` and `$$restProps` (#5368)
commit sha 211fc92e69b7eb02b2e7f0d67e6569c8fcbfcb52
Fix current component not being cleared after component update (#4909)
commit sha b7710b93bcc186d27b2a5dad82524d9cd311b052
update changelog
commit sha c96673bcead31758104bb605d42b7edc50a1aee1
Upgrade to mocha 7 and migrate to mocharc (#5357) Co-authored-by: Ben McCann <[email protected]>
commit sha 6ecc288d94e02c89d21c10cff852b82a9ab34f51
Bump node-fetch from 2.6.0 to 2.6.1 (#5376) Bumps [node-fetch](https://github.com/bitinn/node-fetch) from 2.6.0 to 2.6.1. - [Release notes](https://github.com/bitinn/node-fetch/releases) - [Changelog](https://github.com/node-fetch/node-fetch/blob/master/docs/CHANGELOG.md) - [Commits](https://github.com/bitinn/node-fetch/compare/v2.6.0...v2.6.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
commit sha d201c5bfb3388259ffc3bb7f5cb717aa43293015
Bump node-fetch from 2.6.0 to 2.6.1 in /site (#5377) Bumps [node-fetch](https://github.com/bitinn/node-fetch) from 2.6.0 to 2.6.1. - [Release notes](https://github.com/bitinn/node-fetch/releases) - [Changelog](https://github.com/node-fetch/node-fetch/blob/master/docs/CHANGELOG.md) - [Commits](https://github.com/bitinn/node-fetch/compare/v2.6.0...v2.6.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
commit sha 4b59491ea4db972e45b7eff679e73db5857c0006
Fix: input type number warning in browsers (#4772)
commit sha daa1c390d5b24cfe381f72ad1552963da19935d0
update changelog
commit sha dfb15a6a37ef7bd48e18a69d3b4dcad8690b32a4
fix lint
commit sha 5bf2d6fadfc14972d35adfef79ef21c21175771f
-> v3.25.0
commit sha 8271658fa8575bf30e4db50d3c1fc1ef9da50691
site: revert to [email protected]
commit sha d9364c4e9cf1d0c65f6c1bd74705639f66f24626
site: standardize building command (#5380)
commit sha 3255f8b662defe4c655ea47e2fba1d67ed6b8362
site: change "on to" to "onto" in tutorial 03 (#5386)
commit sha 04498769b5a835dcf6f0ae59f5e194fabf1b2c2a
bump site-kit version
commit sha 7900e3eafac7a59a9d0af37069faf3e3b720918c
fix style scoping with > * (#5400)
commit sha 46d423d9dbf647e7d8e6d408937312ba694708c1
fix css specificity for child combinator (#5399)
push time in 23 days
push eventalfredringstad/svelte
commit sha ad9fd7d053d9cb8a4c8d63dc7f58fc4925dbd928
Rename dynamic_name to dynamic_tag
commit sha 05cc82ac8b15a2aaf19e5e719eea2e3b30511a4b
Convert dynamic tag string to string literal
push time in 23 days
push eventalfredringstad/svelte
commit sha 3d867a430239222691bb3f7a9645b5c2adf355a7
Use code from KeyBlock implementation
push time in 23 days
create barnchalfredringstad/svelte
branch : dynamic-elements-implementation
created branch time in a month
Cybernetically enhanced web apps
fork in a month