vanilla js demo.

README.md

@@ -15,6 +15,7 @@ Powerful workflow editor builder for sequential workflows. Written in TypeScript
 * [🛠 Playground](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/playground.html)
 * [📖 Editors](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/editors.html)
 * [🎯 Placement Restrictions](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/placement-restrictions.html)
+* [🚢  Vanilla JS](https://nocode-js.github.io/sequential-workflow-editor/vanilla-js-app/vanilla-js.html)
 
 Pro:
 

demos/vanilla-js-app/assets/lib.js

@@ -0,0 +1,21 @@
+/* global location, document */
+
+function isTestEnv() {
+	const hostname = location.hostname.toLowerCase();
+	return hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.');
+}
+
+function embedScript(url) {
+	document.write(`<script src="${url}"></script>`);
+}
+
+function embedStylesheet(url) {
+	document.write(`<link href="${url}" rel="stylesheet">`);
+}
+
+const modelBaseUrl = isTestEnv() ? '../../model' : '//cdn.jsdelivr.net/npm/sequential-workflow-editor-model@0.11.3';
+const editorBaseUrl = isTestEnv() ? '../../editor' : '//cdn.jsdelivr.net/npm/sequential-workflow-editor@0.11.3';
+
+embedScript(`${modelBaseUrl}/dist/index.umd.js`);
+embedScript(`${editorBaseUrl}/dist/index.umd.js`);
+embedStylesheet(`${editorBaseUrl}/css/editor.css`);

demos/vanilla-js-app/assets/vanilla-js.js

@@ -0,0 +1,71 @@
+/* global window, document, sequentialWorkflowEditorModel, sequentialWorkflowEditor, sequentialWorkflowDesigner */
+
+const nextId = sequentialWorkflowDesigner.Uid.next;
+
+const rootModel = sequentialWorkflowEditorModel.createRootModel(model => {
+	model.property('host').value(sequentialWorkflowEditorModel.createStringValueModel({}));
+});
+
+const sendEmailModel = sequentialWorkflowEditorModel.createStepModel('sendEmail', 'task', step => {
+	step.property('to').value(sequentialWorkflowEditorModel.createStringValueModel({}));
+	step.property('ssl').value(sequentialWorkflowEditorModel.createBooleanValueModel({}));
+});
+
+const sqlQueryModel = sequentialWorkflowEditorModel.createStepModel('sqlQuery', 'task', step => {
+	step.property('query').value(
+		sequentialWorkflowEditorModel.createStringValueModel({
+			defaultValue: 'SELECT * FROM table'
+		})
+	);
+});
+
+const definitionModel = sequentialWorkflowEditorModel.createDefinitionModel(model => {
+	model.valueTypes(['string']);
+	model.root(rootModel);
+	model.steps([sendEmailModel, sqlQueryModel]);
+});
+
+const editorProvider = sequentialWorkflowEditor.EditorProvider.create(definitionModel, {
+	uidGenerator: nextId
+});
+
+const startDefinition = {
+	properties: {
+		host: '127.0.0.1'
+	},
+	sequence: [
+		{
+			id: nextId(),
+			name: 'Send Email',
+			type: 'sendEmail',
+			componentType: 'task',
+			properties: {
+				to: 'test@example.com',
+				ssl: false
+			}
+		}
+	]
+};
+
+function load() {
+	const placeholder = document.getElementById('placeholder');
+
+	sequentialWorkflowDesigner.Designer.create(placeholder, startDefinition, {
+		toolbox: {
+			groups: editorProvider.getToolboxGroups(),
+			labelProvider: editorProvider.createStepLabelProvider()
+		},
+		controlBar: true,
+		steps: {},
+		editors: {
+			rootEditorProvider: editorProvider.createRootEditorProvider(),
+			stepEditorProvider: editorProvider.createStepEditorProvider()
+		},
+		validator: {
+			step: editorProvider.createStepValidator(),
+			root: editorProvider.createRootValidator()
+		}
+	});
+}
+
+window.addEventListener('load', load, false);

demos/vanilla-js-app/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "vanilla-js-app-demo",
+	"author": "b4rtaz",
+	"license": "MIT",
+	"private": true,
+	"version": "1.0.0",
+	"scripts": {
+		"build": "echo Skipped",
+		"eslint": "echo Skipped",
+		"test:single": "echo Skipped",
+		"prettier": "prettier --check ./*.html ./assets/*.js",
+		"prettier:fix": "prettier --write ./*.html ./assets/*.js"
+	},
+	"devDependencies": {
+		"prettier": "^2.8.7"
+	}
+}

demos/vanilla-js-app/vanilla-js.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>🚢 Vanilla JS - Sequential Workflow Editor</title>
+		<link rel="icon" href="./assets/favicon.ico" />
+		<style>
+			body {
+				font: 14px/1.5 Arial, Tahoma, Serif;
+			}
+			a {
+				color: navy;
+				text-decoration: underline;
+			}
+			a:hover {
+				text-decoration: none;
+			}
+			#placeholder {
+				display: block;
+				border: 1px solid #ccc;
+				padding: 10px;
+				height: 50vh;
+			}
+		</style>
+
+		<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer.css" rel="stylesheet" />
+		<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer-light.css" rel="stylesheet" />
+		<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/dist/index.umd.js"></script>
+
+		<script src="./assets/lib.js"></script>
+		<script src="./assets/vanilla-js.js"></script>
+	</head>
+	<body>
+		<h1>🚢 Vanilla JS - 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>
+			with <a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">Sequential Workflow Designer</a>
+			in a vanilla JavaScript application.
+		</p>
+
+		<div id="placeholder"></div>
+	</body>
+</html>

package.json

@@ -12,6 +12,7 @@
 	"workspaces": [
 		"model",
 		"editor",
+		"demos/vanilla-js-app",
 		"demos/webpack-app"
 	],
 	"devDependencies": {