feature request: suggest naming conventions

[navh]

When I create a new project, it let me name my project with dashes. Later on, this throws an Invalid App ID, forcing me to re-name.

It would be nice if Name for your new project: a name could trigger a "some-name" is an Invalid App ID due to {reason}, are you sure? yes / Different Name loop.

Easier may just be adding a hint to the Name for your new project: -> Name (alphanum and underscores) for your new project.

Below is creating a project with a dash:

~/dev ❯ npm create ionic-svelte-app@latest                                                  
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-ionic-svelte-app version 0.0.29

Welcome to Ionic Svelte 

This script will install a SvelteKit project using their SvelteKit create script. 
And then adds Ionic power to it - Ionic Elements, Ionicons (optional) and CapacitorJS (optiona
l)

- Ionicons - free package of icons to use in your app
- CapacitorJs - deploy you app as Android/iOS/Electron app, and use its plugin ecosystem to bu
ild cross-platform experience, also supporting PWA!

This is BETA software; expect bugs and missing features.

Problems? Open an issue on https://github.com/Tommertom/svelte-ionic-npm/issues.

✔ Name for your new project: … some-name
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
✔ Add Ionicons? … No / Yes
✔ Add Capacitor for native (mobile) deployements? … No / Yes
Working: Creating base Svelte Kit install supercharged with Ionic.
Working: Installing project dependencies svelte-preprocess,@sveltejs/adapter-static,vite@4,@ca
pacitor/cli
Working: Adding @ionic/[email protected],ionic-svelte,@capacitor/core,ionicons
Working: Removing @sveltejs/adapter-auto
Working: Writing configs and default files

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
  https://playwright.dev
✔ Vitest
  https://vitest.dev
✔ Capacitor
  https://capacitorjs.com/docs/getting-started
  Please note - the project is configured with HMR - remove server entry in capacitor.config.j
son for final build
✔ Ionicons
  https://ionicsvelte.firebaseapp.com/components/Icon

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Capacitor configuration - see: capacitor.config.json|ts
  App name some-name
  Package name some-name.ionic.io
  Vite dev server url http://192.168.137.1:5173/

Next steps:
  1: cd some-name
  2: npm i @capacitor/android and/or @capacitor/ios
  3: npx cap add android and/or ios
  4: npm run build to fill the build directory
  5: npx cap sync sync the build into the target folder
  6: npx cap open android or ios to open the project and mark as trusted
  7: npm run dev -- --open

To close the dev server, hit Ctrl-C

Use the -hmr flag after your npx cap run/open/sync commands to use HMR together with npm run d
ev

Stuck? Visit us at Ionic's discord https://discordapp.com/channels/520266681499779082/10493885
01629681675

Need some help or found an issue with this installer? Visit us on Github https://github.com/To
mmertom/svelte-ionic-npm
~/dev ❯ cd some-name 
~/dev/some-name ❯ npm i @capacitor/ios   

added 1 package, and audited 295 packages in 609ms

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/dev/some-name ❯ npx cap add ios                                                           
[error] Invalid App ID "some-name.ionic.io". Must be in Java package form with no dashes (ex:
        com.example.

[Tommertom]

Thx for the issue - a PR is definitely welcome

For this case I would opt to remove the illegal characters from the name when generating the capacitor config file, which happens in

https://github.com/Tommertom/svelte-ionic-app/blob/main/packages/create-capacitor-svelte-app/src/creator.js
from line 234 onwards (typescript and non-typescript version).

And same way in https://github.com/Tommertom/svelte-ionic-app/tree/main/packages/create-ionic-svelte-app
line 224 onwards

if (opts.types != 'typescript') out(
			'capacitor.config.json',
			`{
	"webDir":"build",
	"appId":"${opts.name}.ionic.io",
	"appName":"${opts.name}",
	"_server": {
	  "url": "http://${ip.address()}:5173/",
	  "cleartext": true
	}
}`
		);

		if (opts.types == 'typescript') out('capacitor.config.ts',
			getTSCapacitorConfig({
				appId: opts.name + '.ionic.io',
				appName: opts.name,
				ip: ip.address() // 'http://192.168.137.1'
			})
		)
	}

into (pseudo code)

const appSafeName=stripTheUglyStuff(opts.name);

if (opts.types != 'typescript') out(
			'capacitor.config.json',
			`{
	"webDir":"build",
	"appId":"${appSafeName}.ionic.io",
	"appName":"${opts.name}",
	"_server": {
	  "url": "http://${ip.address()}:5173/",
	  "cleartext": true
	}
}`
		);

		if (opts.types == 'typescript') out('capacitor.config.ts',
			getTSCapacitorConfig({
				appId: opts.name + '.ionic.io',
				appName: appSafeName,
				ip: ip.address() // 'http://192.168.137.1'
			})
		)
	}

But this is how I would solve it - happy to hear your view!