feat: Move components to components/ui and support intra-generator references

.changeset/components-folder-organization.md

@@ -0,0 +1,31 @@
+---
+'@baseplate-dev/react-generators': patch
+---
+
+Reorganize components folder structure in generated codebases
+
+The components folder structure has been reorganized to improve organization and reduce bundle size:
+
+**Breaking Changes:**
+
+- Removed bundle export at `components/index.ts` to prevent importing all components at once
+- Moved all UI components from `components/` to `components/ui/` folder
+
+**New Structure:**
+
+```
+components/
+├── ui/           # UI components
+│   ├── button.tsx
+│   ├── input.tsx
+│   └── ...
+└── [other-components]  # Custom application components
+```
+
+**Migration:**
+
+- Replace `import { Button } from '@src/components'` with `import { Button } from '@src/components/ui/button'`
+- Update imports to use specific component paths instead of barrel exports
+- UI components are now co-located in the `ui/` subfolder for better organization
+
+This change improves tree-shaking, reduces bundle size, and provides clearer separation between UI library components and custom application components.

.changeset/template-name-syntax.md

@@ -0,0 +1,33 @@
+---
+'@baseplate-dev/core-generators': patch
+---
+
+Add $templateName syntax for intra-generator template references
+
+Templates can now reference other templates within the same generator using the `$templateName` syntax. This enables templates to access file paths of other templates in the same generator during generation.
+
+Key features:
+
+- Use `$templateName` in template files to reference other generator templates
+- Kebab-case template names are automatically converted to camelCase (e.g., `session-constants` → `sessionConstants`)
+- Configure referenced templates using the `referencedGeneratorTemplates` field in extractor.json
+- Works seamlessly with existing variable replacement and import maps
+- Provides clear error messages for missing template references
+
+Example usage:
+
+```typescript
+// In template file
+import { Constants } from '$sessionConstants';
+import { Utils } from '$authUtils';
+
+// In extractor.json
+{
+  "user-service": {
+    "sourceFile": "services/user.service.ts",
+    "referencedGeneratorTemplates": ["session-constants", "auth-utils"]
+  }
+}
+```
+
+This feature is designed for intra-generator template references only. For cross-generator references, continue using import map providers.

packages/core-generators/src/generators/node/eslint/generated/template-renderers.ts

@@ -16,7 +16,7 @@ export interface NodeEslintRenderers {
         RenderTsTemplateFileActionInput<
           typeof NODE_ESLINT_TEMPLATES.eslintConfig
         >,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };

packages/core-generators/src/generators/node/ts-utils/extractor.json

@@ -28,6 +28,7 @@
       "importMapProviders": {},
       "pathRootRelativePath": "{src-root}/utils/nulls.ts",
       "projectExports": { "restrictObjectNulls": {} },
+      "referencedGeneratorTemplates": ["normalize-types"],
       "sourceFile": "src/utils/nulls.ts",
       "variables": {}
     },

packages/core-generators/src/generators/node/ts-utils/generated/template-renderers.ts

