svelte-json-schema-form 0.0.2 → 0.0.4-alpha1

package/README.md

@@ -1,47 +1,65 @@
-# Svelte + TS + Vite
+# Svelte library
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
 
-## Recommended IDE Setup
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+## Creating a project
 
-## Need an official Svelte framework?
+If you're seeing this, you've probably already done this step. Congrats!
 
-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.
+```sh
+# create a new project in the current directory
+npx sv create
 
-## Technical considerations
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
 
-**Why use this over SvelteKit?**
+```sh
+# recreate this project
+npx sv@0.14.1 create --template library --types jsdoc --add prettier eslint vitest="usages:unit,component" --install npm svelte-json-schema-form
+```
 
-- 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.
+## Developing
 
-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.
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-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.
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
 
-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.
+## Building
 
-**Why include `.vscode/extensions.json`?**
+To build your library:
 
-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.
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
 
-**Why enable `allowJs` in the TS template?**
+You can preview the production build with `npm run preview`.
 
-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.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
 
-**Why is HMR not preserving my local component state?**
+## Publishing
 
-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).
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
 
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+To publish your library to [npm](https://www.npmjs.com):
 
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
+```sh
+npm publish
 ```

package/{src → dist/components}/Form.stories.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script>
     import {
         Template,
         Story

package/dist/components/Form.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+export default Form;
+type Form = any;
+declare const Form: any;

package/{src → dist/components}/Form.svelte

@@ -1,32 +1,35 @@
 <script>
     import {
         onMount,
-        setContext,
-        createEventDispatcher
+        setContext
     } from "svelte";
     import { FormController } from "json-form-core";
     import defaultContext from "./formContext.js";
-    import defaultComponents from "./formDefaultComponents.js";
+    import defaultInputComponents from "./formDefaultInputComponents.js";
+
+    let {
+        context = defaultContext,
+        logger = undefined,
+        store = undefined,
+        schema = undefined,
+        extras = undefined,
+        fragments = undefined,
+        loadFragments = undefined,
+        paths = {},
+        components = {},
+        onevent = () => {}
+    } = $props();
+
+    let value = $state();
 
-    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 = {};
+    // svelte-compatible read-only store for components
+    const componentsStore = {
+        subscribe: (callback) => formController.subscribeComponents(callback)
+    };
 
-    export let components = {}; // svelte input components
+    const WrapperComponent = $derived($componentsStore?.wrapper);
 
     // 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
@@ -35,7 +38,7 @@
         loadFragments,
         paths: paths,
         components: {
-            ...defaultComponents,
+            ...defaultInputComponents,
             ...components
         },
         logger: logger
@@ -43,29 +46,25 @@
 
     // dispatch all events from form controller
     formController.allOn((eventName, ...eventArgs) => {
-        dispatch('event', {
+        onevent({
             type: eventName,
             args: eventArgs
         });
     });
 
     // set components in store when they change
-    $: {
+    $effect(() => {
         formController.store.set(['components'], {
-            ...defaultComponents,
+            ...defaultInputComponents,
             ...components
         });
-    }
-
-    $: if(logger) {
-        console.log("SETTING LOGGER!")
-        formController.logger = logger;
-    }
+    });
 
-    // svelte-compatible read-only store for components
-    const componentsStore = {
-        subscribe: (callback) => formController.subscribeComponents(callback)
-    };
+    $effect(() => {
+        if(logger) {
+            formController.logger = logger;
+        }
+    });
 
     setContext(context, formController); // make form controller available to all children
 
@@ -89,7 +88,6 @@
      */
 
     onMount(() => {
-        window.formController = formController;
         const unsubscribeValue = formController.subscribeValue((storeValue) => {
             value = storeValue;
         });
@@ -100,9 +98,10 @@
     });
 </script>
 
-<svelte:component
-    this={$componentsStore.wrapper}
-    formController={formController}
-    schemaPathParts={[]}
-    valuePathParts={[]}
-/>
+{#if WrapperComponent}
+    <WrapperComponent
+        formController={formController}
+        schemaPathParts={[]}
+        valuePathParts={[]}
+    />
+{/if}

package/dist/components/Form.svelte.d.ts

@@ -0,0 +1,35 @@
+export default Form;
+type Form = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+} & {
+    formController: FormController;
+};
+declare const Form: import("svelte").Component<{
+    context?: typeof defaultContext;
+    logger?: any;
+    store?: any;
+    schema?: any;
+    extras?: any;
+    fragments?: any;
+    loadFragments?: any;
+    paths?: Record<string, any>;
+    components?: Record<string, any>;
+    onevent?: Function;
+}, {
+    formController: FormController;
+}, "">;
+type $$ComponentProps = {
+    context?: typeof defaultContext;
+    logger?: any;
+    store?: any;
+    schema?: any;
+    extras?: any;
+    fragments?: any;
+    loadFragments?: any;
+    paths?: Record<string, any>;
+    components?: Record<string, any>;
+    onevent?: Function;
+};
+import defaultContext from "./formContext.js";
+import { FormController } from "json-form-core";

package/dist/components/formContext.d.ts

@@ -0,0 +1,2 @@
+export default context;
+declare const context: unique symbol;

package/dist/components/formDefaultInputComponents.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    export { FormInputWrapper as wrapper };
+    export { FormArrayInput as arrayInput };
+    export { FormObjectInput as objectInput };
+    export { FormTextInput as textInput };
+    export { FormCheckboxInput as booleanInput };
+    export { FormActionButton as actionButton };
+}
+export default _default;
+import FormInputWrapper from "./components/FormInputWrapper.svelte";
+import FormArrayInput from "./components/FormArrayInput.svelte";
+import FormObjectInput from "./components/FormObjectInput.svelte";
+import FormTextInput from "./components/FormTextInput.svelte";
+import FormCheckboxInput from "./components/FormCheckboxInput.svelte";
+import FormActionButton from "./components/FormActionButton.svelte";

package/{src/components → dist/components/inputs}/FormActionButton.svelte

@@ -1,13 +1,14 @@
 <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;
+    let {
+        components,
+        formController,
+        formNode,
+        valuePathParts,
+        schemaPathParts,
+        schema,
+        value = {},
+        overrides
+    } = $props();
 
     const handleButtonClick = () => {
         const emitEventType = typeof schema.emit === 'object'

package/dist/components/inputs/FormActionButton.svelte.d.ts

@@ -0,0 +1,25 @@
+export default FormActionButton;
+type FormActionButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormActionButton: import("svelte").Component<{
+    components: any;
+    formController: any;
+    formNode: any;
+    valuePathParts: any;
+    schemaPathParts: any;
+    schema: any;
+    value?: Record<string, any>;
+    overrides: any;
+}, {}, "">;
+type $$ComponentProps = {
+    components: any;
+    formController: any;
+    formNode: any;
+    valuePathParts: any;
+    schemaPathParts: any;
+    schema: any;
+    value?: Record<string, any>;
+    overrides: any;
+};

package/{src/components → dist/components/inputs}/FormArrayInput.svelte

@@ -1,21 +1,22 @@
 <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
+    let {
+        components,
+        formController,
+        formNode,
+        valuePathParts,
+        schemaPathParts,
+        schema,
+        value = [],
+        extras = undefined
+    } = $props();
 
     // extras tree for children of the array
-    $: extrasChildrenStore = {
+    let extrasChildrenStore = $derived({
         subscribe: (callback) => formNode.subscribeExtrasChildren(callback),
         set: (extras) => {
             formNode.extrasChildren = extras;
         }
-    }
+    })
 
     const addItem = () => {
         const newItemIndex = value.length;

package/dist/components/inputs/FormArrayInput.svelte.d.ts

@@ -0,0 +1,25 @@
+export default FormArrayInput;
+type FormArrayInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormArrayInput: import("svelte").Component<{
+    components: any;
+    formController: any;
+    formNode: any;
+    valuePathParts: any;
+    schemaPathParts: any;
+    schema: any;
+    value?: any[];
+    extras?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    components: any;
+    formController: any;
+    formNode: any;
+    valuePathParts: any;
+    schemaPathParts: any;
+    schema: any;
+    value?: any[];
+    extras?: any;
+};

package/{src/components → dist/components/inputs}/FormCheckboxInput.svelte

@@ -1,5 +1,5 @@
 <script>
-    export let value = undefined;
+    let { value = undefined } = $props();
 </script>
 
 <div style="border: 1px solid #ff0000; padding: 5px;">

package/dist/components/inputs/FormCheckboxInput.svelte.d.ts

@@ -0,0 +1,11 @@
+export default FormCheckboxInput;
+type FormCheckboxInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormCheckboxInput: import("svelte").Component<{
+    value?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    value?: any;
+};

package/{src/components → dist/components/inputs}/FormInputWrapper.svelte

@@ -1,14 +1,16 @@
 <script>
-    export let valuePathParts;
-    export let schemaPathParts;
-    export let formController;
+    let {
+        valuePathParts,
+        schemaPathParts,
+        formController
+    } = $props();
 
     // TODO add the ability to override the value path, or the ability to not save at all
-    let formNode;
-    let schemaStore;
-    let valueStore;
-    let extrasStore;
-    let components; // Svelte-specific
+    let formNode = $state(undefined);
+    let schemaStore = $state(undefined);
+    let valueStore = $state(undefined);
+    let extrasStore = $state(undefined);
+    let components = $state(undefined); // Svelte-specific
 
     const resetFormNode = (valuePathParts, schemaPathParts) => {
         console.log("RESET INPUT WRAPPER", valuePathParts, schemaPathParts);
@@ -48,11 +50,13 @@
          */
     }
 
-    $: resetFormNode(valuePathParts, schemaPathParts);
+    $effect(() => {
+        resetFormNode(valuePathParts, schemaPathParts);
+    });
 
-    $: component = (components && $schemaStore && components[$schemaStore.component])
+    let component = $derived((components && $schemaStore && components[$schemaStore.component])
         ? components[$schemaStore.component]
-        : undefined;
+        : undefined);
 </script>
 
 {#if $schemaStore}

package/dist/components/inputs/FormInputWrapper.svelte.d.ts

@@ -0,0 +1,15 @@
+export default FormInputWrapper;
+type FormInputWrapper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormInputWrapper: import("svelte").Component<{
+    valuePathParts: any;
+    schemaPathParts: any;
+    formController: any;
+}, {}, "">;
+type $$ComponentProps = {
+    valuePathParts: any;
+    schemaPathParts: any;
+    formController: any;
+};

package/{src/components → dist/components/inputs}/FormObjectInput.svelte

@@ -1,12 +1,13 @@
 <script>
-    export let components;
-    export let formController;
-    export let valuePathParts;
-    export let schemaPathParts;
-
-    export let schema;
-    export let value = {};
-    export let overrides;
+    let {
+        components,
+        formController,
+        valuePathParts,
+        schemaPathParts,
+        schema,
+        value = {},
+        overrides
+    } = $props();
 </script>
 
 <!-- TODO allow overriding path parts -->

package/dist/components/inputs/FormObjectInput.svelte.d.ts

@@ -0,0 +1,23 @@
+export default FormObjectInput;
+type FormObjectInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormObjectInput: import("svelte").Component<{
+    components: any;
+    formController: any;
+    valuePathParts: any;
+    schemaPathParts: any;
+    schema: any;
+    value?: Record<string, any>;
+    overrides: any;
+}, {}, "">;
+type $$ComponentProps = {
+    components: any;
+    formController: any;
+    valuePathParts: any;
+    schemaPathParts: any;
+    schema: any;
+    value?: Record<string, any>;
+    overrides: any;
+};

package/{src/components → dist/components/inputs}/FormTextInput.svelte

@@ -1,6 +1,5 @@
 <script>
-    export let value = undefined;
-    export let extras = undefined;
+    let { value = undefined, extras = undefined } = $props();
 </script>
 
 <div style="border: 1px solid #ff0000; padding: 5px;">

package/dist/components/inputs/FormTextInput.svelte.d.ts

@@ -0,0 +1,13 @@
+export default FormTextInput;
+type FormTextInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormTextInput: import("svelte").Component<{
+    value?: any;
+    extras?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    value?: any;
+    extras?: any;
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import Form from "./components/Form.svelte";
+import formContext from "./components/formContext.js";
+import FormInputWrapper from "./components/inputs/FormInputWrapper.svelte";
+import FormArrayInput from "./components/inputs/FormArrayInput.svelte";
+import FormObjectInput from "./components/inputs/FormObjectInput.svelte";
+import FormTextInput from "./components/inputs/FormTextInput.svelte";
+export { Form, formContext, FormInputWrapper, FormArrayInput, FormObjectInput, FormTextInput };

package/dist/index.js

@@ -0,0 +1,20 @@
+// Reexport your entry components here
+import Form from "./components/Form.svelte";
+import formContext from "./components/formContext.js";
+
+// inputs
+import FormInputWrapper from "./components/inputs/FormInputWrapper.svelte";
+import FormArrayInput from "./components/inputs/FormArrayInput.svelte";
+import FormObjectInput from "./components/inputs/FormObjectInput.svelte";
+import FormTextInput from "./components/inputs/FormTextInput.svelte";
+
+export {
+    Form,
+    formContext,
+
+    // inputs
+    FormInputWrapper,
+    FormArrayInput,
+    FormObjectInput,
+    FormTextInput
+}

package/dist/vitest-examples/Welcome.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { greet } from './greet';
+
+	let { host = 'SvelteKit', guest = 'Vitest' } = $props();
+</script>
+
+<h1>{greet(host)}</h1>
+<p>{greet(guest)}</p>

package/dist/vitest-examples/Welcome.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Welcome;
+type Welcome = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Welcome: import("svelte").Component<{
+    host?: string;
+    guest?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    host?: string;
+    guest?: string;
+};

package/dist/vitest-examples/greet.d.ts

@@ -0,0 +1 @@
+export function greet(name: any): string;

package/dist/vitest-examples/greet.js

@@ -0,0 +1,3 @@
+export function greet(name) {
+	return 'Hello, ' + name + '!';
+}