nocode-js · b4rtaz · Nov 13, 2023 · Nov 13, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.11.1
+
+This version improves support for UMD bundles.
+
 ## 0.11.0
 
 This version normalizes names of functions in `ValueContext` and `PropertyValidatorContext` classes.

diff --git a/demos/vanilla-js-app/umd-example.html b/demos/vanilla-js-app/umd-example.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>🚢 UMD Example - Sequential Workflow Editor</title>
+		<style>
+			body {
+				font: 14px/1.5 Arial, Tahoma, Serif;
+			}
+			a {
+				color: blue;
+				text-decoration: underline;
+			}
+			a:hover {
+				text-decoration: none;
+			}
+			#placeholder {
+				display: block;
+				border: 1px solid #ccc;
+				padding: 10px;
+			}
+		</style>
+
+		<script src="../../model/dist/index.umd.js"></script>
+		<script src="../../editor/dist/index.umd.js"></script>
+	</head>
+	<body>
+		<h1>🚢 UMD Example - Sequential Workflow Editor</h1>
+
+		<p>
+			This demo shows basic usage of
+			<a href="https://github.com/nocode-js/sequential-workflow-editor" target="_blank">Sequential Workflow Editor</a>
+			in a browser using UMD bundles.
+		</p>
+
+		<div id="placeholder"></div>
+
+		<script>
+			const fooModel = sequentialWorkflowEditorModel.createStepModel('foo', 'task', step => {
+				step.property('isEnabled').value(sequentialWorkflowEditorModel.createBooleanValueModel({}));
+			});
+
+			const definitionModel = sequentialWorkflowEditorModel.createDefinitionModel(model => {
+				model.valueTypes(['string']);
+				model.root(() => {});
+				model.steps([fooModel]);
+			});
+
+			const editorProvider = sequentialWorkflowEditor.EditorProvider.create(definitionModel, {
+				uidGenerator: () => String(Math.random())
+			});
+
+			const step = {
+				id: '0x1',
+				name: 'test',
+				type: 'foo',
+				componentType: 'task',
+				properties: { isEnabled: true }
+			};
+			const definition = {
+				properties: {},
+				sequence: [step]
+			};
+
+			const placeholder = document.getElementById('placeholder');
+			const context = {
+				notifyPropertiesChanged() {},
+				notifyNameChanged() {}
+			};
+			const editor = editorProvider.createStepEditorProvider()(step, context, definition);
+			placeholder.appendChild(editor);
+		</script>
+	</body>
+</html>
diff --git a/demos/webpack-app/package.json b/demos/webpack-app/package.json
@@ -18,19 +18,19 @@
 		"sequential-workflow-model": "^0.2.0",
 		"sequential-workflow-designer": "^0.17.0",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.11.0",
-		"sequential-workflow-editor": "^0.11.0"
+		"sequential-workflow-editor-model": "^0.11.1",
+		"sequential-workflow-editor": "^0.11.1"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",
 		"style-loader": "^3.3.1",
 		"css-loader": "^6.7.3",
-		"typescript": "^4.9.4",
+		"typescript": "^4.9.5",
 		"webpack": "^5.75.0",
 		"webpack-cli": "^5.0.1",
 		"prettier": "^2.8.7",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0"
 	}
-}
+}
diff --git a/editor/css/editor.css b/editor/css/editor.css
@@ -139,7 +139,9 @@
 	padding: 8px;
 	border-radius: 5px;
 	cursor: pointer;
-	transition: border-color 150ms, background 150ms;
+	transition:
+		border-color 150ms,
+		background 150ms;
 }
 .swe-button:hover {
 	background: #e5e5e5;

diff --git a/editor/package.json b/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.11.0",
+	"version": "0.11.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -46,20 +46,20 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.11.0",
+		"sequential-workflow-editor-model": "^0.11.1",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.11.0",
+		"sequential-workflow-editor-model": "^0.11.1",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {
-		"rollup": "^3.20.2",
-		"rollup-plugin-dts": "^5.3.0",
-		"rollup-plugin-typescript2": "^0.34.1",
-		"@rollup/plugin-node-resolve": "^15.0.2",
-		"typescript": "^4.9.4",
-		"prettier": "^2.8.7",
+		"rollup": "^4.4.0",
+		"rollup-plugin-dts": "^6.1.0",
+		"rollup-plugin-typescript2": "^0.36.0",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"typescript": "^4.9.5",
+		"prettier": "^3.1.0",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0",
@@ -79,4 +79,4 @@
 		"lowcode",
 		"flow"
 	]
-}
+}
diff --git a/editor/rollup.config.mjs b/editor/rollup.config.mjs
@@ -45,6 +45,9 @@ export default [
 			}),
 			ts
 		],
