mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 14:19:11 +03:00
Alaister Young
4f5759085e
AIEditor loaded Monaco's Deno extra libs via /* @vite-ignore */ dynamic imports of @/public/deno/*.d.ts. Under Next/turbopack the raw-loader rule serves them as text modules, but under Vite the ignored imports failed at runtime (caught + console.error), so edge-function editors silently got no Deno type hints in the TanStack build. Extend the md raw loader in vite.config.ts into rawTextLoader, mirroring both next.config.ts raw-loader rules. The two .d.ts files resolve through an exact-specifier allowlist to \0-virtual ids served from a load hook: Rolldown's native dep scanner skips JS plugin hooks and hard-fails parsing TS declaration syntax (get stdin(): ...;) as runtime TS — which is why the @vite-ignore hack existed — and the \0 id keeps the scanner externalizing the module instead. The AIEditor imports stay literal (statically analyzable by both bundlers) with the 'as string' cast keeping tsc from resolving the .d.ts files as declaration files. Verified: vite dev serves both modules as JS string modules and the dep scan passes; vite build emits them as string chunks; next dev (turbopack) still compiles /project/[ref]/functions/new; tsc --noEmit clean. Claude-Session: https://claude.ai/code/session_01MLH8WVg8zBJnmZTYTV3ooo
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA