@rancher/create-extension 1.0.0 → 2.0.0

package/app/app.package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": false,
   "engines": {
-    "node": ">=20"
+    "node": ">=16"
   },
   "dependencies": {
     "cache-loader": "^4.1.0",
@@ -12,7 +12,6 @@
     "node-polyfill-webpack-plugin": "^3.0.0"
   },
   "resolutions": {
-    "@types/node": "~20.10.0",
     "d3-color": "3.1.0",
     "ejs": "3.1.9",
     "follow-redirects": "1.15.2",

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

@@ -2,7 +2,7 @@ name: Build and Release Extension Charts
 
 on:
   workflow_dispatch:
-  release:
+  release:  
     types: [released]
 
 defaults:
@@ -12,7 +12,7 @@ defaults:
 
 jobs:
   build-extension-charts:
-    uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@master
+    uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@release-2.9
     permissions:
       actions: write
       contents: write
@@ -20,3 +20,4 @@ jobs:
       pages: write
     with:
       target_branch: gh-pages
+      tagged_release: ${{ github.ref_name }}

package/app/files/gitignore

@@ -67,4 +67,7 @@ jspm_packages/
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+# Locally built assets (extensions)
+dist-pkg

package/app/init

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-/* eslint-disable no-console */
 
 const path = require('path');
 const fs = require('fs-extra');
@@ -28,7 +27,7 @@ const args = process.argv;
 let appFolder = path.resolve('.');
 let shellVersion = '';
 
-if ( args.length > 2 ) {
+if (args.length === 3) {
   const name = args[2];
   const folder = path.resolve('.');
 
@@ -38,7 +37,6 @@ if ( args.length > 2 ) {
 }
 
 let addGitlabWorkflow = false;
-let addWorkflowFolder = true;
 
 // Check for Gitlab integration option
 if ( args.length >= 3 ) {
@@ -49,10 +47,6 @@ if ( args.length >= 3 ) {
     case '-l':
       addGitlabWorkflow = true;
       break;
-    case '--skip-workflow':
-    case '-w':
-      addWorkflowFolder = false;
-      break;
     default:
       break;
     }
@@ -63,9 +57,10 @@ if ( addGitlabWorkflow ) {
   files.push('.gitlab-ci.yml');
 }
 
+// Check that there is a package file
+
 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'));
@@ -110,32 +105,6 @@ 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;
@@ -145,7 +114,7 @@ files.forEach((file) => {
   if (!fs.existsSync(dest)) {
     console.log(`  Adding file: ${ file }`);
 
-    const folder = path.dirname(dest);
+    const folder = path.dirname(file);
 
     fs.ensureDirSync(folder);
 
@@ -154,6 +123,4 @@ files.forEach((file) => {
   }
 });
 
-console.log('Skeleton Application creation complete.\n');
-
-/* eslint-enable no-console */
+console.log('');

package/app/package.json

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

package/init

@@ -9,34 +9,20 @@ 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; // Ignore the check for @rancher/shell dependency (Only used for testing)
+let ignoreShellDepCheck = false;
 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.');
@@ -51,14 +37,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 && !migrate) {
+if ( !extensionName && !updateOnly && !skeletonOnly ) {
   console.error('Please provide an extension name.');
   process.exit(1);
 }
@@ -69,7 +55,7 @@ try {
   const currentVersion = creatorPkg.version;
 
   // Fetch the dist-tags from npm
-  const distTags = JSON.parse(execSync(`npm view ${ packageName } dist-tags --json`, { stdio: 'pipe' }).toString());
+  const distTags = JSON.parse(execSync(`npm view ${ packageName } dist-tags --json`).toString());
 
   // Find the tag matching the current version
   tagUsed = Object.keys(distTags).find((tag) => distTags[tag] === currentVersion) || 'latest';
@@ -86,12 +72,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 }`, { stdio: 'pipe' }).toString().trim();
+  const tagVersion = execSync(`npm view ${ shellPackageName } dist-tags.${ tagUsed }`).toString().trim();
 
   if (tagVersion) {
     shellVersion = tagVersion;
   } else {
-    const latestVersion = execSync(`npm view ${ shellPackageName } version`, { stdio: 'pipe' }).toString().trim();
+    const latestVersion = execSync(`npm view ${ shellPackageName } version`).toString().trim();
 
     shellVersion = latestVersion;
   }
@@ -100,9 +86,7 @@ try {
   process.exit(1);
 }
 
-if (!migrate) {
-  console.log(`  Using version ${ shellVersion } for ${ shellPackageName }`);
-}
+console.log(`  Using version ${ shellVersion } for ${ shellPackageName }`);
 
 const basePath = process.cwd();
 let skeletonPath;
@@ -110,12 +94,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;
@@ -125,7 +109,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;
   }
 }
@@ -137,19 +121,7 @@ const skeletonExists = fs.existsSync(skeletonPath);
 const pkgExists = fs.existsSync(pkgPath);
 
 try {
-  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) {
+  if ( updateOnly ) {
     // Run the update script directly
     console.log('Updating applications...');
     execSync(`node ${ path.join(updatePath, 'init') }`, { stdio: 'inherit' });
@@ -159,44 +131,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' });
@@ -204,7 +176,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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rancher/create-extension",
   "description": "Rancher UI Extension generator",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "Apache-2.0",
   "author": "SUSE",
-  "packageManager": "yarn@4.5.0",
+  "packageManager": "yarn@4.4.1",
   "bin": {
     "create-extension": "./init"
   },
@@ -13,19 +13,15 @@
     "init"
   ],
   "engines": {
-    "node": ">=20"
+    "node": ">=16"
   },
   "dependencies": {
-    "diff": "^7.0.0",
-    "fs-extra": "^10.0.0",
-    "glob": "^11.0.0",
-    "path": "^0.12.7",
-    "semver": "^7.6.3"
+    "fs-extra": "^10.0.0"
   },
   "_pkgs": {
-    "core-js": "3.25.3",
+    "core-js": "3.21.1",
     "css-loader": "6.7.3",
     "@types/lodash": "4.14.184",
-    "@rancher/components": "0.3.0-alpha.1"
+    "@rancher/components": "0.2.1-alpha.0"
   }
 }

package/pkg/files/tsconfig.json

@@ -10,13 +10,13 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "baseUrl": ".",
     "preserveSymlinks": true,
     "typeRoots": [
       "../../node_modules",
       "../../node_modules/@rancher/shell/types"
-    ],    
+    ],
     "types": [
       "node",
       "webpack-env",
@@ -50,4 +50,4 @@
   "exclude": [
     "../../node_modules"
   ]
-}
+}

package/pkg/init

@@ -1,11 +1,14 @@
 #!/usr/bin/env node
-/* eslint-disable no-console */
 
-const { execSync } = require('child_process');
 const fs = require('fs-extra');
 const path = require('path');
 const https = require('https');
 
+const targets = {
+  dev:  './node_modules/.bin/nuxt dev',
+  nuxt: './node_modules/.bin/nuxt',
+};
+
 const files = [
   'tsconfig.json',
   'vue.config.js',
@@ -28,26 +31,39 @@ const typeFolders = [
   'detail'
 ];
 
+const shellPkgPath = 'node_modules/@rancher/shell';
+
 console.log('');
 console.log('Creating Skeleton UI Package');
 
 const args = process.argv;
 
+if (args.length !== 3) {
+  console.log('Expected single argument of package name');
+}
+
 const name = args[2];
 const folder = path.resolve('.');
 const pkgFolder = path.join(folder, 'pkg', name);
 let shellVersion = '';
 
-let addTypeFolders = true;
+let addTypeFolders = false;
+let addWorkflowFolder = false;
+let ignoreShellPkgPathCheck = false;
 
 if ( args.length >= 3 ) {
   shellVersion = args[3];
 
   for ( let i = 3; i < args.length; i++ ) {
     switch (args[i]) {
-    case '--skip-templates':
     case '-t':
-      addTypeFolders = false;
+      addTypeFolders = true;
+      break;
+    case '-w':
+      addWorkflowFolder = true;
+      break;
+    case '-i':
+      ignoreShellPkgPathCheck = true;
       break;
     default:
       break;
@@ -55,6 +71,12 @@ if ( args.length >= 3 ) {
   }
 }
 
+if (!ignoreShellPkgPathCheck && !fs.existsSync(path.join(pkgFolder, `../../${ shellPkgPath }/package.json`))) {
+  console.log('');
+  console.log('@rancher/shell not found in node_modules! Please do "yarn install" and make sure you run this command from the base folder of your app');
+  process.exit(1);
+}
+
 const isNodeModulesShell = !fs.existsSync(path.join(folder, 'shell'));
 
 if (!isNodeModulesShell) {
@@ -76,70 +98,19 @@ const pkg = JSON.parse(rawdata);
 pkg.name = name;
 pkg.description = `${ name } plugin`;
 
-// Add annotation for the latest Rancher version by default
-function fetchLatestVersion() {
-  console.log('  Fetching latest Rancher Version');
-  const options = { headers: { 'User-Agent': 'nodejs' } };
-
-  https.get('https://api.github.com/repos/rancher/rancher/releases/latest', options, (res) => {
-    const { statusCode } = res;
-    const contentType = res.headers['content-type'];
-
-    let error;
-
-    if ( statusCode !== 200 ) {
-      error = new Error('  Request Failed.\n' +
-                        `  Status Code: ${ statusCode }`);
-    } else if ( !/^application\/json/.test(contentType) ) {
-      error = new Error('  Invalid content-type.\n' +
-                        `  Expected application/json but received ${ contentType }`);
-    }
-
-    if ( error ) {
-      console.log(error.message);
-
-      res.resume();
-
-      return;
-    }
-
-    res.setEncoding('utf8');
-    let rawData = '';
-
-    res.on('data', (chunk) => {
-      rawData += chunk;
-    });
-    res.on('end', () => {
-      try {
-        const release = JSON.parse(rawData);
-
-        if ( release.tag_name ) {
-          console.log(`  Adding rancher-version annotation '>= ${ release.tag_name }' to package.json`);
-
-          pkg.rancher = { annotations: { 'catalog.cattle.io/rancher-version': `>= ${ release.tag_name }` } };
-
-          if ( !shellVersion ) {
-            console.log('Could not get a shell version from npm, skipping adding catalog.cattle.io/ui-extensions-version annotation to package.json');
-          } else {
-            console.log(`  Adding catalog.cattle.io/ui-extensions-version '>= ${ shellVersion }' to package.json`);
-
-            pkg.rancher.annotations['catalog.cattle.io/ui-extensions-version'] = `>= ${ shellVersion }`;
-          }
-
-          writePackageJson();
-        }
-      } catch (e) {
-        console.log('  Error parsing release data', e);
-      }
-    });
-  }).on('error', (e) => {
-    console.log('  Error fetching latest Rancher Version', e);
-  });
-}
+Object.keys(targets).forEach((target) => {
+  if (!pkg.scripts[target]) {
+    pkg.scripts[target] = targets[target];
+    console.log(`  Adding script '${ target }' to package.json`);
+  }
+});
 
-fetchLatestVersion();
 writePackageJson();
 
+// Add dependencies
+// pkg.dependencies['@rancher/shell'] = '^0.6.2';
+// pkg.dependencies['core-js'] = '3.18.3';
+
 function writePackageJson() {
   fs.writeFileSync(path.join(pkgFolder, 'package.json'), JSON.stringify(pkg, null, 2));
 }
@@ -156,6 +127,31 @@ if (addTypeFolders) {
   });
 }
 
+// Add workflow folder if needed
+if (addWorkflowFolder) {
+  const workflowDir = path.join(folder, '.github/workflows');
+
+  if (!fs.existsSync(workflowDir)) {
+    fs.mkdirSync(workflowDir, { recursive: true });
+  }
+
+  const files = [
+    'build-extension-catalog.yml',
+    'build-extension-charts.yml'
+  ];
+
+  files.forEach((fileName) => {
+    const file = path.join(workflowDir, fileName);
+
+    if (!fs.existsSync(file)) {
+      const src = path.join(__dirname, 'files/.github/workflows', fileName);
+
+      console.log(`  Adding file ${ fileName } to root workflows`);
+      fs.copySync(src, file);
+    }
+  });
+}
+
 // Copy base files
 files.forEach((file) => {
   const src = path.join(__dirname, 'files', file);
@@ -167,6 +163,13 @@ files.forEach((file) => {
   }
 });
 
+// require("child_process").spawn('yarn', ['install'], {
+//   cwd: process.cwd(),
+//   stdio: "inherit"
+// });
+
+// Update tsconfig
+
 const topLevelRawdata = fs.readFileSync(path.join(folder, 'package.json'));
 const topLevelPkg = JSON.parse(topLevelRawdata);
 let updated = false;
@@ -211,5 +214,3 @@ function updateArray(data) {
 
   return updated;
 }
-
-/* eslint-enable no-console */

package/pkg/package.json

@@ -10,8 +10,14 @@
     "**/*.*",
     "init"
   ],
+  "rancher": {
+    "annotations": {
+      "catalog.cattle.io/rancher-version": ">= 2.9.0 < 2.10.0",
+      "catalog.cattle.io/ui-extensions-version": "< 3.0.0"
+    }
+  },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=16.0.0"
   },
   "resolutions": {
     "d3-color": "3.1.0",

package/update/init

@@ -4,18 +4,17 @@ const path = require('path');
 const fs = require('fs-extra');
 const { spawnSync } = require('child_process');
 
-const scriptFolder = path.resolve(__dirname, '..');
+const scriptFolder = __dirname;
 const dest = path.resolve('.');
 
 // Remove first two args
-const args = process.argv;
-
+let args = process.argv;
 args.splice(0, 2);
 
-const res = spawnSync(path.join(__dirname, 'upgrade'), args, {
-  cwd:   dest,
+const res = spawnSync(`${__dirname}/upgrade`, args, {
+  cwd: dest,
   shell: false,
-  stdio: ['ignore', process.stdout, process.stderr],
+  stdio: [ 'ignore', process.stdout, process.stderr ],
 });
 
 if (res.status !== 0) {
@@ -35,13 +34,9 @@ rawdata = fs.readFileSync(path.join(scriptFolder, 'package.json'));
 const upgradePackage = JSON.parse(rawdata);
 
 // Update dependency versions to match the latest from the creator
-if ( latestPackage.dependencies ) {
-  Object.keys(latestPackage.dependencies).forEach((key) => {
-    appPackage.dependencies[key] = latestPackage.dependencies[key];
-  });
-} else {
-  console.warn('No dependencies found in latestPackage.'); // eslint-disable-line no-console
-}
+Object.keys(latestPackage._pkgs).forEach((key) => {
+  appPackage.dependencies[key] = latestPackage._pkgs[key];
+});
 
 // Add in the webpack resolution
 appPackage.resolutions = appPackage.resolutions || {};
@@ -52,10 +47,10 @@ const shellVersion = upgradePackage.version;
 
 appPackage.dependencies['@rancher/shell'] = shellVersion;
 
-fs.writeFileSync(path.join(dest, 'package.json'), `${ JSON.stringify(appPackage, null, 2) }\n`);
+fs.writeFileSync(path.join(dest, 'package.json'), JSON.stringify(appPackage, null, 2) + '\n');
 
 spawnSync(`yarn`, ['install'], {
-  cwd:   dest,
+  cwd: dest,
   shell: false,
-  stdio: ['ignore', process.stdout, process.stderr],
+  stdio: [ 'ignore', process.stdout, process.stderr ],
 });