api docs

Author: Ni55aN

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+docs

.npmignore

@@ -4,7 +4,8 @@
   "description": "",
   "scripts": {
     "build": "rete build -c rete.config.ts",
-    "lint": "rete lint"
+    "lint": "rete lint",
+    "doc": "rete doc --entries src/index.tsx"
   },
   "author": "Vitaliy Stoliarov",
   "license": "MIT",

package-lock.json

@@ -13,6 +13,10 @@ export * from './shared'
 export * from './types'
 export { useRete } from './utils'
 
+/**
+ * Signals that can be emitted by the plugin
+ * @priority 9
+ */
 export type Produces<Schemes extends BaseSchemes> =
   | { type: 'connectionpath', data: { payload: Schemes['Connection'], path?: string, points: Position[] } }
 
@@ -21,10 +25,21 @@ type Requires<Schemes extends BaseSchemes> =
   | RenderSignal<'connection', { payload: Schemes['Connection'], start?: Position, end?: Position }>
   | { type: 'unmount', data: { element: HTMLElement } }
 
-type Props = {
+/**
+ * Plugin props
+ */
+export type Props = {
+  /** root factory for React.js 18+ */
   createRoot?: (container: Element | DocumentFragment) => any
 }
 
+/**
+ * React plugin. Renders nodes, connections and other elements using React.
+ * @priority 10
+ * @emits connectionpath
+ * @listens render
+ * @listens unmount
+ */
 export class ReactPlugin<Schemes extends BaseSchemes, T = Requires<Schemes>> extends Scope<Produces<Schemes>, [Requires<Schemes> | T]> {
   renderer: Renderer
   presets: RenderPreset<Schemes, T>[] = []
@@ -87,6 +102,10 @@ export class ReactPlugin<Schemes extends BaseSchemes, T = Requires<Schemes>> ext
     this.renderer.unmount(element)
   }
 
+  /**
+   * Adds a preset to the plugin.
+   * @param preset Preset that can render nodes, connections and other elements.
+   */
   public addPreset<K>(preset: RenderPreset<Schemes, CanAssignSignal<T, K> extends true ? K : 'Cannot apply preset. Provided signals are not compatible'>) {
     const local = preset as RenderPreset<Schemes, T>
 

package.json

@@ -2,7 +2,8 @@ import * as React from 'react'
 import { ClassicPreset, Scope } from 'rete'
 import {
   classicConnectionPath, getDOMSocketPosition,
-  loopConnectionPath, SocketPositionWatcher } from 'rete-render-utils'
+  loopConnectionPath, SocketPositionWatcher
+} from 'rete-render-utils'
 
 import { Position } from '../../types'
 import { RenderPreset } from '../types'
@@ -27,7 +28,7 @@ export { Socket } from './components/Socket'
 export type { ClassicScheme, ReactArea2D, RenderEmit } from './types'
 export * as vars from './vars'
 
-type CustomizationProps <Schemes extends ClassicScheme>= {
+type CustomizationProps<Schemes extends ClassicScheme> = {
   node?: (data: ExtractPayload<Schemes, 'node'>) => AcceptComponent<typeof data['payload'], { emit: RenderEmit<Schemes> }> | null
   connection?: (data: ExtractPayload<Schemes, 'connection'>) => AcceptComponent<typeof data['payload']> | null
   socket?: (data: ExtractPayload<Schemes, 'socket'>) => AcceptComponent<typeof data['payload']> | null
@@ -39,6 +40,9 @@ type ClassicProps<Schemes extends ClassicScheme, K> = {
   customize?: CustomizationProps<Schemes>
 }
 
+/**
+ * Classic preset for rendering nodes, connections, controls and sockets.
+ */
 export function setup<Schemes extends ClassicScheme, K extends ReactArea2D<Schemes>>(
   props?: ClassicProps<Schemes, K>
 ): RenderPreset<Schemes, K> {
@@ -58,44 +62,44 @@ export function setup<Schemes extends ClassicScheme, K extends ReactArea2D<Schem
         const Component = (node ? node(context.data) : Node) as typeof Node
 
         return (Component &&
-                    <Component
-                      data={context.data.payload}
-                      emit={data => parent.emit(data as any)}
-                    />
+          <Component
+            data={context.data.payload}
+            emit={data => parent.emit(data as any)}
+          />
         )
       } else if (context.data.type === 'connection') {
         const Component = (connection ? connection(context.data) : Connection) as typeof Connection
         const payload = context.data.payload
         const { sourceOutput, targetInput, source, target } = payload
 
         return (Component &&
-                    <ConnectionWrapper
-                      start={context.data.start || (change => positionWatcher.listen(source, 'output', sourceOutput, change))}
-                      end={context.data.end || (change => positionWatcher.listen(target, 'input', targetInput, change))}
-                      path={async (start, end) => {
-                        type FixImplicitAny = typeof plugin.__scope.produces | undefined
-                        const response: FixImplicitAny = await plugin.emit({
-                          type: 'connectionpath', data: {
-                            payload,
-                            points: [start, end]
-                          }
-                        })
+          <ConnectionWrapper
+            start={context.data.start || (change => positionWatcher.listen(source, 'output', sourceOutput, change))}
+            end={context.data.end || (change => positionWatcher.listen(target, 'input', targetInput, change))}
+            path={async (start, end) => {
+              type FixImplicitAny = typeof plugin.__scope.produces | undefined
+              const response: FixImplicitAny = await plugin.emit({
+                type: 'connectionpath', data: {
+                  payload,
+                  points: [start, end]
+                }
+              })
 
-                        if (!response) return ''
+              if (!response) return ''
 
-                        const { path, points } = response.data
-                        const curvature = 0.3
+              const { path, points } = response.data
+              const curvature = 0.3
 
-                        if (!path && points.length !== 2) throw new Error('cannot render connection with a custom number of points')
-                        if (!path) return payload.isLoop
-                          ? loopConnectionPath(points as [Position, Position], curvature, 120)
-                          : classicConnectionPath(points as [Position, Position], curvature)
+              if (!path && points.length !== 2) throw new Error('cannot render connection with a custom number of points')
+              if (!path) return payload.isLoop
+                ? loopConnectionPath(points as [Position, Position], curvature, 120)
+                : classicConnectionPath(points as [Position, Position], curvature)
 
-                        return path
-                      }}
-                    >
-                      <Component data={context.data.payload} />
-                    </ConnectionWrapper>
+              return path
+            }}
+          >
+            <Component data={context.data.payload} />
+          </ConnectionWrapper>
         )
       } else if (context.data.type === 'socket') {
         const Component = (socket ? socket(context.data) : Socket) as typeof Socket

src/index.tsx

@@ -16,6 +16,9 @@ type Props = {
   customize?: Customize
 }
 
+/**
+ * Preset for rendering context menu.
+ */
 export function setup<Schemes extends BaseSchemes, K extends ContextMenuRender>(props?: Props): RenderPreset<Schemes, K> {
   const delay = typeof props?.delay === 'undefined' ? 1000 : props.delay
 

src/presets/classic/index.tsx

@@ -1,3 +1,7 @@
+/**
+ * Built-in presets, responsible for rendering different parts of the editor.
+ * @module
+ */
 export * as classic from './classic'
 export * as contextMenu from './context-menu'
 export * as minimap from './minimap'

src/presets/context-menu/index.tsx

@@ -6,6 +6,9 @@ import { RenderPreset } from '../types'
 import { Minimap } from './components/Minimap'
 import { MinimapRender } from './types'
 
+/**
+ * Preset for rendering minimap.
+ */
 export function setup<Schemes extends BaseSchemes, K extends MinimapRender>(props?: { size?: number }): RenderPreset<Schemes, K> {
   return {
     render(context) {