Update Angular, move to pnpm, oxfmt and vitest

.github/workflows/changelog-preview.yml

@@ -7,50 +7,63 @@ permissions:
   contents: write
   pull-requests: write
 
-env:
-  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
 jobs:
   release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
+          ref: ${{ github.head_ref }}
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
+      - name: Setup node
+        uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: .nvmrc
 
-      - name: Prepare Changelog Entries
-        id: changelog
-        run: |
-          ./build/changelog-preview.sh "master" "${{ github.event.pull_request.head.sha }}"
+      - name: Run semantic-release dry-run
+        id: semantic
+        uses: cycjimmy/semantic-release-action@v6
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          ci: false
+          dry_run: true
+          unset_gha_env: true
+          branches: |
+            ['${{ github.head_ref }}']
+          extra_plugins: |
+            @semantic-release/changelog
+            @semantic-release/git
+            conventional-changelog-conventionalcommits@9
 
-      - name: Find Comment
-        uses: peter-evans/find-comment@v3
-        id: fc
+      - name: Comment PR with release preview
+        if: steps.semantic.outputs.new_release_published == 'true'
+        uses: marocchino/sticky-pull-request-comment@v3
         with:
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: changelog-preview-1337
+          header: semantic-release-preview
+          message: |
+            ## 📋 Release Preview
+
+            ### Changelog
+            ${{ steps.semantic.outputs.new_release_notes }}
 
