get-sandpack-files

A VSCode extension that generates type-safe Sandpack Option helper from a selected folder.

When it triggered, collect target folder's file names, and create a files.for.sandpack.ts

files.for.sandpack.ts provides

• type-safe activeFile
• type-safe visibleFiles
• runtime raw file loading via import.meta.glob
• filename autocomplete
• reduced string typo risk

Usage gif

REQUIREMENTS ❗

• @codesandbox/sandpack-react
• react
• vite

Installation

Install from VSCode Marketplace:

or search: get-sandpack-files

Github repo

Why

Using Sandpack often looks like this:

<Sandpack
  options={{
    activeFile: "/App.tsx",
    visibleFiles: ["/index.ts"],
  }}
/>

This approach has a few drawbacks:

• file paths are plain strings
• autocomplete is unavailable
• typos are easy to introduce
• non-existent files can be referenced
• refactoring file names is harder to track

~~plz sandpack bros add generic for file name union~~

This extension generates a strict filename union type from your actual folder contents:

type FileNames = "/App.tsx" | "/index.ts" | "/styles.css";

Which enables:

type StrictOptions = {
  activeFile?: FileNames;
  visibleFiles?: FileNames[];
};

Your editor can then provide autocomplete and type checking like this

Notes

This extension does not auto-update generated files.

Generated files are updated only when you run the command.

• ❗ if you add NEW FILE or edit FILE NAME , trigger once more ❗

• just editing file contents(NOT FILE NAME), triggering is not needed

  • because import.meta.glob is a dynamic import.

Example

Folder

example/
├── App.tsx
├── index.ts
└── styles.css

Generated file

type FileNames = "/App.tsx" | "/index.ts" | "/styles.css";

// dirName can be changed by user options
// "base", "parent", "both"
// default is "parent"
// take a look "naming" option
export const SPOptions_dirName = {
  create: createSandpackOptions,
};

async function createSandpackOptions(props?) {
  const files = await getRawFiles();

  return {
    ...props,
    files,
  };
}

Usage

1. Select your Sandpack source folder

Example:

src/example/

2. run Generate Sandpack Files

use Explorer context menu

or Open Command Palette:

Generate Sandpack Files

3. Generated output

src/
├── example/                // target dir
│   ├── App.tsx
│   ├── index.ts
│   └── styles.css
└── files.for.sandpack.ts   // output

In your project

import { SPOptions_dirName } from "./files.for.sandpack";

const sandpackProps = await SPOptions_dirName.create({
  options: {
    activeFile: "/App.tsx",
    visibleFiles: ["/index.ts"],
  },
});

Autocomplete is now available for file paths.

How it works

Generated code includes:

Typed filename union

type FileNames = ...

Typed Sandpack options

activeFile?: FileNames;
visibleFiles?: FileNames[];

Runtime raw file loading

const modules = import.meta.glob("./example/*", {
  query: "?raw",
  import: "default",
});

File object creation

{
  "/App.tsx": "...source...",
  "/index.ts": "...source...",
}

This object is injected directly into Sandpack.

License

MIT

LICENSE