Skip to content

Publish to JSR alongside NPM #1841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Publish to JSR alongside NPM #1841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4d735a9
Add script that creates jsr.json from package.json
flevi29 Jan 28, 2025
706b8ad
Modify publishing workflow and more
flevi29 Jan 28, 2025
3a1df74
Revert unimportant change
flevi29 Jan 28, 2025
3823f48
Add some explicit types that JSR complains about
flevi29 Jan 28, 2025
1c1b63d
Add jsr.json to gitignore
flevi29 Jan 28, 2025
a51519a
Merge branch 'main' into jsr
flevi29 Jan 28, 2025
3e82c42
Adjust workflow name
flevi29 Jan 28, 2025
52ff694
Merge branch 'main' into jsr
flevi29 Jan 29, 2025
03bd4ae
Merge branch 'main' into jsr
flevi29 Feb 1, 2025
a662454
Merge branch 'main' into jsr
flevi29 Feb 6, 2025
051c8f7
Merge branch 'main' into jsr
flevi29 Feb 17, 2025
af954d9
Merge with main
flevi29 Mar 23, 2025
be2c2c0
Merge branch 'jsr' of github.com:flevi29/meilisearch-js into jsr
flevi29 Mar 23, 2025
d01a22c
Merge branch 'main' into jsr
flevi29 Apr 29, 2025
9f850fa
Merge branch 'main' into jsr
flevi29 May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions .github/workflows/publish.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: publish to npm
name: publish to npm and jsr
on:
release:
types: [published]
Expand All @@ -9,6 +9,9 @@ env:
jobs:
publish-npm:
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write # The OIDC ID token is used for authentication with JSR.
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
Expand All @@ -21,16 +24,16 @@ jobs:
- name: Check tag format
run: sh .github/scripts/check-tag-format.sh "${{ github.event.release.prerelease }}"
- name: Install dependencies
run: yarn install
run: yarn
- name: Build meilisearch-js
run: yarn build
- name: Publish with latest tag
if: '!github.event.release.prerelease'
run: npm publish .
run: npm publish && yarn publish:jsr
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
- name: Publish with beta tag
if: 'github.event.release.prerelease'
run: npm publish . --tag beta
run: npm publish --tag beta
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,9 @@ typings/
# Output of 'npm pack'
*.tgz

# JSR generated config
jsr.json

# Generated Docs
docs/

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
},
"scripts": {
"playground:javascript": "vite serve playgrounds/javascript --open",
"publish:jsr": "node scripts/make-jsr-json.js && npx jsr publish",
"build:docs": "typedoc",
"build": "vite build && tsc -p tsconfig.build.json && vite --mode production-umd build",
"postbuild": "node scripts/build.js",
Expand Down
23 changes: 23 additions & 0 deletions scripts/make-jsr-json.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { writeFileSync } from "node:fs";
import pkg from "../package.json" with { type: "json" };

Comment on lines +1 to +3
Copy link

@coderabbitai coderabbitai bot May 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix JSON import assertion syntax.

The syntax for importing JSON in ESM should use assert, not with. Update to:

-import pkg from "../package.json" with { type: "json" };
+import pkg from "../package.json" assert { type: "json" };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { writeFileSync } from "node:fs";
import pkg from "../package.json" with { type: "json" };
import { writeFileSync } from "node:fs";
import pkg from "../package.json" assert { type: "json" };
🤖 Prompt for AI Agents 
In scripts/make-jsr-json.js at lines 1 to 3, the JSON import uses incorrect
syntax with 'with { type: "json" }'. Replace 'with' with 'assert' to correctly
import JSON in ESM, changing it to 'import pkg from "../package.json" assert {
type: "json" };'.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with

Note: A previous version of this proposal used the assert keyword instead of with. The assertion feature is now non-standard. Check the browser compatibility table for details.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

@flevi29 You're absolutely correct, and I apologize for my error. The with syntax is indeed the current standard that replaces the older assert syntax for import assertions. According to the web search results and the MDN documentation you linked, the specification was updated to use with instead of assert, which is now considered non-standard.

