In a packager environment like Vite, use typia in Vue files, and just run transform for preprocessing without emit for js.

[moheng233]

How I got this idea

I want to make a form library that is as convenient as possible and has input validation and error prompts without template code.

He is based on Typescript and Typia, It looks like this to use.

const [field, form] = useForm({
    email: "" as string & tags.Format<"email"> & tags.MaxLength<30>,
    password: "" as string & tags.MinLength<8> & tags.MaxLength<20>
}, {
    onValidate(data) {
        return typia.validate(data);
    },
    onSubmit(data) {
        console.log(data);
        return false;
    }
});

<CForm :context="form">
    <InputText type="email" v-model="field.email.value"/>
    <Password v-model="field.password.value"></Password>
    <CFormSubmit v-slot="{ submit }">
        <Button @click="submit"></Button>
    </CFormSubmit>
</CForm>

In the process, I found out that VITE's TypeScript2 plugin doesn't handle TS in Vue, so I added *.vue to the include path of the plugin. It worked, but because it was preprocessed by Vue and stripped of the type information, it couldn't generate the completed typia validation function.

However, if you advance the compilation process of TypeScript before the Vue plugin, then the compiler macros of Vue will not work.

So, we need a preprocessor that can run before the vue build process, handle TS with types and emit TS.

Functional implementation

So I tried to make a demo using unplugin, which I only tested on vite.
unplugin-vue-typia
I'd like to know your thoughts and suggestions.

[moheng233]

I have a more vague idea. I think that if the validation function is generated into a separate virtual module, it can effectively speed up the build.

This would be similar to the current generate pattern, but more flexible.

[samchon]

I don't develop vue and front-end applications, so I have no insight into your suggestions. If you think the plugin you created is worthy of being widely distributed to many front-end developers, please send a PR with installation instructions in the document below.

• https://typia.io/docs/setup/
• https://github.com/samchon/typia/blob/master/website/pages/docs/setup.mdx