@rancher/create-extension 1.0.1 → 3.0.0

package/app/app.package.json

@@ -3,28 +3,11 @@
   "version": "0.1.0",
   "private": false,
   "engines": {
-    "node": ">=16"
-  },
-  "dependencies": {
-    "cache-loader": "^4.1.0",
-    "color": "4.2.3",
-    "ip": "2.0.1",
-    "node-polyfill-webpack-plugin": "^3.0.0"
+    "node": ">=20"
   },
+  "dependencies": {},
   "resolutions": {
-    "d3-color": "3.1.0",
-    "ejs": "3.1.9",
-    "follow-redirects": "1.15.2",
-    "glob": "7.2.3",
-    "glob-parent": "6.0.2",
-    "json5": "2.2.3",
-    "@types/lodash": "4.17.5",
-    "merge": "2.1.1",
-    "node-forge": "1.3.1",
-    "nth-check": "2.1.1",
-    "qs": "6.11.1",
-    "roarr": "7.0.4",
-    "semver": "7.5.4",
-    "@vue/cli-service/html-webpack-plugin": "^5.0.0"
+    "@types/node": "~20.10.0",
+    "@types/lodash": "4.17.5"
   }
 }

package/app/files/.eslintignore

@@ -7,12 +7,10 @@ node_modules/
 .env
 .cache
 .next
-.nuxt
 dist
 dist-pkg
 .DS_Store
 dynamic-importer.js
 ksconfig.json
-nuxt.config.js
 shell/utils/dynamic-importer.js
 shell/assets/fonts

package/app/files/.github/workflows/build-extension-catalog.yml

@@ -2,12 +2,8 @@ name: Build and Release Extension Catalog
 
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+  release:
+    types: [released]
 
 defaults:
   run:

package/app/files/.github/workflows/build-extension-charts.yml

@@ -12,7 +12,7 @@ defaults:
 
 jobs:
   build-extension-charts:
-    uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@release-2.8
+    uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@master
     permissions:
       actions: write
       contents: write

package/app/files/.vscode/settings.json

@@ -8,7 +8,6 @@
     ".eslintignore": true,
     ".eslintrc.js": true,
     ".gitignore": true,
-    ".nuxt*": true,
     ".nyc_output": true,
     ".vscode": true,
     "LICENSE": true,

package/app/files/tsconfig.json

@@ -10,7 +10,7 @@
     ],
     "esModuleInterop": true,
     "allowJs": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "strict": true,
     "noEmit": true,
     "baseUrl": ".",
