chore: add app for making releases

.gitignore

@@ -33,8 +33,10 @@ web-types.lit.json
 # Generated auto-complete CSS file for Lumo theme
 packages/vaadin-lumo-styles/auto-complete.css
 
-# Generated release check
-scripts/check-releases.html
+# Release app
+release-app/node_modules
+release-app/dist
+release-app/branches.json
 
 # TypeScript output
 tsconfig.build.tsbuildinfo

eslint.config.js

@@ -183,6 +183,15 @@ export default [
       'no-console': 'off',
     },
   },
+  {
+    files: ['release-app/**/*'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
   {
     files: ['packages/**/test/**', 'test/integration/**'],
     languageOptions: {

package.json

@@ -20,7 +20,7 @@
     "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "start": "web-dev-server --node-resolve --open /dev",
     "start:base": "web-dev-server --node-resolve --open /dev --theme=base",
-    "check-releases": "node ./scripts/check-releases.js && web-dev-server --node-resolve --open /scripts/check-releases.html",
+    "release-app": "node ./release-app/check-branches.js && npx -y vite@7.0.0 build --config release-app/vite.config.js && npx -y electron@37.1.0 ./release-app",
     "test": "web-test-runner",
     "test:base": "yarn test --config web-test-runner-base.config.js",
     "test:firefox": "yarn test --config web-test-runner-firefox.config.js",

release-app/app.js

@@ -0,0 +1,230 @@
+import '@vaadin/vaadin-lumo-styles/test/autoload.js';
+import '@vaadin/button';
+import '@vaadin/details';
+import '@vaadin/dialog';
+import '@vaadin/text-field';
+import { html, LitElement } from 'lit';
+import { dialogRenderer } from '@vaadin/dialog/lit.js';
+import branches from './branches.json';
+
+class ReleaseApp extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    const branchSections = branches.map((branch) => html` <branch-section .branch="${branch}"></branch-section>`);
+    return html`
+      <div>
+        <h1>Release app</h1>
+        ${branchSections}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ra-app', ReleaseApp);
+
+class BranchSection extends LitElement {
+  static properties = {
+    branch: { type: Object },
+  };
+
+  createRenderRoot() {
+    return this;
+  }
+
+  firstUpdated() {
+    this.dialog = this.querySelector('vaadin-dialog');
+  }
+
+  render() {
+    return html`
+      <section>
+        <h2>${this.branch.branch}</h2>
+
+        <table>
+          <tr>
+            <td>Current version</td>
+            <td>${this.branch.currentVersion}</td>
+          </tr>
+          <tr>
+            <td>Next patch version</td>
+            <td>${this.branch.nextPatchVersion}</td>
+          </tr>
+          <tr>
+            <td>Unreleased commits</td>
+            <td>${this.branch.commits.length}</td>
+          </tr>
+        </table>
+
+        ${this.branch.commits.length > 0
+          ? html`
+              <vaadin-details summary="View unreleased commits">
+                <ul>
+                  ${this.branch.commits.map(
+                    (commit) => html`
+                      <li>
+                        <a href="${commit.html_url}" target="_blank">${commit.commit.message.split('\n')[0]}</a>
+                      </li>
+                    `,
+                  )}
+                </ul>
+              </vaadin-details>
+            `
+          : html`<p data-no-commits>No unreleased commits</p>`}
+
+        <vaadin-button
+          @click="${() => {
+            this.dialog.opened = true;
+          }}"
+          >Release instructions
+        </vaadin-button>
+
+        <vaadin-dialog
+          header-title="Release ${this.branch.branch}"
+          ${dialogRenderer(() => html` <ra-release-dialog .branch="${this.branch}"></ra-release-dialog>`, [])}
+        ></vaadin-dialog>
+      </section>
+    `;
+  }
+}
+
+customElements.define('branch-section', BranchSection);
+
+class ReleaseDialog extends LitElement {
+  static properties = {
+    branch: { type: Object },
+    releaseVersion: { type: String },
+  };
+
+  createRenderRoot() {
+    return this;
+  }
+
+  firstUpdated() {
+    // Initialize the release version with the next patch version of the branch
+    this.releaseVersion = this.branch.nextPatchVersion;
+  }
+
+  render() {
+    return html`
+      <section>
+        <vaadin-text-field
+          label="Version to release"
+          value="${this.releaseVersion}"
+          @change="${(e) => {
+            this.releaseVersion = e.target.value;
+          }}"
+        ></vaadin-text-field>
+      </section>
+      <section>
+        <h3>Step 1: Release web components</h3>
+        <ul>
+          <li>
+            <a
+              href="https://bender.vaadin.com/buildConfiguration/VaadinWebComponents_ReleaseVaadinWebComponents?mode=branches&release_branch=${this
+                .branch.branch}&release_version=${this.releaseVersion}"
+              target="_blank"
+              >Open CI build on Bender</a
+            >
+          </li>
+          <li>
+            <span>Wait until the page has loaded and verify it prefilled these values:</span>
+            <table>
+              <tr>
+                <td>Branch</td>
+                <td>${this.branch.branch}</td>
+              </tr>
+              <tr>
+                <td>Version</td>
+                <td>${this.releaseVersion}</td>
+              </tr>
+            </table>
+          </li>
+          <li>Click <span class="guibutton">Run build</span></li>
+          <li>Confirm if a dialog asks about using an auto-generated branch name</li>
+          <li
+            >Wait for the build to finish, then check that new versions have appeared on NPM (e.g.
+            <a href="https://www.npmjs.com/package/@vaadin/grid/v/${this.releaseVersion}" target="_blank"
+              ><code>@vaadin/grid@${this.releaseVersion}</code></a
+            >)
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Step 2: Release API docs</h3>
+        <ul>
+          <li>
+            <a
+              href="https://bender.vaadin.com/buildConfiguration/VaadinWebComponents_PublishWebComponentsApiDocs?mode=branches&release_branch=${this
+                .branch.branch}&release_version=${this.releaseVersion}&release_tag=v${this.releaseVersion}"
+              target="_blank"
+              >Open CI build on Bender</a
+            >
+          </li>
+          <li>
+            <span>Wait until the page has loaded and verify it prefilled these values:</span>
+            <table>
+              <tr>
+                <td>Branch</td>
+                <td>${this.branch.branch}</td>
+              </tr>
+              <tr>
+                <td>Tag</td>
+                <td>v${this.releaseVersion}</td>
+              </tr>
+              <tr>
+                <td>Version</td>
+                <td>${this.releaseVersion}</td>
+              </tr>
+            </table>
+          </li>
+          <li>Click <span class="guibutton">Run build</span></li>
+          <li>Confirm if a dialog asks about using an auto-generated branch name</li>
+          <li>Wait for the build to finish</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Step 3: Publish GitHub release</h3>
+        <ul>
+          <li>
+            <a href="https://github.com/vaadin/web-components/releases" target="_blank"
+              >Open the GitHub releases and edit the <code>v${this.releaseVersion}</code> draft release
+            </a>
+          </li>
+          <li>Check that the documentation link works</li>
+          <li>Check that the contents are correct</li>
+          <li>If the release is for the latest version, check <i>Set as the latest release</i></li>
+          <li>Then publish the release</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Step 4: Update Flow components to use the new version</h3>
+        <ul>
+          <li>
+            <a
+              href="https://bender.vaadin.com/buildConfiguration/VaadinFlowComponents_FlowComponentsUpdateNpmPackagesWebjarsVersions?branch=${this
+                .branch.branch}&mode=builds"
+              target="_blank"
+              >Open CI build on Bender
+            </a>
+          </li>
+          <li>Click <span class="guibutton">Run build</span></li>
+          <li>Wait for the build to finish</li>
+          <li>
+            <a href="https://github.com/vaadin/flow-components/pulls" target="_blank"
+              >Check the pull request created by the build</a
+            >
+          </li>
+          <li>Review, approve and merge the pull request</li>
+        </ul>
+      </section>
+    `;
+  }
+}
+
+customElements.define('ra-release-dialog', ReleaseDialog);

scripts/check-releases.js → release-app/check-branches.js

@@ -1,5 +1,6 @@
 import dotenv from 'dotenv';
 import fs from 'node:fs';
+import path from 'node:path';
 
 dotenv.config();
 
@@ -98,13 +99,10 @@ async function run() {
     }
   }
 
-  const template = fs.readFileSync('./scripts/check-releases.template.html', 'utf8');
-  const filledTemplate = template.replace(
-    '/*{inject-branch-info}*/',
-    `window.branches = ${JSON.stringify(branchInfos, null, 2)};`,
-  );
+  const json = JSON.stringify(branchInfos);
+  const outputPath = path.resolve('release-app', 'branches.json');
 
-  fs.writeFileSync('./scripts/check-releases.html', filledTemplate, 'utf8');
+  fs.writeFileSync(outputPath, json, 'utf8');
 }
 
 run();

release-app/empty.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <style>
+    html, body {
+      height: 100%;
+      padding: 0;
+      margin: 0;
+    }
+
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: sans-serif;
+      background: hsla(214, 57%, 24%, 0.1);
+    }
+  </style>
+</head>
+<body>
+<div>Click on a link on the left pane to open it in this pane.</div>
+</body>
+</html>

release-app/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Release app</title>
+  <style>
+    body {
+      padding: var(--lumo-space-l);
+    }
+
+    section {
+      margin-bottom: var(--lumo-space-l);
+    }
+
+    h1,
+    h2,
+    h3 {
+      margin-bottom: var(--lumo-space-m);
+    }
+
+    table {
+      border-collapse: collapse;
+      margin: var(--lumo-space-s) 0;
+    }
+
+    td {
+      border: 1px solid var(--lumo-contrast-10pct);
+      padding: var(--lumo-space-xs) var(--lumo-space-s);
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    code {
+      padding: 0 4px;
+    }
+
+    .guibutton {
+      font-size: 0.8em;
+      line-height: 1.25;
+      font-weight: 600;
+      border-radius: var(--lumo-border-radius-s);
+      padding: 0.3em 0.6em;
+      background: linear-gradient(white, var(--lumo-contrast-5pct));
+      box-shadow: inset 0 0 0 1px var(--lumo-contrast-10pct);
+      cursor: default;
+      position: relative;
+      top: -0.1em;
+      white-space: nowrap;
+    }
+
+    vaadin-dialog-overlay {
+      max-height: 80%;
+    }
+
+    vaadin-dialog-overlay h3 {
+      font-size: var(--lumo-font-size-m);
+    }
+  </style>
+</head>
+<body>
+<script type="module">
+  import "./app.js";
+</script>
+<ra-app></ra-app>
+</body>
+</html>