Merge pull request #8 from Nowan/fix-custom-element-define-errors

fix: fix NotSupportedError on consequent LitPlugin.constructor & Preset.setup calls
retejs · Sep 14, 2024 · a0d5812 · a0d5812
2 parents c740245 + 5a13591
commit a0d5812
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,6 +9,8 @@ export * as Presets from './presets'
 export type { ClassicScheme, LitArea2D, RenderEmit } from './presets/classic'
 export * from './types'
 
+customElements.define('rete-root', RootElement)
+
 /**
  * Signals that can be emitted by the plugin
  * @priority 9
@@ -38,8 +40,6 @@ export class LitPlugin<Schemes extends BaseSchemes, T = Requires<Schemes>> exten
 
     this.renderer = getRenderer()
 
-    customElements.define('rete-root', RootElement)
-
     this.addPipe(context => {
       if (!context || typeof context !== 'object' || !('type' in context)) return context
       if (context.type === 'unmount') {

diff --git a/src/presets/classic/index.tsx b/src/presets/classic/index.tsx
@@ -16,6 +16,13 @@ import { NodeElement } from './components/node'
 import { SocketElement } from './components/socket'
 import { ClassicScheme, ExtractPayload, LitArea2D, RenderEmit } from './types'
 
+customElements.define('rete-connection-wrapper', ConnectionWrapperElement)
+customElements.define('rete-connection', ConnectionElement)
+customElements.define('rete-ref', RefElement)
+customElements.define('rete-socket', SocketElement)
+customElements.define('rete-node', NodeElement)
+customElements.define('rete-control', ControlElement)
+
 export type { ClassicScheme, LitArea2D, RenderEmit } from './types'
 
 type CustomizationProps<Schemes extends ClassicScheme> = {
@@ -44,13 +51,6 @@ export function setup<Schemes extends ClassicScheme, K extends LitArea2D<Schemes
     : props.socketPositionWatcher
   const { node, connection, socket, control } = props?.customize || {}
 
-  customElements.define('rete-connection-wrapper', ConnectionWrapperElement)
-  customElements.define('rete-connection', ConnectionElement)
-  customElements.define('rete-ref', RefElement)
-  customElements.define('rete-socket', SocketElement)
-  customElements.define('rete-node', NodeElement)
-  customElements.define('rete-control', ControlElement)
-
   return {
     attach(plugin) {
       positionWatcher.attach(plugin as unknown as Scope<never, [K]>)

diff --git a/src/presets/context-menu/index.ts b/src/presets/context-menu/index.ts
@@ -8,6 +8,11 @@ import { MenuElement } from './components/Menu'
 import { SearchElement } from './components/Search'
 import { ContextMenuRender } from './types'
 
+customElements.define('rete-context-menu', MenuElement)
+customElements.define('rete-context-menu-block', BlockElement)
+customElements.define('rete-context-menu-search', SearchElement)
+customElements.define('rete-context-menu-item', ItemElement)
+
 /**
  * Preset for rendering context menu.
  */
@@ -16,11 +21,6 @@ export function setup<Schemes extends BaseSchemes, K extends ContextMenuRender>(
     ? 1000
     : props.delay
 
-  customElements.define('rete-context-menu', MenuElement)
-  customElements.define('rete-context-menu-block', BlockElement)
-  customElements.define('rete-context-menu-search', SearchElement)
-  customElements.define('rete-context-menu-item', ItemElement)
-
   return {
     update(context) {
       if (context.data.type === 'contextmenu') {

diff --git a/src/presets/minimap/index.ts b/src/presets/minimap/index.ts
@@ -7,14 +7,14 @@ import { MiniNode } from './components/MiniNode'
 import { MiniViewport } from './components/MiniViewport'
 import { MinimapRender } from './types'
 
+customElements.define('rete-minimap', Minimap)
+customElements.define('rete-mini-node', MiniNode)
+customElements.define('rete-mini-viewport', MiniViewport)
+
 /**
  * Preset for rendering minimap.
  */
 export function setup<Schemes extends BaseSchemes, K extends MinimapRender>(props?: { size?: number }): RenderPreset<Schemes, K> {
-  customElements.define('rete-minimap', Minimap)
-  customElements.define('rete-mini-node', MiniNode)
-  customElements.define('rete-mini-viewport', MiniViewport)
-
   return {
     update(context) {
       if (context.data.type === 'minimap') {

diff --git a/src/presets/reroute/index.ts b/src/presets/reroute/index.ts
@@ -7,6 +7,9 @@ import { Pin } from './components/Pin'
 import { Pins } from './components/Pins'
 import { PinsRender } from './types'
 
+customElements.define('rete-pins', Pins)
+customElements.define('rete-pin', Pin)
+
 type Props = {
   translate?: (id: string, dx: number, dy: number) => void
   contextMenu?: (id: string) => void
@@ -17,9 +20,6 @@ type Props = {
  * Preset for rendering pins.
  */
 export function setup<Schemes extends BaseSchemes, K extends PinsRender>(props?: Props): RenderPreset<Schemes, K> {
-  customElements.define('rete-pins', Pins)
-  customElements.define('rete-pin', Pin)
-
   return {
     update(context) {
       if (context.data.type === 'reroute-pins') {