Init: Custom replacements in template / allow Hermes flag

[lunaleaps]

Describe the Feature

Want to be able to do something like:

npx react-native init MYPROJECT --replace HERMES_PLACEHOLDER:true

or if that's too involved, can we just add a hermes flag?

The use-case for this is helping to improve the release tester script. Right now to test Hermes on the template app, it's a manual change to the Podfile / build.gradle

Possible Implementations

• We add something to template.config.js to allow specification of placeholders it supports:

module.exports = {
  placeholderName: 'HelloWorld',
  titlePlaceholder: 'Hello App Display Name',
  templateDir: './template',
  placeholders: [
     'HERMES_PLACEHOLDER',
  ], // or maybe an object if we need more information
};

Then we can validate the placeholders against placeholder values passed in via cli and just do string replace -- similar to how we're doing placeholderName, placeholderTitle: code pointer

Related Issues

[thymikee]

I'd be supportive of this change. Looks like placeholders keys would need default values? We could make placeholders an object, as noted and even move placeholderName and placeholderTitle there:

module.exports = {
  templateDir: './template',
  placeholders: {
    name: 'HelloWorld',
    title: 'Hello App Display Name',
    HERMES_PLACEHOLDER: true,
  }
};

And support current and new syntaxes for backwards compatibility. This way we could replace any placeholder trough the CLI:

init PROJECT --title "Hermes project" -- HERMES_PLACEHOLDER true

[lunaleaps]

@thymikee Re: defaults, yes that makes sense!

Oh so we'd make each placeholder a top level option flag?

[thymikee]

Possibly, but I'm not sure if it's possible to make it work with commanderjs we use to parse input 😅

[grabbou]

I like this idea. On the other hand, I wonder if placeholder is a good solution to conditionally change the template? It always felt to me it's a value to replace, like name, instead of something that goes into a flag/conditional.

Alternatively, something that can be done already today, would be to have a separate template with Hermes enabled? Going forward, we could expand this to another template, with CodeGen enabled, to test a few different scenarios.

Is testing other variants something that you keep in mind as well? Trying to figure whether we're approaching a long term solution.

[kraenhansen]

As an alternative solution, I've created this feature request: https://github.com/react-native-community/cli/issues/1472 I believe that could address your original problem in addition to a problem that some library maintainers are already experiencing.

[lunaleaps]

@grabbou Good question -- yea definitely want to test other variants -- this proposal may not scale to that well (I'm not exactly sure the depth of changes needed to enable codegen etc. or even what other variants there are at this point)

I think I'm fine with using a separate template -- I think my only concern with that would be maintenance of these templates but that's the only con I can think of.

[numandev1]

@lunaleaps let me know if https://github.com/react-native-community/cli/pull/1545. this PR works for you?

[thymikee]

@nomi9995 unfortunately #1545 is not a solution, because what we discuss here is a generic way to have "placeholders" that could be universally defined by any template, with some defaults from CLI to e.g. help the Hermes team with their daily work. Would you be interested in implementing such a feature? :)

[numandev1]

@thymikee yes, I am interested to contribute to this feature or other bug fixing. it will be an honor for me to contribute and talk to you people.

after office hours, I will read docs and the whole conversation again and try to understand me first about this feature and then work on this feature. thanks

[thymikee]

Thank you! Take your time and ask when you need anything :)

[numandev1]

@thymikee maybe if I am wrong, my understanding is, you are talking about generic placeholders in templates like create-react-native-library <%- project.name %> or {{ project.name }} for example, if the user writes this in template.config.js

module.exports = {
  templateDir: './template',
  placeholders:{
    project:{
      name:"my project"
     }
   }
}

then we will go through all files by walk function and find and replace the placeholder pattern in all files if anyone's pattern matches. am I right?

[thymikee]

Something like this, yes. cc @satya164 wonder what's your take on this, since you're maintaining Bob with a template system? We wanted to avoid complexity of templates/placeholder in RN CLI, but if done in a declarative way like this, maybe it's not gonna be too hard to maintain?

[satya164]

@thymikee I think Bob is a bit difficult since there are several templates with different combinations which makes things complex. But for CLI with one template & placeholders, I think it should be pretty good. It'd also be useful to init from the template on CI and do a lint/typecheck to make sure it's not malformed.

[numandev1]

@thymikee sorry, I was too much busy in my office and social life. today I have made PR for custom placeholders. you can review and let me know if you want any change in it https://github.com/react-native-community/cli/pull/1556

[github-actions[bot]]

There hasn't been any activity on this issue in the past 3 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 7 days.