@prosekit/preact 0.6.8 → 0.7.0-beta.1

package/src/extensions/preact-node-view.spec.ts

@@ -0,0 +1,151 @@
+/* eslint-disable @eslint-react/component-hook-factories */
+
+import { createEditor, union, type NodeJSON } from '@prosekit/core'
+import { defineTestExtension, type ImageAttrs } from '@prosekit/testing'
+import { createElement } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-preact'
+import { page } from 'vitest/browser'
+
+import { ProseKit } from '../components/prosekit.ts'
+
+import { definePreactNodeView, type PreactNodeViewComponent, type PreactNodeViewProps } from './preact-node-view.ts'
+
+describe('PreactNodeView', () => {
+  const initialState = {
+    imageRefresh: {
+      mounted: 0,
+      unmounted: 0,
+      setAttrs: 0,
+    },
+  }
+
+  let state = structuredClone(initialState)
+
+  beforeEach(() => {
+    state = structuredClone(initialState)
+  })
+
+  function defineExtension() {
+    return union(
+      defineTestExtension(),
+      definePreactNodeView({
+        name: 'image',
+        component: ImageRefreshView satisfies PreactNodeViewComponent,
+      }),
+    )
+  }
+
+  function ImageRefreshView(props: PreactNodeViewProps) {
+    const url = (props.node.attrs as ImageAttrs).src
+    const setAttrs = props.setAttrs
+
+    useEffect(() => {
+      state.imageRefresh.mounted++
+      const id = setInterval(() => {
+        state.imageRefresh.setAttrs++
+        setAttrs({ src: String(Math.random()) })
+      }, 50)
+      return () => {
+        state.imageRefresh.unmounted++
+        clearInterval(id)
+      }
+    }, [setAttrs])
+
+    return createElement('div', {
+      'data-testid': 'image-refresh-view',
+      'data-url': url,
+    })
+  }
+
+  function TestEditor(props: { initialContent?: NodeJSON }) {
+    const [editor] = useState(() => {
+      return createEditor({
+        extension: defineExtension(),
+        defaultContent: props.initialContent,
+      })
+    })
+
+    return createElement(
+      ProseKit,
+      { editor },
+      createElement('div', {
+        'data-testid': 'editor',
+        'ref': editor.mount,
+      }),
+    )
+  }
+
+  const paragraphJSON: NodeJSON = {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Hello' }],
+  }
+  const imageRefreshJSON: NodeJSON = {
+    type: 'image',
+  }
+
+  const editor = page.getByTestId('editor')
+  const imageRefresh = page.getByTestId('image-refresh-view')
+
+  it('can render a single self-update image node', async () => {
+    const initialContent: NodeJSON = {
+      type: 'doc',
+      content: [imageRefreshJSON, paragraphJSON],
+    }
+    const screen = render(createElement(TestEditor, { initialContent }))
+    await expect.element(editor).toBeVisible()
+    await expect.element(imageRefresh).toBeInTheDocument()
+
+    const urls = new Set<string>()
+    const check = () => {
+      imageRefresh.elements().forEach((element) => {
+        const url = element.getAttribute('data-url')
+        if (url) {
+          urls.add(url)
+        }
+      })
+      return urls.size >= 5
+    }
+
+    await expect.poll(check, { interval: 50, timeout: 30_000 }).toBe(true)
+
+    screen.unmount()
+
+    expect(state.imageRefresh.setAttrs).toBeGreaterThanOrEqual(5)
+    expect(state.imageRefresh.mounted).toBe(1)
+    expect(state.imageRefresh.unmounted).toBe(1)
+  })
+
+  it('can render multiple self-update image nodes', async () => {
+    const initialContent: NodeJSON = {
+      type: 'doc',
+      content: [imageRefreshJSON, paragraphJSON, imageRefreshJSON, imageRefreshJSON],
+    }
+    const screen = render(createElement(TestEditor, { initialContent }))
+    await expect.element(editor).toBeVisible()
+    await expect.element(imageRefresh.nth(0)).toBeInTheDocument()
+    await expect.element(imageRefresh.nth(1)).toBeInTheDocument()
+    await expect.element(imageRefresh.nth(2)).toBeInTheDocument()
+    await expect.element(imageRefresh.nth(3)).not.toBeInTheDocument()
+
+    const urls = new Set<string>()
+    const check = () => {
+      imageRefresh.elements().forEach((element) => {
+        const url = element.getAttribute('data-url')
+        if (url) {
+          urls.add(url)
+        }
+      })
+      return urls.size >= 15
+    }
+
+    await expect.poll(check, { interval: 50, timeout: 30_000 }).toBe(true)
+
+    screen.unmount()
+
+    expect(state.imageRefresh.setAttrs).toBeGreaterThanOrEqual(15)
+    expect(state.imageRefresh.mounted).toBe(3)
+    expect(state.imageRefresh.unmounted).toBe(3)
+  })
+})

