Merge pull request #3957 from illume/hlp-create-ci

headlamp-plugin: Fix create command to use package-lock.json and npm ci

Author: k8s-ci-robot

plugins/headlamp-plugin/README.md

@@ -167,7 +167,7 @@ v0.6.0-alpha.1
 To set the "alpha" tag when publishing do the following.
 
 ```bash
-npm run build && npm pack
+npm run build && npm run copy-package-lock && npm pack
 npm publish kinvolk-headlamp-plugin-0.6.0-alpha.0.tgz --tag alpha
 ```
 

plugins/headlamp-plugin/bin/headlamp-plugin.js

@@ -42,17 +42,19 @@ const vitePromise = import('vite');
  * Creates a new plugin folder.
  *
  * Copies the files within template, and modifies a couple.
- * Then runs npm install inside of the folder.
+ * Then runs "npm ci" inside of the folder.
  *
  * @param {string} name - name of package and output folder.
  * @param {boolean} link - if we link @kinvolk/headlamp-plugin for testing
+ * @param {boolean} noInstall - if we skip installing with "npm ci"
  * @returns {0 | 1 | 2 | 3} Exit code, where 0 is success, 1, 2, and 3 are failures.
  */
-function create(name, link) {
+function create(name, link, noInstall) {
   const dstFolder = name;
   const templateFolder = path.resolve(__dirname, '..', 'template');
   const indexPath = path.join(dstFolder, 'src', 'index.tsx');
   const packagePath = path.join(dstFolder, 'package.json');
+  const packageLockPath = path.join(dstFolder, 'package-lock.json');
   const readmePath = path.join(dstFolder, 'README.md');
 
   if (fs.existsSync(name)) {
@@ -89,6 +91,7 @@ function create(name, link) {
   }
 
   replaceFileVariables(packagePath);
+  replaceFileVariables(packageLockPath);
   replaceFileVariables(indexPath);
   replaceFileVariables(readmePath);
 
@@ -100,28 +103,29 @@ function create(name, link) {
     });
   }
 
-  console.log('Installing dependencies...');
-  // Run npm install.
-  try {
-    child_process.execSync('npm install', {
-      stdio: 'inherit',
-      cwd: dstFolder,
-      encoding: 'utf8',
-    });
-  } catch (e) {
-    console.error(
-      `Problem running npm install inside of "${dstFolder}" abs: "${resolve(dstFolder)}"`
-    );
-    return 3;
-  }
+  if (noInstall) {
+    console.log('Skipping dependency installation...');
+  } else {
+    console.log('Installing dependencies...');
+    try {
+      child_process.execSync('npm ci', {
+        stdio: 'inherit',
+        cwd: dstFolder,
+        encoding: 'utf8',
+      });
+    } catch (e) {
+      console.error(`Problem running npm ci inside of "${dstFolder}" abs: "${resolve(dstFolder)}"`);
+      return 3;
+    }
 
-  // This can be used to make testing locally easier.
-  if (link) {
-    // Seems to require linking again with npm 7+
-    console.log('Linking @kinvolk/headlamp-plugin');
-    child_process.spawnSync('npm', ['link', '@kinvolk/headlamp-plugin'], {
-      cwd: dstFolder,
-    });
+    // This can be used to make testing locally easier.
+    if (link) {
+      // Seems to require linking again with npm 7+
+      console.log('Linking @kinvolk/headlamp-plugin');
+      child_process.spawnSync('npm', ['link', '@kinvolk/headlamp-plugin'], {
+        cwd: dstFolder,
+      });
+    }
   }
 
   console.log(`"${dstFolder}" created.`);
@@ -1642,11 +1646,15 @@ yargs(process.argv.slice(2))
           describe:
             'For development of headlamp-plugin itself, so it uses npm link @kinvolk/headlamp-plugin.',
           type: 'boolean',
+        })
+        .option('noinstall', {
+          describe: 'Skip installing dependencies with npm ci',
+          type: 'boolean',
         });
     },
     argv => {
       // @ts-ignore
-      process.exitCode = create(argv.name, argv.link);
+      process.exitCode = create(argv.name, argv.link, argv.noinstall);
     }
   )
   .command(

plugins/headlamp-plugin/package.json

@@ -8,8 +8,9 @@
   "scripts": {
     "prepack": "(node -e \"if (! require('fs').existsSync('./lib/components')) {process.exit(1)} \" || (echo 'lib dir is empty. Remember to run `npm run build` before packing' && exit 1))",
     "build": "npx shx rm -rf lib types lib/assets lib/components lib/helpers lib/i18n lib/lib lib/plugin lib/redux lib/resources && npx shx cp -r ../../frontend/src/assets ../../frontend/src/components ../../frontend/src/helpers ../../frontend/src/stateless ../../frontend/src/i18n ../../frontend/src/lib ../../frontend/src/plugin ../../frontend/src/redux ../../frontend/src/resources src/ && tsc --build ./tsconfig.json && npx shx cp -r src/additional.d.ts lib/ && npx shx cp -r ../../frontend/src/assets lib/ && npx shx cp -r ../../frontend/src/resources lib/ && npx shx cp -r ../../frontend/src/i18n/locales lib/i18n && node scripts/copy-static-assets.js",
-    "update-dependencies": "node dependencies-sync.js update && npm install",
-    "check-dependencies": "node dependencies-sync.js check"
+    "update-dependencies": "node dependencies-sync.js update && npm install && node scripts/copy-package-lock.js",
+    "check-dependencies": "node dependencies-sync.js check",
+    "copy-package-lock": "node scripts/copy-package-lock.js"
   },
   "prettier": "@headlamp-k8s/eslint-config/prettier-config",
   "dependencies": {

plugins/headlamp-plugin/scripts/copy-package-lock.js

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const child_process = require('child_process');
+
+/**
+ * Copies the package-lock.json file to the template folder and modifies its contents.
+ */
+function copyPackageLock() {
+  console.log('copy_package_lock: Copying package-lock.json to template folder...');
+  fs.copyFileSync(
+    'package-lock.json',
+    path.join('template', 'package-lock.json')
+  );
+
+  // Make a tmp mypkgtmp with bin/headlamp-plugin.js create mypkgtmp
+  // If mypkgtmp exists remove it first
+  const packageName = 'mypkgtmp';
+  if (fs.existsSync(packageName)) {
+    fs.rmSync(packageName, { recursive: true, force: true });
+  }
+  child_process.spawnSync('node', ['bin/headlamp-plugin.js', 'create', packageName, '--noinstall'], {
+    stdio: 'inherit',
+  });
+
+  // Go into the folder and run "npm install"
+  console.log('copy_package_lock: Installing dependencies in temporary folder to make sure everything is up to date...');
+  child_process.spawnSync('npm', ['install'], {
+    cwd: packageName,
+    stdio: 'inherit',
+  });
+
+  // Remove the node_modules inside packageName, and run npm install again.
+  // This is necessary to ensure that the package-lock.json file is stabalized.
+  console.log('copy_package_lock: Removing node_modules and reinstalling to stabalize packages...');
+  fs.rmSync(path.join(packageName, 'node_modules'), { recursive: true, force: true });
+  child_process.spawnSync('npm', ['install'], {
+    cwd: packageName,
+    stdio: 'inherit',
+  });
+
+  // Remove the node_modules and run "npm ci" to confirm it's ok.
+  console.log('copy_package_lock: Removing node_modules and running "npm ci" to confirm it is ok...');
+  fs.rmSync(path.join(packageName, 'node_modules'), { recursive: true, force: true });
+  child_process.spawnSync('npm', ['ci'], {
+    cwd: packageName,
+    stdio: 'inherit',
+  });
+
+  // copy mypkgtmp/package-lock.json into template/package-lock.json
+  fs.copyFileSync(`${packageName}/package-lock.json`, 'template/package-lock.json');
+
+  // Clean up temporary package
+  console.log('copy_package_lock: Cleaning up temporary package...');
+  fs.rmSync(packageName, { recursive: true, force: true });
+
+  // replace in file template/package-lock.json  packageName with $${name}
+  // just do a search / replace in the file
+  let packageLockContent = fs.readFileSync('template/package-lock.json', 'utf8');
+  // Use a replacer function so the replacement string is inserted literally as $${name}
+  packageLockContent = packageLockContent.replace(new RegExp(packageName, 'g'), () => '$${name}');
+  fs.writeFileSync('template/package-lock.json', packageLockContent);
+  console.log('copy_package_lock: Updated template/package-lock.json');
+}
+
+copyPackageLock();