@prosekit/svelte 0.9.0-beta.0 → 0.9.0-beta.2

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

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/table-handle'
-
-import { tableHandleColumnRootProps, tableHandleColumnRootEvents } from '@prosekit/web/table-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tableHandleColumnRootProps), Object.keys(tableHandleColumnRootEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-table-handle-column-root {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-table-handle-column-root>
-</ClientUpdate>

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

@@ -1,14 +0,0 @@
-import type { TableHandleColumnRootElement, TableHandleColumnRootProps as Props, TableHandleColumnRootEvents as Events } from '@prosekit/web/table-handle'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './table-handle-column-root.gen.svelte'
-
-/**
- * Props for the {@link TableHandleColumnRoot} component.
- */
-export interface TableHandleColumnRootProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandleColumnRoot = Component as typeof SvelteComponent<TableHandleColumnRootProps & HTMLAttributes<TableHandleColumnRootElement>>

package/src/components/table-handle/table-handle-column-trigger.gen.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/table-handle'
-
-import { tableHandleColumnTriggerProps, tableHandleColumnTriggerEvents } from '@prosekit/web/table-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tableHandleColumnTriggerProps), Object.keys(tableHandleColumnTriggerEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-table-handle-column-trigger {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-table-handle-column-trigger>
-</ClientUpdate>

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

@@ -1,14 +0,0 @@
-import type { TableHandleColumnTriggerElement, TableHandleColumnTriggerProps as Props, TableHandleColumnTriggerEvents as Events } from '@prosekit/web/table-handle'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './table-handle-column-trigger.gen.svelte'
-
-/**
- * Props for the {@link TableHandleColumnTrigger} component.
- */
-export interface TableHandleColumnTriggerProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandleColumnTrigger = Component as typeof SvelteComponent<TableHandleColumnTriggerProps & HTMLAttributes<TableHandleColumnTriggerElement>>

package/src/components/table-handle/table-handle-popover-content.gen.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/table-handle'
-
-import { tableHandlePopoverContentProps, tableHandlePopoverContentEvents } from '@prosekit/web/table-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tableHandlePopoverContentProps), Object.keys(tableHandlePopoverContentEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-table-handle-popover-content {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-table-handle-popover-content>
-</ClientUpdate>

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

@@ -1,14 +0,0 @@
-import type { TableHandlePopoverContentElement, TableHandlePopoverContentProps as Props, TableHandlePopoverContentEvents as Events } from '@prosekit/web/table-handle'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './table-handle-popover-content.gen.svelte'
-
-/**
- * Props for the {@link TableHandlePopoverContent} component.
- */
-export interface TableHandlePopoverContentProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandlePopoverContent = Component as typeof SvelteComponent<TableHandlePopoverContentProps & HTMLAttributes<TableHandlePopoverContentElement>>

package/src/components/table-handle/table-handle-popover-item.gen.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/table-handle'
-
-import { tableHandlePopoverItemProps, tableHandlePopoverItemEvents } from '@prosekit/web/table-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tableHandlePopoverItemProps), Object.keys(tableHandlePopoverItemEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-table-handle-popover-item {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-table-handle-popover-item>
-</ClientUpdate>

package/src/components/table-handle/table-handle-popover-item.gen.ts

@@ -1,14 +0,0 @@
-import type { TableHandlePopoverItemElement, TableHandlePopoverItemProps as Props, TableHandlePopoverItemEvents as Events } from '@prosekit/web/table-handle'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './table-handle-popover-item.gen.svelte'
-
-/**
- * Props for the {@link TableHandlePopoverItem} component.
- */
-export interface TableHandlePopoverItemProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandlePopoverItem = Component as typeof SvelteComponent<TableHandlePopoverItemProps & HTMLAttributes<TableHandlePopoverItemElement>>

package/src/components/table-handle/table-handle-row-root.gen.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/table-handle'
-
-import { tableHandleRowRootProps, tableHandleRowRootEvents } from '@prosekit/web/table-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tableHandleRowRootProps), Object.keys(tableHandleRowRootEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-table-handle-row-root {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-table-handle-row-root>
-</ClientUpdate>

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

@@ -1,14 +0,0 @@
-import type { TableHandleRowRootElement, TableHandleRowRootProps as Props, TableHandleRowRootEvents as Events } from '@prosekit/web/table-handle'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './table-handle-row-root.gen.svelte'
-
-/**
- * Props for the {@link TableHandleRowRoot} component.
- */
-export interface TableHandleRowRootProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandleRowRoot = Component as typeof SvelteComponent<TableHandleRowRootProps & HTMLAttributes<TableHandleRowRootElement>>