package/dist/create-component.js

@@ -1,95 +0,0 @@
-import { n as useEditorContext } from "./editor-context.js";
-import { createElement } from "preact";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
-import { forwardRef } from "preact/compat";
-//#region src/components/merge-refs.ts
-/**
-* Assigns a value to a ref.
-* @returns The ref cleanup callback, if any.
-*/
-function assignRef(ref, value) {
-	if (typeof ref === "function") return ref(value);
-	else if (ref) ref.current = value;
-}
-/**
-* Merges multiple refs into a single one.
-*/
-function mergeRefs(refs) {
-	return (value) => {
-		const cleanups = [];
-		for (const ref of refs) {
-			const cleanup = assignRef(ref, value);
-			const isCleanup = typeof cleanup === "function";
-			cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null));
-		}
-		return () => {
-			for (const cleanup of cleanups) cleanup();
-		};
-	};
-}
-//#endregion
-//#region src/components/create-component.ts
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function createComponent(tagName, displayName, propNames, eventNames) {
-	const hasEditor = propNames.includes("editor");
-	const lowerCaseEventNameMap = new Map(eventNames.map((name) => [name.toLowerCase(), name]));
-	const Component = forwardRef((props, ref) => {
-		const [el, setEl] = useState(null);
-		const properties = {};
-		const attributes = {};
-		const eventHandlersRef = useRef({});
-		const eventHandlers = {};
-		for (const [name, value] of Object.entries(props)) {
-			if (value === void 0) continue;
-			if (propNames.includes(name)) {
-				properties[name] = value;
-				continue;
-			}
-			if (name.startsWith("on")) {
-				const lowerCaseEventName = name.slice(2).toLowerCase();
-				const eventName = lowerCaseEventNameMap.get(lowerCaseEventName);
-				if (eventName) {
-					const extractDetail = eventName.endsWith("Change");
-					eventHandlers[eventName] = (event) => {
-						const handler = value;
-						if (typeof handler === "function") handler(extractDetail ? event.detail : event);
-					};
-					continue;
-				}
-			}
-			if (name === "className") attributes["class"] = value;
-			else attributes[name] = value;
-		}
-		const editor = useEditorContext();
-		if (hasEditor && editor && !properties["editor"]) properties["editor"] = editor;
-		useIsomorphicLayoutEffect(() => {
-			if (!el) return;
-			for (const [name, value] of Object.entries(properties)) if (value !== void 0) el[name] = value;
-		}, [el, ...propNames.map((name) => properties[name])]);
-		useIsomorphicLayoutEffect(() => {
-			eventHandlersRef.current = eventHandlers;
-		});
-		useIsomorphicLayoutEffect(() => {
-			if (!el) return;
-			const fixedEventHandlers = {};
-			for (const eventName of eventNames) fixedEventHandlers[eventName] = (event) => {
-				eventHandlersRef.current[eventName]?.(event);
-			};
-			for (const [name, handler] of Object.entries(fixedEventHandlers)) el.addEventListener(name, handler);
-			return () => {
-				for (const [name, handler] of Object.entries(fixedEventHandlers)) el.removeEventListener(name, handler);
-			};
-		}, [el]);
-		const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref]);
-		return createElement(tagName, {
-			...attributes,
-			ref: mergedRef
-		});
-	});
-	Component.displayName = displayName;
-	return Component;
-}
-//#endregion
-export { createComponent as t };
-
-//# sourceMappingURL=create-component.js.map

