@stonecrop/node-editor 0.4.27 → 0.4.29

package/dist/src/types/index.d.ts

@@ -1,11 +1,11 @@
 import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core';
-import type { AnyStateMachine, AnyStateNodeDefinition, StatesConfig } from 'xstate';
+import type { AnyStateNodeDefinition, AnyStateNodeConfig } from 'xstate';
 /**
  * Editor states
  * @public
  */
 export type EditorStates = {
-    [key: string]: AnyStateMachine | AnyStateNodeDefinition | StatesConfig<any, any, any>;
+    [key: string]: AnyStateNodeDefinition | AnyStateNodeConfig['states'];
 };
 /**
  * Flow elements

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAEnF;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,GAAG,sBAAsB,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CACrF,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAClC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAChC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG;QACd,QAAQ,CAAC,EAAE,UAAU,CAAA;QACrB,cAAc,CAAC,EAAE,QAAQ,CAAA;QACzB,cAAc,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAA;CACD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAExE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,sBAAsB,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAA;CACpE,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAClC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAChC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG;QACd,QAAQ,CAAC,EAAE,UAAU,CAAA;QACrB,cAAc,CAAC,EAAE,QAAQ,CAAA;QACzB,cAAc,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAA;CACD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/node-editor",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "description": "Node editor UI for Stonecrop",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
       },
       "require": "./dist/node-editor.umd.cjs"
     },
-    "./styles": "./dist/style.css"
+    "./styles": "./dist/node-editor.css"
   },
   "typings": "./dist/src/index.d.ts",
   "files": [
@@ -35,7 +35,7 @@
     "@vue-flow/core": "^1.45.0",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "xstate": "^4.38.3"
+    "xstate": "^5.20.1"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.29",
@@ -61,7 +61,7 @@
     "prepublish": "heft build && vite build && rushx docs",
     "build": "heft build && vite build && rushx docs",
     "dev": "vite",
-    "docs": "api-documenter markdown -i temp -o ../docs/node_editor",
+    "docs": "cd ../common/autoinstallers/doc-tools && node generate-docs.mjs node_editor",
     "lint": "eslint . --ext .ts,.vue",
     "preview": "vite preview"
   }

package/src/components/StateEditor.vue

@@ -24,6 +24,10 @@ const elements = computed<FlowElements>({
 		const stateElements: FlowElements = []
 		const stateHash: Record<string, FlowElement> = {}
 
+		if (!states.value) {
+			return stateElements
+		}
+
 		let index = 0
 		for (const [key, value] of Object.entries(states.value)) {
 			const el: Node = {
@@ -34,7 +38,7 @@ const elements = computed<FlowElements>({
 				sourcePosition: layout[key]?.sourcePosition || Position.Right,
 			}
 
-			if (value.type === 'final') {
+			if (value?.type === 'final') {
 				el.type = 'output'
 				el.class = 'default-output-node'
 			}
@@ -43,13 +47,14 @@ const elements = computed<FlowElements>({
 		}
 
 		for (const [key, value] of Object.entries(states.value)) {
-			if (value.on) {
+			if (value?.on) {
 				for (const [edgeKey, edgeValue] of Object.entries(value.on)) {
-					// If the proxy array 'value.on' has more than one edge, 'edgeValue' will contain a proxy object
+					// NOTE: If the proxy array 'value.on' has more than one edge, 'edgeValue' will contain a proxy object
 					// where 'target' can be accessed. Otherwise, 'edgeValue' will be available directly.
+
+					// TODO: resolve type issues with xstate
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 					const target = edgeValue.target || edgeValue
-					// TODO: handle typescript errors for both types of states
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
 					stateElements.push({
 						id: `${key}-${target}`,
 						source: key,
@@ -120,6 +125,9 @@ const onElementsChange = (elements: FlowElements) => {
 		// add edges to states
 		const label = idToLabel[edgeKey]
 		for (const [key, value] of Object.entries(edgeValue)) {
+			if (!states[label]) {
+				states[label] = { on: {} }
+			}
 			states[label].on[key] = value
 		}
 	}

package/src/types/index.ts

@@ -1,12 +1,12 @@
 import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core'
-import type { AnyStateMachine, AnyStateNodeDefinition, StatesConfig } from 'xstate'
+import type { AnyStateNodeDefinition, AnyStateNodeConfig } from 'xstate'
 
 /**
  * Editor states
  * @public
  */
 export type EditorStates = {
-	[key: string]: AnyStateMachine | AnyStateNodeDefinition | StatesConfig<any, any, any>
+	[key: string]: AnyStateNodeDefinition | AnyStateNodeConfig['states']
 }
 
 /**