Allow creating a CustomElement without defining the tagName #55

jvdsande · 2021-01-06T13:52:49Z

What does this PR do

The goal of this PR is to separate the Preact-to-CustomElement process from the tag-name registration process.

Why is this PR needed

Registering a CustomElement using window.customElements.define uses a shared, global registry for custom-elements. Thus, only one CustomElement can be associated with a given tag-name. This can cause problems when authoring a component library: we "reserve" keywords on behalf of our end users. It also causes isolation issue for patterns such a micro-frontend architecture, where two versions of our library can't be used together, as they would clash while registering components.

Implementation details

This PR moves all the creation of PreactElement into its own function, toCustomElement. This function takes the same parameters as the default register export, omitting the second parameter (tag name).

The default exports is unchanged, and still registers the element right away.

Usage is as follow:

import register from 'preact-custom-element'

function MyComponent({ name = "World" }) {
  return <span>Hello {name}!</span>  
}

// Usage 1: Register the element right away (default)
register(MyComponent, "my-component", ['name'])


// Usage 2: Create the element, but do not register it
export const MyElement = register.toCustomElement(MyComponent, ['name'])

// Users can later do their own window.customElements.define('some-lib-element', MyElement)

Misc

Right now the toCustomElement function is attached as a property of register, as to not introduce a named export next to the default one (microbundle was not happy with that). However it's not the most elegant thing. We could maybe introduce a new option to the register function, called define: boolean, defaults to "true": whether to define the element after creating it. If false, the customElement will be returned instead of being defined

leifriksheim · 2021-09-23T11:29:04Z

👍

This would be so useful for our use case. In our app, we are dynamically importing web components and registering them manually so we avoid name collisions.

bspaulding

This makes a lot of sense to me! Couple nits, can we use a named export and tweak the name?

bspaulding · 2021-11-25T04:54:17Z

src/index.js

@@ -1,6 +1,6 @@
 import { h, cloneElement, render, hydrate } from 'preact';

-export default function register(Component, tagName, propNames, options) {
+function toCustomElement(Component, propNames, options) {


Suggested change

function toCustomElement(Component, propNames, options) {

export function createCustomElement(Component, propNames, options) {

bspaulding · 2021-11-25T04:54:50Z

src/index.js

+}
+
+export default function register(Component, tagName, propNames, options) {
+	const PreactElement = toCustomElement(Component, propNames, options);


Suggested change

const PreactElement = toCustomElement(Component, propNames, options);

const PreactElement = createCustomElement(Component, propNames, options);

bspaulding · 2021-11-25T04:55:41Z

src/index.js

 	return customElements.define(
 		tagName || Component.tagName || Component.displayName || Component.name,
 		PreactElement
 	);
 }

+register.toCustomElement = toCustomElement;


Suggested change

register.toCustomElement = toCustomElement;

bspaulding · 2021-11-25T04:55:53Z

src/index.js

 	return customElements.define(
 		tagName || Component.tagName || Component.displayName || Component.name,
 		PreactElement
 	);
 }

+register.toCustomElement = toCustomElement;
+


Suggested change

bspaulding · 2021-11-25T04:57:21Z

src/index.test.jsx

+	}
+
+	it('allows manual deferred registration by just exposing the element', async () => {
+		const CustomElement = registerElement.toCustomElement(


Suggested change

const CustomElement = registerElement.toCustomElement(

const CustomElement = createCustomElement(

will need to add an import up top obv

bspaulding · 2021-11-25T04:58:04Z

README.md

+This can be achieved by calling the `toCustomElements` function on the default export:
+
+```js
+import register from 'preact-custom-element'


Suggested change

import register from 'preact-custom-element'

import { toCustomElement } from 'preact-custom-element'

bspaulding · 2021-11-25T04:58:20Z

README.md

+  return <span>Hello {name}!</span>  
+}
+
+export const MyElement = register.toCustomElement(MyComponent, ['name'])


Suggested change

export const MyElement = register.toCustomElement(MyComponent, ['name'])

export const MyElement = createCustomElement(MyComponent, ['name'])

bspaulding · 2021-11-25T04:58:36Z

README.md

+export const MyElement = register.toCustomElement(MyComponent, ['name'])
+```
+
+`toCustomElement` has the same signature as `register`, omitting the second parameter (tag name).


Suggested change

`toCustomElement` has the same signature as `register`, omitting the second parameter (tag name).

`createCustomElement` has the same signature as `register`, omitting the second parameter (tag name).

bspaulding · 2021-11-25T04:59:16Z

README.md

+
+If authoring a custom-elements library, you might want to expose your CustomElements without registering their tag name, to let your users register their own tags.
+
+This can be achieved by calling the `toCustomElements` function on the default export:


Suggested change

This can be achieved by calling the `toCustomElements` function on the default export:

This can be achieved by calling the named export `createCustomElement`:

Allow creating a CustomElement without defining the tagName

416d9af

bspaulding reviewed Nov 25, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow creating a CustomElement without defining the tagName #55

Allow creating a CustomElement without defining the tagName #55

jvdsande commented Jan 6, 2021

leifriksheim commented Sep 23, 2021

bspaulding left a comment

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

bspaulding Nov 25, 2021

	function toCustomElement(Component, propNames, options) {
	export function createCustomElement(Component, propNames, options) {

	const PreactElement = toCustomElement(Component, propNames, options);
	const PreactElement = createCustomElement(Component, propNames, options);

	const CustomElement = registerElement.toCustomElement(
	const CustomElement = createCustomElement(

	import register from 'preact-custom-element'
	import { toCustomElement } from 'preact-custom-element'

	export const MyElement = register.toCustomElement(MyComponent, ['name'])
	export const MyElement = createCustomElement(MyComponent, ['name'])

	`toCustomElement` has the same signature as `register`, omitting the second parameter (tag name).
	`createCustomElement` has the same signature as `register`, omitting the second parameter (tag name).


		If authoring a custom-elements library, you might want to expose your CustomElements without registering their tag name, to let your users register their own tags.

		This can be achieved by calling the `toCustomElements` function on the default export:

	This can be achieved by calling the `toCustomElements` function on the default export:
	This can be achieved by calling the named export `createCustomElement`:

Allow creating a CustomElement without defining the tagName #55

Are you sure you want to change the base?

Allow creating a CustomElement without defining the tagName #55

Conversation

jvdsande commented Jan 6, 2021

What does this PR do

Why is this PR needed

Implementation details

Misc

leifriksheim commented Sep 23, 2021

bspaulding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment