0.3.0. (#9)

Author: b4rtaz

.github/workflows/main.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - develop
 jobs:
   build:
     name: Build

.gitignore

@@ -1,8 +1,7 @@
+.yarn/
 build/
 node_modules/
 coverage/
 .vscode/
-designer.js
-designer.d.ts
-designer.js.map
-
+lib/
+dist/

CHANGELOG.md

@@ -1,9 +1,43 @@
 ## 0.3.0
 
-This version introduces component extensions. By this it's possible to create own components. Breaking changes:
-
-* Static method `Designer.utils.getParents()` is deleted. You should use the `getStepParents()` method from the `Designer` class. Example: `designer.getStepParents(needleStep)`
-* The `ComponentType` is not an enum anymore. It's type (`string`). This change doesn't affect serialized JSONs.
+This version introduces new build formats (ESM, UMD) of the package.
+
+🤩 For more advanced use cases we prepared **the paid pro package**. The package is in the early stage. Currently it contains advanced components for steps. [Here](https://github.com/nocode-js/sequential-workflow-designer-pro-demo) you can find more information and examples.
+
+#### Breaking Changes
+
+* Default export of the `Designer` class is removed. Now you should import directly the `Designer` class.
+  ```ts
+  import { Designer } from 'sequential-workflow-designer';
+  Designer.create(/* ... */);
+  ```
+
+  This affects CDN usage too.
+
+  ```html
+  <script src="https://cdn.jsdelivr.net/..."></script>
+  <script>
+  sequentialWorkflowDesigner.Designer.create(/* ... */);
+  </script>
+  ```
+* The package now contains two type of build: ESM and UMD. ESM build is located in the `lib` folder. UMD build is located in the `dist` folder. That means the URL to the CDN is also changed.
+  
+  ```html
+  <script src="https://cdn.jsdelivr.net/.../dist/index.umd.js"></script>
+  ```
+* Static method `Designer.utils.nextId()` is deleted. You should use the `next()` from the `Uid` class. Example: 
+
+  ```ts
+  import { Uid } from 'sequential-workflow-designer';
+  Uid.next();
+  ```
+
+* Static method `Designer.utils.getParents()` is deleted. You should use the `getStepParents()` method from the `Designer` class. Example: 
+
+  ```ts
+  designer.getStepParents(needleStep);
+  ```
+* The `ComponentType` is not an enum anymore. It's a type (`string`). This change doesn't affect serialized JSONs.
 
 ## 0.2.3
 

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022 Bartlomiej Tadych
+Copyright (c) 2022 N4NO.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -2,7 +2,7 @@
 
 # Sequential Workflow Designer
 
-[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg)](https://npmjs.org/package/sequential-workflow-designer) [![Twitter: b4rtaz](https://img.shields.io/twitter/follow/b4rtaz.svg?style=social)](https://twitter.com/b4rtaz)
+[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg)](https://npmjs.org/package/sequential-workflow-designer)
 
 Sequential workflow designer with no dependencies for web. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow designers.
 
@@ -37,7 +37,7 @@ Install this package by [NPM](https://www.npmjs.com/) command:
 To import the package:
 
 ```ts
-import Designer from 'sequential-workflow-designer';
+import { Designer } from 'sequential-workflow-designer';
 ```
 
 If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your boundle:
@@ -62,24 +62,24 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/lib/designer.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/dist/index.umd.js"></script>
 ```
 
 Call the designer by:
 
 ```js
-sequentialWorkflowDesigner.create(placeholder, definition, configuration);
+sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuration);
 ```
 
 ## 🎬 Usage
 
 Check [examples](/examples) directory.
 
 ```ts
-import Designer from 'sequential-workflow-designer';
+import { Designer } from 'sequential-workflow-designer';
 
 const placeholder = document.getElementById('placeholder');
 

designer/.gitignore

@@ -0,0 +1,2 @@
+README.md
+LICENSE

designer/package.json

@@ -1,20 +1,22 @@
 {
 	"name": "sequential-workflow-designer",
-	"version": "0.2.3",
-	"main": "./lib/designer.js",
-	"types": "./lib/designer.d.ts",
+	"version": "0.3.0",
+	"main": "./lib/index.mjs",
+	"types": "./lib/index.d.ts",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/b4rtaz/sequential-workflow-designer.git"
+		"url": "https://github.com/nocode-js/sequential-workflow-designer.git"
 	},
 	"files": [
 		"lib/",
+		"dist/",
 		"css/"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
 	"scripts": {
+		"prepare": "cp ../LICENSE LICENSE && cp ../README.md README.md",
 		"start": "rollup -c --watch",
 		"start:clean": "rm -rf lib && rm -rf build && npm run start",
 		"build": "rollup -c",
@@ -24,23 +26,23 @@
 		"prettier": "prettier --check ./src",
 		"prettier:fix": "prettier --write ./src"
 	},
-	"author": "b4rtaz",
+	"author": "N4NO.com",
 	"license": "MIT",
 	"devDependencies": {
-		"@types/jasmine": "^4.0.3",
-		"@typescript-eslint/eslint-plugin": "^5.40.0",
-		"@typescript-eslint/parser": "^5.40.0",
-		"eslint": "^8.25.0",
-		"karma": "^6.3.20",
+		"@types/jasmine": "^4.3.1",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
+		"@typescript-eslint/parser": "^5.47.0",
+		"eslint": "^8.30.0",
+		"karma": "^6.4.1",
 		"karma-chrome-launcher": "^3.1.1",
-		"karma-jasmine": "^5.0.1",
-		"karma-spec-reporter": "^0.0.34",
+		"karma-jasmine": "^5.1.0",
+		"karma-spec-reporter": "^0.0.36",
 		"karma-typescript": "^5.5.3",
-		"prettier": "^2.6.2",
-		"rollup": "^2.75.3",
-		"rollup-plugin-dts": "^4.2.2",
+		"prettier": "^2.8.1",
+		"rollup": "^3.7.5",
+		"rollup-plugin-dts": "^5.0.0",
 		"rollup-plugin-typescript2": "^0.34.1",
-		"typescript": "^4.8.4"
+		"typescript": "^4.9.4"
 	},
 	"keywords": [
 		"workflow",

designer/rollup.config.js

@@ -0,0 +1,40 @@
+import dts from 'rollup-plugin-dts';
+import typescript from 'rollup-plugin-typescript2';
+
+const ts = typescript({
+	useTsconfigDeclarationDir: true
+});
+
+export default [
+	{
+		input: './src/index.ts',
+		plugins: [ts],
+		output: [
+			{
+				file: './lib/index.mjs',
+				format: 'es'
+			}
+		]
+	},
+	{
+		input: './src/index.ts',
+		plugins: [ts],
+		output: [
+			{
+				file: './dist/index.umd.js',
+				format: 'umd',
+				name: 'sequentialWorkflowDesigner'
+			}
+		]
+	},
+	{
+		input: './build/index.d.ts',
+		output: [
+			{
+				file: './lib/index.d.ts',
+				format: 'es'
+			}
+		],
+		plugins: [dts()],
+	}
+];

designer/rollup.config.mjs

@@ -0,0 +1,3 @@
+export * from './dom';
+export * from './vector';
+export * from './uid';

designer/src/core/index.ts

@@ -49,7 +49,7 @@ describe('StepsTraverser', () => {
 	let traverser: StepsTraverser;
 
 	beforeAll(() => {
-		const extensions = StepExtensionsResolver.resolve({});
+		const extensions = StepExtensionsResolver.resolve([]);
 		traverser = new StepsTraverser(extensions);
 	});
 

designer/src/core/steps-traverser.spec.ts

@@ -22,7 +22,7 @@ export class StepsTraverser {
 			const children = extension.getChildren(step);
 			if (children) {
 				switch (children.type) {
-					case StepChildrenType.sequence:
+					case StepChildrenType.singleSequence:
 						{
 							const sequence = children.sequences as Sequence;
 							if (

designer/src/core/steps-traverser.ts

@@ -10,6 +10,8 @@ export interface DesignerConfiguration {
 	toolbox: ToolboxConfiguration;
 	steps: StepsConfiguration;
 	editors: EditorsConfiguration;
+
+	extensions?: DesignerExtension[];
 }
 
 export interface ToolboxConfiguration {
@@ -25,8 +27,6 @@ export interface ToolboxGroupConfiguration {
 }
 
 export interface StepsConfiguration {
-	extensions?: StepExtension[];
-
 	canInsertStep?: (step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
 	canMoveStep?: (sourceSequence: Sequence, step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
 	canDeleteStep?: (step: Step, parentSequence: Sequence) => boolean;
@@ -35,6 +35,11 @@ export interface StepsConfiguration {
 	validator?: StepValidator;
 }
 
+export interface DesignerExtension {
+	name: string;
+	steps: StepExtension[];
+}
+
 export interface StepExtension<S extends Step = Step> {
 	componentType: ComponentType;
 	createComponent(parentElement: SVGElement, step: S, parentSequence: Sequence, componentContext: ComponentContext): StepComponent;
@@ -47,7 +52,7 @@ export interface StepChildren {
 }
 
 export enum StepChildrenType {
-	sequence = 1,
+	singleSequence = 1,
 	branches = 2
 }
 

designer/src/designer-configuration.ts

@@ -1,6 +1,6 @@
 import { ControlBar } from './control-bar/control-bar';
 import { Dom } from './core/dom';
-import Designer from './designer';
+import { Designer } from './designer';
 import { SmartEditor } from './smart-editor/smart-editor';
 import { createDefinitionStub, createDesignerConfigurationStub } from './test-tools/stubs';
 import { Toolbox } from './toolbox/toolbox';

designer/src/designer.spec.ts

@@ -3,24 +3,28 @@ import { Definition, Sequence, Step } from './definition';
 import { DesignerConfiguration } from './designer-configuration';
 import { DesignerContext } from './designer-context';
 import { DesignerView } from './designer-view';
-import { Utils } from './utils';
 import { DesignerState } from './designer-state';
 import { DefinitionModifier } from './definition-modifier';
 import { WorkspaceController } from './workspace/workspace-controller';
 import { ComponentContext } from './workspace/component-context';
 import { StepExtensionsResolver } from './workspace/step-extensions-resolver';
 import { StepsTraverser } from './core/steps-traverser';
 
-export default class Designer {
-	public static readonly utils = Utils;
-
-	public static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration): Designer {
-		const stepExtensions = StepExtensionsResolver.resolve(configuration.steps);
-
-		const designerContext = DesignerContext.create(parent, startDefinition, configuration, stepExtensions);
+export class Designer {
+	/**
+	 * Creates a designer.
+	 * @param placeholder Placeholder where a designer will be attached.
+	 * @param startDefinition Start definition of a flow.
+	 * @param configuration Designer's configuration.
+	 * @returns An instance of a designer.
+	 */
+	public static create(placeholder: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration): Designer {
+		const stepExtensions = StepExtensionsResolver.resolve(configuration.extensions);
+
+		const designerContext = DesignerContext.create(placeholder, startDefinition, configuration, stepExtensions);
 		const componentContext = ComponentContext.create(configuration.steps, stepExtensions);
 
-		const view = DesignerView.create(parent, designerContext, componentContext, designerContext.layoutController, configuration);
+		const view = DesignerView.create(placeholder, designerContext, componentContext, designerContext.layoutController, configuration);
 		const designer = new Designer(
 			view,
 			designerContext.state,

designer/src/designer.ts

@@ -0,0 +1,5 @@
+export * from './core';
+export * from './workspace';
+export * from './definition';
+export * from './designer-configuration';
+export * from './designer';

designer/src/index.ts

@@ -36,11 +36,11 @@ export function createDefinitionStub(): Definition {
 
 export function createDesignerContextStub(): DesignerContext {
 	const parent = document.createElement('div');
-	const extensions = StepExtensionsResolver.resolve({});
+	const extensions = StepExtensionsResolver.resolve([]);
 	return DesignerContext.create(parent, createDefinitionStub(), createDesignerConfigurationStub(), extensions);
 }
 
 export function createComponentContextStub(): ComponentContext {
-	const extensions = StepExtensionsResolver.resolve({});
+	const extensions = StepExtensionsResolver.resolve([]);
 	return ComponentContext.create(createDesignerConfigurationStub().steps, extensions);
 }