From cc849fe1d27aacfa145b8cf8285e980a5a50a22c Mon Sep 17 00:00:00 2001
From: Nicolas Morel <nicolas@morel.io>
Date: Wed, 25 Mar 2026 15:20:40 +0100
Subject: [PATCH] feat: add sandbox autocompletion

---
 .vitepress/theme/index.ts          |  13 +--
 components/CodeMirrorEditor.vue    |  37 ++++++++-
 components/TesterContent.vue       |   4 +-
 composables/joiCompletionSource.ts | 126 +++++++++++++++++++++++++++++
 env.d.ts                           |   5 ++
 generated/metadata/modules.json    |  24 +++---
 package.json                       |   3 +
 pnpm-lock.yaml                     |  39 +++++++++
 8 files changed, 228 insertions(+), 23 deletions(-)
 create mode 100644 composables/joiCompletionSource.ts

diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 2603404..e00d20b 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,18 +1,19 @@
 import DefaultTheme from 'vitepress/theme';
-import { h } from 'vue';
+import { defineAsyncComponent, h } from 'vue';
 
 import './variables.css';
 import './main.css';
 import 'virtual:group-icons.css';
-import ApiOutline from '../../components/ApiOutline.vue';
-import CarbonAds from '../../components/CarbonAds.vue';
-import ModuleIndex from '../../components/ModuleIndex.vue';
-import StatusContent from '../../components/StatusContent.vue';
-import TesterContent from '../../components/TesterContent.vue';
 import { getRedirectPath } from './redirect.js';
 
 import type { Theme } from 'vitepress';
 