-      - name: Create or update comment
-        uses: peter-evans/create-or-update-comment@v4
+      - name: Comment PR with no release info
+        if: steps.semantic.outputs.new_release_published != 'true'
+        uses: marocchino/sticky-pull-request-comment@v3
         with:
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            This repository uses [semantic-release](https://github.com/semantic-release/semantic-release) to automate the process of releasing new versions. The following changelog entries would be generated for the next release. Please review them to ensure they correctly reflect the changes in this pull request.
-            If you want to change the changelog entries, please edit the commit messages in this pull request following [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines. Use `git rebase -i ${{ github.event.pull_request.base.ref }}` to edit the commit history.
+          header: semantic-release-preview
+          message: |
+            ## 📋 Release Preview
 
-            Changelog preview (the formatting is slightly different from the actual release):
+            ### ℹ️ No Release
 
-            ```md
-            ${{ steps.changelog.outputs.changelog || 'This PR does not trigger any release. No changelog entries will be generated.'}}
-            ```
+            This PR does not contain any commits that trigger a release.
 
-            <!-- changelog-preview-1337 -->
-          edit-mode: replace
+            **Commits that trigger a release:**
+            - `feat(scope):` New features → minor version
+            - `fix(scope):` Bug fixes → patch version
+            - `refactor(scope):` Code refactoring → patch version
+            - `build(deps):` Dependency updates → patch version
+            - `BREAKING CHANGE:` in commit body → major version

.github/workflows/gh-pages.yml

@@ -3,7 +3,7 @@ name: Deploy docs to github-pages
 on:
   push:
     branches:
-      - "master"
+      - 'master'
 
   workflow_dispatch:
 
@@ -13,7 +13,7 @@ permissions:
   id-token: write
 
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 env:
@@ -30,20 +30,23 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup Node
-        uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Setup node
+        uses: actions/setup-node@v6
         with:
-          node-version: lts/*
-          cache: "npm"
+          node-version-file: .nvmrc
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Run build (docs)
-        run: npx ng build docs --base-href /date-time-picker/
+        run: pnpm exec ng build docs --base-href /date-time-picker/
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.github/workflows/publish.yml

@@ -23,27 +23,30 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Setup node
+        uses: actions/setup-node@v6
         with:
-          node-version: lts/*
-          cache: 'npm'
+          node-version-file: .nvmrc
           registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run Linter
-        run: npm run lint
+        run: pnpm lint
 
       - name: Run Tests
-        run: npm run test:ci
+        run: pnpm test:ci
 
       - name: Build library
-        run: |
-          npm run build
+        run: pnpm build
 
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release
+        run: pnpm exec semantic-release

.github/workflows/push.yml

@@ -13,19 +13,23 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Setup node
+        uses: actions/setup-node@v6
         with:
-          node-version: lts/*
-          cache: 'npm'
+          node-version-file: .nvmrc
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run linter
-        run: npm run lint
+        run: pnpm lint
 
       - name: Build picker
-        run: npm run build
+        run: pnpm build
 
       - name: Run tests
-        run: npm run test:ci
+        run: pnpm test:ci

.gitignore

@@ -39,7 +39,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-/.vscode
 
 .angular
 .cache

.lintstagedrc

@@ -1,13 +1,5 @@
 {
-  "*.ts": [
-    "eslint --fix --cache",
-    "prettier --write --cache"
-  ],
-  "*.html": [
-    "eslint --fix --cache",
-    "prettier --write --cache"
-  ],
-  "*.css": [
-    "prettier --write --cache"
-  ]
+  "*.ts": ["eslint --fix --cache", "oxfmt --no-error-on-unmatched-pattern"],
+  "*.html": ["eslint --fix --cache", "oxfmt --no-error-on-unmatched-pattern"],
+  "!(*.{ts,html})": ["oxfmt --no-error-on-unmatched-pattern"]
 }

.nvmrc

@@ -0,0 +1 @@
+lts/*

.oxfmtrc.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "bracketSameLine": true,
+  "jsdoc": true,
+  "singleAttributePerLine": true,
+  "printWidth": 100,
+  "proseWrap": "always",
+  "quoteProps": "preserve",
+  "singleQuote": true,
+  "sortImports": { "newlinesBetween": false },
+  "sortPackageJson": { "sortScripts": false },
+  "trailingComma": "none"
+}

.releaserc.cjs

@@ -1,31 +1,35 @@
-// Check if the current branch is a release branch
 var branch = process.env.GITHUB_REF_NAME;
 
+// The changelog-preview workflow runs semantic-release in dry-run on pull requests,
+// where we only want the commit analysis and release notes - not the npm/git/github
+// steps, which need a built library and tokens. Real releases run on `push` instead.
+var isPreview = process.env.GITHUB_EVENT_NAME === 'pull_request';
+
 // Assets to update on release
-var assetsToUpdate = ['package.json', 'package-lock.json', 'projects/picker/package.json'];
+var assetsToUpdate = ['package.json', 'projects/picker/package.json'];
 
 // Add changelog to assets if it's a production release
 if (branch === 'master') {
   assetsToUpdate.push('CHANGELOG.md');
 }
 
-/** @type {import('semantic-release').Options} */
-var config = {
-  repositoryUrl: 'git@github.com:netwin/date-time-picker.git',
-  branches: ['master', { name: 'release/*', channel: 'next', prerelease: 'rc' }],
-  tagFormat: '${version}',
-  plugins: [
-    [
-      '@semantic-release/commit-analyzer',
-      {
-        preset: 'angular',
-        releaseRules: [
-          { type: 'build', scope: 'deps', release: 'patch' },
-          { type: 'refactor', release: 'patch' }
-        ]
-      }
-    ],
-    '@semantic-release/release-notes-generator',
+// Commit analysis and release notes always run - this is all the changelog preview needs.
+var plugins = [
+  [
+    '@semantic-release/commit-analyzer',
+    {
+      preset: 'angular',
+      releaseRules: [
+        { type: 'build', scope: 'deps', release: 'patch' },
+        { type: 'refactor', release: 'patch' }
+      ]
+    }
+  ],
+  '@semantic-release/release-notes-generator'
+];
+
+if (!isPreview) {
+  plugins.push(
     '@semantic-release/changelog',
     ['@semantic-release/npm', { npmPublish: false }],
     ['@semantic-release/npm', { npmPublish: false, pkgRoot: 'projects/picker' }],
@@ -38,7 +42,15 @@ var config = {
       }
     ],
     '@semantic-release/github'
-  ]
+  );
+}
+
+/** @type {import('semantic-release').Options} */
+var config = {
+  repositoryUrl: 'git@github.com:netwin/date-time-picker.git',
+  branches: ['master', { name: 'release/*', channel: 'next', prerelease: 'rc' }],
+  tagFormat: '${version}',
+  plugins: plugins
 };
 
 module.exports = config;

.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["oxc.oxc-vscode", "Angular.ng-template"] }

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.removeUnusedImports": "explicit"
+  },
+  "[javascript]": { "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true },
+  "[typescript]": { "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true },
+  "[json]": { "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true },
+  "[jsonc]": { "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true },
+  "[markdown]": { "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true },
+  "[yaml]": { "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true }
+}