profile
viewpoint
Alfred Ringstad alfredringstad Hyperlab AB Gothenburg https://hyperlab.se

alfredringstad/format-message 0

Internationalization Made Easy

alfredringstad/lighthouse-ci 0

A useful wrapper around Google Lighthouse CLI

alfredringstad/rebassjs.org 0

Documentation site for Rebass

alfredringstad/svelte 0

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.

alfredringstad

comment created time in 16 days

PullRequestReviewEvent

push eventalfredringstad/svelte

Alfred Ringstad

commit sha 2f6a8866ead30def5d66d70079b3c0a3bce538aa

Add add_css_class method to DynamicElement

view details

push time in 16 days

push eventalfredringstad/svelte

Alfred Ringstad

commit sha fe4158a22776a0e5c6214382c79ed3e1dde34ed0

Implement svelte:element for dynamically setting HTML DOM type

view details

push time in 22 days

PR opened sveltejs/svelte

Dynamic elements implementation `<svelte:element>`

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
+680 -9

0 comment

30 changed files

pr created time in 22 days

push eventalfredringstad/svelte

Alfred Ringstad

commit sha 346eb46a8386340da2b22ae8d41a0acd9f36cd3b

Make server side rendering of Dynamic Elements work similar to the client side version

view details

push time in 22 days

push eventalfredringstad/svelte

Tan Li Hau

commit sha 296e81af4d26050f9b45fab1291f533e76e4dc2d