package/dist/create-component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-component.js","names":[],"sources":["../src/components/merge-refs.ts","../src/components/create-component.ts"],"sourcesContent":["import type { Ref } from 'preact'\n\n/**\n * Assigns a value to a ref.\n * @returns The ref cleanup callback, if any.\n */\nfunction assignRef<T>(\n  ref: Ref<T> | undefined,\n  value: T | null,\n): VoidFunction | void {\n  if (typeof ref === 'function') {\n    return ref(value)\n  } else if (ref) {\n    ref.current = value\n  }\n}\n\n/**\n * Merges multiple refs into a single one.\n */\nexport function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T> {\n  return (value: T | null) => {\n    const cleanups: VoidFunction[] = []\n\n    for (const ref of refs) {\n      const cleanup = assignRef(ref, value)\n      const isCleanup = typeof cleanup === 'function'\n      cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null))\n    }\n\n    return () => {\n      for (const cleanup of cleanups) cleanup()\n    }\n  }\n}\n","import type { AnyFunction } from '@prosekit/core'\nimport { createElement } from 'preact'\nimport { forwardRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'preact/compat'\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\n\nimport { mergeRefs } from './merge-refs.ts'\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport function createComponent<\n  Props extends object,\n  CustomElement extends HTMLElement,\n>(\n  tagName: string,\n  displayName: string,\n  propNames: string[],\n  eventNames: string[],\n): ForwardRefExoticComponent<\n  Partial<Props> & RefAttributes<CustomElement> & HTMLAttributes<CustomElement>\n> {\n  const hasEditor = propNames.includes('editor')\n  const lowerCaseEventNameMap = new Map(\n    eventNames.map((name) => [name.toLowerCase(), name]),\n  )\n\n  const Component = forwardRef<any, any>((props: Props, ref) => {\n    const [el, setEl] = useState<HTMLElement | null>(null)\n\n    const properties: Record<string, unknown> = {}\n    const attributes: Record<string, unknown> = {}\n    const eventHandlersRef = useRef<Record<string, AnyFunction>>({})\n    const eventHandlers: Record<string, AnyFunction> = {}\n\n    for (const [name, value] of Object.entries(props)) {\n      if (value === undefined) {\n        continue\n      }\n\n      if (propNames.includes(name)) {\n        properties[name] = value\n        continue\n      }\n\n      if (name.startsWith('on')) {\n        const lowerCaseEventName = name.slice(2).toLowerCase()\n        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)\n        if (eventName) {\n          const extractDetail = eventName.endsWith('Change')\n          eventHandlers[eventName] = (event: Event) => {\n            const handler = value as AnyFunction | null\n            if (typeof handler === 'function') {\n              handler(extractDetail ? (event as CustomEvent).detail : event)\n            }\n          }\n          continue\n        }\n      }\n\n      if (name === 'className') {\n        attributes['class'] = value\n      } else {\n        attributes[name] = value\n      }\n    }\n\n    const editor = useEditorContext()\n\n    if (hasEditor && editor && !properties['editor']) {\n      properties['editor'] = editor\n    }\n\n    // Set all properties.\n    useIsomorphicLayoutEffect(() => {\n      if (!el) return\n      for (const [name, value] of Object.entries(properties)) {\n        if (value !== undefined) {\n          // @ts-expect-error: we know that name is a valid property name\n          el[name] = value\n        }\n      }\n    }, [el, ...propNames.map((name) => properties[name])])\n\n    // Put all event listeners extracted from `props` into `eventHandlersRef`.\n    useIsomorphicLayoutEffect(() => {\n      eventHandlersRef.current = eventHandlers\n    })\n\n    // Register the event listeners to the element.\n    useIsomorphicLayoutEffect(() => {\n      if (!el) {\n        return\n      }\n\n      const fixedEventHandlers: Record<string, AnyFunction> = {}\n\n      for (const eventName of eventNames) {\n        fixedEventHandlers[eventName] = (event: Event) => {\n          eventHandlersRef.current[eventName]?.(event)\n        }\n      }\n\n      for (const [name, handler] of Object.entries(fixedEventHandlers)) {\n        el.addEventListener(name, handler)\n      }\n\n      return () => {\n        for (const [name, handler] of Object.entries(fixedEventHandlers)) {\n          el.removeEventListener(name, handler)\n        }\n      }\n    }, [el])\n\n    const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref])\n\n    return createElement(tagName, { ...attributes, ref: mergedRef })\n  })\n\n  Component.displayName = displayName\n\n  return Component\n}\n"],"mappings":";;;;;;;;;AAMA,SAAS,UACP,KACA,OACqB;AACrB,KAAI,OAAO,QAAQ,WACjB,QAAO,IAAI,MAAM;UACR,IACT,KAAI,UAAU;;;;;AAOlB,SAAgB,UAAa,MAAsC;AACjE,SAAQ,UAAoB;EAC1B,MAAM,WAA2B,EAAE;AAEnC,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,UAAU,UAAU,KAAK,MAAM;GACrC,MAAM,YAAY,OAAO,YAAY;AACrC,YAAS,KAAK,YAAY,gBAAgB,UAAU,KAAK,KAAK,CAAC;;AAGjE,eAAa;AACX,QAAK,MAAM,WAAW,SAAU,UAAS;;;;;;ACtB/C,MAAM,4BAA4B,OAAO,WAAW,cAAc,kBAAkB;AAEpF,SAAgB,gBAId,SACA,aACA,WACA,YAGA;CACA,MAAM,YAAY,UAAU,SAAS,SAAS;CAC9C,MAAM,wBAAwB,IAAI,IAChC,WAAW,KAAK,SAAS,CAAC,KAAK,aAAa,EAAE,KAAK,CAAC,CACrD;CAED,MAAM,YAAY,YAAsB,OAAc,QAAQ;EAC5D,MAAM,CAAC,IAAI,SAAS,SAA6B,KAAK;EAEtD,MAAM,aAAsC,EAAE;EAC9C,MAAM,aAAsC,EAAE;EAC9C,MAAM,mBAAmB,OAAoC,EAAE,CAAC;EAChE,MAAM,gBAA6C,EAAE;AAErD,OAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,EAAE;AACjD,OAAI,UAAU,KAAA,EACZ;AAGF,OAAI,UAAU,SAAS,KAAK,EAAE;AAC5B,eAAW,QAAQ;AACnB;;AAGF,OAAI,KAAK,WAAW,KAAK,EAAE;IACzB,MAAM,qBAAqB,KAAK,MAAM,EAAE,CAAC,aAAa;IACtD,MAAM,YAAY,sBAAsB,IAAI,mBAAmB;AAC/D,QAAI,WAAW;KACb,MAAM,gBAAgB,UAAU,SAAS,SAAS;AAClD,mBAAc,cAAc,UAAiB;MAC3C,MAAM,UAAU;AAChB,UAAI,OAAO,YAAY,WACrB,SAAQ,gBAAiB,MAAsB,SAAS,MAAM;;AAGlE;;;AAIJ,OAAI,SAAS,YACX,YAAW,WAAW;OAEtB,YAAW,QAAQ;;EAIvB,MAAM,SAAS,kBAAkB;AAEjC,MAAI,aAAa,UAAU,CAAC,WAAW,UACrC,YAAW,YAAY;AAIzB,kCAAgC;AAC9B,OAAI,CAAC,GAAI;AACT,QAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,WAAW,CACpD,KAAI,UAAU,KAAA,EAEZ,IAAG,QAAQ;KAGd,CAAC,IAAI,GAAG,UAAU,KAAK,SAAS,WAAW,MAAM,CAAC,CAAC;AAGtD,kCAAgC;AAC9B,oBAAiB,UAAU;IAC3B;AAGF,kCAAgC;AAC9B,OAAI,CAAC,GACH;GAGF,MAAM,qBAAkD,EAAE;AAE1D,QAAK,MAAM,aAAa,WACtB,oBAAmB,cAAc,UAAiB;AAChD,qBAAiB,QAAQ,aAAa,MAAM;;AAIhD,QAAK,MAAM,CAAC,MAAM,YAAY,OAAO,QAAQ,mBAAmB,CAC9D,IAAG,iBAAiB,MAAM,QAAQ;AAGpC,gBAAa;AACX,SAAK,MAAM,CAAC,MAAM,YAAY,OAAO,QAAQ,mBAAmB,CAC9D,IAAG,oBAAoB,MAAM,QAAQ;;KAGxC,CAAC,GAAG,CAAC;EAER,MAAM,YAAY,cAAc,UAAU,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC;AAE/D,SAAO,cAAc,SAAS;GAAE,GAAG;GAAY,KAAK;GAAW,CAAC;GAChE;AAEF,WAAU,cAAc;AAExB,QAAO"}

package/dist/create-props.d.ts

@@ -1,6 +0,0 @@
-//#region src/components/create-props.d.ts
-type CreateProps<Props extends { [PropName in keyof Props]: unknown }, Events extends { [EventName in keyof Events]: CustomEvent }> = Props & CreateEventProps<Events>;
-type CreateEventProps<Events extends { [EventName in keyof Events]: CustomEvent }> = { [EventName in keyof Events as `on${Capitalize<string & EventName>}`]: (event: EventName extends `${string}Change` ? Events[EventName]['detail'] : Events[EventName]) => void };
-//#endregion
-export { CreateProps as t };
-//# sourceMappingURL=create-props.d.ts.map

package/dist/create-props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-props.d.ts","names":[],"sources":["../src/components/create-props.ts"],"mappings":";KAAY,WAAA,oCACyB,KAAA,mDACE,MAAA,GAAS,WAAA,MAC5C,KAAA,GAAQ,gBAAA,CAAiB,MAAA;AAAA,KAExB,gBAAA,sCACkC,MAAA,GAAS,WAAA,4BAE1B,MAAA,SAAe,UAAA,UAAoB,SAAA,OACrD,KAAA,EAAO,SAAA,6BAAsC,MAAA,CAAO,SAAA,cAChD,MAAA,CAAO,SAAA"}

package/src/components/autocomplete/autocomplete-list.gen.ts

@@ -1,34 +0,0 @@
-import {
-  type AutocompleteListElement,
-  type AutocompleteListProps as Props,
-  type AutocompleteListEvents as Events,
-  autocompleteListProps,
-  autocompleteListEvents,
-} from '@prosekit/web/autocomplete'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
-
-/**
- * Props for the {@link AutocompleteList} component.
- */
-export interface AutocompleteListProps extends Partial<CreateProps<Props, Events>> {}
-
-export const AutocompleteList: ForwardRefExoticComponent<
-  Partial<AutocompleteListProps> &
-  RefAttributes<AutocompleteListElement> &
-  HTMLAttributes<AutocompleteListElement>
-> = createComponent<
-  AutocompleteListProps,
-  AutocompleteListElement
->(
-  'prosekit-autocomplete-list',
-  'AutocompleteList',
-  Object.keys(autocompleteListProps),
-  Object.keys(autocompleteListEvents),
-)

package/src/components/autocomplete/autocomplete-popover.gen.ts

@@ -1,34 +0,0 @@
-import {
-  type AutocompletePopoverElement,
-  type AutocompletePopoverProps as Props,
-  type AutocompletePopoverEvents as Events,
-  autocompletePopoverProps,
-  autocompletePopoverEvents,
-} from '@prosekit/web/autocomplete'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
-
-/**
- * Props for the {@link AutocompletePopover} component.
- */
-export interface AutocompletePopoverProps extends Partial<CreateProps<Props, Events>> {}
-
-export const AutocompletePopover: ForwardRefExoticComponent<
-  Partial<AutocompletePopoverProps> &
-  RefAttributes<AutocompletePopoverElement> &
-  HTMLAttributes<AutocompletePopoverElement>
-> = createComponent<
-  AutocompletePopoverProps,
-  AutocompletePopoverElement
->(
-  'prosekit-autocomplete-popover',
-  'AutocompletePopover',
-  Object.keys(autocompletePopoverProps),
-  Object.keys(autocompletePopoverEvents),
-)

package/src/components/block-handle/block-handle-popover.gen.ts

@@ -1,34 +0,0 @@
-import {
-  type BlockHandlePopoverElement,
-  type BlockHandlePopoverProps as Props,
-  type BlockHandlePopoverEvents as Events,
-  blockHandlePopoverProps,
-  blockHandlePopoverEvents,
-} from '@prosekit/web/block-handle'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
-
-/**
- * Props for the {@link BlockHandlePopover} component.
- */
-export interface BlockHandlePopoverProps extends Partial<CreateProps<Props, Events>> {}
-
-export const BlockHandlePopover: ForwardRefExoticComponent<
-  Partial<BlockHandlePopoverProps> &
-  RefAttributes<BlockHandlePopoverElement> &
-  HTMLAttributes<BlockHandlePopoverElement>
-> = createComponent<
-  BlockHandlePopoverProps,
-  BlockHandlePopoverElement
->(
-  'prosekit-block-handle-popover',
-  'BlockHandlePopover',
-  Object.keys(blockHandlePopoverProps),
-  Object.keys(blockHandlePopoverEvents),
-)

package/src/components/create-component.ts

@@ -1,123 +0,0 @@
-import type { AnyFunction } from '@prosekit/core'
-import { createElement } from 'preact'
-import { forwardRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'preact/compat'
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks'
-
-import { useEditorContext } from '../contexts/editor-context.ts'
-
-import { mergeRefs } from './merge-refs.ts'
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
-export function createComponent<
-  Props extends object,
-  CustomElement extends HTMLElement,
->(
-  tagName: string,
-  displayName: string,
-  propNames: string[],
-  eventNames: string[],
-): ForwardRefExoticComponent<
-  Partial<Props> & RefAttributes<CustomElement> & HTMLAttributes<CustomElement>
-> {
-  const hasEditor = propNames.includes('editor')
-  const lowerCaseEventNameMap = new Map(
-    eventNames.map((name) => [name.toLowerCase(), name]),
-  )
-
-  const Component = forwardRef<any, any>((props: Props, ref) => {
-    const [el, setEl] = useState<HTMLElement | null>(null)
-
-    const properties: Record<string, unknown> = {}
-    const attributes: Record<string, unknown> = {}
-    const eventHandlersRef = useRef<Record<string, AnyFunction>>({})
-    const eventHandlers: Record<string, AnyFunction> = {}
-
-    for (const [name, value] of Object.entries(props)) {
-      if (value === undefined) {
-        continue
-      }
-
-      if (propNames.includes(name)) {
-        properties[name] = value
-        continue
-      }
-
-      if (name.startsWith('on')) {
-        const lowerCaseEventName = name.slice(2).toLowerCase()
-        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)
-        if (eventName) {
-          const extractDetail = eventName.endsWith('Change')
-          eventHandlers[eventName] = (event: Event) => {
-            const handler = value as AnyFunction | null
-            if (typeof handler === 'function') {
-              handler(extractDetail ? (event as CustomEvent).detail : event)
-            }
-          }
-          continue
-        }
-      }
-
-      if (name === 'className') {
-        attributes['class'] = value
-      } else {
-        attributes[name] = value
-      }
-    }
-
-    const editor = useEditorContext()
-
-    if (hasEditor && editor && !properties['editor']) {
-      properties['editor'] = editor
-    }
-
-    // Set all properties.
-    useIsomorphicLayoutEffect(() => {
-      if (!el) return
-      for (const [name, value] of Object.entries(properties)) {
-        if (value !== undefined) {
-          // @ts-expect-error: we know that name is a valid property name
-          el[name] = value
-        }
-      }
-    }, [el, ...propNames.map((name) => properties[name])])
-
-    // Put all event listeners extracted from `props` into `eventHandlersRef`.
-    useIsomorphicLayoutEffect(() => {
-      eventHandlersRef.current = eventHandlers
-    })
-
-    // Register the event listeners to the element.
-    useIsomorphicLayoutEffect(() => {
-      if (!el) {
-        return
-      }
-
-      const fixedEventHandlers: Record<string, AnyFunction> = {}
-
-      for (const eventName of eventNames) {
-        fixedEventHandlers[eventName] = (event: Event) => {
-          eventHandlersRef.current[eventName]?.(event)
-        }
-      }
-
-      for (const [name, handler] of Object.entries(fixedEventHandlers)) {
-        el.addEventListener(name, handler)
-      }
-
-      return () => {
-        for (const [name, handler] of Object.entries(fixedEventHandlers)) {
-          el.removeEventListener(name, handler)
-        }
-      }
-    }, [el])
-
-    const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref])
-
-    return createElement(tagName, { ...attributes, ref: mergedRef })
-  })
-
-  Component.displayName = displayName
-
-  return Component
-}

package/src/components/create-props.ts

@@ -1,13 +0,0 @@
-export type CreateProps<
-  Props extends { [PropName in keyof Props]: unknown },
-  Events extends { [EventName in keyof Events]: CustomEvent },
-> = Props & CreateEventProps<Events>
-
-type CreateEventProps<
-  Events extends { [EventName in keyof Events]: CustomEvent },
-> = {
-  [EventName in keyof Events as `on${Capitalize<string & EventName>}`]: (
-    event: EventName extends `${string}Change` ? Events[EventName]['detail']
-      : Events[EventName],
-  ) => void
-}

package/src/components/inline-popover/inline-popover.gen.ts

@@ -1,34 +0,0 @@
-import {
-  type InlinePopoverElement,
-  type InlinePopoverProps as Props,
-  type InlinePopoverEvents as Events,
-  inlinePopoverProps,
-  inlinePopoverEvents,
-} from '@prosekit/web/inline-popover'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
-
-/**
- * Props for the {@link InlinePopover} component.
- */
-export interface InlinePopoverProps extends Partial<CreateProps<Props, Events>> {}
-
-export const InlinePopover: ForwardRefExoticComponent<
-  Partial<InlinePopoverProps> &
-  RefAttributes<InlinePopoverElement> &
-  HTMLAttributes<InlinePopoverElement>
-> = createComponent<
-  InlinePopoverProps,
-  InlinePopoverElement
->(
-  'prosekit-inline-popover',
-  'InlinePopover',
-  Object.keys(inlinePopoverProps),
-  Object.keys(inlinePopoverEvents),
-)

package/src/components/merge-refs.ts

@@ -1,35 +0,0 @@
-import type { Ref } from 'preact'
-
-/**
- * Assigns a value to a ref.
- * @returns The ref cleanup callback, if any.
- */
-function assignRef<T>(
-  ref: Ref<T> | undefined,
-  value: T | null,
-): VoidFunction | void {
-  if (typeof ref === 'function') {
-    return ref(value)
-  } else if (ref) {
-    ref.current = value
-  }
-}
-
-/**
- * Merges multiple refs into a single one.
- */
-export function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T> {
-  return (value: T | null) => {
-    const cleanups: VoidFunction[] = []
-
-    for (const ref of refs) {
-      const cleanup = assignRef(ref, value)
-      const isCleanup = typeof cleanup === 'function'
-      cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null))
-    }
-
-    return () => {
-      for (const cleanup of cleanups) cleanup()
-    }
-  }
-}

