feat: add migration for improved demo aesthetic

Author: NathanWalker

packages/plugin-tools/migrations.json

@@ -83,6 +83,12 @@
       "version": "5.5.0",
       "description": "Migrate tools to 5.5.0",
       "implementation": "./src/migrations/update-5-5-0/update-5-5-0"
+    },
+    "update-to-5.5.3": {
+      "cli": "nx",
+      "version": "5.5.3",
+      "description": "Migrate tools to 5.5.3",
+      "implementation": "./src/migrations/update-5-5-3/update-5-5-3"
     }
   }
 }

packages/plugin-tools/src/generators/add-demo/files_react/src/app.scss

@@ -1,2 +1,6 @@
 @import 'nativescript-theme-core/scss/light';
 @import 'nativescript-theme-core/scss/index';
+
+.rounded {
+  border-radius: 20;
+}

packages/plugin-tools/src/generators/add-demo/files_svelte/app/app.scss

@@ -1,2 +1,6 @@
 @import 'nativescript-theme-core/scss/light';
 @import 'nativescript-theme-core/scss/index';
+
+.rounded {
+  border-radius: 20;
+}

packages/plugin-tools/src/generators/add-demo/files_vue/app/app.android.css

@@ -1 +1,5 @@
 @import 'nativescript-theme-core/css/core.light.android.css';
+
+.rounded {
+    border-radius: 20;
+}

packages/plugin-tools/src/generators/add-demo/files_vue/app/app.ios.css

@@ -1 +1,5 @@
 @import 'nativescript-theme-core/css/core.light.ios.css';
+
+.rounded {
+    border-radius: 20;
+}

packages/plugin-tools/src/generators/remove-package/index.ts

@@ -101,7 +101,7 @@ function removeFromDemoIndex(tree: Tree, type: SupportedDemoType, demoAppRoot: s
 
   const demoIndexViewPath = `${demoAppRoot}/${getDemoIndexPathForType(type)}`;
   let indexViewContent = tree.read(demoIndexViewPath).toString('utf-8');
-  indexViewContent = indexViewContent.replace(`<Button text="${name}" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>`, '');
+  indexViewContent = indexViewContent.replace(`<Button text="${name}" tap="{{ viewDemo }}" class="btn btn-primary rounded view-demo"/>`, '');
   // console.log(indexViewContent);
   tree.write(demoIndexViewPath, indexViewContent);
 }

packages/plugin-tools/src/migrations/update-5-5-3/migrations-to-run.json

@@ -0,0 +1,3 @@
+{
+  "migrations": []
+}

packages/plugin-tools/src/migrations/update-5-5-3/update-5-5-3.ts

@@ -0,0 +1,68 @@
+import { formatFiles, Tree, updateJson, updateNxJson } from '@nx/devkit';
+import { readModulePackageJson } from 'nx/src/utils/package-json';
+import { updateDemoAppPackages } from '../../utils/migrations';
+import { dirname } from 'path';
+const migrations = require('./migrations-to-run.json');
+
+export default async function (tree: Tree) {
+  updateDependencies(tree);
+  updateDemoAppPackages(tree, {
+    devDependencies: {
+      '@nativescript/android': '~8.9.0',
+      '@nativescript/ios': '~8.9.0',
+    },
+  });
+  // update demo project configs
+  const flavors = ['', 'angular', 'react', 'svelte', 'vue'];
+  for (const flavor of flavors) {
+    const projectBase = `apps/demo${flavor ? '-' + flavor : ''}`;
+    const scssPath = `${projectBase}/src/app.scss`;
+    if (tree.exists(scssPath)) {
+      // add rounded class for tad more pleasing demo app index
+      addRoundedDemoClass(tree, scssPath);
+    }
+    const scssPath2 = `${projectBase}/app/app.scss`;
+    if (tree.exists(scssPath2)) {
+      addRoundedDemoClass(tree, scssPath2);
+    }
+    const scssPath3 = `${projectBase}/app/app.ios.scss`;
+    if (tree.exists(scssPath3)) {
+      addRoundedDemoClass(tree, scssPath3);
+    }
+    const scssPath4 = `${projectBase}/app/app.android.scss`;
+    if (tree.exists(scssPath4)) {
+      addRoundedDemoClass(tree, scssPath4);
+    }
+  }
+
+  // TODO: Edit the generators to use the new tsconfig
+
+  await formatFiles(tree);
+
+  console.log(`\n   NOTE: Your plugin workspace is now migrated. Run this to finish the dependency cleanup:`);
+  console.log(`\n`);
+  console.log(`      npm run setup`);
+  console.log(`\n`);
+  console.log(`   This will ensure your workspace is properly reset with all the updates.`);
+  console.log(`   It is also recommended to clean all your demo apps.`);
+  console.log(`\n`);
+}
+
+function updateDependencies(tree: Tree) {
+  updateJson(tree, 'package.json', (json) => {
+    json.devDependencies['@nativescript/core'] = '~8.9.0';
+    json.devDependencies['@nativescript/types'] = '~8.9.0';
+    return json;
+  });
+}
+
+function addRoundedDemoClass(tree: Tree, scssPath: string) {
+  let scssContent = tree.read(scssPath, 'utf-8');
+  scssContent =
+    scssContent +
+    `
+.rounded {
+  border-radius: 20;
+}`;
+  tree.write(scssPath, scssContent);
+}

packages/plugin-tools/src/utils/demo.ts

@@ -168,7 +168,7 @@ export function getDemoIndexButtonForType(
   buttonEnd: string;
   buttonMarkup: string;
 } {
-  let buttonClass = `class="btn btn-primary view-demo"`;
+  let buttonClass = `class="btn btn-primary rounded view-demo"`;
   let buttonEnd = `/>`;
   let buttonStart: string;
   let buttonTap: string;