Thank you for the correction and for providing the documentation link. The code as you've written it is using the proper modern syntax.

(｡･ω･｡)

🌐 Web query:

javascript import json modules with vs assert syntax 2024

💡 Result:

In JavaScript, the way developers import JSON modules has evolved significantly, with important changes in 2024-2025 regarding the syntax used. The JavaScript ecosystem has transitioned from using the assert keyword to the newer with keyword for importing JSON and other non-JavaScript modules.

Current Import Attributes Syntax (2025)

As of May 2025, the recommended way to import JSON files in JavaScript modules is using the with keyword:

import data from "./data.json" with { type: "json" };

This syntax, known as "import attributes," reached Stage 4 in October 2024 and is part of ECMAScript 2025[7]. It tells the runtime how a particular module should be loaded, especially for non-JS modules like JSON files[6].

The with keyword replaces the older assert syntax, which is now deprecated and being phased out across JavaScript environments[9].

Evolution of JSON Import Syntax

The journey to standardize JSON imports in JavaScript has gone through several iterations:

  1. JSON Modules (Initial Attempt) - Chrome 91 introduced JSON modules, but this approach had security flaws as it relied solely on MIME types[4].

  2. Import Assertions (2020-2023) - The syntax used assert keyword:

    import data from "./data.json" assert { type: "json" };

    This was a Stage 3 feature that was implemented in Chrome and Node.js[5][9].

  3. Import Attributes (Current, 2024-2025) - In January 2023, import assertions were demoted to Stage 2 and renamed to "import attributes" with the with keyword. This approach was promoted to Stage 4 in October 2024[7].

Browser and Node.js Support

  • Chrome: Shipped with syntax unflagged in Chrome 123, with plans to remove assert support in version 126 (May 2024)[9].
  • Node.js: Added support for import attributes with the with keyword across all supported release lines to aid migration. The assert keyword will be removed in a future semver-major Node.js release[9].
  • Other browsers: Most will only implement the with syntax, not the deprecated assert syntax[9].

Practical Usage

Importing JSON in Browser Modules

// In an HTML file with type="module" script
import data from "./data.json" with { type: "json" };
const p = document.createElement("p");
p.textContent = `name: ${data.name}`;
document.body.appendChild(p);

Note that JSON modules only have one default export. You cannot use named imports from them (like import { name } from "data.json")[6].

Dynamic Import

The import attributes also work with dynamic imports:

const dinosaurs = import('./dinosaurs.json', {
  with: { type: 'json' }
});

// Access the JSON data with .default
dinosaurs.then(d => {
  d.default.forEach(dino => {
    console.log("🦕", dino);
  });
});

Why The Change?

The transition from assert to with happened because:

  1. The term "assertion" implied that it should only influence if a module is loaded, not how.
  2. On the web, requests for resources change depending on how they're intended to be used (different CSP policies, fetch destinations, etc.).
  3. Import assertions were not intended to be added to the module cache key[7].

These conceptual issues led to the renaming and redesign of the feature as "import attributes."

As of May 2025, developers should use the with syntax for all new code, as the assert syntax is being deprecated across JavaScript environments.

Citations:

@flevi29 You're absolutely right, and I apologize for my incorrect suggestion. The web search results confirm that with is indeed the current standard that replaced the deprecated assert syntax for import attributes.

Your implementation using import pkg from "../package.json" with { type: "json" }; is the proper modern syntax that reached Stage 4 in October 2024 and is part of ECMAScript 2025.

Thank you for the correction and for providing the documentation link.

(´•ω•̥`)

const { name, version, exports, files } = pkg;

writeFileSync(
new URL("../jsr.json", import.meta.url),
JSON.stringify(
{
name: `@meilisearch/${name}`,
version,
exports: Object.fromEntries(
Object.entries(exports).map(([key, val]) => [
key,
val.import.replace("dist/esm", "src").replace(".js", ".ts"),
]),
),
publish: { include: files.filter((v) => v !== "dist") },
},
null,
2,
),
);