npm - @bpmn-io/form-js-playground - Versions diffs - 0.9.8 → 0.10.0-alpha.0 - Mend

@bpmn-io/form-js-playground 0.9.8 → 0.10.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/assets/form-js-playground.css +37 -35
package/dist/form-playground.umd.js +18946 -20035
package/dist/index.cjs +37 -65
package/dist/index.cjs.map +1 -1
package/dist/index.es.js +38 -66
package/dist/index.es.js.map +1 -1
package/dist/types/Playground.d.ts +76 -73
package/dist/types/components/EmbedModal.d.ts +1 -1
package/dist/types/components/JSONEditor.d.ts +20 -16
package/dist/types/components/Modal.d.ts +1 -1
package/dist/types/components/PlaygroundRoot.d.ts +1 -1
package/dist/types/components/Section.d.ts +4 -4
package/dist/types/index.d.ts +1 -1
package/package.json +5 -4

package/dist/index.cjs CHANGED Viewed

@@ -14,6 +14,7 @@ var jsxRuntime = require('preact/jsx-runtime');
 var codemirror = require('codemirror');
 var view = require('@codemirror/view');
 var state = require('@codemirror/state');
+var lint = require('@codemirror/lint');
 var langJson = require('@codemirror/lang-json');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -31,7 +32,6 @@ function Modal(props) {
         props.onClose();
       }
     }
     document.addEventListener('keydown', handleKey);
     return () => {
       document.removeEventListener('keydown', handleKey);
@@ -110,7 +110,9 @@ function EmbedModal(props) {
       children: snippet
     })]
   });
-} // helpers ///////////
+}
+// helpers ///////////
 function serializeValue(obj) {
   return JSON.stringify(JSON.stringify(obj)).replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -123,14 +125,13 @@ function JSONEditor(options = {}) {
   } = options;
   let language = new state.Compartment().of(langJson.json());
   let tabSize = new state.Compartment().of(state.EditorState.tabSize.of(2));
+  const linterExtension = lint.linter(langJson.jsonParseLinter());
   function createState(doc, extensions = []) {
     return state.EditorState.create({
       doc,
-      extensions: [codemirror.basicSetup, language, tabSize, ...extensions]
+      extensions: [codemirror.basicSetup, language, tabSize, linterExtension, lint.lintGutter(), ...extensions]
     });
   }
   function createView(readonly) {
     const updateListener = view.EditorView.updateListener.of(update => {
       if (update.docChanged) {
@@ -143,36 +144,28 @@ function JSONEditor(options = {}) {
     const view$1 = new view.EditorView({
       state: createState('', [updateListener, editable])
     });
     view$1.setValue = function (value) {
       this.setState(createState(value, [updateListener, editable]));
     };
     return view$1;
   }
   const view$1 = createView(readonly);
   this.setValue = function (value) {
     view$1.setValue(value);
   };
   this.getValue = function () {
     return view$1.state.doc.toString();
   };
   this.on = emitter.on;
   this.off = emitter.off;
+  this.emit = emitter.emit;
   this.attachTo = function (container) {
     container.appendChild(view$1.dom);
   };
   this.destroy = function () {
     if (view$1.dom.parentNode) {
       view$1.dom.parentNode.removeChild(view$1.dom);
     }
     view$1.destroy();
   };
 }
@@ -204,7 +197,6 @@ function Section(props) {
     })]
   });
 }
 Section.HeaderItem = function (props) {
   return props.children;
 };
