fix: use vite build instead of rollup (#147)

This fix includes vite configuration and build command changes.
Straightforward migration does not work due to
'sha256 digest missing' error at runtime.

The reason of the error is the way vite bundling object-hash
module. The module has two entries main and browser in
package.json pointing to module's js files. Vite bundles
both files and they behaves not the same way when loaded
by nodejs. Making module external solves the issue, but
object-hash module must be installed next to extension.cjs
to be loaded during extension activation.

Signed-off-by: Denis Golovin <[email protected]>

Author: dgolovin

.extfiles

@@ -0,0 +1,7 @@
+package.json
+LICENSE
+icon.png
+redhat-icon.woff2
+README.md
+dist/**
+www/**

package.json

@@ -9,7 +9,7 @@
   "engines": {
     "podman-desktop": "^1.10.0"
   },
-  "main": "./dist/extension.js",
+  "main": "./dist/extension.cjs",
   "contributes": {
     "commands": [
       {
@@ -32,40 +32,37 @@
     }
   },
   "scripts": {
-    "build": "rollup --bundleConfigAsCjs --config rollup.config.js --compact --environment BUILD:production  && node ./scripts/build.js",
-    "watch": "rollup --bundleConfigAsCjs --config rollup.config.js -w",
-    "format:check": "prettier --end-of-line auto --cache --check \"**/*.{ts,js}\"",
-    "format:fix": "prettier --cache --write \"**/*.{ts,js}\"",
+    "build": "vite build && node ./scripts/build.js",
+    "watch": "vite build -w",
+    "format:check": "prettier --end-of-line auto --cache --check \"{src,types,scripts}/**/*.{ts,js}\"",
+    "format:fix": "prettier --cache --write \"{src,types,scripts}/**/*.{ts,js}\"",
     "lint:clean": "rimraf .eslintcache",
     "lint:fix": "node --max-old-space-size=6144 node_modules/eslint/bin/eslint.js --cache . --fix --ext js,ts",
     "lint:check": "node --max-old-space-size=6144 node_modules/eslint/bin/eslint.js --cache . --ext js,ts",
     "test": "vitest run --coverage",
     "test:all": "npm run test && npm run test:e2e",
     "test:e2e:setup": "xvfb-maybe --auto-servernum --server-args='-screen 0 1280x960x24' --",
     "test:e2e": "cross-env E2E_TESTS=true npm run test:e2e:setup vitest run tests/src/ --pool=threads --poolOptions.threads.singleThread --poolOptions.threads.isolate --no-file-parallelism"
-  
   },
   "dependencies": {
     "@podman-desktop/api": "^1.10.0",
     "@redhat-developer/rhcra-client": "^0.0.1",
     "@redhat-developer/rhsm-client": "^0.0.4",
     "axios": "^1.6.5",
     "js-yaml": "^4.1.0",
-    "openid-client": "5.4.0"
+    "openid-client": "^5.6.5"
   },
   "devDependencies": {
     "7zip-min": "^1.4.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-typescript": "^11.1.0",
+    "@playwright/test": "^1.42.1",
+    "@podman-desktop/tests-playwright": "next",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^20",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@playwright/test": "^1.42.1",
-    "@podman-desktop/tests-playwright": "next",
     "@vitest/coverage-v8": "^1.2.1",
+    "byline": "^5.0.0",
+    "copyfiles": "^2.4.1",
     "cross-env": "7.0.3",
     "electron": "^29.1.4",
     "eslint": "^8.57.0",
@@ -81,10 +78,9 @@
     "eslint-plugin-unicorn": "^51.0.1",
     "mkdirp": "^2.1.3",
     "prettier": "^3.2.5",
-    "rollup": "^3.20.4",
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
-    "vite": "^5.0.12",
+    "vite": "^5.2.12",
     "vitest": "^1.4.0",
     "xvfb-maybe": "^0.2.1",
     "zip-local": "^0.3.5"

scripts/build.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**********************************************************************
- * Copyright (C) 2022 Red Hat, Inc.
+ * Copyright (C) 2022 - 2024 Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,10 +22,18 @@ const path = require('path');
 const package = require('../package.json');
 const { mkdirp } = require('mkdirp');
 const fs = require('fs');
+const byline = require('byline');
+const cp = require('copyfiles');
+const cproc = require('node:child_process');
 
 const destFile = path.resolve(__dirname, `../${package.name}.cdix`);
 const builtinDirectory = path.resolve(__dirname, '../builtin');
-const unzippedDirectory = path.resolve(builtinDirectory, `${package.name}.cdix`);
+const zipDirectory = path.resolve(builtinDirectory, `${package.name}.cdix`);
+const extFiles = path.resolve(__dirname, '../.extfiles');
+const fileStream = fs.createReadStream(extFiles, { encoding: 'utf8' });
+
+const includedFiles = [];
+
 // remove the .cdix file before zipping
 if (fs.existsSync(destFile)) {
   fs.rmSync(destFile);
@@ -35,9 +43,31 @@ if (fs.existsSync(builtinDirectory)) {
   fs.rmSync(builtinDirectory, { recursive: true, force: true });
 }
 
-zipper.sync.zip(path.resolve(__dirname, '../')).compress().save(destFile);
+// install external modules into dist folder
+cproc.exec('yarn add [email protected] --cwd .', { cwd: './dist' }, (error, stdout, stderr) => {
+  if (error) {
+    console.log(stdout);
+    console.log(stderr);
+    throw error;
+  }
 
-// create unzipped built-in
-mkdirp(unzippedDirectory).then(() => {
-  zipper.sync.unzip(destFile).save(unzippedDirectory);
+  byline(fileStream)
+    .on('data', line => {
+      includedFiles.push(line);
+    })
+    .on('error', () => {
+      throw new Error('Error reading .extfiles');
+    })
+    .on('end', () => {
+      includedFiles.push(zipDirectory); // add destination dir
+      mkdirp.sync(zipDirectory);
+      console.log(`Copying files to ${zipDirectory}`);
+      cp(includedFiles, error => {
+        if (error) {
+          throw new Error('Error copying files', error);
+        }
+        console.log(`Zipping files to ${destFile}`);
+        zipper.sync.zip(zipDirectory).compress().save(destFile);
+      });
+    });
 });

tests/src/setupFiles/extended-hooks.ts

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import { type RunnerTestContext, takeScreenshotHook } from '@podman-desktop/tests-playwright';
+import { type RunnerTestContext,takeScreenshotHook } from '@podman-desktop/tests-playwright';
 import { afterEach } from 'vitest';
 
 afterEach(async (context: RunnerTestContext) => {

tests/src/sso-extension.spec.ts

@@ -15,17 +15,11 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
-import type { Page } from '@playwright/test';
+import type { Page} from '@playwright/test';
 import { expect as playExpect } from '@playwright/test';
-import type { RunnerTestContext } from '@podman-desktop/tests-playwright';
-import {
-  AuthenticationPage,
-  ExtensionCardPage,
-  NavigationBar,
-  PodmanDesktopRunner,
-  WelcomePage,
-} from '@podman-desktop/tests-playwright';
-import { afterAll, beforeAll, beforeEach, describe, test } from 'vitest';
+import type { RunnerTestContext} from '@podman-desktop/tests-playwright';
+import { AuthenticationPage, ExtensionCardPage, NavigationBar, PodmanDesktopRunner, WelcomePage } from '@podman-desktop/tests-playwright';
+import { afterAll, beforeAll, beforeEach,describe, test } from 'vitest';
 
 import { SSOExtensionPage } from './model/pages/sso-extension-page';
 
@@ -41,6 +35,7 @@ const authProviderName = 'Red Hat SSO';
 const activeExtensionStatus = 'ACTIVE';
 const disabledExtensionStatus = 'DISABLED';
 
+
 beforeEach<RunnerTestContext>(async ctx => {
   ctx.pdRunner = pdRunner;
 });
@@ -61,6 +56,7 @@ afterAll(async () => {
 });
 
 describe('Red Hat Authentication extension verification', async () => {
+
   test('Go to extensions and check if extension is already installed', async () => {
     const extensions = await navBar.openExtensions();
     if (await extensions.extensionIsInstalled(extensionLabel)) {
@@ -103,12 +99,8 @@ describe('Red Hat Authentication extension verification', async () => {
     const authPage = await settingsBar.openTabPage(AuthenticationPage);
     await playExpect(authPage.heading).toHaveText('Authentication');
     const provider = authPage.getProvider(authProviderName);
-    await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Name')).toHaveText(
-      authProviderName,
-    );
-    await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Status')).toHaveText(
-      'Logged out',
-    );
+    await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Name')).toHaveText(authProviderName);
+    await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Status')).toHaveText('Logged out');
     await playExpect(provider.getByLabel('Provider Actions').getByRole('button')).toContainText('Sign in');
   });
 
@@ -140,7 +132,7 @@ describe('Red Hat Authentication extension verification', async () => {
       const authPage = await settingsBar.openTabPage(AuthenticationPage);
       await playExpect(authPage.heading).toHaveText('Authentication');
       await playExpect(authPage.getProvider(authProviderName)).toHaveCount(1);
-    });
+    }); 
   });
 
   test('SSO extension can be removed', async () => {
@@ -153,7 +145,5 @@ async function removeExtension(): Promise<void> {
   const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
   await extensionCard.disableExtension();
   await extensionCard.removeExtension();
-  await playExpect
-    .poll(async () => await extensions.extensionIsInstalled(extensionLabel), { timeout: 15000 })
-    .toBeFalsy();
+  await playExpect.poll(async () => await extensions.extensionIsInstalled(extensionLabel), { timeout: 15000 }).toBeFalsy();
 }

vite.config.js

@@ -0,0 +1,64 @@
+/**********************************************************************
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { join } from 'path';
+import { builtinModules } from 'module';
+
+const PACKAGE_ROOT = __dirname;
+
+/**
+ * @type {import('vite').UserConfig}
+ * @see https://vitejs.dev/config/
+ */
+const config = {
+  mode: process.env.MODE,
+  root: PACKAGE_ROOT,
+  envDir: process.cwd(),
+  resolve: {
+    alias: {
+      '/@/': join(PACKAGE_ROOT, 'src') + '/',
+    },
+  },
+  optimizeDeps: {},
+  build: {
+    sourcemap: 'inline',
+    target: 'esnext',
+    outDir: 'dist',
+    assetsDir: '.',
+    minify: process.env.MODE === 'production' ? 'esbuild' : false,
+    lib: {
+      entry: 'src/extension.ts',
+      formats: ['cjs'],
+    },
+    rollupOptions: {
+      external: [
+        '@podman-desktop/api',
+        'object-hash', // has to be external because of browser entry in package.json
+        ...builtinModules.flatMap(p => [p, `node:${p}`]),
+      ],
+      output: {
+        entryFileNames: '[name].cjs',
+        intro: 'const window = {}',
+      },
+    },
+    emptyOutDir: true,
+    reportCompressedSize: false,
+  },
+};
+
+export default config;

vitest.config.js

@@ -37,8 +37,7 @@ const excludeArray = [
 ];
 
 export function coverageConfig(packageRoot, packageName) {
-  const obj = {
-    coverage: {
+  const obj = { coverage: {
       all: true,
       clean: true,
       src: [packageRoot],