Proposal: To be able to easily run `@valibot/i18n` in Playground as well
enhancement
# Motivation
I want to be able to easily run `@valibot/i18n` in Playground as well.
Currently, attempting to run `@valibot/i18n` in the production Playground results in an error. Therefore, it's not easy to check the error message.
The code I tried to run was as follows:
```ts
import * as v from 'valibot';
import '@valibot/i18n/ja';
const cases = [
{
label: 'minBytes(3)',
schema: v.pipe(v.string(), v.minBytes(3)),
input: 'a',
},
{
label: 'maxBytes(3)',
schema: v.pipe(v.string(), v.maxBytes(3)),
input: 'hello',
},
{
label: 'minValue(18)',
schema: v.pipe(v.number(), v.minValue(18)),
input: 10,
},
{
label: 'maxValue(100)',
schema: v.pipe(v.number(), v.maxValue(100)),
input: 200,
},
{ label: 'gtValue(0)', schema: v.pipe(v.number(), v.gtValue(0)), input: 0 },
{
label: 'ltValue(100)',
schema: v.pipe(v.number(), v.ltValue(100)),
input: 100,
},
{ label: 'nonEmpty()', schema: v.pipe(v.string(), v.nonEmpty()), input: '' },
{ label: 'empty()', schema: v.pipe(v.string(), v.empty()), input: 'hello' },
{
label: 'notBytes(5)',
schema: v.pipe(v.string(), v.notBytes(5)),
input: 'hello',
},
{
label: 'notLength(3)',
schema: v.pipe(v.string(), v.notLength(3)),
input: 'abc',
},
{
label: 'notValue(42)',
schema: v.pipe(v.number(), v.notValue(42)),
input: 42,
},
];
const col1 = 16,
col2 = 52,
col3 = 52;
const header = `${'バリデータ'.padEnd(col1)} ${'英語（デフォルト）'.padEnd(
col2
)} ${'日本語（@valibot/i18n/ja）'}`;
console.log(header);
console.log('-'.repeat(col1 + col2 + col3));
for (const { label, schema, input } of cases) {
const en = v.safeParse(schema, input);
v.setGlobalConfig({ lang: 'ja' });
const ja = v.safeParse(schema, input);
v.setGlobalConfig({ lang: undefined });
const enMsg = en.success ? 'OK' : en.issues[0].message;
const jaMsg = ja.success ? 'OK' : ja.issues[0].message;
console.log(`${label.padEnd(col1)} ${enMsg.padEnd(col2)} ${jaMsg}`);
}
```
<img width="2894" height="1574" alt="Image" src="https://github.com/user-attachments/assets/6db4ecdc-4274-425e-b2f8-acf24f9858bd" />
# Proposal
Basically, we should be able to do it the same way as `to-json-schema`. Maybe...
1. Build `@valibot/i18n` and prepare the generated files (e.g., `ja/index.mjs`).
2. `index.tsx`: Collect the built i18n modules using import.meta.glob, convert them to bare specifiers (e.g., `@valibot/i18n/ja`), and add them to the iframe's importmap. This resolves to the same URL as the main Valibot instance, allowing them to share the same instance.
3. `CodeEditor.tsx`: Add an ambient module declaration to Monaco to prevent type errors in imports in the editor.
4. `website/package.json`: Add `@valibot/i18n` to the workspace dependencies.
## PoC
https://github.com/open-circle/valibot/pull/1488
1 条评论