docs: add twoslash (#70)

Author: nakasyou

bun.lock

@@ -1,5 +1,7 @@
 /// <reference types="vitepress" />
 /// <reference types="vite/client" />
+
+import { createTwoslashWithInlineCache } from '@shikijs/vitepress-twoslash/cache-inline'
 import { defineConfig } from 'vitepress'
 
 const guideSidebar = [
@@ -35,34 +37,41 @@ const blocksSidebar = [
   },
 ]
 
-export default defineConfig({
-  title: 'Hikkaku',
-  description: 'Write Scratch projects in TypeScript',
-  lang: 'en-US',
-  base: '/hikkaku/',
-  themeConfig: {
-    nav: [
-      { text: 'Guide', link: '/guides/' },
-      { text: 'Reference', link: '/reference/' },
-      { text: 'Playground', link: '/playground' },
-      { text: 'GitHub', link: 'https://github.com/pnsk-lab/hikkaku' },
-    ],
-    sidebar: {
-      '/guides/': guideSidebar,
-      '/reference/': [
-        {
-          text: 'Reference',
-          items: [{ text: 'Overview', link: '/reference/' }],
-        },
-        ...blocksSidebar,
-      ],
-    },
-    search: {
-      provider: 'local',
+const withTwoslashInlineCache = createTwoslashWithInlineCache({})
+
+export default withTwoslashInlineCache(
+  defineConfig({
+    title: 'Hikkaku',
+    description: 'Write Scratch projects in TypeScript',
+    lang: 'en-US',
+    base: '/hikkaku/',
+    markdown: {
+      codeTransformers: [],
     },
-    logo: {
-      src: '/assets/logo.svg',
-      alt: 'Hikkaku Logo',
+    themeConfig: {
+      nav: [
+        { text: 'Guide', link: '/guides/' },
+        { text: 'Reference', link: '/reference/' },
+        { text: 'Playground', link: '/playground' },
+        { text: 'GitHub', link: 'https://github.com/pnsk-lab/hikkaku' },
+      ],
+      sidebar: {
+        '/guides/': guideSidebar,
+        '/reference/': [
+          {
+            text: 'Reference',
+            items: [{ text: 'Overview', link: '/reference/' }],
+          },
+          ...blocksSidebar,
+        ],
+      },
+      search: {
+        provider: 'local',
+      },
+      logo: {
+        src: '/assets/logo.svg',
+        alt: 'Hikkaku Logo',
+      },
     },
-  },
-})
+  }),
+)

docs/.vitepress/config.ts

@@ -2,6 +2,8 @@ import type { Theme } from 'vitepress'
 import { inBrowser } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { defineAsyncComponent, defineComponent, h } from 'vue'
+import '@shikijs/vitepress-twoslash/style.css'
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 
 const PlaygroundAsync = defineAsyncComponent({
   loader: () => import('../components/Playground.vue'),
@@ -24,6 +26,7 @@ const theme: Theme = {
   enhanceApp(context) {
     DefaultTheme.enhanceApp?.(context)
     context.app.component('Playground', PlaygroundClientOnly)
+    context.app.use(TwoslashFloatingVue)
   },
 }
 

docs/.vitepress/theme/index.ts

@@ -6,7 +6,11 @@ Because Hikkaku compiles TypeScript to Scratch blocks, runtime math must use blo
 
 Use normal TypeScript when the value is known at compile time.
 
-```ts
+```ts twoslash
+// @twoslash-cache: {"v":1,"hash":"1ee39a740825e41c555963d937ba1ad2d4ef6c068937881c28c045546348d887","data":"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIBjCGDhpeAW2IwAyjSxxEvRiJhyFABVLsx7NOxJSIAV1L8YAHjCGxAIzIA+PgF47vABLsA1h+YfDAIVYIfg8AHTAtLAhSUQl9WQQqKCCERBAAWUk4XjgsTRoAOjCwgEkwLEM0BQADZTkqwrAAeQryyt4pflJmNH58bLRumDEYMFFrQODeWAAzdnDdIV40fG7edizmLBwwWCgliCX8GAFjUhHROE72LAuB4PzKamYAcxTkZBAsZi6xR9qsqQwY7TQxgfgLMDZdjPMDdYzAqK8Zj8Uw3GB7OatXhENiGeAPAC6FA+ZzQxmEjw6XR6fREg2Go144yCHimMFm83Yi2Wq3WSK2I12+0Ox34p3O2SuN36yI8hOJIDozDEWFYuCoVU1aDgYQiUVEwHEkhkKiyAF9eNNSBAxLwAOT4TzeXwAemZwTgdqKYFi0nijFBMzm6KRGzAGG4YU1VRABKJIDp0SQAE4qGqwM9limqANSM8YAxUr6TXJHhwwLhEAAGKi9b7ImjkRDJs0UdDYSsESTkHN0QsgFgcLh8QTCUQAdyOYAAYqwXgBhDjBdEKJR3DwAflXThcRAg7CgO7cTp8/gmoXCKv1vEnI1nC6XHnRjyS/BSIAASqCsrfIc8ziMlpzs8axZPwj7og0JRlBU1R0sE9RhM0aCtAoVLdL0Mo0AyYznmyHI6FykI8qIfKbNsQpoAcyyiuKjKXJo0rwXKjwDK8SDvJ89a/FQzGKEee4HrwjQ3ERbDyiSBbkgkIDoTSWFDBK7qskGnLcispEbAKOwhlRIonKQZz0VKtyyhJiq0MqqrqiA0barqV7RLwhq/vezyLuwy57BaVo2vajpeKebrnp63qucBHleYwjBHsAZqRmA0axvGiaFgATDWIDppm+BIAAjAArDm3z5v24UPp5T5QGWwZIJldZdOCZBIBlrbtjgeCECQPbUH2eCjiI2S5DoMAKAAKiVBZmNYEAQGqzBgHYfy5oWABseVpiMOVIKtxV5gWeA5HkNnlpWaW1isjWNnVbXUB2nXdqxfWpIwwzLNAfATftaDTbN82LfkpCgowKw7GqpCrrmpXjZNP0zXNMALQ4vDONi+6HgognVbxK07QAHJtGZZogADMe2lXgQNgDVFYtRd9ZNU2ADst2YB1qRdc1vb0EwbCcDwN5Tm5kVVWuspbvxKO7uj3AKO4gW+AELIOZETnle5EHYyAr7vl+wiC4B/5ApC0zAaBAia1BYClKhvA1OuiFNC0sHtJ0GG0gM2FKXhqmEepvJaRRunUUcBlGRcJkyvcrEvG8HxfD8y2ypLqNY8JolCOJsYKqS0mUm78l0l7jLKfhcx+8RGnm+RgrB/pYqGRKDHXKZ0dEh8Soqmqjx2Tql6qwaBszhFmu8D51q2g6J6uspoVgGE6si+i0WxfFUaaslOPfIWePnVlW3E4V5MHaki+azTlZkyADUNs1iBpaz90c493P9oO/N8MW/r/OomjaLo+gjAmHMJYGw9hZbHgVmeZW/drxf1NC+ZIeAMgkCyEdEaVsbYu3tqaR2yFbZyUwkXRSJcfbsnLhCQ4Ad+RBz2HpGiYcm6R2Yg8Yq7EUDx24stU07QgSWlBOCIiUIYRwjOJaREyJUQ0AxDBUQOJWB4jgOZXOpAKRUEIR7ek3sWRlzUpXahNcdJ0JDrRRuxlGKtxYu3CyVlu4ai1H3PUTlDTwLkGPS0E9/LT0MMFFkc8wiuLgAGHSHIQxcCROGBKSU4xbyTIgPKeVMrZWJqmJ4308CBIvkgAALPTK6d9slmnjIIWAeAnGD0CRQIewtR7jz8lPKBviPRennsIYaBQqYryls5MIvBqkj0qsvGK3TgC9L6UaOIppGCJN4AAal4AVBKfS15gHio8N6zAkCgD7CMOARE8DahAGaM0QA"}
+import { Target } from 'hikkaku'
+declare const sprite: Target;
+// ---cut---
 import { moveSteps, whenFlagClicked } from 'hikkaku/blocks'
 
 sprite.run(() => {
@@ -20,7 +24,11 @@ sprite.run(() => {
 
 Use Hikkaku operator blocks when values depend on runtime state.
 
-```ts
+```ts twoslash
+// @twoslash-cache: {"v":1,"hash":"7b22482632a55b94b7cb6b4464b157ead200543be215b445a843fb11f567c954","data":"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"}
+import { Target } from 'hikkaku'
+declare const sprite: Target;
+// ---cut---
 import { getVariable, moveSteps, whenFlagClicked } from 'hikkaku/blocks'
 import { add } from 'hikkaku/blocks'
 
@@ -35,7 +43,13 @@ sprite.run(() => {
 
 ## Common Mistake
 
-```ts
+```ts twoslash
+// @twoslash-cache: {"v":1,"hash":"c1b76dd7454398192d31efaac4d7e71e0dd2a6ef66312f91010ee2aa77bbe185","data":"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIBbYjADKNLHEZwxcRLwAKpdv3Zp2JYRACupAMYwAPGE38ARmQB83WQAl2AazvM7mgEKsIOuwB0wSrBFI0ASFRGHFKECgPBEQQAFkhOF44LEUaADofHwBJMCxNNFkAAykwuCLMsAB5AvzC3mEdUmY0HXxktBaYfhgwIJN3T15YADN2X1UIMF40fBbediTmLBwwWCgZiBn8GF4dbVJeoLgm9ixjzs90iM6AcxjkZBAsZmb+CNLxBphdkc0wHSTaZwdi3MAtbS/AK8Zg6PTnGAbcZ1XhENiaeDXAC6FCehzQ2jACCojWarXaUi6PT6vAGHjswxgYwm7Cm23mixhK16602212+1IhxpJ0U5w6sLs2NxIDozH4WFYuCoRVVaDgPj8ASCwGC6mkvAAvrwRqQIPxeAByfD2RzOAD0dM8cEtWTAgn1ZUY/1G40RMKWYAw3B8qqKICxOJAlMCSAADFQlWBbrMkABOKidUi3GAMWIekTSCIcMC4RAJkBtV6wmjkcuGijobBl2VCgIfLN5gCMFaTKfwSC7XaoOmgZYATABmABsAFYqGMk/KW+NYLR0uqIuwoHgyKQALRTuf7rvTtMnrs3Oh5kBVHBk6GWgDUlr2zDAkH6u2WivY/rQWyYDgSSWgAaq8nADDAABKTJkL0eivu+GyWkYphkJa1yJjAJCsLubbkImfrxiOczNICZCDnGDZNjgeCECQhHUNeeCjkSFxhOBpCyFxkFKrBIzwQCyrRp2VHYcmqaIAA7Jmrw5jenxccWxHlqR1YUXWPaGlGo6wHgBahOIkhiFxvBPrws7cBEPSdEgoDXr0IJTHgm6GoaQA="}
+import { VariableReference } from 'hikkaku'
+import { moveSteps } from 'hikkaku/blocks'
+declare const stepVar: VariableReference;
+// ---cut---
+// @errors: 2365
 moveSteps(stepVar + 5)
 ```