package/src/components/popover/popover-content.gen.ts

@@ -1,34 +0,0 @@
-import {
-  type PopoverContentElement,
-  type PopoverContentProps as Props,
-  type PopoverContentEvents as Events,
-  popoverContentProps,
-  popoverContentEvents,
-} from '@prosekit/web/popover'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
-
-/**
- * Props for the {@link PopoverContent} component.
- */
-export interface PopoverContentProps extends Partial<CreateProps<Props, Events>> {}
-
-export const PopoverContent: ForwardRefExoticComponent<
-  Partial<PopoverContentProps> &
-  RefAttributes<PopoverContentElement> &
-  HTMLAttributes<PopoverContentElement>
-> = createComponent<
-  PopoverContentProps,
-  PopoverContentElement
->(
-  'prosekit-popover-content',
-  'PopoverContent',
-  Object.keys(popoverContentProps),
-  Object.keys(popoverContentEvents),
-)

package/src/components/table-handle/table-handle-column-root.gen.ts

@@ -1,34 +0,0 @@
-import {
-  type TableHandleColumnRootElement,
-  type TableHandleColumnRootProps as Props,
-  type TableHandleColumnRootEvents as Events,
-  tableHandleColumnRootProps,
-  tableHandleColumnRootEvents,
-} from '@prosekit/web/table-handle'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
-
-/**
- * Props for the {@link TableHandleColumnRoot} component.
- */
-export interface TableHandleColumnRootProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandleColumnRoot: ForwardRefExoticComponent<
-  Partial<TableHandleColumnRootProps> &
-  RefAttributes<TableHandleColumnRootElement> &
-  HTMLAttributes<TableHandleColumnRootElement>
-> = createComponent<
-  TableHandleColumnRootProps,
-  TableHandleColumnRootElement
->(
-  'prosekit-table-handle-column-root',
-  'TableHandleColumnRoot',
-  Object.keys(tableHandleColumnRootProps),
-  Object.keys(tableHandleColumnRootEvents),
-)