@@ -239,8 +231,9 @@ function PlaygroundRoot(props) {
   const [initialSchema, setInitialSchema] = hooks.useState(props.schema);
   const [data, setData] = hooks.useState(props.data || {});
   const [schema, setSchema] = hooks.useState(props.schema);
-  const [resultData, setResultData] = hooks.useState(props.data || {}); // pipe to playground API
+  const [resultData, setResultData] = hooks.useState({});
+  // pipe to playground API
   hooks.useEffect(() => {
     props.onInit({
       attachDataContainer: node => dataEditorRef.current.attachTo(node),
@@ -250,7 +243,10 @@ function PlaygroundRoot(props) {
       attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
       attachResultContainer: node => resultViewRef.current.attachTo(node),
       get: (name, strict) => formEditorRef.current.get(name, strict),
+      getDataEditor: () => dataEditorRef.current,
       getEditor: () => formEditorRef.current,
+      getForm: () => formRef.current,
+      getResultView: () => resultViewRef.current,
       getSchema: () => formEditorRef.current.getSchema(),
       setSchema: setInitialSchema,
       saveSchema: () => formEditorRef.current.saveSchema()
@@ -289,13 +285,15 @@ function PlaygroundRoot(props) {
       // notifiy interested parties after render
       emit('formPlayground.rendered');
     });
-    form.on('changed', event => {
-      setResultData(event.data);
+    form.on('changed', () => {
+      setResultData(form._getSubmitData());
     });
     dataEditor.on('changed', event => {
       try {
         setData(JSON.parse(event.value));
-      } catch (err) {// TODO(nikku): indicate JSON parse error
+      } catch (error) {
+        // notify interested about input data error
+        emit('formPlayground.inputDataError', error);
       }
     });
     const formContainer = formContainerRef.current;
@@ -399,7 +397,9 @@ function PlaygroundRoot(props) {
       ref: propertiesPanelContainerRef
     })]
   });
-} // helpers ///////////////
+}
+// helpers ///////////////
 function toJSON(obj) {
   return JSON.stringify(obj, null, '  ');
@@ -420,37 +420,32 @@ function Playground(options) {
   let ref;
   const container = document.createElement('div');
   container.classList.add('fjs-pgl-parent');
   if (parent) {
     parent.appendChild(container);
   }
   const handleDrop = fileDrop__default['default']('Drop a form file', function (files) {
     const file = files[0];
     if (file) {
       try {
         ref.setSchema(JSON.parse(file.contents));
-      } catch (err) {// TODO(nikku): indicate JSON parse error
+      } catch (err) {
+        // TODO(nikku): indicate JSON parse error
       }
     }
   });
   const withRef = function (fn) {
     return function (...args) {
       if (!ref) {
         throw new Error('Playground is not initialized.');
       }
       return fn(...args);
     };
   };
   const onInit = function (_ref) {
     ref = _ref;
     emitter.emit('formPlayground.init');
   };
   container.addEventListener('dragover', handleDrop);
   preact.render(jsxRuntime.jsx(PlaygroundRoot, {
     data: data,
@@ -469,49 +464,26 @@ function Playground(options) {
   this.on('destroy', function () {
     parent.removeChild(container);
   });
   this.getState = function () {
     return state;
   };
-  this.getSchema = withRef(function () {
-    return ref.getSchema();
-  });
-  this.setSchema = withRef(function (schema) {
-    return ref.setSchema(schema);
-  });
-  this.saveSchema = withRef(function () {
-    return ref.saveSchema();
-  });
-  this.get = withRef(function (name, strict) {
-    return ref.get(name, strict);
-  });
-  this.getEditor = withRef(function () {
-    return ref.getEditor();
-  });
+  this.getSchema = withRef(() => ref.getSchema());
+  this.setSchema = withRef(schema => ref.setSchema(schema));
+  this.saveSchema = withRef(() => ref.saveSchema());
+  this.get = withRef((name, strict) => ref.get(name, strict));
+  this.getDataEditor = withRef(() => ref.getDataEditor());
+  this.getEditor = withRef(() => ref.getEditor());
+  this.getForm = withRef((name, strict) => ref.getForm(name, strict));
+  this.getResultView = withRef(() => ref.getResultView());
   this.destroy = function () {
     this.emit('destroy');
   };
-  this.attachEditorContainer = withRef(function (node) {
-    return ref.attachEditorContainer(node);
-  });
-  this.attachPreviewContainer = withRef(function (node) {
-    return ref.attachFormContainer(node);
-  });
-  this.attachDataContainer = withRef(function (node) {
-    return ref.attachDataContainer(node);
-  });
-  this.attachResultContainer = withRef(function (node) {
-    return ref.attachResultContainer(node);
-  });
-  this.attachPaletteContainer = withRef(function (node) {
-    return ref.attachPaletteContainer(node);
-  });
-  this.attachPropertiesPanelContainer = withRef(function (node) {
-    return ref.attachPropertiesPanelContainer(node);
-  });
+  this.attachEditorContainer = withRef(node => ref.attachEditorContainer(node));
+  this.attachPreviewContainer = withRef(node => ref.attachFormContainer(node));
+  this.attachDataContainer = withRef(node => ref.attachDataContainer(node));
+  this.attachResultContainer = withRef(node => ref.attachResultContainer(node));
+  this.attachPaletteContainer = withRef(node => ref.attachPaletteContainer(node));
+  this.attachPropertiesPanelContainer = withRef(node => ref.attachPropertiesPanelContainer(node));
 }
 exports.Playground = Playground;

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../src/components/Modal.js","../src/components/EmbedModal.js","../src/components/JSONEditor.js","../src/components/Section.js","../src/components/PlaygroundRoot.js","../src/Playground.js"],"sourcesContent":["import { useEffect } from 'preact/hooks';\n\nexport function Modal(props) {\n\n useEffect(() => {\n function handleKey(event) {\n\n if (event.key === 'Escape') {\n event.stopPropagation();\n\n props.onClose();\n }\n }\n\n document.addEventListener('keydown', handleKey);\n\n return () => {\n document.removeEventListener('keydown', handleKey);\n };\n });\n\n return (\n <div class=\"fjs-pgl-modal\">\n <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\n <div class=\"fjs-pgl-modal-content\">\n <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\n <div class=\"fjs-pgl-modal-body\">\n { props.children }\n </div>\n <div class=\"fjs-pgl-modal-footer\">\n <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\n </div>\n </div>\n </div>\n );\n}\n","import { useEffect, useRef } from 'preact/hooks';\n\nimport { Modal } from './Modal';\n\n\nexport function EmbedModal(props) {\n\n const schema = serializeValue(props.schema);\n const data = serializeValue(props.data \|\| {});\n\n const fieldRef = useRef();\n\n const snippet = `<!-- styles needed for rendering -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\n\n<!-- container to render the form into -->\n<div class=\"fjs-pgl-form-container\"></div>\n\n<!-- scripts needed for embedding -->\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\n\n<!-- actual script to instantiate the form and load form schema + data -->\n<script>\n const data = JSON.parse(${data});\n const schema = JSON.parse(${schema});\n\n const form = new FormViewer.Form({\n container: document.querySelector(\".fjs-pgl-form-container\")\n });\n\n form.on(\"submit\", (event) => {\n console.log(event.data, event.errors);\n });\n\n form.importSchema(schema, data).catch(err => {\n console.error(\"Failed to render form\", err);\n });\n</script>\n `.trim();\n\n useEffect(() => {\n fieldRef.current.select();\n });\n\n return (\n <Modal name=\"Embed form\" onClose={ props.onClose }>\n <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\n\n <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\n </Modal>\n );\n}\n\n\n// helpers ///////////\n\nfunction serializeValue(obj) {\n return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');\n}","import mitt from 'mitt';\n\nimport { basicSetup } from 'codemirror';\nimport { EditorView } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { json } from '@codemirror/lang-json';\n\n\nexport function JSONEditor(options = {}) {\n\n const emitter = mitt();\n\n const {\n readonly = false\n } = options;\n\n let language = new Compartment().of(json());\n let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n function createState(doc, extensions = []) {\n return EditorState.create({\n doc,\n extensions: [\n basicSetup,\n language,\n tabSize,\n ...extensions\n ]\n });\n }\n\n function createView(readonly) {\n\n const updateListener = EditorView.updateListener.of(update => {\n if (update.docChanged) {\n emitter.emit('changed', {\n value: update.view.state.doc.toString()\n });\n }\n });\n\n const editable = EditorView.editable.of(!readonly);\n\n const view = new EditorView({\n state: createState('', [ updateListener, editable ])\n });\n\n view.setValue = function(value) {\n this.setState(createState(value, [ updateListener, editable ]));\n };\n\n return view;\n }\n\n const view = createView(readonly);\n\n this.setValue = function(value) {\n view.setValue(value);\n };\n\n this.getValue = function() {\n return view.state.doc.toString();\n };\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.attachTo = function(container) {\n container.appendChild(view.dom);\n };\n\n this.destroy = function() {\n if (view.dom.parentNode) {\n view.dom.parentNode.removeChild(view.dom);\n }\n\n view.destroy();\n };\n}\n","export function Section(props) {\n\n const elements =\n Array.isArray(props.children)\n ? props.children :\n [ props.children ];\n\n const {\n headerItems,\n children\n } = elements.reduce((_, child) => {\n const bucket =\n child.type === Section.HeaderItem\n ? _.headerItems\n : _.children;\n\n bucket.push(child);\n\n return _;\n }, { headerItems: [], children: [] });\n\n return (\n <div class=\"fjs-pgl-section\">\n <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\n <div class=\"body\">\n { children }\n </div>\n </div>\n );\n}\n\nSection.HeaderItem = function(props) {\n return props.children;\n};","import { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport download from 'downloadjs';\n\nimport classNames from 'classnames';\n\nimport {\n Form\n} from '@bpmn-io/form-js-viewer';\n\nimport {\n FormEditor\n} from '@bpmn-io/form-js-editor';\n\nimport { EmbedModal } from './EmbedModal';\nimport { JSONEditor } from './JSONEditor';\nimport { Section } from './Section';\n\n\nimport './FileDrop.css';\nimport './PlaygroundRoot.css';\n\n\nexport function PlaygroundRoot(props) {\n\n const {\n actions: actionsConfig = {},\n editor: editorConfig = {},\n emit,\n exporter: exporterConfig = {}\n } = props;\n\n const {\n display: displayActions = true\n } = actionsConfig;\n\n const {\n inlinePropertiesPanel = true\n } = editorConfig;\n\n const paletteContainerRef = useRef();\n const editorContainerRef = useRef();\n const formContainerRef = useRef();\n const dataContainerRef = useRef();\n const resultContainerRef = useRef();\n const propertiesPanelContainerRef = useRef();\n\n const paletteRef = useRef();\n const formEditorRef = useRef();\n const formRef = useRef();\n const dataEditorRef = useRef();\n const resultViewRef = useRef();\n const propertiesPanelRef = useRef();\n\n const [ showEmbed, setShowEmbed ] = useState(false);\n\n const [ initialData ] = useState(props.data \|\| {});\n const [ initialSchema, setInitialSchema ] = useState(props.schema);\n\n const [ data, setData ] = useState(props.data \|\| {});\n const [ schema, setSchema ] = useState(props.schema);\n\n const [ resultData, setResultData ] = useState(props.data \|\| {});\n\n // pipe to playground API\n useEffect(() => {\n props.onInit({\n attachDataContainer: (node) => dataEditorRef.current.attachTo(node),\n attachEditorContainer: (node) => formEditorRef.current.attachTo(node),\n attachFormContainer: (node) => formRef.current.attachTo(node),\n attachPaletteContainer: (node) => paletteRef.current.attachTo(node),\n attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),\n attachResultContainer: (node) => resultViewRef.current.attachTo(node),\n get: (name, strict) => formEditorRef.current.get(name, strict),\n getEditor: () => formEditorRef.current,\n getSchema: () => formEditorRef.current.getSchema(),\n setSchema: setInitialSchema,\n saveSchema: () => formEditorRef.current.saveSchema()\n });\n });\n\n useEffect(() => {\n setInitialSchema(props.schema \|\| {});\n }, [ props.schema ]);\n\n useEffect(() => {\n const dataEditor = dataEditorRef.current = new JSONEditor({\n value: toJSON(data)\n });\n\n const resultView = resultViewRef.current = new JSONEditor({\n readonly: true,\n value: toJSON(resultData)\n });\n\n const form = formRef.current = new Form();\n const formEditor = formEditorRef.current = new FormEditor({\n renderer: {\n compact: true\n },\n palette: {\n parent: paletteContainerRef.current\n },\n propertiesPanel: {\n parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current\n },\n exporter: exporterConfig\n });\n\n paletteRef.current = formEditor.get('palette');\n propertiesPanelRef.current = formEditor.get('propertiesPanel');\n\n formEditor.on('changed', () => {\n setSchema(formEditor.getSchema());\n });\n\n formEditor.on('formEditor.rendered', () => {\n\n // notifiy interested parties after render\n emit('formPlayground.rendered');\n });\n\n form.on('changed', event => {\n setResultData(event.data);\n });\n\n dataEditor.on('changed', event => {\n try {\n setData(JSON.parse(event.value));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n });\n\n const formContainer = formContainerRef.current;\n const editorContainer = editorContainerRef.current;\n const dataContainer = dataContainerRef.current;\n const resultContainer = resultContainerRef.current;\n\n dataEditor.attachTo(dataContainer);\n resultView.attachTo(resultContainer);\n form.attachTo(formContainer);\n formEditor.attachTo(editorContainer);\n\n return () => {\n dataEditor.destroy();\n resultView.destroy();\n form.destroy();\n formEditor.destroy();\n };\n }, []);\n\n useEffect(() => {\n dataEditorRef.current.setValue(toJSON(initialData));\n }, [ initialData ]);\n\n useEffect(() => {\n initialSchema && formEditorRef.current.importSchema(initialSchema);\n }, [ initialSchema ]);\n\n useEffect(() => {\n schema && formRef.current.importSchema(schema, data);\n }, [ schema, data ]);\n\n useEffect(() => {\n resultViewRef.current.setValue(toJSON(resultData));\n }, [ resultData ]);\n\n useEffect(() => {\n props.onStateChanged({\n schema,\n data\n });\n }, [ schema, data ]);\n\n const handleDownload = useCallback(() => {\n\n download(JSON.stringify(schema, null, ' '), 'form.json', 'text/json');\n }, [ schema ]);\n\n const hideEmbedModal = useCallback(() => {\n setShowEmbed(false);\n }, []);\n\n const showEmbedModal = useCallback(() => {\n setShowEmbed(true);\n }, []);\n\n return (\n <div class={ classNames(\n 'fjs-container',\n 'fjs-pgl-root',\n { 'fjs-pgl-inline-editor-panel': inlinePropertiesPanel }) }>\n <div class=\"fjs-pgl-modals\">\n { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\n </div>\n <div class=\"fjs-pgl-palette-container\" ref={ paletteContainerRef } />\n <div class=\"fjs-pgl-main\">\n\n <Section name=\"Form Definition\">\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n title=\"Download form definition\"\n onClick={ handleDownload }\n >Download</button>\n </Section.HeaderItem>\n }\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n onClick={ showEmbedModal }\n >Embed</button>\n </Section.HeaderItem>\n }\n\n <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Preview\">\n <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Data (Input)\">\n <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n <Section name=\"Form Data (Submit)\">\n <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n </div>\n <div class=\"fjs-pgl-properties-container\" ref={ propertiesPanelContainerRef } />\n </div>\n );\n}\n\n\n// helpers ///////////////\n\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, ' ');\n}","import { render } from 'preact';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport { PlaygroundRoot } from './components/PlaygroundRoot';\n\n/*\n @typedef { {\n * actions?: { display: Boolean }\n * container?: Element\n * data: any\n * editor?: { inlinePropertiesPanel: Boolean }\n * exporter?: { name: String, version: String }\n * schema: any\n * } } FormPlaygroundOptions\n /\n\n/\n @param {FormPlaygroundOptions} options\n */\nexport default function Playground(options) {\n\n const {\n container: parent,\n schema,\n data,\n ...rest\n } = options;\n\n const emitter = mitt();\n\n let state = { data, schema };\n let ref;\n\n const container = document.createElement('div');\n\n container.classList.add('fjs-pgl-parent');\n\n if (parent) {\n parent.appendChild(container);\n }\n\n const handleDrop = fileDrop('Drop a form file', function(files) {\n const file = files[0];\n\n if (file) {\n try {\n ref.setSchema(JSON.parse(file.contents));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n }\n });\n\n const withRef = function(fn) {\n return function(...args) {\n if (!ref) {\n throw new Error('Playground is not initialized.');\n }\n\n return fn(...args);\n };\n };\n\n const onInit = function(_ref) {\n ref = _ref;\n emitter.emit('formPlayground.init');\n };\n\n container.addEventListener('dragover', handleDrop);\n\n render(\n <PlaygroundRoot\n data={ data }\n emit={ emitter.emit }\n onInit={ onInit }\n onStateChanged={ (_state) => state = _state }\n schema={ schema }\n { ...rest }\n />,\n container\n );\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.emit = emitter.emit;\n\n this.on('destroy', function() {\n render(null, container);\n });\n\n this.on('destroy', function() {\n parent.removeChild(container);\n });\n\n this.getState = function() {\n return state;\n };\n\n this.getSchema = withRef(function() {\n return ref.getSchema();\n });\n\n this.setSchema = withRef(function(schema) {\n return ref.setSchema(schema);\n });\n\n this.saveSchema = withRef(function() {\n return ref.saveSchema();\n });\n\n this.get = withRef(function(name, strict) {\n return ref.get(name, strict);\n });\n\n this.getEditor = withRef(function() {\n return ref.getEditor();\n });\n\n this.destroy = function() {\n this.emit('destroy');\n };\n\n this.attachEditorContainer = withRef(function(node) {\n return ref.attachEditorContainer(node);\n });\n\n this.attachPreviewContainer = withRef(function(node) {\n return ref.attachFormContainer(node);\n });\n\n this.attachDataContainer = withRef(function(node) {\n return ref.attachDataContainer(node);\n });\n\n this.attachResultContainer = withRef(function(node) {\n return ref.attachResultContainer(node);\n });\n\n this.attachPaletteContainer = withRef(function(node) {\n return ref.attachPaletteContainer(node);\n });\n\n this.attachPropertiesPanelContainer = withRef(function(node) {\n return ref.attachPropertiesPanelContainer(node);\n });\n}"],"names":["Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","EmbedModal","schema","serializeValue","data","fieldRef","useRef","snippet","trim","current","select","obj","JSON","stringify","replace","JSONEditor","options","emitter","mitt","readonly","language","Compartment","of","json","tabSize","EditorState","createState","doc","extensions","create","basicSetup","createView","updateListener","EditorView","update","docChanged","emit","value","view","state","toString","editable","setValue","setState","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","PlaygroundRoot","actions","actionsConfig","editor","editorConfig","exporter","exporterConfig","display","displayActions","inlinePropertiesPanel","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","propertiesPanelContainerRef","paletteRef","formEditorRef","formRef","dataEditorRef","resultViewRef","propertiesPanelRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","attachDataContainer","node","attachEditorContainer","attachFormContainer","attachPaletteContainer","attachPropertiesPanelContainer","attachResultContainer","get","strict","getEditor","getSchema","saveSchema","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","parse","err","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","withRef","fn","args","Error","_ref","render","_state","getState","attachPreviewContainer"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../src/components/Modal.js","../src/components/EmbedModal.js","../src/components/JSONEditor.js","../src/components/Section.js","../src/components/PlaygroundRoot.js","../src/Playground.js"],"sourcesContent":["import { useEffect } from 'preact/hooks';\n\nexport function Modal(props) {\n\n useEffect(() => {\n function handleKey(event) {\n\n if (event.key === 'Escape') {\n event.stopPropagation();\n\n props.onClose();\n }\n }\n\n document.addEventListener('keydown', handleKey);\n\n return () => {\n document.removeEventListener('keydown', handleKey);\n };\n });\n\n return (\n <div class=\"fjs-pgl-modal\">\n <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\n <div class=\"fjs-pgl-modal-content\">\n <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\n <div class=\"fjs-pgl-modal-body\">\n { props.children }\n </div>\n <div class=\"fjs-pgl-modal-footer\">\n <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\n </div>\n </div>\n </div>\n );\n}\n","import { useEffect, useRef } from 'preact/hooks';\n\nimport { Modal } from './Modal';\n\n\nexport function EmbedModal(props) {\n\n const schema = serializeValue(props.schema);\n const data = serializeValue(props.data \|\| {});\n\n const fieldRef = useRef();\n\n const snippet = `<!-- styles needed for rendering -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\n\n<!-- container to render the form into -->\n<div class=\"fjs-pgl-form-container\"></div>\n\n<!-- scripts needed for embedding -->\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\n\n<!-- actual script to instantiate the form and load form schema + data -->\n<script>\n const data = JSON.parse(${data});\n const schema = JSON.parse(${schema});\n\n const form = new FormViewer.Form({\n container: document.querySelector(\".fjs-pgl-form-container\")\n });\n\n form.on(\"submit\", (event) => {\n console.log(event.data, event.errors);\n });\n\n form.importSchema(schema, data).catch(err => {\n console.error(\"Failed to render form\", err);\n });\n</script>\n `.trim();\n\n useEffect(() => {\n fieldRef.current.select();\n });\n\n return (\n <Modal name=\"Embed form\" onClose={ props.onClose }>\n <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\n\n <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\n </Modal>\n );\n}\n\n\n// helpers ///////////\n\nfunction serializeValue(obj) {\n return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');\n}","import mitt from 'mitt';\n\nimport { basicSetup } from 'codemirror';\nimport { EditorView } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { lintGutter, linter } from '@codemirror/lint';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\n\n\nexport function JSONEditor(options = {}) {\n\n const emitter = mitt();\n\n const {\n readonly = false\n } = options;\n\n let language = new Compartment().of(json());\n let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n const linterExtension = linter(jsonParseLinter());\n\n function createState(doc, extensions = []) {\n return EditorState.create({\n doc,\n extensions: [\n basicSetup,\n language,\n tabSize,\n linterExtension,\n lintGutter(),\n ...extensions\n ]\n });\n }\n\n function createView(readonly) {\n\n const updateListener = EditorView.updateListener.of(update => {\n if (update.docChanged) {\n emitter.emit('changed', {\n value: update.view.state.doc.toString()\n });\n }\n });\n\n const editable = EditorView.editable.of(!readonly);\n\n const view = new EditorView({\n state: createState('', [ updateListener, editable ])\n });\n\n view.setValue = function(value) {\n this.setState(createState(value, [ updateListener, editable ]));\n };\n\n return view;\n }\n\n const view = createView(readonly);\n\n this.setValue = function(value) {\n view.setValue(value);\n };\n\n this.getValue = function() {\n return view.state.doc.toString();\n };\n\n this.on = emitter.on;\n this.off = emitter.off;\n this.emit = emitter.emit;\n\n this.attachTo = function(container) {\n container.appendChild(view.dom);\n };\n\n this.destroy = function() {\n if (view.dom.parentNode) {\n view.dom.parentNode.removeChild(view.dom);\n }\n\n view.destroy();\n };\n}\n","export function Section(props) {\n\n const elements =\n Array.isArray(props.children)\n ? props.children :\n [ props.children ];\n\n const {\n headerItems,\n children\n } = elements.reduce((_, child) => {\n const bucket =\n child.type === Section.HeaderItem\n ? _.headerItems\n : _.children;\n\n bucket.push(child);\n\n return _;\n }, { headerItems: [], children: [] });\n\n return (\n <div class=\"fjs-pgl-section\">\n <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\n <div class=\"body\">\n { children }\n </div>\n </div>\n );\n}\n\nSection.HeaderItem = function(props) {\n return props.children;\n};","import { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport download from 'downloadjs';\n\nimport classNames from 'classnames';\n\nimport {\n Form\n} from '@bpmn-io/form-js-viewer';\n\nimport {\n FormEditor\n} from '@bpmn-io/form-js-editor';\n\nimport { EmbedModal } from './EmbedModal';\nimport { JSONEditor } from './JSONEditor';\nimport { Section } from './Section';\n\n\nimport './FileDrop.css';\nimport './PlaygroundRoot.css';\n\n\nexport function PlaygroundRoot(props) {\n\n const {\n actions: actionsConfig = {},\n editor: editorConfig = {},\n emit,\n exporter: exporterConfig = {}\n } = props;\n\n const {\n display: displayActions = true\n } = actionsConfig;\n\n const {\n inlinePropertiesPanel = true\n } = editorConfig;\n\n const paletteContainerRef = useRef();\n const editorContainerRef = useRef();\n const formContainerRef = useRef();\n const dataContainerRef = useRef();\n const resultContainerRef = useRef();\n const propertiesPanelContainerRef = useRef();\n\n const paletteRef = useRef();\n const formEditorRef = useRef();\n const formRef = useRef();\n const dataEditorRef = useRef();\n const resultViewRef = useRef();\n const propertiesPanelRef = useRef();\n\n const [ showEmbed, setShowEmbed ] = useState(false);\n\n const [ initialData ] = useState(props.data \|\| {});\n const [ initialSchema, setInitialSchema ] = useState(props.schema);\n\n const [ data, setData ] = useState(props.data \|\| {});\n const [ schema, setSchema ] = useState(props.schema);\n\n const [ resultData, setResultData ] = useState({});\n\n // pipe to playground API\n useEffect(() => {\n props.onInit({\n attachDataContainer: (node) => dataEditorRef.current.attachTo(node),\n attachEditorContainer: (node) => formEditorRef.current.attachTo(node),\n attachFormContainer: (node) => formRef.current.attachTo(node),\n attachPaletteContainer: (node) => paletteRef.current.attachTo(node),\n attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),\n attachResultContainer: (node) => resultViewRef.current.attachTo(node),\n get: (name, strict) => formEditorRef.current.get(name, strict),\n getDataEditor: () => dataEditorRef.current,\n getEditor: () => formEditorRef.current,\n getForm: () => formRef.current,\n getResultView: () => resultViewRef.current,\n getSchema: () => formEditorRef.current.getSchema(),\n setSchema: setInitialSchema,\n saveSchema: () => formEditorRef.current.saveSchema()\n });\n });\n\n useEffect(() => {\n setInitialSchema(props.schema \|\| {});\n }, [ props.schema ]);\n\n useEffect(() => {\n const dataEditor = dataEditorRef.current = new JSONEditor({\n value: toJSON(data)\n });\n\n const resultView = resultViewRef.current = new JSONEditor({\n readonly: true,\n value: toJSON(resultData)\n });\n\n const form = formRef.current = new Form();\n const formEditor = formEditorRef.current = new FormEditor({\n renderer: {\n compact: true\n },\n palette: {\n parent: paletteContainerRef.current\n },\n propertiesPanel: {\n parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current\n },\n exporter: exporterConfig\n });\n\n paletteRef.current = formEditor.get('palette');\n propertiesPanelRef.current = formEditor.get('propertiesPanel');\n\n formEditor.on('changed', () => {\n setSchema(formEditor.getSchema());\n });\n\n formEditor.on('formEditor.rendered', () => {\n\n // notifiy interested parties after render\n emit('formPlayground.rendered');\n });\n\n form.on('changed', () => {\n setResultData(form._getSubmitData());\n });\n\n dataEditor.on('changed', event => {\n try {\n setData(JSON.parse(event.value));\n } catch (error) {\n\n // notify interested about input data error\n emit('formPlayground.inputDataError', error);\n }\n });\n\n const formContainer = formContainerRef.current;\n const editorContainer = editorContainerRef.current;\n const dataContainer = dataContainerRef.current;\n const resultContainer = resultContainerRef.current;\n\n dataEditor.attachTo(dataContainer);\n resultView.attachTo(resultContainer);\n form.attachTo(formContainer);\n formEditor.attachTo(editorContainer);\n\n return () => {\n dataEditor.destroy();\n resultView.destroy();\n form.destroy();\n formEditor.destroy();\n };\n }, []);\n\n useEffect(() => {\n dataEditorRef.current.setValue(toJSON(initialData));\n }, [ initialData ]);\n\n useEffect(() => {\n initialSchema && formEditorRef.current.importSchema(initialSchema);\n }, [ initialSchema ]);\n\n useEffect(() => {\n schema && formRef.current.importSchema(schema, data);\n }, [ schema, data ]);\n\n useEffect(() => {\n resultViewRef.current.setValue(toJSON(resultData));\n }, [ resultData ]);\n\n useEffect(() => {\n props.onStateChanged({\n schema,\n data\n });\n }, [ schema, data ]);\n\n const handleDownload = useCallback(() => {\n\n download(JSON.stringify(schema, null, ' '), 'form.json', 'text/json');\n }, [ schema ]);\n\n const hideEmbedModal = useCallback(() => {\n setShowEmbed(false);\n }, []);\n\n const showEmbedModal = useCallback(() => {\n setShowEmbed(true);\n }, []);\n\n return (\n <div class={ classNames(\n 'fjs-container',\n 'fjs-pgl-root',\n { 'fjs-pgl-inline-editor-panel': inlinePropertiesPanel }) }>\n <div class=\"fjs-pgl-modals\">\n { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\n </div>\n <div class=\"fjs-pgl-palette-container\" ref={ paletteContainerRef } />\n <div class=\"fjs-pgl-main\">\n\n <Section name=\"Form Definition\">\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n title=\"Download form definition\"\n onClick={ handleDownload }\n >Download</button>\n </Section.HeaderItem>\n }\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n onClick={ showEmbedModal }\n >Embed</button>\n </Section.HeaderItem>\n }\n\n <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Preview\">\n <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Data (Input)\">\n <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n <Section name=\"Form Data (Submit)\">\n <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n </div>\n <div class=\"fjs-pgl-properties-container\" ref={ propertiesPanelContainerRef } />\n </div>\n );\n}\n\n\n// helpers ///////////////\n\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, ' ');\n}","import { render } from 'preact';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport { PlaygroundRoot } from './components/PlaygroundRoot';\n\n/*\n @typedef { {\n * actions?: { display: Boolean }\n * container?: Element\n * data: any\n * editor?: { inlinePropertiesPanel: Boolean }\n * exporter?: { name: String, version: String }\n * schema: any\n * } } FormPlaygroundOptions\n /\n\n/\n @param {FormPlaygroundOptions} options\n */\nexport default function Playground(options) {\n\n const {\n container: parent,\n schema,\n data,\n ...rest\n } = options;\n\n const emitter = mitt();\n\n let state = { data, schema };\n let ref;\n\n const container = document.createElement('div');\n\n container.classList.add('fjs-pgl-parent');\n\n if (parent) {\n parent.appendChild(container);\n }\n\n const handleDrop = fileDrop('Drop a form file', function(files) {\n const file = files[0];\n\n if (file) {\n try {\n ref.setSchema(JSON.parse(file.contents));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n }\n });\n\n const withRef = function(fn) {\n return function(...args) {\n if (!ref) {\n throw new Error('Playground is not initialized.');\n }\n\n return fn(...args);\n };\n };\n\n const onInit = function(_ref) {\n ref = _ref;\n emitter.emit('formPlayground.init');\n };\n\n container.addEventListener('dragover', handleDrop);\n\n render(\n <PlaygroundRoot\n data={ data }\n emit={ emitter.emit }\n onInit={ onInit }\n onStateChanged={ (_state) => state = _state }\n schema={ schema }\n { ...rest }\n />,\n container\n );\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.emit = emitter.emit;\n\n this.on('destroy', function() {\n render(null, container);\n });\n\n this.on('destroy', function() {\n parent.removeChild(container);\n });\n\n this.getState = function() {\n return state;\n };\n\n this.getSchema = withRef(() => ref.getSchema());\n\n this.setSchema = withRef((schema) => ref.setSchema(schema));\n\n this.saveSchema = withRef(() => ref.saveSchema());\n\n this.get = withRef((name, strict) => ref.get(name, strict));\n\n this.getDataEditor = withRef(() => ref.getDataEditor());\n\n this.getEditor = withRef(() => ref.getEditor());\n\n this.getForm = withRef((name, strict) => ref.getForm(name, strict));\n\n this.getResultView = withRef(() => ref.getResultView());\n\n this.destroy = function() {\n this.emit('destroy');\n };\n\n this.attachEditorContainer = withRef((node) => ref.attachEditorContainer(node));\n\n this.attachPreviewContainer = withRef((node) => ref.attachFormContainer(node));\n\n this.attachDataContainer = withRef((node) => ref.attachDataContainer(node));\n\n this.attachResultContainer = withRef((node) => ref.attachResultContainer(node));\n\n this.attachPaletteContainer = withRef((node) => ref.attachPaletteContainer(node));\n\n this.attachPropertiesPanelContainer = withRef((node) => ref.attachPropertiesPanelContainer(node));\n}"],"names":["Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","EmbedModal","schema","serializeValue","data","fieldRef","useRef","snippet","trim","current","select","obj","JSON","stringify","replace","JSONEditor","options","emitter","mitt","readonly","language","Compartment","of","json","tabSize","EditorState","linterExtension","linter","jsonParseLinter","createState","doc","extensions","create","basicSetup","lintGutter","createView","updateListener","EditorView","update","docChanged","emit","value","view","state","toString","editable","setValue","setState","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","PlaygroundRoot","actions","actionsConfig","editor","editorConfig","exporter","exporterConfig","display","displayActions","inlinePropertiesPanel","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","propertiesPanelContainerRef","paletteRef","formEditorRef","formRef","dataEditorRef","resultViewRef","propertiesPanelRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","attachDataContainer","node","attachEditorContainer","attachFormContainer","attachPaletteContainer","attachPropertiesPanelContainer","attachResultContainer","get","strict","getDataEditor","getEditor","getForm","getResultView","getSchema","saveSchema","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","_getSubmitData","parse","error","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","err","withRef","fn","args","Error","_ref","render","_state","getState","attachPreviewContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,SAASA,KAAK,CAACC,KAAK,EAAE;EAE3BC,eAAS,CAAC,MAAM;IACd,SAASC,SAAS,CAACC,KAAK,EAAE;MAExB,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QAC1BD,KAAK,CAACE,eAAe,EAAE;QAEvBL,KAAK,CAACM,OAAO,EAAE;;;IAInBC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEN,SAAS,CAAC;IAE/C,OAAO,MAAM;MACXK,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEP,SAAS,CAAC;KACnD;GACF,CAAC;EAEF,OACEQ;IAAK,KAAK,EAAC,eAAe;IAAA,WACxBC;MAAK,KAAK,EAAC,wBAAwB;MAAC,OAAO,EAAGX,KAAK,CAACM;MAAgB,EACpEI;MAAK,KAAK,EAAC,uBAAuB;MAAA,WAChCC;QAAI,KAAK,EAAC,sBAAsB;QAAA,UAAGX,KAAK,CAACY;QAAW,EACpDD;QAAK,KAAK,EAAC,oBAAoB;QAAA,UAC3BX,KAAK,CAACa;QACJ,EACNF;QAAK,KAAK,EAAC,sBAAsB;QAAA,UAC/BA;UAAQ,KAAK,EAAC,uCAAuC;UAAC,OAAO,EAAGX,KAAK,CAACM,OAAS;UAAA;;QAC3E;MACF;IACF;AAEV;;AC9BO,SAASQ,UAAU,CAACd,KAAK,EAAE;EAEhC,MAAMe,MAAM,GAAGC,cAAc,CAAChB,KAAK,CAACe,MAAM,CAAC;EAC3C,MAAME,IAAI,GAAGD,cAAc,CAAChB,KAAK,CAACiB,IAAI,IAAI,EAAE,CAAC;EAE7C,MAAMC,QAAQ,GAAGC,YAAM,EAAE;EAEzB,MAAMC,OAAO,GAAI;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BH,IAAK;AACjC,8BAA8BF,MAAO;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG,CAACM,IAAI,EAAE;EAERpB,eAAS,CAAC,MAAM;IACdiB,QAAQ,CAACI,OAAO,CAACC,MAAM,EAAE;GAC1B,CAAC;EAEF,OACEb,gBAAC,KAAK;IAAC,IAAI,EAAC,YAAY;IAAC,OAAO,EAAGV,KAAK,CAACM,OAAS;IAAA,WAChDI;MAAA,sEAA0DC;QAAG,IAAI,EAAC,oCAAoC;QAAA;QAAY;MAAK,EAEvHA;MAAU,UAAU,EAAC,OAAO;MAAC,GAAG,EAAGO,QAAU;MAAA,UAAEE;MAAmB;IAC5D;AAEZ;;AAGA;;AAEA,SAASJ,cAAc,CAACQ,GAAG,EAAE;EAC3B,OAAOC,IAAI,CAACC,SAAS,CAACD,IAAI,CAACC,SAAS,CAACF,GAAG,CAAC,CAAC,CAACG,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;AACxF;;ACjDO,SAASC,UAAU,CAACC,OAAO,GAAG,EAAE,EAAE;EAEvC,MAAMC,OAAO,GAAGC,wBAAI,EAAE;EAEtB,MAAM;IACJC,QAAQ,GAAG;GACZ,GAAGH,OAAO;EAEX,IAAII,QAAQ,GAAG,IAAIC,iBAAW,EAAE,CAACC,EAAE,CAACC,aAAI,EAAE,CAAC;EAC3C,IAAIC,OAAO,GAAG,IAAIH,iBAAW,EAAE,CAACC,EAAE,CAACG,iBAAW,CAACD,OAAO,CAACF,EAAE,CAAC,CAAC,CAAC,CAAC;EAE7D,MAAMI,eAAe,GAAGC,WAAM,CAACC,wBAAe,EAAE,CAAC;EAEjD,SAASC,WAAW,CAACC,GAAG,EAAEC,UAAU,GAAG,EAAE,EAAE;IACzC,OAAON,iBAAW,CAACO,MAAM,CAAC;MACxBF,GAAG;MACHC,UAAU,EAAE,CACVE,qBAAU,EACVb,QAAQ,EACRI,OAAO,EACPE,eAAe,EACfQ,eAAU,EAAE,EACZ,GAAGH,UAAU;KAEhB,CAAC;;EAGJ,SAASI,UAAU,CAAChB,QAAQ,EAAE;IAE5B,MAAMiB,cAAc,GAAGC,eAAU,CAACD,cAAc,CAACd,EAAE,CAACgB,MAAM,IAAI;MAC5D,IAAIA,MAAM,CAACC,UAAU,EAAE;QACrBtB,OAAO,CAACuB,IAAI,CAAC,SAAS,EAAE;UACtBC,KAAK,EAAEH,MAAM,CAACI,IAAI,CAACC,KAAK,CAACb,GAAG,CAACc,QAAQ;SACtC,CAAC;;KAEL,CAAC;IAEF,MAAMC,QAAQ,GAAGR,eAAU,CAACQ,QAAQ,CAACvB,EAAE,CAAC,CAACH,QAAQ,CAAC;IAElD,MAAMuB,MAAI,GAAG,IAAIL,eAAU,CAAC;MAC1BM,KAAK,EAAEd,WAAW,CAAC,EAAE,EAAE,CAAEO,cAAc,EAAES,QAAQ,CAAE;KACpD,CAAC;IAEFH,MAAI,CAACI,QAAQ,GAAG,UAASL,KAAK,EAAE;MAC9B,IAAI,CAACM,QAAQ,CAAClB,WAAW,CAACY,KAAK,EAAE,CAAEL,cAAc,EAAES,QAAQ,CAAE,CAAC,CAAC;KAChE;IAED,OAAOH,MAAI;;EAGb,MAAMA,MAAI,GAAGP,UAAU,CAAChB,QAAQ,CAAC;EAEjC,IAAI,CAAC2B,QAAQ,GAAG,UAASL,KAAK,EAAE;IAC9BC,MAAI,CAACI,QAAQ,CAACL,KAAK,CAAC;GACrB;EAED,IAAI,CAACO,QAAQ,GAAG,YAAW;IACzB,OAAON,MAAI,CAACC,KAAK,CAACb,GAAG,CAACc,QAAQ,EAAE;GACjC;EAED,IAAI,CAACK,EAAE,GAAGhC,OAAO,CAACgC,EAAE;EACpB,IAAI,CAACC,GAAG,GAAGjC,OAAO,CAACiC,GAAG;EACtB,IAAI,CAACV,IAAI,GAAGvB,OAAO,CAACuB,IAAI;EAExB,IAAI,CAACW,QAAQ,GAAG,UAASC,SAAS,EAAE;IAClCA,SAAS,CAACC,WAAW,CAACX,MAAI,CAACY,GAAG,CAAC;GAChC;EAED,IAAI,CAACC,OAAO,GAAG,YAAW;IACxB,IAAIb,MAAI,CAACY,GAAG,CAACE,UAAU,EAAE;MACvBd,MAAI,CAACY,GAAG,CAACE,UAAU,CAACC,WAAW,CAACf,MAAI,CAACY,GAAG,CAAC;;IAG3CZ,MAAI,CAACa,OAAO,EAAE;GACf;AACH;;ACpFO,SAASG,OAAO,CAACvE,KAAK,EAAE;EAE7B,MAAMwE,QAAQ,GACZC,KAAK,CAACC,OAAO,CAAC1E,KAAK,CAACa,QAAQ,CAAC,GACzBb,KAAK,CAACa,QAAQ,GAChB,CAAEb,KAAK,CAACa,QAAQ,CAAE;EAEtB,MAAM;IACJ8D,WAAW;IACX9D;GACD,GAAG2D,QAAQ,CAACI,MAAM,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;IAChC,MAAMC,MAAM,GACVD,KAAK,CAACE,IAAI,KAAKT,OAAO,CAACU,UAAU,GAC7BJ,CAAC,CAACF,WAAW,GACbE,CAAC,CAAChE,QAAQ;IAEhBkE,MAAM,CAACG,IAAI,CAACJ,KAAK,CAAC;IAElB,OAAOD,CAAC;GACT,EAAE;IAAEF,WAAW,EAAE,EAAE;IAAE9D,QAAQ,EAAE;GAAI,CAAC;EAErC,OACEH;IAAK,KAAK,EAAC,iBAAiB;IAAA,WAC1BA;MAAI,KAAK,EAAC,QAAQ;MAAA,WAAGV,KAAK,CAACY,IAAI,OAAK+D,WAAW,CAACQ,MAAM,GAAGxE;QAAM,KAAK,EAAC,cAAc;QAAA,UAAGgE;QAAoB,GAAG,IAAI;MAAO,EACxHhE;MAAK,KAAK,EAAC,MAAM;MAAA,UACbE;MACE;IACF;AAEV;AAEA0D,OAAO,CAACU,UAAU,GAAG,UAASjF,KAAK,EAAE;EACnC,OAAOA,KAAK,CAACa,QAAQ;AACvB,CAAC;;ACVM,SAASuE,cAAc,CAACpF,KAAK,EAAE;EAEpC,MAAM;IACJqF,OAAO,EAAEC,aAAa,GAAG,EAAE;IAC3BC,MAAM,EAAEC,YAAY,GAAG,EAAE;IACzBnC,IAAI;IACJoC,QAAQ,EAAEC,cAAc,GAAG;GAC5B,GAAG1F,KAAK;EAET,MAAM;IACJ2F,OAAO,EAAEC,cAAc,GAAG;GAC3B,GAAGN,aAAa;EAEjB,MAAM;IACJO,qBAAqB,GAAG;GACzB,GAAGL,YAAY;EAEhB,MAAMM,mBAAmB,GAAG3E,YAAM,EAAE;EACpC,MAAM4E,kBAAkB,GAAG5E,YAAM,EAAE;EACnC,MAAM6E,gBAAgB,GAAG7E,YAAM,EAAE;EACjC,MAAM8E,gBAAgB,GAAG9E,YAAM,EAAE;EACjC,MAAM+E,kBAAkB,GAAG/E,YAAM,EAAE;EACnC,MAAMgF,2BAA2B,GAAGhF,YAAM,EAAE;EAE5C,MAAMiF,UAAU,GAAGjF,YAAM,EAAE;EAC3B,MAAMkF,aAAa,GAAGlF,YAAM,EAAE;EAC9B,MAAMmF,OAAO,GAAGnF,YAAM,EAAE;EACxB,MAAMoF,aAAa,GAAGpF,YAAM,EAAE;EAC9B,MAAMqF,aAAa,GAAGrF,YAAM,EAAE;EAC9B,MAAMsF,kBAAkB,GAAGtF,YAAM,EAAE;EAEnC,MAAM,CAAEuF,SAAS,EAAEC,YAAY,CAAE,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEnD,MAAM,CAAEC,WAAW,CAAE,GAAGD,cAAQ,CAAC5G,KAAK,CAACiB,IAAI,IAAI,EAAE,CAAC;EAClD,MAAM,CAAE6F,aAAa,EAAEC,gBAAgB,CAAE,GAAGH,cAAQ,CAAC5G,KAAK,CAACe,MAAM,CAAC;EAElE,MAAM,CAAEE,IAAI,EAAE+F,OAAO,CAAE,GAAGJ,cAAQ,CAAC5G,KAAK,CAACiB,IAAI,IAAI,EAAE,CAAC;EACpD,MAAM,CAAEF,MAAM,EAAEkG,SAAS,CAAE,GAAGL,cAAQ,CAAC5G,KAAK,CAACe,MAAM,CAAC;EAEpD,MAAM,CAAEmG,UAAU,EAAEC,aAAa,CAAE,GAAGP,cAAQ,CAAC,EAAE,CAAC;;;EAGlD3G,eAAS,CAAC,MAAM;IACdD,KAAK,CAACoH,MAAM,CAAC;MACXC,mBAAmB,EAAGC,IAAI,IAAKf,aAAa,CAACjF,OAAO,CAAC0C,QAAQ,CAACsD,IAAI,CAAC;MACnEC,qBAAqB,EAAGD,IAAI,IAAKjB,aAAa,CAAC/E,OAAO,CAAC0C,QAAQ,CAACsD,IAAI,CAAC;MACrEE,mBAAmB,EAAGF,IAAI,IAAKhB,OAAO,CAAChF,OAAO,CAAC0C,QAAQ,CAACsD,IAAI,CAAC;MAC7DG,sBAAsB,EAAGH,IAAI,IAAKlB,UAAU,CAAC9E,OAAO,CAAC0C,QAAQ,CAACsD,IAAI,CAAC;MACnEI,8BAA8B,EAAGJ,IAAI,IAAKb,kBAAkB,CAACnF,OAAO,CAAC0C,QAAQ,CAACsD,IAAI,CAAC;MACnFK,qBAAqB,EAAGL,IAAI,IAAKd,aAAa,CAAClF,OAAO,CAAC0C,QAAQ,CAACsD,IAAI,CAAC;MACrEM,GAAG,EAAE,CAAChH,IAAI,EAAEiH,MAAM,KAAKxB,aAAa,CAAC/E,OAAO,CAACsG,GAAG,CAAChH,IAAI,EAAEiH,MAAM,CAAC;MAC9DC,aAAa,EAAE,MAAMvB,aAAa,CAACjF,OAAO;MAC1CyG,SAAS,EAAE,MAAM1B,aAAa,CAAC/E,OAAO;MACtC0G,OAAO,EAAE,MAAM1B,OAAO,CAAChF,OAAO;MAC9B2G,aAAa,EAAE,MAAMzB,aAAa,CAAClF,OAAO;MAC1C4G,SAAS,EAAE,MAAM7B,aAAa,CAAC/E,OAAO,CAAC4G,SAAS,EAAE;MAClDjB,SAAS,EAAEF,gBAAgB;MAC3BoB,UAAU,EAAE,MAAM9B,aAAa,CAAC/E,OAAO,CAAC6G,UAAU;KACnD,CAAC;GACH,CAAC;EAEFlI,eAAS,CAAC,MAAM;IACd8G,gBAAgB,CAAC/G,KAAK,CAACe,MAAM,IAAI,EAAE,CAAC;GACrC,EAAE,CAAEf,KAAK,CAACe,MAAM,CAAE,CAAC;EAEpBd,eAAS,CAAC,MAAM;IACd,MAAMmI,UAAU,GAAG7B,aAAa,CAACjF,OAAO,GAAG,IAAIM,UAAU,CAAC;MACxD0B,KAAK,EAAE+E,MAAM,CAACpH,IAAI;KACnB,CAAC;IAEF,MAAMqH,UAAU,GAAG9B,aAAa,CAAClF,OAAO,GAAG,IAAIM,UAAU,CAAC;MACxDI,QAAQ,EAAE,IAAI;MACdsB,KAAK,EAAE+E,MAAM,CAACnB,UAAU;KACzB,CAAC;IAEF,MAAMqB,IAAI,GAAGjC,OAAO,CAAChF,OAAO,GAAG,IAAIkH,iBAAI,EAAE;IACzC,MAAMC,UAAU,GAAGpC,aAAa,CAAC/E,OAAO,GAAG,IAAIoH,uBAAU,CAAC;MACxDC,QAAQ,EAAE;QACRC,OAAO,EAAE;OACV;MACDC,OAAO,EAAE;QACPC,MAAM,EAAEhD,mBAAmB,CAACxE;OAC7B;MACDyH,eAAe,EAAE;QACfD,MAAM,EAAE,CAACjD,qBAAqB,IAAIM,2BAA2B,CAAC7E;OAC/D;MACDmE,QAAQ,EAAEC;KACX,CAAC;IAEFU,UAAU,CAAC9E,OAAO,GAAGmH,UAAU,CAACb,GAAG,CAAC,SAAS,CAAC;IAC9CnB,kBAAkB,CAACnF,OAAO,GAAGmH,UAAU,CAACb,GAAG,CAAC,iBAAiB,CAAC;IAE9Da,UAAU,CAAC3E,EAAE,CAAC,SAAS,EAAE,MAAM;MAC7BmD,SAAS,CAACwB,UAAU,CAACP,SAAS,EAAE,CAAC;KAClC,CAAC;IAEFO,UAAU,CAAC3E,EAAE,CAAC,qBAAqB,EAAE,MAAM;;MAGzCT,IAAI,CAAC,yBAAyB,CAAC;KAChC,CAAC;IAEFkF,IAAI,CAACzE,EAAE,CAAC,SAAS,EAAE,MAAM;MACvBqD,aAAa,CAACoB,IAAI,CAACS,cAAc,EAAE,CAAC;KACrC,CAAC;IAEFZ,UAAU,CAACtE,EAAE,CAAC,SAAS,EAAE3D,KAAK,IAAI;MAChC,IAAI;QACF6G,OAAO,CAACvF,IAAI,CAACwH,KAAK,CAAC9I,KAAK,CAACmD,KAAK,CAAC,CAAC;OACjC,CAAC,OAAO4F,KAAK,EAAE;;QAGd7F,IAAI,CAAC,+BAA+B,EAAE6F,KAAK,CAAC;;KAE/C,CAAC;IAEF,MAAMC,aAAa,GAAGnD,gBAAgB,CAAC1E,OAAO;IAC9C,MAAM8H,eAAe,GAAGrD,kBAAkB,CAACzE,OAAO;IAClD,MAAM+H,aAAa,GAAGpD,gBAAgB,CAAC3E,OAAO;IAC9C,MAAMgI,eAAe,GAAGpD,kBAAkB,CAAC5E,OAAO;IAElD8G,UAAU,CAACpE,QAAQ,CAACqF,aAAa,CAAC;IAClCf,UAAU,CAACtE,QAAQ,CAACsF,eAAe,CAAC;IACpCf,IAAI,CAACvE,QAAQ,CAACmF,aAAa,CAAC;IAC5BV,UAAU,CAACzE,QAAQ,CAACoF,eAAe,CAAC;IAEpC,OAAO,MAAM;MACXhB,UAAU,CAAChE,OAAO,EAAE;MACpBkE,UAAU,CAAClE,OAAO,EAAE;MACpBmE,IAAI,CAACnE,OAAO,EAAE;MACdqE,UAAU,CAACrE,OAAO,EAAE;KACrB;GACF,EAAE,EAAE,CAAC;EAENnE,eAAS,CAAC,MAAM;IACdsG,aAAa,CAACjF,OAAO,CAACqC,QAAQ,CAAC0E,MAAM,CAACxB,WAAW,CAAC,CAAC;GACpD,EAAE,CAAEA,WAAW,CAAE,CAAC;EAEnB5G,eAAS,CAAC,MAAM;IACd6G,aAAa,IAAIT,aAAa,CAAC/E,OAAO,CAACiI,YAAY,CAACzC,aAAa,CAAC;GACnE,EAAE,CAAEA,aAAa,CAAE,CAAC;EAErB7G,eAAS,CAAC,MAAM;IACdc,MAAM,IAAIuF,OAAO,CAAChF,OAAO,CAACiI,YAAY,CAACxI,MAAM,EAAEE,IAAI,CAAC;GACrD,EAAE,CAAEF,MAAM,EAAEE,IAAI,CAAE,CAAC;EAEpBhB,eAAS,CAAC,MAAM;IACduG,aAAa,CAAClF,OAAO,CAACqC,QAAQ,CAAC0E,MAAM,CAACnB,UAAU,CAAC,CAAC;GACnD,EAAE,CAAEA,UAAU,CAAE,CAAC;EAElBjH,eAAS,CAAC,MAAM;IACdD,KAAK,CAACwJ,cAAc,CAAC;MACnBzI,MAAM;MACNE;KACD,CAAC;GACH,EAAE,CAAEF,MAAM,EAAEE,IAAI,CAAE,CAAC;EAEpB,MAAMwI,cAAc,GAAGC,iBAAW,CAAC,MAAM;IAEvCC,4BAAQ,CAAClI,IAAI,CAACC,SAAS,CAACX,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC;GACvE,EAAE,CAAEA,MAAM,CAAE,CAAC;EAEd,MAAM6I,cAAc,GAAGF,iBAAW,CAAC,MAAM;IACvC/C,YAAY,CAAC,KAAK,CAAC;GACpB,EAAE,EAAE,CAAC;EAEN,MAAMkD,cAAc,GAAGH,iBAAW,CAAC,MAAM;IACvC/C,YAAY,CAAC,IAAI,CAAC;GACnB,EAAE,EAAE,CAAC;EAEN,OACEjG;IAAK,KAAK,EAAGoJ,8BAAU,CACrB,eAAe,EACf,cAAc,EACd;MAAE,6BAA6B,EAAEjE;KAAuB,CAAG;IAAA,WAC3DlF;MAAK,KAAK,EAAC,gBAAgB;MAAA,UACvB+F,SAAS,GAAG/F,eAAC,UAAU;QAAC,MAAM,EAAGI,MAAQ;QAAC,IAAI,EAAGE,IAAM;QAAC,OAAO,EAAG2I;QAAmB,GAAG;MACtF,EACNjJ;MAAK,KAAK,EAAC,2BAA2B;MAAC,GAAG,EAAGmF;MAAwB,EACrEpF;MAAK,KAAK,EAAC,cAAc;MAAA,WAEvBA,gBAAC,OAAO;QAAC,IAAI,EAAC,iBAAiB;QAAA,WAG3BkF,cAAc,IAAIjF,eAAC,OAAO,CAAC,UAAU;UAAA,UACnCA;YACE,KAAK,EAAC,gBAAgB;YACtB,KAAK,EAAC,0BAA0B;YAChC,OAAO,EAAG8I,cAAgB;YAAA;;UAET,EAIrB7D,cAAc,IAAIjF,eAAC,OAAO,CAAC,UAAU;UAAA,UACnCA;YACE,KAAK,EAAC,gBAAgB;YACtB,OAAO,EAAGkJ,cAAgB;YAAA;;UAET,EAGvBlJ;UAAK,GAAG,EAAGoF,kBAAoB;UAAC,KAAK,EAAC;UAA+B;QAC7D,EACVpF,eAAC,OAAO;QAAC,IAAI,EAAC,cAAc;QAAA,UAC1BA;UAAK,GAAG,EAAGqF,gBAAkB;UAAC,KAAK,EAAC;;QAC5B,EACVrF,eAAC,OAAO;QAAC,IAAI,EAAC,mBAAmB;QAAA,UAC/BA;UAAK,GAAG,EAAGsF,gBAAkB;UAAC,KAAK,EAAC;;QAC5B,EACVtF,eAAC,OAAO;QAAC,IAAI,EAAC,oBAAoB;QAAA,UAChCA;UAAK,GAAG,EAAGuF,kBAAoB;UAAC,KAAK,EAAC;;QAC9B;MACN,EACNvF;MAAK,KAAK,EAAC,8BAA8B;MAAC,GAAG,EAAGwF;MAAgC;IAC5E;AAEV;;AAGA;;AAEA,SAASkC,MAAM,CAAC7G,GAAG,EAAE;EACnB,OAAOC,IAAI,CAACC,SAAS,CAACF,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;AACxC;;ACjOe,SAASuI,UAAU,CAAClI,OAAO,EAAE;EAE1C,MAAM;IACJoC,SAAS,EAAE6E,MAAM;IACjB/H,MAAM;IACNE,IAAI;IACJ,GAAG+I;GACJ,GAAGnI,OAAO;EAEX,MAAMC,OAAO,GAAGC,wBAAI,EAAE;EAEtB,IAAIyB,KAAK,GAAG;IAAEvC,IAAI;IAAEF;GAAQ;EAC5B,IAAIkJ,GAAG;EAEP,MAAMhG,SAAS,GAAG1D,QAAQ,CAAC2J,aAAa,CAAC,KAAK,CAAC;EAE/CjG,SAAS,CAACkG,SAAS,CAACC,GAAG,CAAC,gBAAgB,CAAC;EAEzC,IAAItB,MAAM,EAAE;IACVA,MAAM,CAAC5E,WAAW,CAACD,SAAS,CAAC;;EAG/B,MAAMoG,UAAU,GAAGC,4BAAQ,CAAC,kBAAkB,EAAE,UAASC,KAAK,EAAE;IAC9D,MAAMC,IAAI,GAAGD,KAAK,CAAC,CAAC,CAAC;IAErB,IAAIC,IAAI,EAAE;MACR,IAAI;QACFP,GAAG,CAAChD,SAAS,CAACxF,IAAI,CAACwH,KAAK,CAACuB,IAAI,CAACC,QAAQ,CAAC,CAAC;OACzC,CAAC,OAAOC,GAAG,EAAE;;;;;GAKjB,CAAC;EAEF,MAAMC,OAAO,GAAG,UAASC,EAAE,EAAE;IAC3B,OAAO,UAAS,GAAGC,IAAI,EAAE;MACvB,IAAI,CAACZ,GAAG,EAAE;QACR,MAAM,IAAIa,KAAK,CAAC,gCAAgC,CAAC;;MAGnD,OAAOF,EAAE,CAAC,GAAGC,IAAI,CAAC;KACnB;GACF;EAED,MAAMzD,MAAM,GAAG,UAAS2D,IAAI,EAAE;IAC5Bd,GAAG,GAAGc,IAAI;IACVjJ,OAAO,CAACuB,IAAI,CAAC,qBAAqB,CAAC;GACpC;EAEDY,SAAS,CAACzD,gBAAgB,CAAC,UAAU,EAAE6J,UAAU,CAAC;EAElDW,aAAM,CACJrK,eAAC,cAAc;IACb,IAAI,EAAGM,IAAM;IACb,IAAI,EAAGa,OAAO,CAACuB,IAAM;IACrB,MAAM,EAAG+D,MAAQ;IACjB,cAAc,EAAI6D,MAAM,IAAKzH,KAAK,GAAGyH,MAAQ;IAC7C,MAAM,EAAGlK,MAAQ;IAAA,GACZiJ;IACL,EACF/F,SAAS,CACV;EAED,IAAI,CAACH,EAAE,GAAGhC,OAAO,CAACgC,EAAE;EACpB,IAAI,CAACC,GAAG,GAAGjC,OAAO,CAACiC,GAAG;EAEtB,IAAI,CAACV,IAAI,GAAGvB,OAAO,CAACuB,IAAI;EAExB,IAAI,CAACS,EAAE,CAAC,SAAS,EAAE,YAAW;IAC5BkH,aAAM,CAAC,IAAI,EAAE/G,SAAS,CAAC;GACxB,CAAC;EAEF,IAAI,CAACH,EAAE,CAAC,SAAS,EAAE,YAAW;IAC5BgF,MAAM,CAACxE,WAAW,CAACL,SAAS,CAAC;GAC9B,CAAC;EAEF,IAAI,CAACiH,QAAQ,GAAG,YAAW;IACzB,OAAO1H,KAAK;GACb;EAED,IAAI,CAAC0E,SAAS,GAAGyC,OAAO,CAAC,MAAMV,GAAG,CAAC/B,SAAS,EAAE,CAAC;EAE/C,IAAI,CAACjB,SAAS,GAAG0D,OAAO,CAAE5J,MAAM,IAAKkJ,GAAG,CAAChD,SAAS,CAAClG,MAAM,CAAC,CAAC;EAE3D,IAAI,CAACoH,UAAU,GAAGwC,OAAO,CAAC,MAAMV,GAAG,CAAC9B,UAAU,EAAE,CAAC;EAEjD,IAAI,CAACP,GAAG,GAAG+C,OAAO,CAAC,CAAC/J,IAAI,EAAEiH,MAAM,KAAKoC,GAAG,CAACrC,GAAG,CAAChH,IAAI,EAAEiH,MAAM,CAAC,CAAC;EAE3D,IAAI,CAACC,aAAa,GAAG6C,OAAO,CAAC,MAAMV,GAAG,CAACnC,aAAa,EAAE,CAAC;EAEvD,IAAI,CAACC,SAAS,GAAG4C,OAAO,CAAC,MAAMV,GAAG,CAAClC,SAAS,EAAE,CAAC;EAE/C,IAAI,CAACC,OAAO,GAAG2C,OAAO,CAAC,CAAC/J,IAAI,EAAEiH,MAAM,KAAKoC,GAAG,CAACjC,OAAO,CAACpH,IAAI,EAAEiH,MAAM,CAAC,CAAC;EAEnE,IAAI,CAACI,aAAa,GAAG0C,OAAO,CAAC,MAAMV,GAAG,CAAChC,aAAa,EAAE,CAAC;EAEvD,IAAI,CAAC7D,OAAO,GAAG,YAAW;IACxB,IAAI,CAACf,IAAI,CAAC,SAAS,CAAC;GACrB;EAED,IAAI,CAACkE,qBAAqB,GAAGoD,OAAO,CAAErD,IAAI,IAAK2C,GAAG,CAAC1C,qBAAqB,CAACD,IAAI,CAAC,CAAC;EAE/E,IAAI,CAAC6D,sBAAsB,GAAGR,OAAO,CAAErD,IAAI,IAAK2C,GAAG,CAACzC,mBAAmB,CAACF,IAAI,CAAC,CAAC;EAE9E,IAAI,CAACD,mBAAmB,GAAGsD,OAAO,CAAErD,IAAI,IAAK2C,GAAG,CAAC5C,mBAAmB,CAACC,IAAI,CAAC,CAAC;EAE3E,IAAI,CAACK,qBAAqB,GAAGgD,OAAO,CAAErD,IAAI,IAAK2C,GAAG,CAACtC,qBAAqB,CAACL,IAAI,CAAC,CAAC;EAE/E,IAAI,CAACG,sBAAsB,GAAGkD,OAAO,CAAErD,IAAI,IAAK2C,GAAG,CAACxC,sBAAsB,CAACH,IAAI,CAAC,CAAC;EAEjF,IAAI,CAACI,8BAA8B,GAAGiD,OAAO,CAAErD,IAAI,IAAK2C,GAAG,CAACvC,8BAA8B,CAACJ,IAAI,CAAC,CAAC;AACnG;;;;"}

package/dist/index.es.js CHANGED Viewed

@@ -10,7 +10,8 @@ import { jsxs, jsx } from 'preact/jsx-runtime';
 import { basicSetup } from 'codemirror';
 import { EditorView } from '@codemirror/view';
 import { Compartment, EditorState } from '@codemirror/state';
-import { json } from '@codemirror/lang-json';
+import { linter, lintGutter } from '@codemirror/lint';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
 function Modal(props) {
   useEffect(() => {
@@ -20,7 +21,6 @@ function Modal(props) {
         props.onClose();
       }
     }
     document.addEventListener('keydown', handleKey);
     return () => {
       document.removeEventListener('keydown', handleKey);
@@ -99,7 +99,9 @@ function EmbedModal(props) {
       children: snippet
     })]
   });
-} // helpers ///////////
+}
+// helpers ///////////
 function serializeValue(obj) {
   return JSON.stringify(JSON.stringify(obj)).replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -112,14 +114,13 @@ function JSONEditor(options = {}) {
   } = options;
   let language = new Compartment().of(json());
   let tabSize = new Compartment().of(EditorState.tabSize.of(2));
+  const linterExtension = linter(jsonParseLinter());
   function createState(doc, extensions = []) {
     return EditorState.create({
       doc,
-      extensions: [basicSetup, language, tabSize, ...extensions]
+      extensions: [basicSetup, language, tabSize, linterExtension, lintGutter(), ...extensions]
     });
   }
   function createView(readonly) {
     const updateListener = EditorView.updateListener.of(update => {
       if (update.docChanged) {
@@ -132,36 +133,28 @@ function JSONEditor(options = {}) {
     const view = new EditorView({
       state: createState('', [updateListener, editable])
     });
     view.setValue = function (value) {
       this.setState(createState(value, [updateListener, editable]));
     };
     return view;
   }
   const view = createView(readonly);
   this.setValue = function (value) {
     view.setValue(value);
   };
   this.getValue = function () {
     return view.state.doc.toString();
   };
   this.on = emitter.on;
   this.off = emitter.off;
+  this.emit = emitter.emit;
   this.attachTo = function (container) {
     container.appendChild(view.dom);
   };
   this.destroy = function () {
     if (view.dom.parentNode) {
       view.dom.parentNode.removeChild(view.dom);
     }
     view.destroy();
   };
 }
@@ -193,7 +186,6 @@ function Section(props) {
     })]
   });
 }
 Section.HeaderItem = function (props) {
   return props.children;
 };
@@ -228,8 +220,9 @@ function PlaygroundRoot(props) {
   const [initialSchema, setInitialSchema] = useState(props.schema);
   const [data, setData] = useState(props.data || {});
   const [schema, setSchema] = useState(props.schema);
-  const [resultData, setResultData] = useState(props.data || {}); // pipe to playground API
+  const [resultData, setResultData] = useState({});
+  // pipe to playground API
   useEffect(() => {
     props.onInit({
       attachDataContainer: node => dataEditorRef.current.attachTo(node),
@@ -239,7 +232,10 @@ function PlaygroundRoot(props) {
       attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
       attachResultContainer: node => resultViewRef.current.attachTo(node),
       get: (name, strict) => formEditorRef.current.get(name, strict),
+      getDataEditor: () => dataEditorRef.current,
       getEditor: () => formEditorRef.current,
+      getForm: () => formRef.current,
+      getResultView: () => resultViewRef.current,
       getSchema: () => formEditorRef.current.getSchema(),
       setSchema: setInitialSchema,
       saveSchema: () => formEditorRef.current.saveSchema()
@@ -278,13 +274,15 @@ function PlaygroundRoot(props) {
       // notifiy interested parties after render
       emit('formPlayground.rendered');
     });
-    form.on('changed', event => {
-      setResultData(event.data);
+    form.on('changed', () => {
+      setResultData(form._getSubmitData());
     });
     dataEditor.on('changed', event => {
       try {
         setData(JSON.parse(event.value));
-      } catch (err) {// TODO(nikku): indicate JSON parse error
+      } catch (error) {
+        // notify interested about input data error
+        emit('formPlayground.inputDataError', error);
       }
     });
     const formContainer = formContainerRef.current;
@@ -388,7 +386,9 @@ function PlaygroundRoot(props) {
       ref: propertiesPanelContainerRef
     })]
   });
-} // helpers ///////////////
+}
+// helpers ///////////////
 function toJSON(obj) {
   return JSON.stringify(obj, null, '  ');
@@ -409,37 +409,32 @@ function Playground(options) {
   let ref;
   const container = document.createElement('div');
   container.classList.add('fjs-pgl-parent');
   if (parent) {
     parent.appendChild(container);
   }
   const handleDrop = fileDrop('Drop a form file', function (files) {
     const file = files[0];
     if (file) {
       try {
         ref.setSchema(JSON.parse(file.contents));
-      } catch (err) {// TODO(nikku): indicate JSON parse error
+      } catch (err) {
+        // TODO(nikku): indicate JSON parse error
       }
     }
   });
   const withRef = function (fn) {
     return function (...args) {
       if (!ref) {
         throw new Error('Playground is not initialized.');
       }
       return fn(...args);
     };
   };
   const onInit = function (_ref) {
     ref = _ref;
     emitter.emit('formPlayground.init');
   };
   container.addEventListener('dragover', handleDrop);
   render(jsx(PlaygroundRoot, {
     data: data,
@@ -458,49 +453,26 @@ function Playground(options) {
   this.on('destroy', function () {
     parent.removeChild(container);
   });
   this.getState = function () {
     return state;
   };
-  this.getSchema = withRef(function () {
-    return ref.getSchema();
-  });
-  this.setSchema = withRef(function (schema) {
-    return ref.setSchema(schema);
-  });
-  this.saveSchema = withRef(function () {
-    return ref.saveSchema();
-  });
-  this.get = withRef(function (name, strict) {
-    return ref.get(name, strict);
-  });
-  this.getEditor = withRef(function () {
-    return ref.getEditor();
-  });
+  this.getSchema = withRef(() => ref.getSchema());
+  this.setSchema = withRef(schema => ref.setSchema(schema));
+  this.saveSchema = withRef(() => ref.saveSchema());
+  this.get = withRef((name, strict) => ref.get(name, strict));
+  this.getDataEditor = withRef(() => ref.getDataEditor());
+  this.getEditor = withRef(() => ref.getEditor());
+  this.getForm = withRef((name, strict) => ref.getForm(name, strict));
+  this.getResultView = withRef(() => ref.getResultView());
   this.destroy = function () {
     this.emit('destroy');
   };
-  this.attachEditorContainer = withRef(function (node) {
-    return ref.attachEditorContainer(node);
-  });
-  this.attachPreviewContainer = withRef(function (node) {
-    return ref.attachFormContainer(node);
-  });
-  this.attachDataContainer = withRef(function (node) {
-    return ref.attachDataContainer(node);
-  });
-  this.attachResultContainer = withRef(function (node) {
-    return ref.attachResultContainer(node);
-  });
-  this.attachPaletteContainer = withRef(function (node) {
-    return ref.attachPaletteContainer(node);
-  });
-  this.attachPropertiesPanelContainer = withRef(function (node) {
-    return ref.attachPropertiesPanelContainer(node);
-  });
+  this.attachEditorContainer = withRef(node => ref.attachEditorContainer(node));
+  this.attachPreviewContainer = withRef(node => ref.attachFormContainer(node));
+  this.attachDataContainer = withRef(node => ref.attachDataContainer(node));
+  this.attachResultContainer = withRef(node => ref.attachResultContainer(node));
+  this.attachPaletteContainer = withRef(node => ref.attachPaletteContainer(node));
+  this.attachPropertiesPanelContainer = withRef(node => ref.attachPropertiesPanelContainer(node));
 }
 export { Playground };