@rancher/create-extension 2.0.0 → 3.0.0

package/migrate/utils/vueSyntax.js

@@ -0,0 +1,126 @@
+/*
+* Vue syntax specific utilities
+*/
+const isSimpleIdentifier = (str) => /^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str.trim());
+const isBracketedExpression = (str) => str.trim().startsWith('[') && str.trim().endsWith(']');
+const isStringLiteral = (str) => /^['"].*['"]$/.test(str.trim());
+// Extracts the key expression from a v-for directive.
+const extractKeyExpression = (vForContent) => {
+  const vForMatch = vForContent.match(/^\s*\(([^,]+),\s*([^)]+)\)\s+in\s+(.*)$/);
+  let keyExpression = null;
+
+  if (vForMatch) {
+    // v-for="(item, key) in items"
+    keyExpression = vForMatch[2].trim();
+  } else {
+    const simpleVForMatch = vForContent.match(/^\s*([^\s]+)\s+in\s+(.*)$/);
+
+    if (simpleVForMatch) {
+      // v-for="item in items"
+      // Use 'item' as key if it's a simple identifier
+      keyExpression = isSimpleIdentifier(simpleVForMatch[1].trim()) ? simpleVForMatch[1].trim() : null;
+    }
+  }
+
+  return keyExpression;
+};
+// Adds the :key attribute to a tag if it doesn't already have one.
+const addKeyAttribute = (tag, keyExpression) => {
+  // Add space if necessary
+  const space = tag.endsWith(' ') ? '' : ' ';
+
+  return `${ tag }${ space }:key="${ keyExpression }"`;
+};
+const vueSetReplacement = (match, obj, prop, val) => {
+  prop = prop.trim();
+  obj = obj.trim();
+  val = val.trim();
+
+  if (isBracketedExpression(prop)) {
+    return `${ obj }${ prop } = ${ val }`;
+  } else if (isStringLiteral(prop)) {
+    return `${ obj }[${ prop }] = ${ val }`;
+  } else if (isSimpleIdentifier(prop)) {
+    return `${ obj }.${ prop } = ${ val }`;
+  } else {
+    return `${ obj }[${ prop }] = ${ val }`;
+  }
+};
+const vueDeleteReplacement = (match, obj, prop) => {
+  prop = prop.trim();
+  obj = obj.trim();
+
+  if (isBracketedExpression(prop)) {
+    return `delete ${ obj }${ prop }`;
+  } else if (isStringLiteral(prop)) {
+    return `delete ${ obj }[${ prop }]`;
+  } else if (isSimpleIdentifier(prop)) {
+    return `delete ${ obj }.${ prop }`;
+  } else {
+    return `delete ${ obj }[${ prop }]`;
+  }
+};
+const vueKeyReplacement = (match, beforeTagEnd, vForContent, tagClose) => {
+  // Check if :key exists in the tag
+  if (beforeTagEnd.includes(':key=')) {
+    return match; // :key already exists, do not modify
+  }
+
+  const keyExpression = extractKeyExpression(vForContent);
+
+  if (keyExpression) {
+    const updatedTag = addKeyAttribute(beforeTagEnd, keyExpression);
+
+    return `${ updatedTag }${ tagClose }`;
+  } else {
+  // Cannot safely determine a key, so do not add one
+    return match;
+  }
+};
+const vueTemplateKeyReplacement = (match, templateStart, templateContent, templateEnd) => {
+  // Check if :key is on the <template> tag
+  const hasKeyOnTemplate = /:key=/.test(templateStart);
+
+  // Find any :key on direct child elements
+  const childWithKeyRegex = /(<\w+[^>]*)(\s+:key="([^"]+)")([^>]*>)/g;
+  let updatedContent = templateContent;
+  let movedKey = null;
+
+  updatedContent = updatedContent.replace(childWithKeyRegex, (childMatch, beforeKey, keyAttr, keyValue, afterKey) => {
+    if (!hasKeyOnTemplate && !movedKey) {
+    // Move the first encountered :key to the template
+      movedKey = keyValue;
+    }
+
+    // Remove :key from child element
+    return `${ beforeKey }${ afterKey }`;
+  });
+
+  if (!hasKeyOnTemplate && movedKey) {
+  // Add :key to the <template> tag
+    const updatedTemplateStart = `${ addKeyAttribute(templateStart.replace(/>$/, ''), movedKey) }>`;
+
+    return `${ updatedTemplateStart }${ updatedContent }${ templateEnd }`;
+  }
+
+  return `${ templateStart }${ updatedContent }${ templateEnd }`;
+};
+const vueTemplateKeyRemoval = (match, templateStart, templateContent, templateEnd) => {
+  const childWithKeyRegex = /(<\w+[^>]*)(\s+:key="[^"]+")([^>]*>)/g;
+  const updatedContent = templateContent.replace(childWithKeyRegex, '$1$3');
+
+  return `${ templateStart }${ updatedContent }${ templateEnd }`;
+};
+
+module.exports = {
+  isSimpleIdentifier,
+  isBracketedExpression,
+  isStringLiteral,
+  extractKeyExpression,
+  addKeyAttribute,
+  vueSetReplacement,
+  vueDeleteReplacement,
+  vueKeyReplacement,
+  vueTemplateKeyReplacement,
+  vueTemplateKeyRemoval
+};

