Proposal: To be able to easily run `@valibot/i18n` in Playground as well

[ysknsid25]

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:

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}`);
}

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

#1488

[fabian-hiller]

I answered in the PR you created