Sveltekit and Svelte5 with Typia: The $ prefix is reserved, and cannot be used for variables and imports

[mblandr]

unplugin-typia version

1.0.6

What platform is your computer? Copy the output of npx envinfo --system -npmPackages cleye --binaries

System: OS: Windows 10 10.0.19045 CPU: (20) x64 Intel(R) Xeon(R) CPU E5-2670 v2 @ 2.50GHz Memory: 14.60 GB / 63.93 GB Binaries: Node: 20.16.0 - ~\AppData\Local\pnpm\node.EXE npm: 10.8.2 - ~\AppData\Local\pnpm\npm.CMD pnpm: 9.9.0 - ~\AppData\Local\pnpm\pnpm.EXE bun: 1.1.30 - D:\dev\bun\bin\bun.EXE

Describe the bug

here is code in +page.svelte

import typia, { tags } from "typia";
const formState = $state({
name: "",
email: "",
comment: "",
});

type IValidState = {
	name: string & tags.MinLength<5> & tags.MaxLength<20>;
	email: string & tags.Format<"email">;
	comment: string & tags.MinLength<20>;
};

const formInvalid = $state(false);

const submitHandler = (e: Event) => {
	e.preventDefault();
	const { success, errors } = typia.validate<IValidState>(formState);
	console.log({ success, errors });
};

here is error:

Internal server error: src/routes/+page.svelte:17:47 The $ prefix is reserved, and cannot be used for variables and imports
  Plugin: vite-plugin-svelte
  File: src/routes/+page.svelte:19:30
   15 |  const submitHandler = (e: Event) => {
   16 |      e.preventDefault();
   17 |      const { success, errors } = (() => { const $io0 = (input: any): boolean => "string" === typeof input.name && (5 <= input.name.length && input.name.length <= 20) && ("string" === typeof input.email && /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i.test(input.email)) && ("string" === typeof input.comment && 20 <= input.comment.length); const $vo0 = (input: any, _path: string, _exceptionable: boolean = true): boolean => ["string" === typeof input.name && (5 <= input.name.length || $report(_exceptionable, {
                                                            ^
   18 |              path: _path + ".name",
   19 |              expected: "string & MinLength<5>",

Reproduction

create sveltekit project with svelte 5:
bun create svelte@latest my-app .

add unpligin-typia and typia
bun i -D @ryoppippi/unplugin-typia typia

bun typia setup

add to vite.config.ts
import UnpluginTypia from '@ryoppippi/unplugin-typia/vite'

export default defineConfig({
plugins: [UnpluginTypia(), sveltekit()]
});

bun dev

Validations

• #336
• Check that this is a concrete bug.
• The provided reproduction is a minimal reproducible example of the bug.

[ryoppippi]

@mblandr
Hi
Create a reproduction repository on GH or Stackblit

[mblandr]

Here it is:
https://github.com/mblandr/temp

[ryoppippi]

OK, got it.
But this is svelte's problem
sveltejs/svelte#12218

Also, if we want to escape this problem separate the typia's function to external file, or create a PR for Typia not to use $-prefix function.

In unplugin-typia, we can't do anything.

If I were you, I'll separate the typia's validation to external file like $lib/validate.ts and import it in svelte file

[ryoppippi]

I know this doesn't work in svelte.
Maybe we need to change the implementation of typia itself.
So, @mblandr , please make an issue to Typia's repository!
Cheers

[ryoppippi]

Hmm,
What do you think about it @samchon

[samchon]

https://github.com/samchon/typia/blob/v7.0/src/internal/%24ProtobufWriter.ts

Well, such $ starting function or variable never works in the svelte-kit?

As the $ is allowed character in the JS, so that cannot understand that it be blocked by the svelte-kit

[samchon]

@ryoppippi In the next v7 major update, I need to change the internal functions' name to start with another character.

Is it okay with starting the underscore like _ProtobufWriter or __ProtobufWriter?

I have not used svelt at all, so need your guidance.

[samchon]

The next v7 major update of typia will support the Svelte5.

The next major update may come in two or three weeks.

[mblandr]

O, it will be great, thanks

[ryoppippi]

Thank you!!!

[ryoppippi]

@samchon
Yes avoiding $ in svelte is fine. Good and quick work as always. Cheers!!

[ryoppippi]

@mblandr you can update typia and unplugin-typia to the latest version, and make sure that it works fine