package/package.json

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

package/pkg/files/tsconfig.json

@@ -10,13 +10,13 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "sourceMap": false,
+    "sourceMap": true,
     "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,14 +1,11 @@
 #!/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',
@@ -31,39 +28,26 @@ 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 = false;
-let addWorkflowFolder = false;
-let ignoreShellPkgPathCheck = false;
+let addTypeFolders = true;
 
 if ( args.length >= 3 ) {
   shellVersion = args[3];
 
   for ( let i = 3; i < args.length; i++ ) {
     switch (args[i]) {
+    case '--skip-templates':
     case '-t':
-      addTypeFolders = true;
-      break;
-    case '-w':
-      addWorkflowFolder = true;
-      break;
-    case '-i':
-      ignoreShellPkgPathCheck = true;
+      addTypeFolders = false;
       break;
     default:
       break;
@@ -71,12 +55,6 @@ 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) {
@@ -98,19 +76,8 @@ const pkg = JSON.parse(rawdata);
 pkg.name = name;
 pkg.description = `${ name } plugin`;
 
-Object.keys(targets).forEach((target) => {
-  if (!pkg.scripts[target]) {
-    pkg.scripts[target] = targets[target];
-    console.log(`  Adding script '${ target }' to package.json`);
-  }
-});
-
 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));
 }
@@ -127,31 +94,6 @@ 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);
@@ -163,13 +105,6 @@ 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;
@@ -214,3 +149,5 @@ function updateArray(data) {
 
   return updated;
 }
+
+/* eslint-enable no-console */

package/pkg/package.json

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

package/update/init

@@ -4,17 +4,18 @@ const path = require('path');
 const fs = require('fs-extra');
 const { spawnSync } = require('child_process');
 
-const scriptFolder = __dirname;
+const scriptFolder = path.resolve(__dirname, '..');
 const dest = path.resolve('.');
 
 // Remove first two args
-let args = process.argv;
+const args = process.argv;
+
 args.splice(0, 2);
 
-const res = spawnSync(`${__dirname}/upgrade`, args, {
-  cwd: dest,
+const res = spawnSync(path.join(__dirname, 'upgrade'), args, {
+  cwd:   dest,
   shell: false,
-  stdio: [ 'ignore', process.stdout, process.stderr ],
+  stdio: ['ignore', process.stdout, process.stderr],
 });
 
 if (res.status !== 0) {
@@ -34,9 +35,13 @@ rawdata = fs.readFileSync(path.join(scriptFolder, 'package.json'));
 const upgradePackage = JSON.parse(rawdata);
 
 // Update dependency versions to match the latest from the creator
-Object.keys(latestPackage._pkgs).forEach((key) => {
-  appPackage.dependencies[key] = latestPackage._pkgs[key];
-});
+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
+}
 
 // Add in the webpack resolution
 appPackage.resolutions = appPackage.resolutions || {};
@@ -47,10 +52,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],
 });

package/update/package.json

@@ -12,7 +12,7 @@
     "upgrade"
   ],
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=20.0.0"
   },
   "dependencies": {
     "fs-extra": "^10.0.0"

package/update/upgrade

@@ -1,6 +1,6 @@
 #!/usr/bin/env sh
 
-SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )"/.. &> /dev/null && pwd )
 
 echo "Upgrading Rancher Shell"
 
@@ -19,13 +19,13 @@ fi
 # Check for a clean git repository
 if [ ! -d ".git" ] && [ "${FORCE}" == "false" ]; then
   echo "Not runnning in a git repository. Re-run with -f to ignore this check"
-  echo "Note: This action will update yuor files - running in a git repsository will ensure you have visibility over changes made"
+  echo "Note: This action will update your files - running in a git repository will ensure you have visibility over changes made"
   exit 1 
 fi
 
 if [[ $(git diff --stat) != '' ]] && [ "${FORCE}" == "false" ]; then
   echo "Git repository is not clean. Re-run with -f to ignore this check"
-  echo "Note: This action will update yuor files - running in a clean git repsository will ensure you have visibility over changes made"
+  echo "Note: This action will update your files - running in a clean git repository will ensure you have visibility over changes made"
   exit 1 
 fi
 
@@ -42,7 +42,7 @@ if [ "${HAS_SHELL}" != "1" ]; then
 fi
 
 # Copy files for the top-level folder (from the app creator)
-rsync --exclude nuxt.config.js ${SCRIPT_DIR}/app/files/* .
+rsync ${SCRIPT_DIR}/app/files/* .
 
 # Go through each folder in the pkg folder and update their files
 for pkg in ./pkg/*