ignite icon indicating copy to clipboard operation
ignite copied to clipboard

Feature Request: Allow generating kebab-case projects

Open derekgreenberg opened this issue 5 years ago • 3 comments


What's going on? This is more of a feature request than an issue report. Ignite new requires an app name to be provided in camel case. For example: Please use camel case for your project name. Ex: FooBar. This generates a containing directory using the same project name, such as FooBar

For some users, it would be preferable to generate the containing directory in kebab case, such as 'foo-bar'. Furthermore, when generating a new app, the name of the package (i.e. the name prop in package.json) is generated in camel case, and Prettier gripes about the format: String does not match the pattern of "^(?:@[a-z0-9-~][a-z0-9-._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".

To summarize, this is a request for an option for the user to have the Ignited app directory name in kebab case and to have the package name prop is kebab case as well.


Steps to reproduce

  • Ignite a new project: ignite new FooBar
  • Observe that the project directory name is FooBar. That's expected, but it would be great if the user could provide an option so the project directory name was in kebab case: foo-bar
  • Observe the "name" prop in package.json. It is FooBar. That's expected, but it would be nice if the package name was in kebab case. At the very least, how about if the user could provide a kebab case option to Ignite so the package name was generated in kebab case?

ignite doctor results:

System
  platform           darwin
  arch               x64
  cpu                8 cores                                              Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  directory          /Users/derekgreenberg/Documents/ignite-experiments

JavaScript
  node               8.10.0       /usr/local/bin/node
  npm                5.6.0        /usr/local/bin/npm
  yarn               1.10.1       /usr/local/bin/yarn

React Native
  react-native-cli   2.0.1

Ignite
  ignite             2.2.3        /usr/local/bin/ignite

Android
  java               1.8.0_73     /Library/Java/JavaVirtualMachines/jdk1.8.0_73.jdk/Contents/Home/bin/java
  android home       -            /usr/local/opt/android-sdk

iOS
  xcode              10.1

derekgreenberg avatar Mar 09 '19 01:03 derekgreenberg

React Native will not permit a project to be generated with kebab case, I presume because it would cause problems in the native code. Are you suggesting that it only apply to the package.json and that we would automatically convert the project name to CamelCase before running the RN generator?

kevinvangelder avatar Mar 09 '19 01:03 kevinvangelder

@kevinvangelder I'm suggesting:

  • We stick to the existing rule that the user must provide the project name in camel case as we do now
  • We add an option (--kebab-case, -k, or similar) to rewrite the generated containing directory in kebab case. The app itself would be generated as usual using the camel case name that the user passed in. So, for example, if the user ignited "FooBar", the containing directory would be renamed as "foo-bar"
  • We would apply the kebab case transform to the name prop in package.json. I have experimented with this and it appears that you can modify the name prop in package.json after ignite has generated the project. Example procedure: (a) ignite new FooBar (b) after ignite is done, modify the package.json name prop from "Foobar" to "foo-bar" (c) CD to the FooBar directory (d) run yarn to install dependencies (e) run react-native run-ios. It works!

derekgreenberg avatar Mar 09 '19 16:03 derekgreenberg

@derekgreenberg I support this, good idea. I'm not sure if an option is the right way to go or if it's better to just do ignite new foo-bar and have the app name inferred from the folder name given.

This is likely to be somewhat nontrivial, though, because of how we are making assumptions throughout the spin-up process. The workaround is to generate the new project and then simply rename the main folder after the fact.

jamonholmgren avatar Apr 10 '19 15:04 jamonholmgren

This feature was added to v9 in #2446

frankcalise avatar Nov 27 '23 00:11 frankcalise