Support multiple component generation in one go using whitespaces as a delimiter

[silicakes]

trafficstars

In other generators, you can run something like:

$ whatever generate componentA componentB componentC

While trying to achieve this with plop, I got the following solution:

const page = {
  description: "⚛ react page",
  prompts: [
    {
      type: "input",
      name: "names",
      message: "page name",
    },
  ],
  actions: (data) => {
    const names = data.names.split(/\s+/).map((name) => name.trim());
    return names.flatMap((name) => {
      return [
        {
          type: "add",
          path: `../src/pages/{{pascalCase name}}/{{pascalCase name}}.tsx`,
          templateFile: "./templates/page.tsx.hbs",
          data: { name },
        },
        {
          type: "add",
          path: "../src/pages/{{pascalCase name}}/{{pascalCase name}}.test.tsx",
          templateFile: "./templates/test.tsx.hbs",
          data: { name },
        },
      ];
    });
  },
};

const generator = (plop) => {
  plop.setDefaultInclude({ generators: true });
  plop.setGenerator("page", page);
};

This allowed the feature to work using commas to delimit the different files, i.e:

$ plop page page1,page2,page3

✔  ++ src/pages/Page1/Page1.tsx
✔  ++ src/pages/Page1/Page1.test.tsx
✔  ++ src/pages/Page2/Page2.tsx
✔  ++ src/pages/Page2/Page2.test.tsx
✔  ++ src/pages/Page3/Page3.tsx
✔  ++ src/pages/Page3/Page3.test.ts

When trying to adjust the code to use whitespaces, plop currently returns the following error:

[PLOP] Too many bypass arguments passed

I'd love to hear your advice on this.