add EventSource to the known globals (#5468)

view details

Tan Li Hau

commit sha 3970def5eba83d3b9086fa50fe1e9cffe478fe4d

fix sibling combinators with spread attributes (#5467)

view details

Ben McCann

commit sha 0645631b28bc9d3429268ef5d2d1ead0feee77f9

Use TypeScript in tests (#5433)

view details

Tan Li Hau

commit sha 8056829a9163a09930a453aff42dacf711943549

allow <slot> to be part of a slot (#4295)

view details

Tan Li Hau

commit sha 2c5f1c466ebe1aab2a38e0030c4946954688e227

add typings to `get_store_value` (#5269) Co-authored-by: Julian Laubstein <contact@julianlaubstein.de>

view details

orange4glace

commit sha fd0c6ee4d8dbe10c5f73922e04db170ff03d341d

fix unmounting components delayed bidirectional transitions (#5353)

view details

Conduitry

commit sha 99e2cfca11f5dc611eec10c5a12074f51e9d1bb3

update changelog

view details

Tan Li Hau

commit sha 2d88dc460e687f15ac181be587edebead1a8aedb

warn for possible use of component without uppercase tag name (#5302)

view details

Conduitry

commit sha c24b313b1af8c55db4fe0ce1ea689000042a2531

-> v3.29.0

view details

Ben McCann

commit sha 229a16d6e78dd5a11c75cc439c1a88e1079d452b

upgrade ESLint config (#5472)

view details

Daniel Sandoval

commit sha 324f74b427d3ce9dcd9648fbf9c1303db15693ed

"What's new in Svelte" October newsletter (#5429)

view details

push time in 22 days

push eventalfredringstad/svelte

Daniel Sandoval

commit sha 324f74b427d3ce9dcd9648fbf9c1303db15693ed

"What's new in Svelte" October newsletter (#5429)

view details

Alfred Ringstad

commit sha 5d252c0788ad6a11873980a51acd0566304dbb72

Implement svelte:element for dynamically setting HTML DOM type

view details

Alfred Ringstad

commit sha 6c81c84d5955c9763f4ec9bd00ea1f77e9cf3935

Use code from KeyBlock implementation

view details

Alfred Ringstad

commit sha e6d3f1a0741f8036472a706fadfbec8f7405bd53

Rename dynamic_name to dynamic_tag

view details

Alfred Ringstad

commit sha 6457b1e467a7753e5168a919a834e0e0496c89bb

Convert dynamic tag string to string literal

view details

Alfred Ringstad

commit sha e16b36d6eb535050bde4f5812ac886cf6a7de5a5

Fix linter warnings

view details

Alfred Ringstad

commit sha d0d9dff71f580b883742eb4115088c15f83c2cf9

Add test for passing props and fix test vars

view details

push time in 22 days

push eventalfredringstad/svelte

Alfred Ringstad

commit sha 3845284723800fc9fa16beb6a7c8e7039504e25c

Fix linter warnings

view details

Alfred Ringstad

commit sha 643c93b09010256f1b46e5266f26f43cc24d5c96

Add test for passing props and fix test vars

view details

push time in 22 days

push eventalfredringstad/svelte

Conduitry

commit sha b1c67a16c607fdd3e2150122f58604d7a1f1dcbc

site: update to sapper@0.28.6

view details

Tan Li Hau

commit sha 51e2626f42e00df15730152c2d0cedf06ace0f49

fix $$props reactivity in fallback of a slot (#5375)

view details

Tan Li Hau

commit sha 8a28d1bb382e75546ca8b53e5235113bf82f9ecd

valid XHTML syntax in innerHTML for static elements (#5317)

view details

Cam Jackson

commit sha 80e474a2442e109e5e2a39bf02bb11e6c6b7b029

site: Replace "active" with "selected" as an example class name (#5309)

view details

Eugene Hwang

commit sha ae971f80ae11659c8885748a5aeaac82eb5ec17b

docs: adjust explanations of `$$props` and `$$restProps` (#5368)

view details

rdb

commit sha 211fc92e69b7eb02b2e7f0d67e6569c8fcbfcb52

Fix current component not being cleared after component update (#4909)

view details

Conduitry

commit sha b7710b93bcc186d27b2a5dad82524d9cd311b052

update changelog

view details

milahu

commit sha c96673bcead31758104bb605d42b7edc50a1aee1

Upgrade to mocha 7 and migrate to mocharc (#5357) Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

Th0rN13

commit sha 4b59491ea4db972e45b7eff679e73db5857c0006

Fix: input type number warning in browsers (#4772)

view details

Conduitry

commit sha daa1c390d5b24cfe381f72ad1552963da19935d0

update changelog

view details

Conduitry

commit sha dfb15a6a37ef7bd48e18a69d3b4dcad8690b32a4

fix lint

view details

Conduitry

commit sha 5bf2d6fadfc14972d35adfef79ef21c21175771f

-> v3.25.0

view details

Conduitry

commit sha 8271658fa8575bf30e4db50d3c1fc1ef9da50691

site: revert to sapper@0.27

view details

Ben McCann

commit sha d9364c4e9cf1d0c65f6c1bd74705639f66f24626

site: standardize building command (#5380)

view details

lonevox

commit sha 3255f8b662defe4c655ea47e2fba1d67ed6b8362

site: change "on to" to "onto" in tutorial 03 (#5386)

view details

Rich Harris

commit sha 04498769b5a835dcf6f0ae59f5e194fabf1b2c2a

bump site-kit version

view details

Tan Li Hau

commit sha 7900e3eafac7a59a9d0af37069faf3e3b720918c

fix style scoping with > * (#5400)

view details

Tan Li Hau

commit sha 46d423d9dbf647e7d8e6d408937312ba694708c1

fix css specificity for child combinator (#5399)

view details

push time in 23 days

push eventalfredringstad/svelte

Alfred Ringstad

commit sha ad9fd7d053d9cb8a4c8d63dc7f58fc4925dbd928

Rename dynamic_name to dynamic_tag

view details

Alfred Ringstad

commit sha 05cc82ac8b15a2aaf19e5e719eea2e3b30511a4b

Convert dynamic tag string to string literal

view details

push time in 23 days

push eventalfredringstad/svelte

Alfred Ringstad

commit sha 3d867a430239222691bb3f7a9645b5c2adf355a7

Use code from KeyBlock implementation

view details

push time in 23 days

create barnchalfredringstad/svelte

branch : dynamic-elements-implementation

created branch time in a month

fork alfredringstad/svelte

Cybernetically enhanced web apps

https://svelte.dev

fork in a month

more