Generator-specific files

[crutchcorn]

Similar to how React Native allows specific files to be selected for iOS/Android:

https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions

I would like to add a feature to plop (and as a result: node-plop) that allows users to say "I want files with an extension of .android.js instead of .js and fallback to .js files when there is no .android version.

I would also like to rename those files. So, for example, when testing.android.js is added, it simply becomes testing.js.

This would make templates with multiple languages/support options much more readable in my opinion. Instead of code like this:

https://github.com/ngx-rocket/generator-ngx-rocket/blob/master/generators/app/templates/src/app/_app.module.ts

Things could be broken up into their own files, which would make maintenance much easier long-term.

I'm thinking that an API of something like this would look like a new property on add and addMany actions that looked something like:

preExtPreference: '.android'

That's short for "pre-extension preference"

That would be an optional item to pass.

[amwmedia]

so instead of creating a folder structure like:

templates
└ component
    ├ android
    |  └ index.js
    └ iOS
       └ index.js

you would have something like?

templates
└ component
    ├ index.android.js
    └ index.ios.js

[crutchcorn]

Kind of @amwmedia. The primary difference is optimizing for deeper templates. For a flat template, doing something like the separate folders would work well. But let's say that you have the following:

templates
└ component
    ├ testing
    |  └ component.spec.js
    └ components
       └ component.js

And only want a different component.js for bootstrap only, you could have something like:

templates
└ component
    ├ testing
    |  └ component.spec.js
    └ components
       ├ component.js
       └ component.bootstrap.js

This would allow something like tests and setup files to remain as-is, or even just use inline replacements for simple files, while files with larger changes could use an entirely different file.

[amwmedia]

ok, that is all fine. I think I see what you're getting at here. So this seems like it would be mainly helpful when you want to use addMany to drop a bunch of templates from a specific folder, but you want some variation based on the "context" of the action (i.e. bootstrap)

[crutchcorn]

Precisely! I'm only really adding the functionality to add for feature completeness. I'll make sure to ping you for a code review and write tests/documentation before moving forward with merging and releasing :)

[crutchcorn]

Super early work has been started on this feature on the preferred-extension branch.

However, I've found a problem with my API suggestion that's a non-starter for me and the usage I wanted to see.

Let's assume that we have the five following files:

• test.js
• test.ios.js
• test.android.js
• test.bootstrap.js
• test.material.js

The problem comes when wanting to remove the other options.

Let's say I want to remove bootstrap.js and material.js, but I am using React Native and want to leave ios.js and android.js. How do I know which ones to remove and which ones to leave?

One potential option is to have a new config property preferredExtOptions that simply is a string array of all of the options:

{
	type: 'addMany',
	// ...
	preExtPreference: '.material',
	preferredExtOptions: ['.material', '.bootstrap', '']
}

Although this certainly does bloat API size.

[crutchcorn]

@amwmedia what do you think? I'm halting development on this feature until we can solve this problem from an API standpoint

[amwmedia]

@crutchcorn what if we (instead) allowed the templateFiles property to be either a Glob or a function that returns a Glob? This function would be called with the answers object, and could alter (in any way needed) the list of template files to be generated based on the prompt responses.