TypeScript

The components and utils are fully typed with TypeScript. If you are using TypeScript in your app, you can take advantage of the type definitions to ensure type safety and better DX.

Getting started

1. Intial setup

   Follow the steps for setting up TypeScript in your app in @soleil-se/build-app.

2. Update entry points

   Change the file extensions of the entry points in your config to .ts.

   • config/config.js → config/config.ts
   • config/index.js → config/index.ts
   • config_global/config.js → config_global/config.ts
   • config_global/index.js → config_global/index.ts
3. Start build script

   Start the build script as usual.

   npm run start

Saved values

The saved values are passed to the component as the values prop. By default they are typed as Record<string, unknown>, but if you need to reference the values in your component, you should define a Props type and pass it to createConfigApp for better type safety.

config.ts

import { createConfigApp } from '@soleil-se/config-svelte';
import { mount } from 'svelte';

import App, { type Props } from './App.svelte';

createConfigApp<Props>(({ target, props }) => mount(App, { target, props }));

App.svelte

<script lang="ts" module>
  export type Props = {
    values?: {
      text?: string;
    };
  };
</script>

<script lang="ts">
  import { Panel, InputField } from '@soleil-se/config-svelte';

  let { values }: Props = $props();

  console.log(values.text);
</script>

<Panel>
  <InputField name="text" label="Text" />
</Panel>

Props

If you pass additional props from the server to the config app, you can also type those by adding them to the Props type.

index.ts

import router from '@sitevision/api/common/router';
import { createAppProps } from '@soleil-se/config-svelte/server';

import type { Props } from './App.svelte';

router.get('/', (req, res) => {
  const props: Props = {
    foo: 'bar',
    fizz: 'buzz',
  };
  createAppProps(props, res);
});

config.ts

import { createConfigApp } from '@soleil-se/config-svelte';
import { mount } from 'svelte';

import App, { type Props } from './App.svelte';

createConfigApp<Props>(({ target, props }) => mount(App, { target, props }));

App.svelte

<script lang="ts" module>
  export type Props = {
    foo: string;
    fizz: string;
  };
</script>

<script lang="ts">
  import { Panel, InputField } from '@soleil-se/config-svelte';
  let { foo, fizz }: Props = $props();
</script>

<p>Foo: {foo}</p>
<p>Fizz: {fizz}</p>
<Panel>
  <InputField name="text" label="Text" />
</Panel>