Publishing JSR package with Github Actions that react-hook-use-cta used

JSR

Publishing to Javascript Registry is straightforward.

• Sign-in using a github account
• Click Publish a package.
  • Create a new scope
  • Or select an existing scope
• Name your new package and create

JSR Package Settings

Make sure you go to your package settings to fill out

• description of your package
• compatibility. I selected Node and Deno since my package is for consumption

Fill this section out to link your jsr package with your github repo. JSR makes publishing easy through this linking. Better than having to make tokens.

Publish setup

JSR walks you through publishing

You can setup up jsr.json by copying and replacing
@your-scope/your-package to your jsr.json file in the repo root directory

{
  "name": "@your-scope/your-package",
  "version": "0.0.0",
  "license": "MIT",
  "exports": "./src/index.ts"
}

You'll be able to publish through CLI, or github actions. I will be going over how to update via the .github/workflows/publish-package.yml file from the previous article

Github actions

.github/workflows/publish-package.yml should now look like

name: Publish to package registry

on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
    inputs:
      jsr:
        type: boolean
        default: true
        description: publish to JSR
      npm:
        type: boolean
        default: true
        description: publish to npm

  workflow_call:
    inputs:
      jsr:
        type: boolean
        default: true
      npm:
        type: boolean
        default: true

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # The OIDC ID token is used for authentication with JSR.

    steps:
      - name: Checkout repository
        if: ${{ inputs.jsr || inputs.npm }}
        uses: actions/checkout@v4

      - name: Set up Node.js
        if: ${{ inputs.jsr || inputs.npm }}
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          registry-url: 'https://registry.npmjs.org'
          cache: npm

      - name: Restore cache
        if: ${{ inputs.jsr  || inputs.npm  }}
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
          key: ${{ runner.os }}-publish-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-publish-

      - name: Install npm dependencies
        if: ${{ inputs.jsr  || inputs.npm  }}
        run: npm ci

      - name: Publish to jsr
        if: ${{ inputs.jsr }}
        run: npx jsr publish

      - name: Publish to npm
        if: ${{ inputs.npm  }}
        run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

I included workflow_dispatch to let you select which to publish in case you need to do them individually from github actions.

workflow_call is also included to let you reuse the workflow. I'll go over how to use this in another article.

Setup JSR versioning

Unless you want to manually update jsr.json, you can use npm version to also update jsr.json using:

util/versioning.cjs

const fs = require( 'node:fs', );

const pkg = require( '../package.json', );
const jsr = require( '../jsr.json', );

jsr.version = pkg.version;

fs.writeFile(
  'jsr.json',
  JSON.stringify(
    jsr,
    null,
    2,
  ),
  {
    encoding: 'utf8',
    flags: 'w',
  },
  ( err, ) => {
    if ( err ) {
      console.error( 'error updating version', err, );
      return;
    }
    console.log( 'jsr.json version updated', );
  },
);

Changes to package.json

I am only showing the necessary changes while trying to make it easy to copy and paste.

{
  "scripts": {
    "version": "node util/versioning.cjs && git add jsr.json && npm run build && git add -A dist",
  }
}

jsr.json will now update using the new semver npm will get when you call npm version.

Now you are setup for publishing through Github actions.

The next step is setting up your github pages using nextjs