@@ -28,7 +28,7 @@
     "typeRoots": [
       "./node_modules",
       "./node_modules/@rancher/shell/types"
-    ],    
+    ],
     "types": [
       "@types/node",
       "cypress",

package/app/init

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 const path = require('path');
 const fs = require('fs-extra');
@@ -27,7 +28,7 @@ const args = process.argv;
 let appFolder = path.resolve('.');
 let shellVersion = '';
 
-if (args.length === 3) {
+if ( args.length > 2 ) {
   const name = args[2];
   const folder = path.resolve('.');
 
@@ -64,6 +65,7 @@ if ( addGitlabWorkflow ) {
 
 let setName = false;
 
+// Check that there is a package file
 if (!fs.existsSync(path.join(appFolder, './package.json'))) {
   console.log('  Adding package.json');
   fs.copySync(path.join(__dirname, 'app.package.json'), path.join(appFolder, 'package.json'));
@@ -108,6 +110,32 @@ if (creatorPkg._pkgs) {
 
 fs.writeFileSync(path.join(appFolder, 'package.json'), JSON.stringify(pkg, null, 2));
 
+// Add workflow folder if needed
+if ( addWorkflowFolder ) {
+  // Point to the workflow directory inside the skeleton application
+  const workflowDir = path.join(appFolder, '.github/workflows');
+
+  if ( !fs.existsSync(workflowDir) ) {
+    console.log('  Creating folder: .github/workflows');
+    fs.mkdirSync(workflowDir, { recursive: true });
+  }
+
+  const workflowFiles = [
+    'build-extension-catalog.yml',
+    'build-extension-charts.yml'
+  ];
+
+  workflowFiles.forEach((fileName) => {
+    const dest = path.join(workflowDir, fileName); // Destination in the skeleton application
+    const src = path.join(__dirname, 'files/.github/workflows', fileName); // Source in the package
+
+    if ( !fs.existsSync(dest) ) {
+      console.log(`  Adding file ${ fileName } to root workflows`);
+      fs.copySync(src, dest);
+    }
+  });
+}
+
 // Copy base files
 files.forEach((file) => {
   const destinationFile = file === 'gitignore' ? '.gitignore' : file;
@@ -117,7 +145,7 @@ files.forEach((file) => {
   if (!fs.existsSync(dest)) {
     console.log(`  Adding file: ${ file }`);
 
-    const folder = path.dirname(file);
+    const folder = path.dirname(dest);
 
     fs.ensureDirSync(folder);
 
@@ -126,4 +154,6 @@ files.forEach((file) => {
   }
 });
 
-console.log('');
+console.log('Skeleton Application creation complete.\n');
+
+/* eslint-enable no-console */

package/app/package.json

@@ -11,7 +11,7 @@
     "init"
   ],
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=20.0.0"
   },
   "_requires": [
     "core-js",

package/init

@@ -9,20 +9,34 @@ const creatorPkg = require('./package.json');
 const args = process.argv.slice(2);
 let extensionName = '';
 let appName = '';
+let migrate = false;
 let updateOnly = false;
 let skeletonOnly = false;
-let ignoreShellDepCheck = false;
+let ignoreShellDepCheck = false; // Ignore the check for @rancher/shell dependency (Only used for testing)
 let tagUsed = ''; // To store the inferred tag
 
 args.forEach((arg, index) => {
   switch (arg) {
+  case '--help':
+  case '-h':
+    console.log(`Usage: ${ creatorPkg.name } [options] [extension-name]`);
+    console.log('\nOptions:');
+    console.log('  --help, -h          Show help');
+    console.log('  --migrate           Migrate an existing extension to Vue 3');
+    console.log('  --update, -u        Update applications');
+    console.log('  --app-name, -a      Specify the name of the application');
+    console.log('  --skeleton-only, -s Create only the skeleton application');
+    process.exit(0);
+  case '--migrate':
+    migrate = true;
+    break;
   case '--update':
   case '-u':
     updateOnly = true;
     break;
   case '--app-name':
   case '-a':
-    if ( args[index + 1] && !args[index + 1].startsWith('-') ) {
+    if (args[index + 1] && !args[index + 1].startsWith('-')) {
       appName = args[index + 1];
     } else {
       console.error('Error: Missing value for --app-name or -a option.');
@@ -37,14 +51,14 @@ args.forEach((arg, index) => {
     ignoreShellDepCheck = true;
     break;
   default:
-    if ( !arg.startsWith('-') && extensionName === '' ) {
+    if (!arg.startsWith('-') && extensionName === '') {
       extensionName = arg;
       appName = appName || extensionName;
     }
   }
 });
 
-if ( !extensionName && !updateOnly && !skeletonOnly ) {
+if (!extensionName && !updateOnly && !skeletonOnly && !migrate) {
   console.error('Please provide an extension name.');
   process.exit(1);
 }
@@ -55,7 +69,7 @@ try {
   const currentVersion = creatorPkg.version;
 
   // Fetch the dist-tags from npm
-  const distTags = JSON.parse(execSync(`npm view ${ packageName } dist-tags --json`).toString());
+  const distTags = JSON.parse(execSync(`npm view ${ packageName } dist-tags --json`, { stdio: 'pipe' }).toString());
 
   // Find the tag matching the current version
   tagUsed = Object.keys(distTags).find((tag) => distTags[tag] === currentVersion) || 'latest';
@@ -72,12 +86,12 @@ const shellPackageName = '@rancher/shell';
 
 try {
   // Fetch the version of the `@rancher/shell` package that corresponds to the inferred tag
-  const tagVersion = execSync(`npm view ${ shellPackageName } dist-tags.${ tagUsed }`).toString().trim();
+  const tagVersion = execSync(`npm view ${ shellPackageName } dist-tags.${ tagUsed }`, { stdio: 'pipe' }).toString().trim();
 
   if (tagVersion) {
     shellVersion = tagVersion;
   } else {
-    const latestVersion = execSync(`npm view ${ shellPackageName } version`).toString().trim();
+    const latestVersion = execSync(`npm view ${ shellPackageName } version`, { stdio: 'pipe' }).toString().trim();
 
     shellVersion = latestVersion;
   }
@@ -86,7 +100,9 @@ try {
   process.exit(1);
 }
 
-console.log(`  Using version ${ shellVersion } for ${ shellPackageName }`);
+if (!migrate) {
+  console.log(`  Using version ${ shellVersion } for ${ shellPackageName }`);
+}
 
 const basePath = process.cwd();
 let skeletonPath;
@@ -94,12 +110,12 @@ let isInsideSkeleton = false;
 let directoryExists = false;
 
 // Check if we are inside a skeleton application by looking for package.json
-if ( fs.existsSync(path.join(basePath, 'package.json')) ) {
+if (fs.existsSync(path.join(basePath, 'package.json'))) {
   // Check for @rancher/shell dependency
   const packageJsonPath = path.join(basePath, 'package.json');
   const packageJson = require(packageJsonPath);
 
-  if ( !ignoreShellDepCheck && (!packageJson.dependencies || !packageJson.dependencies['@rancher/shell']) ) {
+  if (!ignoreShellDepCheck && (!packageJson.dependencies || !packageJson.dependencies['@rancher/shell'])) {
     throw new Error('@rancher/shell dependency is missing in package.json.');
   } else {
     isInsideSkeleton = true;
@@ -109,7 +125,7 @@ if ( fs.existsSync(path.join(basePath, 'package.json')) ) {
   // If not inside a skeleton, check if a directory with the appName already exists
   skeletonPath = path.join(basePath, appName);
 
-  if ( fs.existsSync(skeletonPath) ) {
+  if (fs.existsSync(skeletonPath)) {
     directoryExists = true;
   }
 }
@@ -121,7 +137,19 @@ const skeletonExists = fs.existsSync(skeletonPath);
 const pkgExists = fs.existsSync(pkgPath);
 
 try {
-  if ( updateOnly ) {
+  if (migrate) {
+    if (!isInsideSkeleton) {
+      throw new Error('Migrate option can only be used inside a skeleton application.');
+    }
+
+    console.log(`Migrating extension to Vue 3...`);
+    execSync(`node ${ path.join(__dirname, 'migrate', 'init') } ${ args.join(' ') }`, { stdio: 'inherit' });
+
+    console.log('Migration completed successfully.');
+    process.exit(0);
+  }
+
+  if (updateOnly) {
     // Run the update script directly
     console.log('Updating applications...');
     execSync(`node ${ path.join(updatePath, 'init') }`, { stdio: 'inherit' });
@@ -131,44 +159,44 @@ try {
   }
 
   // If the directory exists but we're not inside a skeleton, we should exit to prevent overwriting
-  if ( directoryExists && !isInsideSkeleton ) {
+  if (directoryExists && !isInsideSkeleton) {
     throw new Error(`A directory named "${ appName }" already exists. Aborting.`);
   }
 
   // Create skeleton application if it doesn't exist
-  if ( !isInsideSkeleton && !skeletonExists ) {
+  if (!isInsideSkeleton && !skeletonExists) {
     console.log(`Creating skeleton application: ${ appName }...`);
     // Pass all arguments to the app/init script
     execSync(`node ${ path.join(__dirname, 'app', 'init') } ${ appName }  ${ shellVersion } ${ args.join(' ') }`, { stdio: 'inherit' });
 
     // Ensure the skeleton path directory is created before attempting to change directory
-    if ( !fs.existsSync(skeletonPath) ) {
+    if (!fs.existsSync(skeletonPath)) {
       throw new Error(`Failed to create skeleton application directory: ${ skeletonPath }`);
     }
 
     // Change working directory to the newly created skeleton app
     process.chdir(skeletonPath);
-  } else if ( isInsideSkeleton ) {
+  } else if (isInsideSkeleton) {
     // If skeleton exists, ensure the working directory is set correctly
     process.chdir(skeletonPath);
   }
 
-  if ( skeletonOnly ) {
+  if (skeletonOnly) {
     console.log('Skeleton application created successfully. No additional packages will be installed.');
     process.exit(0);
   }
 
-  if ( pkgExists ) {
+  if (pkgExists) {
     throw new Error(`A package directory for "${ extensionName }" already exists.`);
   }
 
   // Check for package existence and create it if necessary
-  if ( !pkgExists ) {
+  if (!pkgExists) {
     console.log(`Creating package: ${ extensionName }...`);
     execSync(`node ${ path.join(__dirname, 'pkg', 'init') } ${ extensionName } ${ shellVersion } ${ args.join(' ') }`, { stdio: 'inherit' });
   }
 
-  if ( args.includes('--update') || args.includes('-u') ) {
+  if (args.includes('--update') || args.includes('-u')) {
     // Run the update script
     console.log('Updating applications...');
     execSync(`node ${ path.join(updatePath, 'init') } ${ extensionName }`, { stdio: 'inherit' });
@@ -176,7 +204,7 @@ try {
 
   console.log('Extension created successfully.');
 
-  if ( skeletonOnly || !isInsideSkeleton ) {
+  if (skeletonOnly || !isInsideSkeleton) {
     console.log(`To begin, run: \n\n\tcd ${ appName } && yarn install\n`);
   }
 } catch (error) {

package/migrate/config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  nodeRequirement:   '20.0.0',
+  isDry:             process.argv.includes('--dry'),
+  isVerbose:         process.argv.includes('--verbose'),
+  isSuggest:         process.argv.includes('--suggest'),
+  removePlaceholder: 'REMOVE',
+};

package/migrate/ignore.js

@@ -0,0 +1,14 @@
+module.exports = [
+  '**/node_modules/**',
+  '**/dist/**',
+  '**/dist-pkg/**',
+  '**/.vscode/**',
+  '**/assets/**',
+  '**/charts/**',
+  '**/extensions/**',
+  '**/scripts/vue-migrate.js',
+  'docusaurus/**',
+  'storybook-static/**',
+  'storybook/**',
+  'migration/**',
+];

package/migrate/init

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+const { setParams, printLog, printUsage } = require('./utils/content');
+const {
+  packageUpdates,
+  nvmUpdates,
+  vueConfigUpdates,
+  vueSyntaxUpdates,
+  routerUpdates,
+  eslintUpdates,
+  tsUpdates,
+  stylesUpdates,
+} = require('./tasks');
+const params = require('./params');
+
+(function main() {
+  if (process.argv.includes('--help') || process.argv.includes('-h')) {
+    printUsage();
+
+    return;
+  }
+
+  setParams(params);
+
+  packageUpdates(params);
+  nvmUpdates(params);
+  vueConfigUpdates(params);
+  vueSyntaxUpdates(params);
+  routerUpdates(params);
+  eslintUpdates(params);
+  tsUpdates(params);
+  stylesUpdates(params);
+
+  printLog();
+})();

package/migrate/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@rancher/create-migration",
+  "description": "Rancher UI Vue3 migration helper",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "author": "SUSE",
+  "private": false,
+  "bin": "./init",
+  "files": [
+    "**/*.*",
+    "init"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "diff": "^7.0.0",
+    "fs-extra": "^10.0.0",
+    "glob": "^11.0.0",
+    "path": "^0.12.7",
+    "semver": "^7.6.3"
+  }
+}

package/migrate/params.js

@@ -0,0 +1,7 @@
+const ignore = require('./ignore');
+
+module.exports = {
+  paths:          null,
+  ignorePatterns: [],
+  ignore,
+};

package/migrate/stats.js

@@ -0,0 +1,13 @@
+// stats.js
+module.exports = {
+  libraries:  [],
+  node:       [],
+  nvmrc:      [],
+  webpack:    [],
+  router:     [],
+  resolution: [],
+  eslint:     [],
+  vueSyntax:  [],
+  style:      [],
+  total:      [],
+};

package/migrate/tasks/eslintUpdates.js

@@ -0,0 +1,70 @@
+const glob = require('glob');
+const fs = require('fs');
+const path = require('path');
+const stats = require('../stats');
+const { writeContent, printContent } = require('../utils/content');
+
+/**
+ * ESLint Updates
+ * Files: .eslintrc.js, .eslintrc.json, .eslintrc.yml
+ */
+const eslintUpdates = (params) => {
+  const files = glob.sync(params.paths || '**/.eslintrc.*{js,json,yml}', { ignore: params.ignore });
+  const replacePlugins = [
+    ['plugin:vue/essential', 'plugin:vue/vue3-essential'],
+    ['plugin:vue/strongly-recommended', 'plugin:vue/vue3-strongly-recommended'],
+    ['plugin:vue/recommended', 'plugin:vue/vue3-recommended']
+  ];
+  const newRules = {
+    'vue/one-component-per-file':       'off',
+    'vue/no-deprecated-slot-attribute': 'off',
+    'vue/require-explicit-emits':       'off',
+    'vue/v-on-event-hyphenation':       'off',
+  };
+
+  files.forEach((file) => {
+    const originalContent = fs.readFileSync(file, 'utf8');
+    let content = originalContent;
+    const matchedCases = [];
+
+    replacePlugins.forEach(([text, replacement]) => {
+      if (content.includes(text)) {
+        content = content.replaceAll(text, replacement);
+        matchedCases.push([text, replacement]);
+
+        writeContent(file, content, originalContent);
+      }
+    });
+
+    const eslintConfigPath = path.join(process.cwd(), `${ file }`);
+    let eslintConfig;
+
+    try {
+      eslintConfig = require(eslintConfigPath);
+    } catch (error) {
+      eslintConfig = {};
+    }
+
+    if (!eslintConfig.rules) {
+      eslintConfig.rules = {};
+    }
+
+    Object.keys(newRules).forEach((rule) => {
+      if (!eslintConfig.rules[rule]) {
+        eslintConfig.rules[rule] = newRules[rule];
+        matchedCases.push(rule);
+      }
+    });
+
+    if (matchedCases.length) {
+      const updatedConfig = `module.exports = ${ JSON.stringify(eslintConfig, null, 2) }`;
+
+      writeContent(file, updatedConfig, originalContent);
+      printContent(file, `Updating ESLint`, matchedCases);
+      stats.eslint.push(file);
+      stats.total.push(file);
+    }
+  });
+};
+
+module.exports = eslintUpdates;

package/migrate/tasks/index.js

@@ -0,0 +1,19 @@
+const packageUpdates = require('./packageUpdates');
+const nvmUpdates = require('./nvmUpdates');
+const vueConfigUpdates = require('./vueConfigUpdates');
+const vueSyntaxUpdates = require('./vueSyntaxUpdates');
+const routerUpdates = require('./routerUpdates');
+const eslintUpdates = require('./eslintUpdates');
+const tsUpdates = require('./tsUpdates');
+const stylesUpdates = require('./stylesUpdates');
+
+module.exports = {
+  packageUpdates,
+  nvmUpdates,
+  vueConfigUpdates,
+  vueSyntaxUpdates,
+  routerUpdates,
+  eslintUpdates,
+  tsUpdates,
+  stylesUpdates,
+};

package/migrate/tasks/nvmUpdates.js

@@ -0,0 +1,51 @@
+const fs = require('fs');
+const glob = require('glob');
+const semver = require('semver');
+const stats = require('../stats');
+const { printContent, writeContent } = require('../utils/content');
+const { nodeRequirement, isDry, isSuggest } = require('../config');
+
+/**
+ * NVM updates
+ * Files: .nvmrc
+ *
+ * Verify presence of .nvmrc, create one if none, update if any
+ */
+const nvmUpdates = (params) => {
+  const files = glob.sync(params.paths || '**/.nvmrc', { ignore: params.ignore });
+  const nvmRequirement = 20;
+
+  if (files.length === 0) {
+    // If no .nvmrc files found, create one
+    const newFilePath = '.nvmrc';
+
+    if (!isDry && !isSuggest) {
+      fs.writeFileSync(newFilePath, nvmRequirement.toString());
+      printContent(newFilePath, `Created ${ newFilePath } with Node version ${ nvmRequirement }`, '');
+    }
+
+    writeContent(newFilePath, nvmRequirement.toString(), '');
+    stats.nvmrc.push(newFilePath);
+    stats.total.push(newFilePath);
+  }
+
+  files.forEach((file) => {
+    if (file) {
+      const originalContent = fs.readFileSync(file, 'utf8');
+      let content = originalContent;
+      const nodeVersionMatch = content.match(/([0-9.x]+)/g);
+      const nodeVersion = semver.coerce(nodeVersionMatch[0]);
+
+      // Ensure node version is up to date
+      if (nodeVersion && semver.lt(nodeVersion, semver.coerce(nodeRequirement))) {
+        printContent(file, `Updating node ${ [nodeVersionMatch[0], nvmRequirement] }`);
+        content = content.replaceAll(nodeVersionMatch[0], nvmRequirement);
+        writeContent(file, content, originalContent);
+        stats.nvmrc.push(file);
+        stats.total.push(file);
+      }
+    }
+  });
+};
+
+module.exports = nvmUpdates;