Simon Posts - Answer Overflow

Simon

Explore posts from servers

•Created by Simon on 4/23/2025 in #questions

Can the JSON Schema be typed automatically?

I'm trying to use the generated JSON Schema inside forms in order to provide useful information to users, such as if the field is required/optional, if there is a max length limit, etc.. I'm using this schema:

export const schema = type({
    uid: type("string").configure({
        message: () => i18n._("The episode UID is required."),
    }),
    title: type("string > 2").configure({
        message: (ctx) =>
            ctx.data
                ? i18n._("The episode title must be at least 3 characters long.")
                : i18n._("The episode title is required."),
    }),
    summary: type("string <= 4000")
        .configure({
            message: () =>
                i18n._("The summary must be less than 4000 characters long."),
        })
        .optional(),
});

const jsonSchema = schema.toJsonSchema()

export const schema = type({
    uid: type("string").configure({
        message: () => i18n._("The episode UID is required."),
    }),
    title: type("string > 2").configure({
        message: (ctx) =>
            ctx.data
                ? i18n._("The episode title must be at least 3 characters long.")
                : i18n._("The episode title is required."),
    }),
    summary: type("string <= 4000")
        .configure({
            message: () =>
                i18n._("The summary must be less than 4000 characters long."),
        })
        .optional(),
});

const jsonSchema = schema.toJsonSchema()

The JSON Schema I get, is a JsonSchema.NonBooleanBranch which is too broad and I can't really use it in TS without a lot of defensive checks and casting. Ideally I'd like to use it like this:

<form.AppField
    name="summary"
    children={(field) => (
        <field.FormItem className="grid gap-2">
            <field.FormLabel>
                <Trans>Summary</Trans>
                {schema.required?.includes(field.name) && (
                    <span className="italic">
                        — <Trans>optional</Trans>
                    </span>
                )}
            </field.FormLabel>
            <field.FormControl>
                <field.FormTextarea />
            </field.FormControl>
            <div className="italic text-xs text-right">
                <Trans>
                    {{ count: field.state.value?.length ?? 0 }} /{" "}
                    {{
                        max: schema.properties[field.name]!.maxLength! ?? 0,
                    }}{" "}
                    characters
                </Trans>
            </div>
            <field.FormMessage />
        </field.FormItem>
    )}
/>

<form.AppField
    name="summary"
    children={(field) => (
        <field.FormItem className="grid gap-2">
            <field.FormLabel>
                <Trans>Summary</Trans>
                {schema.required?.includes(field.name) && (
                    <span className="italic">
                        — <Trans>optional</Trans>
                    </span>
                )}
            </field.FormLabel>
            <field.FormControl>
                <field.FormTextarea />
            </field.FormControl>
            <div className="italic text-xs text-right">
                <Trans>
                    {{ count: field.state.value?.length ?? 0 }} /{" "}
                    {{
                        max: schema.properties[field.name]!.maxLength! ?? 0,
                    }}{" "}
                    characters
                </Trans>
            </div>
            <field.FormMessage />
        </field.FormItem>
    )}
/>

53 replies

CDCloudflare Developers

•Created by Simon on 4/20/2025 in #pages-help

Worker + Assets vs Pages + Worker?

I managed to deploy a full stack app with a D1 database on Workers with static assets but also on Pages with workers. It’s basically the same thing but not really. I’m not sure which option is best. I like that Pages have multiple environments which doesn’t seem to be the case with Workers. Am I missing anything from Workers if I deploy a pages app with workers? Using tanstack start if that matters.

4 replies

Gaming

Programming