wevm / vocs

Minimal Documentation Framework, powered by React + Vite.

Home Page:https://vocs.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

inlined twoslash `filename` tag doesnt seem to be passed through to included snippets

oveddan opened this issue · comments

You can see a full example of this reprod in this repository

Given I have two snippets:

docs/snippets/config.ts:

import { zora } from "viem/chains";
import { http, createPublicClient } from "viem";

export const publicClient = createPublicClient({
  // this will determine which chain to interact with
  chain: zora,
  transport: http(),
});

and another snippet that imports that code at docs/snippets/example.ts:

import { publicClient } from "./config";

console.log(publicClient);

I'm attempting to import both with vocs, and use twoslash but run into issues.

Ideally I can have the markdown look like this:

Screenshot 2024-05-22 at 10 43 31 AM

But this results in a twoslash error:
Cannot find module './config' or its corresponding type declarations.

If I try to add twoslash include instructions to example.ts like:

// @filename: config.ts
// [!include ~/snippets/config.ts]

// @filename: example.ts
// ---cut---
import { publicClient } from "./config";

console.log(publicClient);

I get an error:

example.ts
  [2305] 107 - Module '"./config"' has no exported member 'publicClient'.

If I inline that code, the issue goes away:

Screenshot 2024-05-22 at 10 44 05 AM

It seems like the only way to get the issue to go away while being able to import the file is explicitly setting the external files inline, like:

Screenshot 2024-05-22 at 10 45 12 AM

Would it be possible to pass through the included files from the codegroup to included files?
Or is there another recommended approach for including snippets that include other snippets?