NX Generators - user generated lists

Question

I'm starting to build out a design system and have used NX as a project start point. NX has a tool called Generators which allow you to define a schema. The schema can then be used within NX Console (VS Code plugin) to prompt the user to supply data about a bunch of files you wish to create.

I've used it so far to generate files such as:

component.tsx component.spec.tsx component.module.css etc

where 'component' would be replaced by the name of the component supplied by the user through NX Console. My schema looks like this:

{
  "$schema": "http://json-schema.org/schema",
  "cli": "nx",
  "$id": "new-component",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Component name",
      "$default": {
        "$source": "argv",
        "index": 0
      }
    }
  },
  "required": ["name"]
}

I'm then using it in my files like this to add the name in the relevant places:

// __name__.tsx.template

import { ReactNode } from 'react';

export interface <%= className %>Props {
  children: ReactNode;
  variant: string;
}

export const <%= className %> = ({ children, variant }: <%= className %>Props) => (
  <div>{children}</div>
);

My question is how do I expand on this to allow the user, through NX Console, to add in a dynamic list of items which I can then loop through in my template files. For example, a component could have a number of variants e.g - primary, secondary, bordered. So I'd like to create that list of items in NX Console click run and then have all the relevant template files have additional code written which uses those variants.

Any help would be much appreciated as I can't see anything relevant in the docs,

Thanks,

NX Generators - user generated lists

0 Answers0