refactor: component generator enhancements

- style and test files support
- "flat" option
- ability to be generated for app or lib

Author: dmitry-stepanenko

packages/qwik-nx/src/generators/component/files/__fileName__.tsx__template__

@@ -0,0 +1,17 @@
+import { component$<%= hasStyles ? ', useStylesScoped$' : '' %> } from '@builder.io/qwik';
+<% if(hasStyles) { %>
+import styles from './<%- fileName %>.<%- style %>?inline';
+<% } %>
+
+interface <%= className %>Props {
+
+}
+
+const <%= className %> = component$((props: <%= className %>Props)=>{
+  <% if(hasStyles) { %>
+  useStylesScoped$(styles);
+  <% } %>
+  return <>
+
+  </>;
+});

packages/qwik-nx/src/generators/component/files/common/__fileName__.tsx.template

@@ -0,0 +1,9 @@
+import { createDOM } from '@builder.io/qwik/testing';
+import { test, expect } from 'vitest';
+import { <%- className %> } from './<%- fileName %>';
+
+test(`[<%- className %> Component]: Should render`, async () => {
+  const { screen, render } = await createDOM();
+  await render(<<%- className %> />);
+  expect(screen.innerHTML).toBeTruthy();
+});

packages/qwik-nx/src/generators/component/files/styles/__fileName__.__style__.template

@@ -1,21 +1,24 @@
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import { Tree } from '@nrwl/devkit';
 import componentGenerator from './generator';
+import {createLib} from './../../utils/testing-generators';
 
 describe('component generator', () => {
   let appTree: Tree;
+  const projectName = 'dummy-lib';
 
   beforeEach(() => {
     appTree = createTreeWithEmptyWorkspace();
+    createLib(appTree, projectName);
   });
 
   it('should generate a component file inside a given directory', async () => {
     await componentGenerator(appTree, {
       name: 'hello',
-      directory: 'components'
+      project: projectName
     });
 
-    expect(appTree.exists('libs/components/hello/hello.tsx')).toBeTruthy();
+    expect(appTree.exists(`libs/${projectName}/src/lib/hello/hello.tsx`)).toBeTruthy();
 
   });
 });

packages/qwik-nx/src/generators/component/files/tests/__fileName__.spec.tsx.template

@@ -2,53 +2,88 @@ import {
   addProjectConfiguration,
   formatFiles,
   generateFiles,
-  getWorkspaceLayout,
+  getProjects,
+  joinPathFragments,
+  logger,
   names,
-  offsetFromRoot,
   Tree,
 } from '@nrwl/devkit';
-import * as path from 'path';
+import { addStyledModuleDependencies } from '../../utils/add-styled-dependencies';
 import { ComponentGeneratorSchema } from './schema';
 
 interface NormalizedSchema extends ComponentGeneratorSchema {
-  projectName: string;
+  directory: string;
+  hasStyles: boolean;
   projectRoot: string;
-  projectDirectory: string;
-  parsedTags: string[];
 }
 
