feat: smart commits blocked, also fixed doc generation (#2614)

* fix: bundle requires browser output in platform (#2608)

* fix: bundle requires browser output in platform

* fix: rolldown issues

* fix: finalize rollup

* chore: prettier

* chore: prettier

* fix: adjust root name for better local linking. Dist folder package confused pnpm

* fix: update lockfile for ci

* fix: update tests for unbuild

* fix: simplified canary

* fix: package name copying

* feat: cleaned up docs, please god trigger a push

* feat: actual push, I hate git

* feat: prettier changes

Author: DennisSmolek

.gitignore

@@ -24,6 +24,7 @@ __diff_output__
 # IDE/editor files
 .idea
 .vscode
+.claude/settings.local.json
 
 # Package/lock files
 package-lock.json

docs/loaders/use-gltf.mdx

@@ -57,7 +57,7 @@ useGLTF.setDecoderPath(path)
 If for example your model [`facecap.glb`](https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/facecap.glb) needs KTX2 textures, you can `extendLoader`:
 
 ```tsx
-import { KTX2Loader } from 'three-stdlib'
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
 const ktx2Loader = new KTX2Loader()
 ktx2Loader.setTranscoderPath('https://unpkg.com/three@0.168.0/examples/jsm/libs/basis/')
 

docs/misc/example.mdx

@@ -1,39 +1,9 @@
 ---
 title: Example
-sourcecode: src/core/Example.tsx
+sourcecode: src/core/Helpers/Example/Example.tsx
 ---
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-example--example-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-example--example-st)
 
-> [!Note]
-> Solely for [`CONTRIBUTING`](CONTRIBUTING.md#example) purposes
+A simple counter example component. Click to increment, meta-click to decrement.
 
-A "counter" example.
-
-```tsx
-<Example font="/Inter_Bold.json" />
-```
-
-```tsx
-type ExampleProps = {
-  font: string
-  color?: Color
-  debug?: boolean
-  bevelSize?: number
-}
-```
-
-Ref-api:
-
-```tsx
-const api = useRef<ExampleApi>()
-
-<Example ref={api} font="/Inter_Bold.json" />
-```
-
-```tsx
-type ExampleApi = {
-  incr: (x?: number) => void
-  decr: (x?: number) => void
-}
-```

docs/portals/view.mdx

@@ -20,7 +20,7 @@ sourcecode: src/core/Portal/View/View.tsx
   </li>
 </Grid>
 
-Uses gl.scissor to create viewport segments tied to HTML tracking elements.
+Uses renderer.scissor to create viewport segments tied to HTML tracking elements.
 Allows multiple views with a single canvas. Views follow their tracking elements,
 scroll, resize, etc. Use View.Port inside Canvas to render all views.
 

scripts/docs-config.ts scripts/docs-config.jsscripts/docs-config.ts renamed to scripts/docs-config.js

@@ -1,13 +1,17 @@
-#!/usr/bin/env ts-node
+#!/usr/bin/env node
 
 //* Docs Generation Config ==============================
 // Configuration for TSDoc to MDX documentation generation
 
 import * as path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 // Source Directories --------------------------------------
 // Maps component category folders to their doc output folders
-export const docCategories: Record<string, string> = {
+export const docCategories = {
   Abstractions: 'abstractions',
   Cameras: 'cameras',
   Controls: 'controls',
@@ -24,7 +28,7 @@ export const docCategories: Record<string, string> = {
 }
 
 // Tiers to process (folders under src/)
-export const tiers = ['core', 'web', 'external', 'experimental'] as const
+export const tiers = ['core', 'web', 'external', 'experimental']
 
 // Injection Tags --------------------------------------
 // Tags that can be used in .docs.mdx templates to inject auto-generated content
@@ -34,9 +38,7 @@ export const injectionTags = [
   'AUTO:props', // Props table generated from types
   'AUTO:badges', // Storybook/suspense badges
   'AUTO:all', // All of the above in default order
-] as const
-
-export type InjectionTag = (typeof injectionTags)[number]
+]
 
 // Paths --------------------------------------
 export const paths = {
@@ -47,7 +49,7 @@ export const paths = {
 
 // Badge Templates --------------------------------------
 export const badges = {
-  storybook: (storyPath: string) =>
+  storybook: (storyPath) =>
     `[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/${storyPath})`,
   suspense: '[![](https://img.shields.io/badge/-suspense-brightgreen)](https://r3f.docs.pmnd.rs/api/hooks#useloader)',
   domOnly: '![](https://img.shields.io/badge/-Dom%20only-red)',
@@ -56,16 +58,7 @@ export const badges = {
 
 // Component Metadata Overrides --------------------------------------
 // For components that need special handling or metadata not derivable from TSDoc
-export const componentOverrides: Record<
-  string,
-  {
-    title?: string
-    badges?: string[]
-    storyPath?: string
-    suspense?: boolean
-    domOnly?: boolean
-  }
-> = {
+export const componentOverrides = {
   // Example overrides - add as needed
   // 'Html': { domOnly: true },
   // 'useGLTF': { suspense: true },
@@ -87,7 +80,7 @@ export const filePatterns = {
  *   - useGLTF -> use-gltf
  *   - Text3D -> text3d
  */
-export function toKebabCase(name: string): string {
+export function toKebabCase(name) {
   return name
     .replace(/([a-z])([A-Z])/g, '$1-$2') // Add hyphen between camelCase boundaries
     .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') // Handle consecutive caps like GLTF -> gltf
@@ -97,6 +90,6 @@ export function toKebabCase(name: string): string {
 /**
  * Generate the output filename for a component's documentation.
  */
-export function getDocFileName(componentName: string): string {
+export function getDocFileName(componentName) {
   return `${toKebabCase(componentName)}.mdx`
 }

scripts/generate-docs.ts

@@ -8,46 +8,10 @@ import * as fs from 'fs'
 import * as path from 'path'
 import * as chokidar from 'chokidar'
 import { parse as parseComment } from 'comment-parser'
-import { withCompilerOptions, PropItem } from 'react-docgen-typescript'
-import {
-  docCategories,
-  tiers,
-  paths,
-  badges,
-  componentOverrides,
-  InjectionTag,
-  toKebabCase,
-  getDocFileName,
-} from './docs-config'
-
-//* Types ==============================
-
-interface ExtractedDoc {
-  name: string
-  description: string
-  examples: { title: string; code: string }[]
-  props: PropInfo[]
-  see: string[]
-  remarks: string[]
-  sourcePath: string
-  category: string
-  storyPath: string
-}
-
-interface PropInfo {
-  name: string
-  type: string
-  required: boolean
-  defaultValue: string | null
-  description: string
-}
-
-interface ProcessedComponent {
-  filePath: string
-  docsTemplatePath: string | null
-  outputPath: string
-  extracted: ExtractedDoc | null
-}
+import reactDocgen from 'react-docgen-typescript'
+const { withCompilerOptions } = reactDocgen
+import { docCategories, tiers, paths, badges, componentOverrides, toKebabCase, getDocFileName } from './docs-config.js'
+import type { InjectionTag } from './docs-config.js'
 
 //* TSDoc Extraction ==============================
 
@@ -58,10 +22,10 @@ const docgenParser = withCompilerOptions(
     savePropValueAsString: true,
     shouldExtractLiteralValuesFromEnum: true,
     shouldRemoveUndefinedFromOptional: true,
-    propFilter: (prop: PropItem) => {
+    propFilter: (prop: any) => {
       // Filter out inherited HTML/React props unless explicitly documented
       if (prop.declarations && prop.declarations.length > 0) {
-        const isFromNodeModules = prop.declarations.some((d) => d.fileName.includes('node_modules'))
+        const isFromNodeModules = prop.declarations.some((d: any) => d.fileName.includes('node_modules'))
         if (isFromNodeModules) return false
       }
       return true
@@ -678,8 +642,10 @@ function handleFileChange(filePath: string, componentMap: Map<string, ProcessedC
   console.log(`   ✅ Updated: ${path.relative(paths.docs, component.outputPath)}`)
 }
 
-// Run
-if (require.main === module) {
+// Run (ESM equivalent of require.main === module)
+import { fileURLToPath } from 'url'
+const __filename = fileURLToPath(import.meta.url)
+if (process.argv[1] === __filename) {
   main().catch(console.error)
 }