+		external: [
+			'sequential-workflow-editor-model'
+		],
 		output: [
 			{
 				file: './dist/index.umd.js',

diff --git a/model/package.json b/model/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor-model",
-	"version": "0.11.0",
+	"version": "0.11.1",
 	"homepage": "https://nocode-js.com/",
 	"author": {
 		"name": "NoCode JS",
@@ -28,7 +28,8 @@
 		"url": "https://github.com/nocode-js/sequential-workflow-editor.git"
 	},
 	"files": [
-		"lib/"
+		"lib/",
+		"dist/"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,11 +52,12 @@
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {
+		"rollup": "^4.4.0",
+		"rollup-plugin-dts": "^6.1.0",
+		"rollup-plugin-typescript2": "^0.36.0",
+		"@rollup/plugin-node-resolve": "^15.2.3",
 		"typescript": "^4.9.5",
-		"rollup-plugin-dts": "^5.2.0",
-		"rollup-plugin-typescript2": "^0.34.1",
-		"rollup": "^3.18.0",
-		"prettier": "^2.8.7",
+		"prettier": "^3.1.0",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0",
@@ -70,4 +72,4 @@
 		"lowcode",
 		"flow"
 	]
-}
+}
diff --git a/model/rollup.config.mjs b/model/rollup.config.mjs
@@ -1,10 +1,15 @@
 import dts from 'rollup-plugin-dts';
 import typescript from 'rollup-plugin-typescript2';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
 import fs from 'fs';
 
 const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const external = Object.keys(packageJson.dependencies);
 
+const ts = typescript({
+	useTsconfigDeclarationDir: true
+});
+
 export default [
 	{
 		input: './src/index.ts',
@@ -35,5 +40,21 @@ export default [
 			}
 		],
 		plugins: [dts()],
+	},
+	{
+		input: './src/index.ts',
+		plugins: [
+			nodeResolve({
+				browser: true,
+			}),
+			ts
+		],
+		output: [
+			{
+				file: './dist/index.umd.js',
+				format: 'umd',
+				name: 'sequentialWorkflowEditorModel'
+			}
+		]
 	}
 ];
diff --git a/model/src/activator/model-activator.ts b/model/src/activator/model-activator.ts
@@ -12,7 +12,10 @@ export class ModelActivator<TDefinition extends Definition = Definition> {
 		return new ModelActivator(definitionModel, uidGenerator);
 	}
 
-	private constructor(private readonly definitionModel: DefinitionModel, private readonly uidGenerator: UidGenerator) {}
+	private constructor(
+		private readonly definitionModel: DefinitionModel,
+		private readonly uidGenerator: UidGenerator
+	) {}
 
 	public readonly activateDefinition = (): TDefinition => {
 		const definition: Omit<Definition, 'sequence'> = {

diff --git a/model/src/builders/property-model-builder.ts b/model/src/builders/property-model-builder.ts
@@ -11,7 +11,10 @@ export class PropertyModelBuilder<TValue extends PropertyValue = PropertyValue,
 	private _dependencies: Path[] = [];
 	private _validator?: PropertyValidator;
 
-	public constructor(private readonly path: Path, private readonly circularDependencyDetector: CircularDependencyDetector) {}
+	public constructor(
+		private readonly path: Path,
+		private readonly circularDependencyDetector: CircularDependencyDetector
+	) {}
 
 	/**
 	 * @returns `true` if the model of the value is set, otherwise `false`.

diff --git a/model/src/builders/step-model-builder.ts b/model/src/builders/step-model-builder.ts
@@ -17,7 +17,10 @@ export class StepModelBuilder<TStep extends Step> {
 	private readonly nameBuilder = new PropertyModelBuilder<string>(namePath, this.circularDependencyDetector);
 	private readonly propertyBuilder: PropertyModelBuilder[] = [];
 
-	public constructor(protected readonly type: string, private readonly componentType: ComponentType) {
+	public constructor(
+		protected readonly type: string,
+		private readonly componentType: ComponentType
+	) {
 		if (!type) {
 			throw new Error('Step type is empty');
 		}

diff --git a/model/src/context/default-value-context.ts b/model/src/context/default-value-context.ts
@@ -10,7 +10,10 @@ export class DefaultValueContext<TProperties extends Properties = Properties> {
 		return new DefaultValueContext<TProps>(activator, propertyContext);
 	}
 
-	private constructor(private readonly activator: ModelActivator, public readonly propertyContext: PropertyContext<TProperties>) {}
+	private constructor(
+		private readonly activator: ModelActivator,
+		public readonly propertyContext: PropertyContext<TProperties>
+	) {}
 
 	public readonly getPropertyValue = this.propertyContext.getPropertyValue;
 	public readonly activateStep = this.activator.activateStep;

diff --git a/model/src/context/scoped-property-context.ts b/model/src/context/scoped-property-context.ts
@@ -11,7 +11,10 @@ export class ScopedPropertyContext<TProperties extends Properties> {
 		return new ScopedPropertyContext<TProps>(propertyContext, parentsProvider);
 	}
 
-	private constructor(public readonly propertyContext: PropertyContext<TProperties>, private readonly parentsProvider: ParentsProvider) {}
+	private constructor(
+		public readonly propertyContext: PropertyContext<TProperties>,
+		private readonly parentsProvider: ParentsProvider
+	) {}
 
 	public readonly getPropertyValue = this.propertyContext.getPropertyValue;
 	public readonly getValueTypes = this.propertyContext.getValueTypes;

diff --git a/model/src/context/value-context.ts b/model/src/context/value-context.ts
@@ -18,7 +18,10 @@ export class ValueContext<TValueModel extends ValueModel = ValueModel, TProperti
 
 	public readonly onValueChanged = new SimpleEvent<Path>();
 
-	private constructor(public readonly model: TValueModel, public readonly scopedPropertyContext: ScopedPropertyContext<TProperties>) {}
+	private constructor(
+		public readonly model: TValueModel,
+		public readonly scopedPropertyContext: ScopedPropertyContext<TProperties>
+	) {}
 
 	public readonly getPropertyValue = this.scopedPropertyContext.getPropertyValue;
 	public readonly getValueTypes = this.scopedPropertyContext.getValueTypes;

diff --git a/model/src/validator/definition-validator.ts b/model/src/validator/definition-validator.ts
@@ -10,7 +10,10 @@ export class DefinitionValidator {
 		return new DefinitionValidator(definitionModel, definitionWalker);
 	}
 
-	private constructor(private readonly model: DefinitionModel, private readonly walker: DefinitionWalker) {}
+	private constructor(
+		private readonly model: DefinitionModel,
+		private readonly walker: DefinitionWalker
+	) {}
 
 	/**
 	 * Deeply validates the given definition.