-function normalizeOptions(tree: Tree, options: ComponentGeneratorSchema): NormalizedSchema {
-  const name = names(options.name).fileName;
-  const projectDirectory = options.directory
-    ? `${names(options.directory).fileName}/${name}`
-    : name;
-  const projectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
-  const projectRoot = `${getWorkspaceLayout(tree).libsDir}/${projectDirectory}`;
-  const parsedTags = options.tags
-    ? options.tags.split(',').map((s) => s.trim())
-    : [];
+function getDirectory(host: Tree, options: ComponentGeneratorSchema) {
+  const workspace = getProjects(host);
+  let baseDir: string;
+  if (options.directory) {
+    baseDir = options.directory;
+  } else {
+    baseDir =
+      workspace.get(options.project).projectType === 'application'
+        ? 'app'
+        : 'lib';
+  }
+  return options.flat ? baseDir : joinPathFragments(baseDir, names(options.name).fileName);
+}
+
+function normalizeOptions(
+  host: Tree,
+  options: ComponentGeneratorSchema
+): NormalizedSchema {
+
+  const project = getProjects(host).get(options.project);
+
+  if (!project) {
+    logger.error(
+      `Cannot find the ${options.project} project. Please double check the project name.`
+    );
+    throw new Error();
+  }
+
+  const { sourceRoot: projectRoot } = project;
+
+  const directory = getDirectory(host, options);
 
   return {
     ...options,
-    projectName,
+    directory,
+    hasStyles: options.style !== 'none',
     projectRoot,
-    projectDirectory,
-    parsedTags,
   };
 }
 
 function createComponentFiles(tree: Tree, options: NormalizedSchema) {
+  const libNames = names(options.name);
+  const hasStyles = options.style && options.style !== 'none';
     const templateOptions = {
       ...options,
-      ...names(options.name),
-      offsetFromRoot: offsetFromRoot(options.projectRoot),
-      template: ''
+      ...libNames,
+      hasStyles
     };
-    generateFiles(tree, path.join(__dirname, 'files'), options.projectRoot, templateOptions);
+
+    const componentDir = joinPathFragments(
+      options.projectRoot,
+      options.directory
+    );
+
+    generateFiles(tree, joinPathFragments(__dirname, 'files/common'), componentDir, templateOptions);
+    if (hasStyles) {
+      generateFiles(tree, joinPathFragments(__dirname, 'files/styles'), componentDir, templateOptions);
+    }
+    if (!options.skipTests) {
+      generateFiles(tree, joinPathFragments(__dirname, 'files/tests'), componentDir, templateOptions);
+    }
 }
 
 export default async function componentGenerator(tree: Tree, options: ComponentGeneratorSchema) {
   const normalizedOptions = normalizeOptions(tree, options);
   createComponentFiles(tree, normalizedOptions);
   await formatFiles(tree);
+
+  return addStyledModuleDependencies(tree, normalizedOptions.style)
 }

packages/qwik-nx/src/generators/component/generator.spec.ts

@@ -1,5 +1,8 @@
 export interface ComponentGeneratorSchema {
     name: string;
-    tags?: string;
+    project: string;
     directory?: string;
+    style?: 'none' | 'css' | 'scss' | 'styl' | 'less';
+    skipTests?: boolean;
+    flat?: boolean;
 }

packages/qwik-nx/src/generators/component/generator.ts

@@ -7,22 +7,68 @@
   "properties": {
     "name": {
       "type": "string",
-      "description": "",
+      "description": "The name of the component.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use?"
+      "x-prompt": "What name would you like to use for the component?"
     },
-    "tags": {
+    "project": {
       "type": "string",
-      "description": "Add tags to the project (used for linting)",
-      "alias": "t"
-    }, 
+      "description": "The name of the project.",
+      "alias": "p",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-prompt": "What is the name of the project for this component?"
+    },
     "directory": {
       "type": "string",
-      "description": "A directory where the project is placed"
+      "description": "Create the component under this directory (can be nested)."
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ http://lesscss.org                       ]"
+          },
+          {
+            "value": "none",
+            "label": "none"
+          }
+        ],
+        "default": "css"
+      }
+    },
+    "skipTests": {
+      "description": "When true, does not create `spec.ts` test files for the new component.",
+      "type": "boolean"
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Create component at the source root rather than its own directory.",
+      "default": false
     }
   },
-  "required": ["name"]
+  "required": ["name", "project"]
 }

packages/qwik-nx/src/generators/component/schema.d.ts

@@ -0,0 +1,59 @@
+import {
+  addDependenciesToPackageJson,
+  GeneratorCallback,
+  Tree,
+} from '@nrwl/devkit';
+import { lessVersion, sassVersion, stylusVersion } from './versions';
+
+type PackageDependencies = Record<
+  'dependencies' | 'devDependencies',
+  Record<string, string>
+>;
+
+export function addStyledModuleDependencies(
+  host: Tree,
+  styledModule: string
+): GeneratorCallback {
+  const extraDependencies = STYLE_DEPENDENCIES.get(styledModule);
+
+  if (extraDependencies) {
+    return addDependenciesToPackageJson(
+      host,
+      extraDependencies.dependencies,
+      extraDependencies.devDependencies
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }
+}
+
+const STYLE_DEPENDENCIES = new Map<string, PackageDependencies>([
+  [
+    'scss',
+    {
+      dependencies: {},
+      devDependencies: {
+        sass: sassVersion,
+      },
+    },
+  ],
+  [
+    'less',
+    {
+      dependencies: {},
+      devDependencies: {
+        less: lessVersion,
+      },
+    },
+  ],
+  [
+    'styl',
+    {
+      dependencies: {},
+      devDependencies: {
+        stylus: stylusVersion,
+      },
+    },
+  ],
+]);

packages/qwik-nx/src/generators/component/schema.json

@@ -0,0 +1,21 @@
+import { addProjectConfiguration, names, Tree } from '@nrwl/devkit';
+
+export function createLib(
+  tree: Tree,
+  libName: string,
+): void {
+  const { fileName } = names(libName);
+
+  addProjectConfiguration(
+    tree,
+    fileName,
+    {
+      tags: [],
+      root: `libs/${fileName}`,
+      projectType: 'library',
+      sourceRoot: `libs/${fileName}/src`,
+      targets: {},
+    },
+    true
+  );
+}