Options on import shortcuts?

[fluid-design-io]

First of all, great repo!

I have used your monorepo setup from quite a long time ago and I loved how you use a script to generate index.ts on the root of the ui component folder. For me, it makes every easier and made the code imports cleaner, which I can do something like this:

import {
  Button,
  ScrollArea,
  Separator,
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
// or any other shadcn components
} from '@ui/index'

Recently I'm stared creating a new monorepo and I saw things have changed a bit. (And I loved the improvements ✨)

However, I missed having the index.ts for all component import shortcut. I'm not sure if it is because the old scripts were having confilcts with the use-toast.ts and now the sonnar.tsx component, so I've modified the generateIndex.mts like so which solves issues mentioned above.

//generateIndex.mts
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";

// Get the current file's directory path
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const componentsPath = path.join(__dirname, "../components/ui");
const indexFilePath = path.join(componentsPath, "../../index.ts");

// Generate the index.tsx file by looping through all the files in the components folder
const componentFiles = fs.readdirSync(componentsPath);
const exportStatements = componentFiles.map((file) => {
  // ignore use-toast.tsx
  if (file === "use-toast.ts") return "";
  if (file === "sonner.tsx")
    return "export { Toaster as Sonner } from './components/ui/sonner';";
  const componentName = path.basename(file, ".tsx");
  return `export * from './components/ui/${componentName}';`;
});
const banner = `//! This file is auto-generated by the generateIndex.mts script. Do not edit this file directly.\n\n`;
const indexFileContent = banner + exportStatements.join("\n") + "\n";

fs.writeFileSync(indexFilePath, indexFileContent, "utf8");

console.log("\x1b[32m%s\x1b[0m", "index.tsx file generated successfully.");

The only thing that will be different for the import paths from shadcn doc is the Sonner component, which now becomes:

import { Sonner } from '@ui/index'

It's isn't an issue really, just wanted to share this in case anyone needs it!

[dan5py]

Hi @fluid-design-io , that's awesome thank you. 💪

Btw I removed the index file since I've managed to make auto-imports work without it.

I'll leave this issue opened in case someone needs it.

[atralice]

@dan5py I was not able to make auto imports work on VsCode. That should work out of the box?

[dan5py]

@dan5py I was not able to make auto imports work on VsCode. That should work out of the box?

Hi @atralice, it should work out of the box. Maybe it's the typescript version, I've tested it with 5.4.3 and it works.

You can try adding [email protected] to the workspace root.
If you're using pnpm you can do it with:

pnpm add -wD [email protected]

And then select the typescript version of your workspace from the VSCode's command palette.