svelte-json-schema-form 0.0.1-alpha1

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/svelte-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-svelte-csf"
+  ],
+  framework: {
+    name: "@storybook/svelte-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/svelte";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 John Murphy-Teixidor
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "svelte-json-schema-form",
+  "private": false,
+  "version": "0.0.1-alpha1",
+  "type": "module",
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "main": "./src/exports.js",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-interactions": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-svelte-csf": "^4.1.1",
+    "@storybook/blocks": "^7.6.16",
+    "@storybook/svelte": "^7.6.16",
+    "@storybook/svelte-vite": "^7.6.16",
+    "@storybook/test": "^7.6.16",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@tsconfig/svelte": "^5.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.16",
+    "svelte": "^4.2.10",
+    "svelte-check": "^3.6.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "unplugin-icons": "^0.18.5",
+    "vite": "^5.1.0"
+  },
+  "dependencies": {
+    "json-form-core": "0.0.1-alpha1"
+  }
+}

package/src/Form.stories.svelte

@@ -0,0 +1,274 @@
+<script context="module">
+    import {
+        Template,
+        Story
+    } from "@storybook/addon-svelte-csf";
+
+    import {
+        Form
+    } from "./exports.js";
+
+    export const meta = {
+        title: "JSONSchemaForm/Form",
+        component: Form,
+        argTypes: {
+            store: {
+                control: {
+                    type: "object"
+                },
+                defaultValue: {
+                    value: undefined
+                }
+            },
+            schema: {
+                control: {
+                    type: "object"
+                },
+                defaultValue: {
+                    value: {}
+                }
+            },
+            value: {
+                control: {
+                    type: "object"
+                },
+                defaultValue: {
+                    value: undefined
+                }
+            },
+            extras: {
+                control: {
+                    type: "object"
+                },
+                defaultValue: {
+                    value: {}
+                }
+            }
+        }
+    }
+</script>
+
+<!-- More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args -->
+<Template let:args>
+    <Form {...args} />
+</Template>
+
+<!-- More on args: https://storybook.js.org/docs/svelte/writing-stories/args-->
+<Story
+    name="Primary"
+    args={{
+        "schema": {
+            "title": "Element",
+            "component": "objectInput",
+            "properties": {
+                "data": {
+                    "title": "Data",
+                    "component": "objectInput",
+                    "properties": {
+                        "title": {
+                            "title": "Title",
+                            "component": "textInput"
+                        },
+                        "url": {
+                            "title": "Image URL",
+                            "component": "textInput"
+                        }
+                    }
+                },
+                "visual": {
+                    "title": "Visual",
+                    "component": "arrayInput",
+                    "options": {
+                        "clone": true
+                    },
+                    "items": {
+                        "title": "Data",
+                        "component": "objectInput",
+                        "properties": {
+                            "f1": {
+                                "title": "Array Obj Field 1",
+                                "component": "textInput"
+                            },
+                            "f2": {
+                                "title": "Array Obj Field 2",
+                                "component": "textInput"
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "value": {
+            "visual":[
+                {
+                    "f2": "copied into the next item",
+                    "f1": "this field will be"
+                }
+            ],
+            "data": {
+                "url": "xxxxxx"
+            }
+        },
+        "extras": {
+            "_extras": {},
+            "_children": {
+                "visual": {
+                    "_extras": {},
+                    "_children": [
+                        {
+                            "_children": {
+                                "f1": {
+                                    "_extras": {"key": "val"}
+                                }
+                            }
+                        }
+                    ]
+                },
+                "data": {
+                    "_extras": {},
+                    "_children": {
+                        "url": {
+                            "_extras": {"key": "val"}
+                        }
+                    }
+                }
+            }
+        }
+    }}
+/>
+
+<Story
+        name="Biz Grid"
+        args={{
+        "schema": {
+            "component": "objectInput",
+            "properties": {
+                "visual": {
+                    "title": "Visual",
+                    "component": "objectInput",
+                    "properties": {
+                        "theme": {
+                            "title": "Theme",
+                            "component": "textInput"
+                        },
+                        "size": {
+                            "title": "Size",
+                            "component": "textInput"
+                        }
+                    }
+                },
+                "data": {
+                    "title": "Visual",
+                    "component": "arrayInput",
+                    "options": {
+                        "clone": true
+                    },
+                    "items": {
+                        "title": "Data",
+                        "component": "objectInput",
+                        "properties": {
+                            "automatic": {
+                                "title": "Automatic data?",
+                                "component": "booleanInput"
+                            },
+                            "symbol": {
+                                "title": "Symbol",
+                                "component": "textInput"
+                            },
+                            "name": {
+                                "title": "Name (override)",
+                                "component": "textInput"
+                            },
+                            "value": {
+                                "title": "Value (override)",
+                                "component": "textInput"
+                            },
+                            "net_change": {
+                                "title": "Net change (override)",
+                                "component": "textInput"
+                            },
+                            "pct_change": {
+                                "title": "Percent change (override)",
+                                "component": "textInput"
+                            },
+                            "color": {
+                                "title": "Color (override)",
+                                "component": "textInput"
+                            }
+                        }
+                    }
+                },
+
+            }
+        },
+        "value": {
+            "visual": {
+                "theme": "cnni_quest_means_business_2018",
+                "size": "fullscreen"
+            }
+            ,
+            "data": [
+                {
+                    "automatic": true,
+                    "symbol": "BTCUSD",
+                    "name": null
+                },
+                {
+                    "automatic": true,
+                    "symbol": "XRPUSD",
+                    "name": null
+                }
+            ]
+        },
+        "extras": {
+
+        }
+    }}
+/>
+
+<Story
+    name="Simple Object"
+    args={{
+        "schema": {
+            "title": "Data",
+            "component": "objectInput",
+            "properties": {
+                "title": {
+                    "title": "Title",
+                    "component": "textInput"
+                },
+                "url": {
+                    "title": "Image URL",
+                    "component": "textInput"
+                }
+            }
+        },
+        "value": {
+            "url": "URL goes here"
+        }
+    }}
+/>
+
+<Story
+    name="Scalar Value"
+    args={{
+        "schema": {
+            "title": "Title",
+            "component": "textInput"
+        },
+        "value": "URL goes here"
+    }}
+/>
+
+<Story
+    name="Button"
+    args={{
+    "schema": {
+        "component": "actionButton",
+        "label": "Title",
+        "action": "alert",
+        "args": "xx"
+    },
+    "value": "URL goes here"
+    }}
+/>

package/src/Form.svelte

@@ -0,0 +1,121 @@
+<script>
+    import {
+        onMount,
+        setContext,
+        createEventDispatcher
+    } from "svelte";
+    import { FormController } from "json-form-core";
+    import defaultContext from "./formContext.js";
+    import defaultComponents from "./formDefaultComponents.js";
+
+    export let context = defaultContext;
+
+    export let logger = undefined; // fallback logger if one is not supplied
+
+    export let store = undefined; // if undefined, a new one will be created
+    export let schema = undefined; // will be applied in store, if not undefined
+    export let value = undefined; // will be applied in store, if not undefined
+    export let extras = undefined; // will be applied in store, if not undefined
+    export let fragments = undefined; // will be applied in store, if not undefined
+    export let loadFragments = undefined; // async getter to load fragment configs as they are found
+
+    export let paths = {};
+
+    $: {
+        console.log("PATHS!", paths);
+    }
+
+    export let components = {}; // svelte input components
+
+    // TODO set in store, not here
+
+    const dispatch = createEventDispatcher();
+
+    export const formController = new FormController({
+        store, // if no store is set, it will be created
+        schema, // if schema is set, it will be set in the store
+        value, // if value is set, it will be set in the store
+        extras, // if extras are set, they will be set in the store
+        loadFragments,
+        paths: paths,
+        components: {
+            ...defaultComponents,
+            ...components
+        }
+    });
+
+    // dispatch all events from form controller
+    formController.allOn((eventName, ...eventArgs) => {
+        dispatch('event', {
+            type: eventName,
+            args: eventArgs
+        });
+    });
+
+    // set components in store when they change
+    $: {
+        formController.store.set(['components'], {
+            ...defaultComponents,
+            ...components
+        });
+    }
+
+    $: if(logger) {
+        formController.logger = logger;
+    }
+
+    // TODO remove this
+    $: {
+        console.log("STORE VALUE!", JSON.stringify(value));
+    }
+
+    // svelte-compatible read-only store for components
+    const componentsStore = {
+        subscribe: (callback) => formController.subscribeComponents(callback)
+    };
+
+
+
+    setContext(context, formController); // make form controller available to all children
+
+    /*
+    // schema, fragments, value
+    // TODO subscribe to store as well to set value
+    // TODO can this be simpler?
+    $: { // values changed
+        console.log("SETTING VALUE");
+        store.set(['value'], value);
+    }
+
+    $: { // schema changed
+        console.log("SETTING SCHEMA");
+        store.set(['schema'], schema ?? {});
+    }
+
+    $: { // fragments changed
+        store.set(['fragments'], fragments ?? {});
+    }
+     */
+
+    onMount(() => {
+        console.log("MOUNT", formController);
+
+        const unsubscribeValue = formController.subscribeValue((storeValue) => {
+            console.log("STORE VALUE", storeValue)
+            value = storeValue;
+        });
+
+        return () => {
+            unsubscribeValue();
+        }
+    });
+
+
+</script>
+
+<svelte:component
+    this={$componentsStore.wrapper}
+    formController={formController}
+    schemaPathParts={[]}
+    valuePathParts={[]}
+/>

package/src/components/FormActionButton.svelte

@@ -0,0 +1,22 @@
+<script>
+    export let components;
+    export let formController;
+    export let formNode;
+    export let valuePathParts;
+    export let schemaPathParts;
+
+    export let schema;
+    export let value = {};
+    export let overrides;
+
+    const handleButtonClick = () => {
+        const emitEventType = typeof schema.emit === 'object'
+            ? schema.emit?.type
+            : schema.emit; // just the event name
+        const emitEventArgs = schema.emit?.args ?? [];
+
+        formNode.emit(emitEventType, ...emitEventArgs);
+    }
+</script>
+
+<button on:click={handleButtonClick}>{schema?.label ?? ""}</button>

package/src/components/FormArrayInput.svelte

@@ -0,0 +1,92 @@
+<script>
+    export let components;
+    export let formController; // TODO remove
+    export let formNode;
+    export let valuePathParts;
+    export let schemaPathParts;
+
+    export let schema; // form schema
+    export let value = []; // values of items in array
+    export let extras = undefined; // extras only for the array element
+
+    // extras tree for children of the array
+    $: extrasChildrenStore = {
+        subscribe: (callback) => formNode.subscribeExtrasChildren(callback),
+        set: (extras) => {
+            formNode.extrasChildren = extras;
+        }
+    }
+
+    const addItem = () => {
+        const newItemIndex = value.length;
+
+        if(schema.options?.clone && value.length > 0) {
+            const cloneItemIndex = value.length - 1;
+            const newItemValue = structuredClone(formController.pathGetValue([...valuePathParts, cloneItemIndex]));
+            const newItemExtrasTree = structuredClone(formController.pathGetExtrasTree([...valuePathParts, cloneItemIndex]));
+
+            spliceItems(newItemIndex, 0, {value: newItemValue, extrasTree: newItemExtrasTree});
+        }
+        else
+            spliceItems(newItemIndex, 0, {value: undefined, extrasTree: {}});
+    }
+
+    const deleteItem = (valueIndex) => {
+        spliceItems(valueIndex, 1);
+    }
+
+    const moveItem = (itemIndex, newItemIndex) => {
+        // remove item from array
+        const movedItems = spliceItems(itemIndex, 1); // returns array of removed items (array of 1 item to be moved)
+
+        // splice item back into array at new position
+        spliceItems(newItemIndex, 0, ...movedItems);
+    }
+
+    const spliceItems = (start, deleteCount, ...insertItems) => {
+        const values = formController.pathGetValue(valuePathParts) ?? [];
+        const extrasTreeChildren = formController.pathGetExtrasChildren(valuePathParts) ?? [];
+
+        const newValues = [...values];
+        const newExtrasTreeChildren = [...extrasTreeChildren];
+
+        // add values and extras trees
+        const removedValues = newValues.splice(start, deleteCount, ...(insertItems.map(insertItem => insertItem.value)));
+        const removedExtrasTrees = newExtrasTreeChildren.splice(start, deleteCount, ...(insertItems.map(insertItem => insertItem.extrasTree)));
+
+        formController.pathSetValue(valuePathParts, newValues);
+        formController.pathSetExtrasChildren(valuePathParts, newExtrasTreeChildren);
+
+        // return items removed in splice
+        return removedValues.map((value, index) => {
+            return {
+                value,
+                extrasTree: removedExtrasTrees[index]
+            }
+        });
+    }
+</script>
+
+<!-- TODO allow overriding path parts -->
+{#if schema}
+    {#each value as itemValue, itemIndex (itemIndex)}
+        <svelte:component
+            this={components.wrapper}
+            value={value[itemIndex]}
+            formController={formController}
+            schemaPathParts={[...schemaPathParts, 'items']}
+            valuePathParts={[...valuePathParts, itemIndex]}
+        />
+        {#if itemIndex > 0}
+            <input type="button" on:click={() => moveItem(itemIndex, itemIndex-1)} value="Move Up" />
+        {/if}
+        {#if itemIndex < value.length - 1}
+            <input type="button" on:click={() => moveItem(itemIndex, itemIndex+1)} value="Move Down" />
+        {/if}
+        <input type="button" on:click={() => deleteItem(itemIndex)} value="Remove Item" />
+    {/each}
+
+    <hr />
+    <input type="button" on:click={addItem} value="Add Item" />
+{/if}
+

package/src/components/FormCheckboxInput.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let value = undefined;
+</script>
+
+<div style="border: 1px solid #ff0000; padding: 5px;">
+    <input type="checkbox" bind:checked={value} />
+</div>