cli: update plugin template to use react peer dep

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/cli/src/lib/diff/handlers.ts

@@ -75,7 +75,9 @@ class PackageJsonHandler {
     await this.syncScripts();
     await this.syncPublishConfig();
     await this.syncDependencies('dependencies');
+    await this.syncDependencies('peerDependencies', true);
     await this.syncDependencies('devDependencies');
+    await this.syncReactDeps();
   }
 
   // Make sure a field inside package.json is in sync. This mutates the targetObj and writes package.json on change.
@@ -207,12 +209,12 @@ class PackageJsonHandler {
     }
   }
 
-  private async syncDependencies(fieldName: string) {
+  private async syncDependencies(fieldName: string, required: boolean = false) {
     const pkgDeps = this.pkg[fieldName];
     const targetDeps = (this.targetPkg[fieldName] =
       this.targetPkg[fieldName] || {});
 
-    if (!pkgDeps) {
+    if (!pkgDeps && !required) {
       return;
     }
 
@@ -231,10 +233,26 @@ class PackageJsonHandler {
         continue;
       }
 
-      await this.syncField(key, pkgDeps, targetDeps, fieldName, true, true);
+      await this.syncField(
+        key,
+        pkgDeps,
+        targetDeps,
+        fieldName,
+        true,
+        !required,
+      );
     }
   }
 
+  private async syncReactDeps() {
+    const targetDeps = (this.targetPkg.dependencies =
+      this.targetPkg.dependencies || {});
+
+    // Remove these from from deps since they're now in peerDeps
+    await this.syncField('react', {}, targetDeps, 'dependencies');
+    await this.syncField('react-dom', {}, targetDeps, 'dependencies');
+  }
+
   private async write() {
     await this.writeFunc(`${JSON.stringify(this.targetPkg, null, 2)}\n`);
   }

packages/cli/src/lib/version.ts

@@ -66,7 +66,7 @@ export const version = findVersion();
 export const isDev = fs.pathExistsSync(paths.resolveOwn('src'));
 
 export function createPackageVersionProvider(lockfile?: Lockfile) {
-  return (name: string, versionHint?: string) => {
+  return (name: string, versionHint?: string): string => {
     const packageVersion = packageVersions[name];
     const targetVersion = versionHint || packageVersion;
     if (!targetVersion) {
@@ -94,6 +94,6 @@ export function createPackageVersionProvider(lockfile?: Lockfile) {
     if (semver.parse(versionHint)?.prerelease.length) {
       return versionHint!;
     }
-    return `^${versionHint}`;
+    return versionHint?.match(/^[\d\.]+$/) ? `^${versionHint}` : versionHint!;
   };
 }

packages/cli/templates/default-plugin/package.json.hbs

@@ -32,10 +32,11 @@
     "@material-ui/core": "{{versionQuery '@material-ui/core' '4.12.2'}}",
     "@material-ui/icons": "{{versionQuery '@material-ui/icons' '4.9.1'}}",
     "@material-ui/lab": "{{versionQuery '@material-ui/lab' '4.0.0-alpha.57'}}",
-    "react": "{{versionQuery 'react' '16.13.1'}}",
-    "react-dom": "{{versionQuery 'react-dom' '16.13.1'}}",
     "react-use": "{{versionQuery 'react-use' '17.2.4'}}"
   },
+  "peerDependencies": {
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0'}}"
+  },
   "devDependencies": {
     "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
     "@backstage/core-app-api": "{{versionQuery '@backstage/core-app-api'}}",