package/src/components/table-handle/table-handle-row-trigger.gen.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/table-handle'
-
-import { tableHandleRowTriggerProps, tableHandleRowTriggerEvents } from '@prosekit/web/table-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tableHandleRowTriggerProps), Object.keys(tableHandleRowTriggerEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-table-handle-row-trigger {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-table-handle-row-trigger>
-</ClientUpdate>

package/src/components/table-handle/table-handle-row-trigger.gen.ts

@@ -1,14 +0,0 @@
-import type { TableHandleRowTriggerElement, TableHandleRowTriggerProps as Props, TableHandleRowTriggerEvents as Events } from '@prosekit/web/table-handle'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './table-handle-row-trigger.gen.svelte'
-
-/**
- * Props for the {@link TableHandleRowTrigger} component.
- */
-export interface TableHandleRowTriggerProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TableHandleRowTrigger = Component as typeof SvelteComponent<TableHandleRowTriggerProps & HTMLAttributes<TableHandleRowTriggerElement>>

package/src/components/tooltip/tooltip-content.gen.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-import '@prosekit/web/tooltip'
-
-import { tooltipContentProps, tooltipContentEvents } from '@prosekit/web/tooltip'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
-
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tooltipContentProps), Object.keys(tooltipContentEvents))
-
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
-</script>
-
-<ClientUpdate>
-  <prosekit-tooltip-content {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-tooltip-content>
-</ClientUpdate>

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

@@ -1,14 +0,0 @@
-import type { TooltipContentElement, TooltipContentProps as Props, TooltipContentEvents as Events } from '@prosekit/web/tooltip'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
-
-import type { CreateProps } from '../create-props.ts'
-
-import Component from './tooltip-content.gen.svelte'
-
-/**
- * Props for the {@link TooltipContent} component.
- */
-export interface TooltipContentProps extends Partial<CreateProps<Props, Events>> {}
-
-export const TooltipContent = Component as typeof SvelteComponent<TooltipContentProps & HTMLAttributes<TooltipContentElement>>

package/src/components/use-component.ts

@@ -1,71 +0,0 @@
-import type { AnyFunction } from '@prosekit/core'
-import type { EventHandler } from 'svelte/elements'
-
-import { useEditorContext } from '../contexts/editor-context.ts'
-
-// For unknown reason, Svelte v4 cannot set properties on a web component
-// when I directly use `{...$$props}`. It seems that Svelte v4 recognizes
-// the properties as attributes. Here is a workaround to set the properties
-// on the element manually and only let Svelte set the attributes.
-export function useComponent(
-  propNames: string[],
-  eventNames: string[],
-): (element: HTMLElement | undefined, $$props: Record<string, unknown>) => [Record<string, unknown>, Record<string, EventHandler>] {
-  const hasEditor = propNames.includes('editor')
-  const lowerCaseEventNameMap = new Map(
-    eventNames.map((name) => [name.toLowerCase(), name]),
-  )
-
-  const editorContext = useEditorContext()
-
-  function handleChange(
-    element: HTMLElement | undefined,
-    $$props: Record<string, unknown>,
-  ): [Record<string, unknown>, Record<string, EventHandler>] {
-    const properties: Record<string, unknown> = {}
-    const attributes: Record<string, unknown> = {}
-    const eventHandlers: Record<string, EventHandler> = {}
-
-    for (const [name, value] of Object.entries($$props)) {
-      if (value === undefined || name.startsWith('$')) {
-        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
-        }
-      }
-
-      attributes[name] = value
-    }
-
-    if (hasEditor && !properties.editor && editorContext) {
-      properties.editor = editorContext
-    }
-
-    if (element) {
-      for (const [key, value] of Object.entries(properties)) {
-        ;(element as Record<string, any>)[key] = value
-      }
-    }
-
-    return [attributes, eventHandlers]
-  }
-
-  return handleChange
-}

package/src/components/use-event-handlers.ts

@@ -1,26 +0,0 @@
-export function useEventHandlers(
-  element: HTMLElement,
-  eventHandlers: Record<string, (...args: any[]) => any>,
-) {
-  const disposes: VoidFunction[] = []
-
-  const update = (eventHandlers: Record<string, (...args: any[]) => any>) => {
-    disposes.forEach((dispose) => dispose())
-    disposes.length = 0
-    for (const [name, handler] of Object.entries(eventHandlers)) {
-      element.addEventListener(name, handler)
-      disposes.push(() => element.removeEventListener(name, handler))
-    }
-  }
-
-  update(eventHandlers)
-
-  return {
-    update(eventHandlers: Record<string, (...args: any[]) => any>): void {
-      update(eventHandlers)
-    },
-    destroy(): void {
-      update({})
-    },
-  }
-}