crisward / svelte-tag

MIT License
52 stars 8 forks source link

Add support for kebab-case to camelCase conversions #11

Closed patricknelson closed 1 year ago

patricknelson commented 1 year ago

Would love the ability to support the following:

<custom-element foo-bar="baz></custom-element>

Where the element attribute foo-bar is automatically translated to its camelCase counterpart: fooBar, making it available in CustomElement.svelte as:

<script>
  export let fooBar = '';
</script>

<div>{fooBar}</div>

Looks like @wagich already did some work to address this particular use case in this specific commit already: https://github.com/crisward/svelte-tag/commit/b95dd6c7c5e239bec2a2866e843420e11624fd92

patricknelson commented 1 year ago

FWIW, should be a worthwhile change, especially since for long term compatibility, it should be supported in Svelte 4,. See: https://github.com/sveltejs/svelte/pull/8457 😄

some things are hard to auto-configure, like attribute hyphen preferences or whether or not setting a property should reflect back to the attribute. This is why can also take an object to modify such aspects. This option allows to specify whether setting a prop should be reflected back to the attribute (default false), what to use when converting the property to the attribute value and vice versa (through type, default String, or when export let prop = false then Boolean), and what the corresponding attribute for the property is (attribute, default lowercased prop name). These options are heavily inspired by lit: https://lit.dev/docs/components/properties. Closes https://github.com/sveltejs/svelte/pull/7638, fixes https://github.com/sveltejs/svelte/issues/5705

patricknelson commented 1 year ago

Scratch that. If I had read more closely, I would have seen that Svelte 4 is actually standardizing on Lit-style lowercased attributes.

Closing this now.

Edit: See #16 instead.