Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"scripts": {
"prepare": "npx simple-git-hooks",
"build": "microbundle -f cjs,es,umd --no-generateTypes",
"lint": "eslint src/*.{js,jsx}",
"lint": "eslint src/*.js",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ESLint fails if it can't find a single matching file & we have no .jsx files in src/.

"test": "npm run test:types & npm run test:browser",
"test:browser": "wtr test/*.test.{js,jsx}",
"test:types": "tsc -p test/",
Expand Down
13 changes: 4 additions & 9 deletions src/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import { h, AnyComponent } from 'preact';

type PreactCustomElement = HTMLElement & {
_root: ShadowRoot | HTMLElement;
_vdomComponent: AnyComponent;
_vdom: ReturnType<typeof h> | null;
_props: Record<string, unknown>;
};
import { AnyComponent } from 'preact';
Copy link
Member Author

@rschristian rschristian Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No longer a module file, had to move this out


type Options =
| {
Expand Down Expand Up @@ -46,9 +39,11 @@ type Options =
* const klass = register(PreactComponent, 'my-component');
* ```
*/
export default function register<P = {}, S = {}>(
declare function register<P = {}, S = {}>(
Component: AnyComponent<P, S>,
tagName?: string,
propNames?: (keyof P)[],
options?: Options
): HTMLElement;

export = register;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actual fix

22 changes: 11 additions & 11 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import { h, cloneElement, render, hydrate, Fragment } from 'preact';

/**
* @typedef {import('./index.d.ts').PreactCustomElement} PreactCustomElement
* @typedef {import('./internal.d.ts').PreactCustomElement} PreactCustomElement
*/

/**
* @type {import('./index.d.ts').default}
* @type {import('./index.d.ts')}
*/
export default function register(Component, tagName, propNames, options) {
function PreactElement() {
const inst = /** @type {PreactCustomElement} */ (
Reflect.construct(HTMLElement, [], PreactElement)
);
inst._vdomComponent = Component;
inst._root =
options && options.shadow
? inst.attachShadow({ mode: options.mode || 'open' })
: inst;

if (options && options.adoptedStyleSheets) {
inst._root.adoptedStyleSheets = options.adoptedStyleSheets;
if (options && options.shadow) {
inst._root = inst.attachShadow({ mode: options.mode || 'open' });

if (options.adoptedStyleSheets) {
inst._root.adoptedStyleSheets = options.adoptedStyleSheets;
}
} else {
inst._root = inst;
Comment on lines -16 to +24
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drive-by, TS complains that .adoptedStyleSheets might not be set as it'll only exist if options.shadow is enabled. Nesting these initializations corrects the type issue for 1-2b.

}

return inst;
Expand Down Expand Up @@ -49,9 +51,7 @@ export default function register(Component, tagName, propNames, options) {
propNames.forEach((name) => {
Object.defineProperty(PreactElement.prototype, name, {
get() {
return this._vdom
? this._vdom.props[name]
: this._props[name];
return this._vdom ? this._vdom.props[name] : this._props[name];
},
set(v) {
if (this._vdom) {
Expand Down
8 changes: 8 additions & 0 deletions src/internal.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { h, AnyComponent } from 'preact';

export type PreactCustomElement = HTMLElement & {
_root: ShadowRoot | HTMLElement;
_vdomComponent: AnyComponent;
_vdom: ReturnType<typeof h> | null;
_props: Record<string, unknown>;
};
Loading