@@ -14,7 +14,7 @@ export interface NodeTsUtilsRenderers {
     render: (
       options: Omit<
         RenderTsTemplateFileActionInput<typeof NODE_TS_UTILS_TEMPLATES.arrays>,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };
@@ -24,23 +24,23 @@ export interface NodeTsUtilsRenderers {
         RenderTsTemplateFileActionInput<
           typeof NODE_TS_UTILS_TEMPLATES.normalizeTypes
         >,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };
   nulls: {
     render: (
       options: Omit<
         RenderTsTemplateFileActionInput<typeof NODE_TS_UTILS_TEMPLATES.nulls>,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };
   string: {
     render: (
       options: Omit<
         RenderTsTemplateFileActionInput<typeof NODE_TS_UTILS_TEMPLATES.string>,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };
@@ -81,6 +81,7 @@ const nodeTsUtilsRenderersTask = createGeneratorTask({
               typescriptFile.renderTemplateFile({
                 template: NODE_TS_UTILS_TEMPLATES.nulls,
                 destination: paths.nulls,
+                generatorPaths: paths,
                 ...options,
               }),
           },

packages/core-generators/src/generators/node/ts-utils/generated/typed-templates.ts

@@ -32,6 +32,7 @@ const nulls = createTsTemplateFile({
   importMapProviders: {},
   name: 'nulls',
   projectExports: { restrictObjectNulls: {} },
+  referencedGeneratorTemplates: { normalizeTypes: {} },
   source: {
     path: path.join(import.meta.dirname, '../templates/src/utils/nulls.ts'),
   },

packages/core-generators/src/generators/node/ts-utils/templates/src/utils/nulls.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 
-import type { NormalizeTypes } from './normalize-types.js';
+import type { NormalizeTypes } from '$normalizeTypes';
 
 /**
  * Restricts an object from having null in certain fields. This

packages/core-generators/src/generators/node/ts-utils/ts-utils.generator.ts

@@ -30,6 +30,7 @@ export const tsUtilsGenerator = createGenerator({
                 template,
                 destination: paths[key as TsUtilKey],
                 generatorInfo: builder.generatorInfo,
+                generatorPaths: paths as unknown as Record<'', string>,
               });
             }
           },

packages/core-generators/src/generators/node/typescript/typescript.generator.ts

@@ -15,7 +15,7 @@ import { safeMergeAll } from '@baseplate-dev/utils';
 import path from 'node:path';
 import { z } from 'zod';
 
-import type { RenderTsTemplateGroupActionInput as RenderTsTemplateGroupActionInputV2 } from '#src/renderers/typescript/actions/render-ts-template-group-action.js';
+import type { RenderTsTemplateGroupActionInput } from '#src/renderers/typescript/actions/render-ts-template-group-action.js';
 import type {
   RenderTsCodeFileTemplateOptions,
   RenderTsFragmentActionInput,
@@ -90,7 +90,7 @@ export interface TypescriptFileProvider {
    * @returns The action for the template group
    */
   addLazyTemplateGroup<T extends TsTemplateGroup = TsTemplateGroup>(
-    payload: RenderTsTemplateGroupActionInputV2<T> & {
+    payload: RenderTsTemplateGroupActionInput<T> & {
       generatorInfo: GeneratorInfo;
     },
     options?: Omit<LazyTemplateFileEntry, 'payload'>,
@@ -116,7 +116,7 @@ export interface TypescriptFileProvider {
   renderTemplateGroup<
     T extends Record<string, TsTemplateFile> = Record<string, TsTemplateFile>,
   >(
-    payload: RenderTsTemplateGroupActionInputV2<T>,
+    payload: RenderTsTemplateGroupActionInput<T>,
   ): BuilderAction;
   /**
    * Marks an import as used

packages/core-generators/src/generators/node/vitest/generated/template-renderers.ts

@@ -16,7 +16,7 @@ export interface NodeVitestRenderers {
         RenderTsTemplateFileActionInput<
           typeof NODE_VITEST_TEMPLATES.globalSetup
         >,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };
@@ -26,7 +26,7 @@ export interface NodeVitestRenderers {
         RenderTsTemplateFileActionInput<
           typeof NODE_VITEST_TEMPLATES.vitestConfig
         >,
-        'destination' | 'importMapProviders' | 'template'
+        'destination' | 'importMapProviders' | 'template' | 'generatorPaths'
       >,
     ) => BuilderAction;
   };

packages/core-generators/src/renderers/typescript/actions/render-ts-template-file-action.ts

@@ -14,6 +14,7 @@ import { differenceSet } from '@baseplate-dev/utils';
 import type { TsPositionedHoistedFragment } from '../fragments/types.js';
 import type { RenderTsCodeFileTemplateOptions } from '../renderers/file.js';
 import type {
+  InferGeneratorPathsFromReferencedGeneratorMap,
   InferImportMapProvidersFromProviderTypeMap,
   InferTsTemplateVariablesFromMap,
   TsTemplateFile,
@@ -58,11 +59,25 @@ type RenderTsTemplateFileActionImportMapProvidersInput<
       >;
     };
 
+type RenderTsTemplateFileActionReferencedGeneratorTemplatesInput<
+  T extends TsTemplateFile,
+> = keyof Exclude<T['referencedGeneratorTemplates'], undefined> extends never
+  ? Partial<{
+      // Slightly awkward hack to force Typescript to enforce the keys for an empty generator paths object
+      generatorPaths: Partial<Record<'', string>>;
+    }>
+  : {
+      generatorPaths: InferGeneratorPathsFromReferencedGeneratorMap<
+        T['referencedGeneratorTemplates']
+      >;
+    };
+
 export type RenderTsTemplateFileActionInput<
   T extends TsTemplateFile = TsTemplateFile,
 > = RenderTsTemplateFileActionInputBase<T> &
   RenderTsTemplateFileActionVariablesInput<T> &
-  RenderTsTemplateFileActionImportMapProvidersInput<T>;
+  RenderTsTemplateFileActionImportMapProvidersInput<T> &
+  RenderTsTemplateFileActionReferencedGeneratorTemplatesInput<T>;
 
 export function renderTsTemplateFileAction<
   T extends TsTemplateFile = TsTemplateFile,
@@ -75,6 +90,7 @@ export function renderTsTemplateFileAction<
   importMapProviders,
   renderOptions,
   positionedHoistedFragments,
+  generatorPaths,
   generatorInfo: providedGeneratorInfo,
 }: RenderTsTemplateFileActionInput<T>): BuilderAction {
   return {
@@ -124,6 +140,7 @@ export function renderTsTemplateFileAction<
         variables: variableValues,
         importMapProviders,
         positionedHoistedFragments,
+        generatorPaths: generatorPaths ?? {},
         options: {
           ...renderOptions,
           includeMetadata: shouldIncludeMetadata,

packages/core-generators/src/renderers/typescript/actions/render-ts-template-group-action.ts

@@ -11,6 +11,7 @@ import path from 'node:path';
 
 import type { RenderTsCodeFileTemplateOptions } from '../renderers/file.js';
 import type {
+  InferGeneratorPathsFromReferencedGeneratorMap,
   InferImportMapProvidersFromProviderTypeMap,
   InferTsTemplateVariablesFromMap,
   TsTemplateFile,
@@ -48,6 +49,13 @@ type InferImportMapProvidersFromTemplateGroup<T extends TsTemplateGroup> =
     >;
   }>;
 
+type InferGeneratorPathsFromTemplateGroup<T extends TsTemplateGroup> =
+  IntersectionOfValues<{
+    [K in keyof T]: InferGeneratorPathsFromReferencedGeneratorMap<
+      T[K]['referencedGeneratorTemplates']
+    >;
+  }>;
+
 interface RenderTsTemplateGroupActionInputBase<T extends TsTemplateGroup> {
   group: T;
   paths: {
@@ -74,7 +82,14 @@ export type RenderTsTemplateGroupActionInput<
     ? {
         importMapProviders?: never;
       }
-    : { importMapProviders: InferImportMapProvidersFromTemplateGroup<T> });
+    : { importMapProviders: InferImportMapProvidersFromTemplateGroup<T> }) &
+  (keyof InferGeneratorPathsFromTemplateGroup<T> extends never
+    ? {
+        generatorPaths?: never;
+      }
+    : {
+        generatorPaths: InferGeneratorPathsFromTemplateGroup<T>;
+      });
 
 /**
  * Extracts the template file inputs from a template group
@@ -90,6 +105,7 @@ export function extractTsTemplateFileInputsFromTemplateGroup<
   importMapProviders,
   writeOptions,
   renderOptions,
+  generatorPaths,
 }: RenderTsTemplateGroupActionInput<T>): RenderTsTemplateFileActionInput[] {
   const fileActionInputs: RenderTsTemplateFileActionInput[] = [];
   const typedImportMapProviders =
@@ -124,6 +140,7 @@ export function extractTsTemplateFileInputsFromTemplateGroup<
           : undefined,
       writeOptions: writeOptions?.[key],
       importMapProviders: templateSpecificProviders,
+      generatorPaths: generatorPaths ?? {},
       renderOptions: {
         ...renderOptions,
         resolveModule: (specifier) => {

packages/core-generators/src/renderers/typescript/extractor/organize-ts-template-imports.ts

@@ -1,6 +1,7 @@
 import type { ResolverFactory } from 'oxc-resolver';
 import type { SourceFile } from 'ts-morph';
 
+import { camelCase } from 'es-toolkit';
 import { isBuiltin } from 'node:module';
 import path from 'node:path';
 import { Node, Project, SyntaxKind } from 'ts-morph';
@@ -28,9 +29,9 @@ export interface TsTemplateImportLookupContext {
    */
   outputDirectory: string;
   /**
-   * The output relative paths of the files that are generated by the generator.
+   * A map of output relative paths to the name of the template in the generator.
    */
-  internalOutputRelativePaths: string[];
+  internalOutputRelativePaths: Map<string, string>;
   /**
    * The resolver factory to use to resolve imports.
    */
@@ -75,6 +76,24 @@ function toTypesPackageName(pkgName: string): string | undefined {
   return `@types/${pkgName}`;
 }
 
+/**
+ * The result of organizing the imports in a Typescript template file.
+ */
+interface OrganizeTsTemplateImportsResult {
+  /**
+   * The contents of the file with the imports converted to template paths.
+   */
+  contents: string;
+  /**
+   * The project exports that are used in the file.
+   */
+  usedProjectExports: TsProjectExport[];
+  /**
+   * The generator files that are used in the file.
+   */
+  referencedGeneratorTemplates: Set<string>;
+}
+
 /**
  * Organizes the imports in a Typescript template file.
  * - Removes unused imports
@@ -96,10 +115,7 @@ export async function organizeTsTemplateImports(
     resolver,
     outputDirectory,
   }: TsTemplateImportLookupContext,
-): Promise<{
-  contents: string;
-  usedProjectExports: TsProjectExport[];
-}> {
+): Promise<OrganizeTsTemplateImportsResult> {
   const project = new Project({ useInMemoryFileSystem: true });
   const sourceFile = project.createSourceFile(filePath, contents);
 
@@ -163,6 +179,7 @@ export async function organizeTsTemplateImports(
     );
 
   const usedProjectExports: TsProjectExport[] = [];
+  const referencedGeneratorTemplates = new Set<string>();
 
   const updatedImportDeclarations = await Promise.all(
     tsImportDeclarations.map(async (importDeclaration) => {
@@ -198,16 +215,14 @@ export async function organizeTsTemplateImports(
       }
       // Don't modify imports for files in the generator
       const relativeOutputPath = path.relative(outputDirectory, resolvedPath);
-      if (internalOutputRelativePaths.includes(relativeOutputPath)) {
-        const relativeImportPath = path
-          .relative(path.dirname(filePath), resolvedPath)
-          .replace(/\.(t|j)sx?$/, '.js');
+      const internalTemplateName =
+        internalOutputRelativePaths.get(relativeOutputPath);
+      if (internalTemplateName) {
+        referencedGeneratorTemplates.add(internalTemplateName);
         const fixedImportDeclaration: TsImportDeclaration = {
           ...importDeclaration,
-          // convert to relative path
-          moduleSpecifier: relativeImportPath.startsWith('.')
-            ? relativeImportPath
-            : `./${relativeImportPath}`,
+          // convert to internal template name
+          moduleSpecifier: `$${camelCase(internalTemplateName)}`,
         };
         return [fixedImportDeclaration];
       }
@@ -291,5 +306,6 @@ export async function organizeTsTemplateImports(
   return {
     contents: sourceFile.getFullText(),
     usedProjectExports,
+    referencedGeneratorTemplates,
   };
 }