added barrel file generation (#1015)

Author: shairez

.changeset/fluffy-turkeys-grow.md

@@ -0,0 +1,16 @@
+---
+'qwik-ui': minor
+---
+
+FEAT: added a barrel file to the components root folder
+
+Now when you generate a component qwik-ui will create an `index.ts` file in your components folder which exports the newly generated components.
+
+Example: `qwik-ui add input`
+
+Generated output:
+
+```bash
+src/components/index.ts # exports * from './input/input'
+src/components/input/input.tsx
+```

packages/cli/src/generators/component/component-generator.spec.ts

@@ -33,6 +33,10 @@ describe('Component generator', () => {
 
     await componentGenerator(tree, options);
 
+    expect(tree.exists(`${DEFAULT_COMPONENTS_LOCATION}/index.ts`)).toBeTruthy();
+    const barrelContent = tree.read(`${DEFAULT_COMPONENTS_LOCATION}/index.ts`, 'utf-8');
+    expect(barrelContent).toContain(`export * from './button/button';`);
+
     expect(tree.exists(`${DEFAULT_COMPONENTS_LOCATION}/button/button.tsx`)).toBeTruthy();
   });
 
@@ -48,5 +52,9 @@ describe('Component generator', () => {
 
     expect(tree.exists(`${DEFAULT_COMPONENTS_LOCATION}/button/button.tsx`)).toBeTruthy();
     expect(tree.exists(`${DEFAULT_COMPONENTS_LOCATION}/input/input.tsx`)).toBeTruthy();
+
+    const barrelContent = tree.read(`${DEFAULT_COMPONENTS_LOCATION}/index.ts`, 'utf-8');
+    expect(barrelContent).toContain(`export * from './button/button';
+export * from './input/input';`);
   });
 });

packages/cli/src/generators/component/component-generator.ts

@@ -42,11 +42,21 @@ export async function componentGenerator(tree: Tree, options: ComponentGenerator
     components: ComponentConfig[];
   }>(componentsJsonPath);
 
-  const componentTypes = componentsRegistry.components.map((component) => component.type);
+  const allComponentTypes = componentsRegistry.components.map(
+    (component) => component.type,
+  );
   const requestedComponents = options.types.split(',');
 
+  // generate barrel file if does not exist
+  const barrelPath = outputComponentsFolder + '/index.ts';
+  if (!tree.exists(barrelPath)) {
+    tree.write(barrelPath, '');
+  }
+
+  let barrelContentToAppend = '';
+
   requestedComponents.forEach((component) => {
-    const indexOfComponent = componentTypes.indexOf(component.trim());
+    const indexOfComponent = allComponentTypes.indexOf(component.trim());
     if (indexOfComponent === -1) {
       throw new Error(`${component} is not a registered component.
 Please file an issue if you want it to be implemented.`);
@@ -70,8 +80,19 @@ Please file an issue if you want it to be implemented.`);
       outputComponentBasePath,
       specificComponentConfig.files,
     );
+
+    specificComponentConfig.files.map((file) => {
+      barrelContentToAppend += `export * from './${specificComponentConfig.componentFolder}/${file.split('.')[0]}';\n`;
+    });
   });
 
+  // update barrel file
+  const barrelContent = tree.read(barrelPath, 'utf-8');
+  if (barrelContent !== '' && barrelContent.slice(-1) !== '\n') {
+    barrelContentToAppend = '\n' + barrelContentToAppend;
+  }
+  tree.write(barrelPath, barrelContent + barrelContentToAppend);
+
   await formatFiles(tree);
 }