+const ApiOutline = defineAsyncComponent(() => import('../../components/ApiOutline.vue'));
+const CarbonAds = defineAsyncComponent(() => import('../../components/CarbonAds.vue'));
+const ModuleIndex = defineAsyncComponent(() => import('../../components/ModuleIndex.vue'));
+const StatusContent = defineAsyncComponent(() => import('../../components/StatusContent.vue'));
+const TesterContent = defineAsyncComponent(() => import('../../components/TesterContent.vue'));
+
 export default {
   Layout() {
     return h(DefaultTheme.Layout, null, {
diff --git a/components/CodeMirrorEditor.vue b/components/CodeMirrorEditor.vue
index 0dd8743..910a66e 100644
--- a/components/CodeMirrorEditor.vue
+++ b/components/CodeMirrorEditor.vue
@@ -3,11 +3,12 @@
 </template>
 
 <script setup>
+import { autocompletion } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState, StateEffect, StateField } from '@codemirror/state';
-import { Decoration } from '@codemirror/view';
+import { Decoration, tooltips } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { darcula } from '@uiw/codemirror-theme-darcula';
 import { eclipse } from '@uiw/codemirror-theme-eclipse';
@@ -15,8 +16,11 @@ import { EditorView, basicSetup } from 'codemirror';
 import { useData } from 'vitepress';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
-const { errorLines, language, readOnly } = defineProps({
+import { joiCompletionSource } from '../composables/joiCompletionSource.ts';
+
+const { errorLines, joiVersion, language, readOnly } = defineProps({
   errorLines: { default: () => [], type: Array },
+  joiVersion: { default: null, type: String },
   language: { default: 'javascript', type: String },
   readOnly: { default: false, type: Boolean },
 });
@@ -31,6 +35,7 @@ let view = null;
 
 
 const themeCompartment = new Compartment();
+const joiCompartment = new Compartment();
 const setErrorLines = StateEffect.define();
 
 
@@ -72,12 +77,23 @@ const getThemeExtension = () => {
 };
 
 
+const getJoiExtension = () => {
+  if (!joiVersion) {
+    return [];
+  }
+  return autocompletion({
+    override: [(context) => joiCompletionSource(context, joiVersion)],
+  });
+};
+
+
 onMounted(() => {
   const extensions = [
     basicSetup,
     language === 'json' ? json() : javascript(),
     EditorView.lineWrapping,
     themeCompartment.of(getThemeExtension()),
+    joiCompartment.of(getJoiExtension()),
     EditorView.updateListener.of((update) => {
       if (update.docChanged) {
         data.value = update.state.doc.toString();
@@ -136,6 +152,18 @@ watch(isDark, () => {
 });
 
 
+watch(
+  () => joiVersion,
+  () => {
+    if (view) {
+      view.dispatch({
+        effects: joiCompartment.reconfigure(getJoiExtension()),
+      });
+    }
+  },
+);
+
+
 onBeforeUnmount(() => {
   if (view) {
     view.destroy();
@@ -147,8 +175,11 @@ onBeforeUnmount(() => {
 .editor-container {
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
-  overflow: hidden;
   font-family: var(--vp-font-family-mono);
   font-size: 14px;
 }
+
+.editor-container :deep(.cm-tooltip-autocomplete > ul) {
+  max-height: 350px;
+}
 </style>
diff --git a/components/TesterContent.vue b/components/TesterContent.vue
index 0d99234..570e3f2 100644
--- a/components/TesterContent.vue
+++ b/components/TesterContent.vue
@@ -9,7 +9,7 @@
 
     <div class="field">
       <h2 class="tester-subTitle">Schema:</h2>
-      <CodeMirrorEditor v-model="schema" />
+      <CodeMirrorEditor v-model="schema" :joi-version="version" />
     </div>
 
     <div class="field">
@@ -71,7 +71,7 @@
 <script setup>
 import { useClipboard, useStorage } from '@vueuse/core';
 import { useRoute } from 'vitepress';
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 import { annotate } from '../composables/annotate.ts';
 import joiInfo from '../generated/modules/joi/info.json' with { type: 'json' };
diff --git a/composables/joiCompletionSource.ts b/composables/joiCompletionSource.ts
new file mode 100644
index 0000000..b373f67
--- /dev/null
+++ b/composables/joiCompletionSource.ts
@@ -0,0 +1,126 @@
+import { createDefaultMapFromCDN, createSystem, createVirtualTypeScriptEnvironment } from '@typescript/vfs';
+
+import type { CompletionContext } from '@codemirror/autocomplete';
+import type { VirtualTypeScriptEnvironment } from '@typescript/vfs';
+
+let env: VirtualTypeScriptEnvironment | null = null;
+let currentVersion: string | null = null;
+
+const getEnv = async (version: string) => {
+  if (env && currentVersion === version) {
+    return env;
+  }
+
+  const ts = await import('typescript');
+
+  const compilerOptions = {
+    lib: ['es2024'],
+    module: ts.ModuleKind.ESNext,
+    target: ts.ScriptTarget.ESNext,
+  };
+
+  const fsMap = await createDefaultMapFromCDN(compilerOptions, ts.version, true, ts);
+
+  const { default: joiDts } = version.startsWith('17.')
+    ? await import('joi-17/lib/index.d.ts?raw')
+    : await import('joi-18/lib/index.d.ts?raw');
+
+  fsMap.set('/node_modules/joi/index.d.ts', joiDts);
+  fsMap.set('/node_modules/joi/package.json', JSON.stringify({ name: 'joi', types: 'index.d.ts' }));
+
+  if (version.startsWith('18.')) {
+    const { default: standardSchemaTypes } = await import('../node_modules/@standard-schema/spec/dist/index.d.ts?raw');
+    fsMap.set('/node_modules/@standard-schema/spec/index.d.ts', standardSchemaTypes);
+    fsMap.set(
+      '/node_modules/@standard-schema/spec/package.json',
+      JSON.stringify({ name: '@standard-schema/spec', types: 'index.d.ts' }),
+    );
+  }
+
+  const system = createSystem(fsMap);
+  env = createVirtualTypeScriptEnvironment(system, [], ts, compilerOptions);
+  currentVersion = version;
+
+  return env;
+};
+
+const filterJoiOperations = (name: string) =>
+  name.startsWith('$') ||
+  name.startsWith('_') ||
+  name.startsWith('validate') ||
+  name === 'cache' ||
+  name === 'ValidationError';
+
+export const joiCompletionSource = async (context: CompletionContext, version: string) => {
+  try {
+    const tsEnv = await getEnv(version);
+    const code = context.state.doc.toString();
+
+    const prefix = "import Joi from 'joi';\n";
+    const wrappedCode = prefix + code;
+    const pos = context.pos + prefix.length;
+
+    const fileName = 'index.ts';
+    if (tsEnv.getSourceFile(fileName)) {
+      tsEnv.updateFile(fileName, wrappedCode);
+    } else {
+      tsEnv.createFile(fileName, wrappedCode);
+    }
+
+    const completions = tsEnv.languageService.getCompletionsAtPosition(fileName, pos, {});
+    if (!completions) {
+      return null;
+    }
+
+    const word = context.matchBefore(/\w*/);
+    if (!word && !context.explicit) {
+      return null;
+    }
+
+    return {
+      from: word ? word.from : context.pos,
+      options: completions.entries
+        .filter((entry) => !filterJoiOperations(entry.name))
+        .map((entry) => {
+          let type = 'variable';
+          if (entry.kind === 'method') {
+            type = 'method';
+          } else if (entry.kind === 'property') {
+            type = 'property';
+          }
+
+          return {
+            boost: entry.sortText ? -Number(entry.sortText) : 0,
+            info: () => {
+              const details = tsEnv.languageService.getCompletionEntryDetails(
+                fileName,
+                pos,
+                entry.name,
+                {},
+                entry.source,
+                {},
+                entry.data,
+              );
+              if (!details) {
+                return null;
+              }
+
+              const doc = `${entry.kind} ${entry.name}
+${details.documentation?.map((d) => d.text).join('\n') || ''}`;
+
+              const div = document.createElement('div');
+              div.className = 'cm-completionInfo-text';
+              div.style.whiteSpace = 'pre-wrap';
+              div.textContent = doc;
+              return div;
+            },
+            label: entry.name,
+            type,
+          };
+        }),
+    };
+  } catch (error) {
+    console.error('Joi completion error:', error);
+    return null;
+  }
+};
diff --git a/env.d.ts b/env.d.ts
index 5059764..2feec49 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -4,3 +4,8 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare module '*?raw' {
+  const content: string;
+  export default content;
+}
diff --git a/generated/metadata/modules.json b/generated/metadata/modules.json
index 5b88faa..a97a19d 100644
--- a/generated/metadata/modules.json
+++ b/generated/metadata/modules.json
@@ -2,6 +2,7 @@
   "address": {
     "forks": 27,
     "link": "https://github.com/hapijs/address",
+    "package": "@hapi/address",
     "slogan": "Validate email address and domain.",
     "stars": 33,
     "updated": "2024-01-29T12:37:22Z",
@@ -13,12 +14,12 @@
         "node": ">= 14"
       }
     ],
-    "versionsArray": ["5.1.1"],
-    "package": "@hapi/address"
+    "versionsArray": ["5.1.1"]
   },
   "formula": {
     "forks": 20,
     "link": "https://github.com/hapijs/formula",
+    "package": "@hapi/formula",
     "slogan": "Math and string formula parser.",
     "stars": 17,
     "updated": "2024-02-02T16:21:44Z",
@@ -30,12 +31,12 @@
         "node": ">= 14"
       }
     ],
-    "versionsArray": ["3.0.2"],
-    "package": "@hapi/formula"
+    "versionsArray": ["3.0.2"]
   },
   "joi": {
     "forks": 1509,
     "link": "https://github.com/hapijs/joi",
+    "package": "joi",
     "slogan": "The most powerful schema description language and data validator for JavaScript.",
     "stars": 21199,
     "updated": "2026-03-23T17:51:24Z",
@@ -53,12 +54,12 @@
         "node": ">= 20"
       }
     ],
-    "versionsArray": ["18.1.1", "17.13.3"],
-    "package": "joi"
+    "versionsArray": ["18.1.1", "17.13.3"]
   },
   "joi-date": {
     "forks": 23,
     "link": "https://github.com/hapijs/joi-date",
+    "package": "@joi/date",
     "slogan": "Extensions for advance date rules.",
     "stars": 81,
     "updated": "2024-04-22T09:05:34Z",
@@ -70,12 +71,12 @@
         "node": ">= 14"
       }
     ],
-    "versionsArray": ["2.1.1"],
-    "package": "@joi/date"
+    "versionsArray": ["2.1.1"]
   },
   "pinpoint": {
     "forks": 6,
     "link": "https://github.com/hapijs/pinpoint",
+    "package": "@hapi/pinpoint",
     "slogan": "Return the filename and line number of the calling function.",
     "stars": 6,
     "updated": "2023-11-12T09:48:56Z",
@@ -87,12 +88,12 @@
         "node": ">= 14"
       }
     ],
-    "versionsArray": ["2.0.1"],
-    "package": "@hapi/pinpoint"
+    "versionsArray": ["2.0.1"]
   },
   "tlds": {
     "forks": 2,
     "link": "https://github.com/hapijs/tlds",
+    "package": "@hapi/tlds",
     "slogan": "TLDS list for domain validation.",
     "stars": 2,
     "updated": "2026-02-17T14:09:37Z",
@@ -104,7 +105,6 @@
         "node": ">= 14"
       }
     ],
-    "versionsArray": ["1.1.6"],
-    "package": "@hapi/tlds"
+    "versionsArray": ["1.1.6"]
   }
 }
diff --git a/package.json b/package.json
index bc1677c..f307142 100644
--- a/package.json
+++ b/package.json
@@ -19,12 +19,14 @@
   "license": "BSD-3-Clause",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
+    "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/language": "^6.12.2",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
     "@lezer/highlight": "^1.2.3",
+    "@typescript/vfs": "^1.6.4",
     "@uiw/codemirror-theme-darcula": "^4.25.8",
     "@uiw/codemirror-theme-eclipse": "^4.25.8",
     "@vueuse/core": "^14.2.1",
@@ -32,6 +34,7 @@
     "es-toolkit": "^1.45.1",
     "joi-17": "npm:joi@17.13.3",
     "joi-18": "npm:joi@18.0.2",
+    "@standard-schema/spec": "^1.1.0",
     "semver": "^7.7.4",
     "vitepress-plugin-group-icons": "^1.7.1",
     "vue": "^3.5.30"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bdf9037..88ba5b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@babel/runtime':
         specifier: ^7.29.2
         version: 7.29.2
+      '@codemirror/autocomplete':
+        specifier: ^6.20.1
+        version: 6.20.1
       '@codemirror/lang-javascript':
         specifier: ^6.2.5
         version: 6.2.5
@@ -29,6 +32,12 @@ importers:
       '@lezer/highlight':
         specifier: ^1.2.3
         version: 1.2.3
+      '@standard-schema/spec':
+        specifier: ^1.1.0
+        version: 1.1.0
+      '@typescript/vfs':
+        specifier: ^1.6.4
+        version: 1.6.4(typescript@5.9.3)
       '@uiw/codemirror-theme-darcula':
         specifier: ^4.25.8
         version: 4.25.8(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)
@@ -902,6 +911,11 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
+  '@typescript/vfs@1.6.4':
+    resolution: {integrity: sha512-PJFXFS4ZJKiJ9Qiuix6Dz/OwEIqHD7Dme1UwZhTK11vR+5dqW2ACbdndWQexBzCx+CPuMe5WBYQWCsFyGlQLlQ==}
+    peerDependencies:
+      typescript: '*'
+
   '@uiw/codemirror-theme-darcula@4.25.8':
     resolution: {integrity: sha512-oggD67Ag2k4HULP5Hr3GBfoW3KaCprrOgU2TkC3qfLiwRyBdxZ4/8EFPHJFNSiPA5OBPugRn0q1/0eHOf9aDNw==}
 
@@ -1062,6 +1076,15 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -1156,6 +1179,9 @@ packages:
   mlly@1.8.2:
     resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1997,6 +2023,13 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
+  '@typescript/vfs@1.6.4(typescript@5.9.3)':
+    dependencies:
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@uiw/codemirror-theme-darcula@4.25.8(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)':
     dependencies:
       '@uiw/codemirror-themes': 4.25.8(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)
@@ -2153,6 +2186,10 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
   dequal@2.0.3: {}
 
   devlop@1.1.0:
@@ -2295,6 +2332,8 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.3
 
+  ms@2.1.3: {}
+
   nanoid@3.3.11: {}
 
   oniguruma-parser@0.12.1: {}