sequential-workflow-designer-svelte 0.16.7 → 0.16.8

package/README.md

@@ -79,9 +79,9 @@ The global editor:
 
 ```svelte
 <script lang="ts">
-  import type { GlobalEditorContext, Definition } from 'sequential-workflow-designer';
+  import type { RootEditorContext, Definition } from 'sequential-workflow-designer';
 
-  export let context: GlobalEditorContext;
+  export let context: RootEditorContext;
   export let definition: Definition;
   let velocity = definition.properties.velocity;
 

package/dist/SequentialWorkflowDesigner.svelte

@@ -19,7 +19,9 @@ export let definitionWalker = void 0;
 export let extensions = void 0;
 export let customActionHandler = void 0;
 export let stepEditor = null;
+export let nativeStepEditor = null;
 export let rootEditor = null;
+export let nativeRootEditor = null;
 export let isEditorCollapsed = false;
 export let isReadonly = false;
 export let selectedStepId = null;
@@ -27,29 +29,35 @@ let isFirstChange = true;
 let designer = null;
 let placeholder;
 function init() {
-  const editors = stepEditor && rootEditor ? {
+  const editors = (stepEditor || nativeStepEditor) && (rootEditor || nativeRootEditor) ? {
     isCollapsed: isEditorCollapsed,
     stepEditorProvider: (step, context, def) => {
-      if (!stepEditor) {
-        throw new Error("No step editor provided");
+      if (stepEditor) {
+        const root = document.createElement("div");
+        new stepEditor({
+          target: root,
+          props: { step, context, definition: def }
+        });
+        return root;
       }
-      const root = document.createElement("div");
-      new stepEditor({
-        target: root,
-        props: { step, context, definition: def }
-      });
-      return root;
+      if (nativeStepEditor) {
+        return nativeStepEditor(step, context, def);
+      }
+      throw new Error("No step editor provided");
     },
     globalEditorProvider: (def, context) => {
-      if (!rootEditor) {
-        throw new Error("No root editor provided");
+      if (rootEditor) {
+        const root = document.createElement("div");
+        new rootEditor({
+          target: root,
+          props: { definition: def, context }
+        });
+        return root;
+      }
+      if (nativeRootEditor) {
+        return nativeRootEditor(def, context);
       }
-      const root = document.createElement("div");
-      new rootEditor({
-        target: root,
-        props: { definition: def, context }
-      });
-      return root;
+      throw new Error("No root editor provided");
     }
   } : false;
   const _toolbox = toolbox ? {
@@ -72,14 +80,18 @@ function init() {
     uidGenerator,
     customActionHandler
   });
-  d.onReady.subscribe(() => dispatch("definitionChanged", {
-    definition: d.getDefinition(),
-    isValid: d.isValid()
-  }));
-  d.onDefinitionChanged.subscribe((definition2) => dispatch("definitionChanged", {
-    definition: definition2,
-    isValid: d.isValid()
-  }));
+  d.onReady.subscribe(
+    () => dispatch("definitionChanged", {
+      definition: d.getDefinition(),
+      isValid: d.isValid()
+    })
+  );
+  d.onDefinitionChanged.subscribe(
+    (definition2) => dispatch("definitionChanged", {
+      definition: definition2,
+      isValid: d.isValid()
+    })
+  );
   d.onSelectedStepIdChanged.subscribe((stepId) => dispatch("selectedStepIdChanged", { stepId }));
   d.onIsToolboxCollapsedChanged.subscribe((isCollapsed) => dispatch("isToolboxCollapsedChanged", { isCollapsed }));
   d.onIsEditorCollapsedChanged.subscribe((isCollapsed) => dispatch("isEditorCollapsedChanged", { isCollapsed }));
@@ -126,4 +138,4 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={placeholder} class="sqd-designer-svelte"></div>
+<div bind:this={placeholder} class="sqd-designer-svelte" />

package/dist/SequentialWorkflowDesigner.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { DefinitionWalker, type Definition, type StepsConfiguration, type ToolboxConfiguration, type UndoStack, type ValidatorConfiguration, type UidGenerator, type DesignerExtension, type CustomActionHandler } from 'sequential-workflow-designer';
+import { DefinitionWalker, type Definition, type StepsConfiguration, type ToolboxConfiguration, type UndoStack, type ValidatorConfiguration, type UidGenerator, type DesignerExtension, type CustomActionHandler, type StepEditorProvider, type RootEditorProvider } from 'sequential-workflow-designer';
 declare const __propDef: {
     props: {
         definition: Definition;
@@ -16,17 +16,36 @@ declare const __propDef: {
         definitionWalker?: DefinitionWalker | undefined;
         extensions?: DesignerExtension[] | undefined;
         customActionHandler?: CustomActionHandler | undefined;
-        stepEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
-        rootEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
+        /**
+             * @description Svelte component that will be used to render the step editor. If this property is set, the `nativeStepEditor` property will be ignored.
+             */ stepEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
+        /**
+             * @description Function that will be used to render the step editor.
+             */ nativeStepEditor?: StepEditorProvider | null | undefined;
+        /**
+             * @description Svelte component that will be used to render the root editor. If this property is set, the `nativeRootEditor` property will be ignored.
+             */ rootEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
+        /**
+             * @description Function that will be used to render the root editor.
+             */ nativeRootEditor?: RootEditorProvider | null | undefined;
         isEditorCollapsed?: boolean | undefined;
         isReadonly?: boolean | undefined;
         selectedStepId?: string | null | undefined;
     };
     events: {
-        definitionChanged: CustomEvent<any>;
-        selectedStepIdChanged: CustomEvent<any>;
-        isToolboxCollapsedChanged: CustomEvent<any>;
-        isEditorCollapsedChanged: CustomEvent<any>;
+        definitionChanged: CustomEvent<{
+            definition: Definition;
+            isValid: boolean;
+        }>;
+        selectedStepIdChanged: CustomEvent<{
+            stepId: string | null;
+        }>;
+        isToolboxCollapsedChanged: CustomEvent<{
+            isCollapsed: boolean;
+        }>;
+        isEditorCollapsedChanged: CustomEvent<{
+            isCollapsed: boolean;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-svelte",
 	"description": "Svelte wrapper for Sequential Workflow Designer component.",
-	"version": "0.16.7",
+	"version": "0.16.8",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -11,8 +11,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:single": "echo \"No tests yet\"",
-		"prettier": "prettier --check ./src",
-		"prettier:fix": "prettier --write ./src",
+		"prettier": "prettier --plugin prettier-plugin-svelte --check ./src",
+		"prettier:fix": "prettier --plugin prettier-plugin-svelte --write ./src",
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"exports": {
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.16.7"
+		"sequential-workflow-designer": "^0.16.8"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.16.7",
+		"sequential-workflow-designer": "^0.16.8",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",
@@ -41,6 +41,7 @@
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
 		"prettier": "^2.8.2",
+		"prettier-plugin-svelte": "^2.8.0",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0"