AstroJs.astro

---
import type { FromSchema, JSONSchema7, UiSchema } from '@jsfe/shoelace';

// -----------------------------------------------------------------------------

const mySchema = {
	type: 'object',
	properties: {
		foo: {
			type: 'string',
		},
		bar: {
			type: 'boolean',
		},
	},
} as const satisfies JSONSchema7;
type MyData = FromSchema<typeof mySchema>;

const uiSchema: UiSchema = {
	bar: {
		'ui:widget': 'switch',
	},
};

const dataInAstro: MyData = {
	foo: 'hello',
};
---

<article id="astro">
	<type-script-only>
		<!-- You can set settings upfront from SSR -->
		<jsf-shoelace
			schema={JSON.stringify(mySchema)}
			uiSchema={JSON.stringify(uiSchema)}
			data={JSON.stringify(dataInAstro)}
		>
		</jsf-shoelace>

		<pre id="debug">{JSON.stringify({ data: {} }, null, 2)}</pre>
	</type-script-only>
</article>

<script>
	// Client side
	import './TypeScriptOnly.js';
</script>