Allow custom file templates

[Steffen Giers]

Is your feature request related to a problem? Please describe.
I've a unique testing setup that works quite well for me and I don't want to stick to the pre-configured ones.

Describe the solution you'd like
Allow custom file templates by configuration. It would be nice if a cli argument like --withTemplate=~/templates/componentTestCustomTemplate.js or just by adding a custom entry to generate-react-cli.json

{
  "component": {
    "path": "src/components",
    "template": "~/templates/componentTestCustomTemplate.js"
    "withStyle": false,
    "withTest": true,
    "withStory": false,
    "withLazy": false
  }
}

[Armin Broubakarian]

Hey @gearsdigital

I think that's a great idea. Here's what I'm thinking. We can add a customTemplates property within the generate-react-cli.json config file so you can set the custom template types that you want to use.

For example, you can add the customTemplates property to the generate-react-cli.json config file like this:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "css",
  "testLibrary": "Testing Library",
  "component": {
    "customTemplates": {
      "component": "templates/component/template.js",
      "style": "templates/component/styleTemplate.js",
      "test":  "templates/component/testTemplate.js"
    },
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": false,
    "withLazy": false
  },
  "page": {
    "customTemplates": {
      "test":  "templates/page/testTemplate.js"
    },
    "path": "src/pages",
    "withStyle": true,
    "withTest": true,
    "withStory": false,
    "withLazy": true
  }
}

This will offer more flexibility to pass different types of templates (style, test, component, etc.), not just a test template.

Also, within the page.customTemplates you'll notice that I only set the "test" custom template. That's because they are all optional. If you don't set the other custom template types, the CLI will default to using the built-in templates that it comes with.

I won't be adding the --withTemplate option. It won't make sense for the suggestion I gave above.

Let me know what you think and I'll start working on this feature for the next release.

Armin

[Steffen Giers]

Sounds good to me! Let me know If I can help out or if you need someone to test something :)

[Armin Broubakarian]

Hi @gearsdigital, I just released a new version of Generate React CLI (v4.2.0) that now supports custom templates. You can read more about it here.

If you find something not working correctly or as you expected, please don't hesitate to reach out and file/report a bug so I can take care of it.

Cheers,
Armin

[thpo]

Hi there,
Thanks for the great work. I try to use the same structure for my modules as much as possible:

- module
-- index.js (related to the data fetching and logic)
-- layout.js (organizing the components in the view)
-- module_header.js (dumb non-reusable component n°1)
-- module_body.js (dumb non-reusable component n°2)

Layout, header and body are mostly boilerplates. That is why I tried to do this with the cli, hoping it would try to find my new types. What do you think ?

{
  "usesTypeScript": false,
  "usesCssModule": false,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "layout": {
    "customTemplates": {
      "component": "templates/layout/component.js"
    },
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "component": {
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "page": {
    "path": "src/modules",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  }
}

[Armin Broubakarian]

Hi @philohelp,

The CLI only supports two static commands to generate a component (component & page). That's why the layout property you have in the config file won't work.

It sounds to me that you're looking for a dynamic way to set custom commands to generate components and not just the default static component commands that it comes with.

If that is the case, then I'm leaning towards just having the one static component command out of the box. Then if you need other custom commands to generate a component, you can extend the CLI within the generate-react-cli.json config file.

So for example, you start off with the generate-react-cli.json config file like so:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withLazy": false,
    "withStory": true,
    "withStyle": true,
    "withTest": true
  }
}

So with the above config example, you can run a command like this:

npx generate-react-cli component Box

And that will generate a component for you in the component.path that you have specified and with the corresponding files that you have set to true in the component property.

But let's say you also wanted to generate components with the page and layout command that have their own config rules. You can extent the generate-react-cli.json config file like this:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "page": {
    "path": "src/modules",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "layout": {
    "customTemplates": {
      "component": "templates/layout/template.js",
      "test": "templates/laylout/testTemplate.js"
    },
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  }
}

You will need to include the required properties listed below when creating the custom component commands. Otherwise, the CLI will not register it as a custom component command.

The required properties are as follows:

• path
• withStyle
• withTest
• withStory
• withLazy

Once you have done that, you should be able to run the custom component commands like this:
npx generate-react-cli page HomePage
npx generate-react-cli layout BoxLayout

If this sounds like a good plan for you, You or I can open a new feature request ticket and I can start building it out.

Thanks,
Armin

[thpo]

Thanks for your reply, it sounds like a great plan for me !

[Armin Broubakarian]

Hey @philohelp,

I just released a new version of Generate React CLI (v4.3.0) that now supports multiple custom component commands.

This will allow you to run your layout command that you wanted, based on the config you showed me in your comment.

You can read more about custom component commands here.

If you find something that's not working correctly or as you expected, please don't hesitate to reach out and file/report a bug so I can take care of it. Thanks again for your feedback. I really appreciate it!

Thanks,
Armin

[thpo]

Fantastic ! Can't wait to try this tomorrow !