Skip to content
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

Jump to bottom

JSR imports #956

Open
mbostock opened this issue Mar 2, 2024 · 3 comments · May be fixed by #957
Open

JSR imports #956

mbostock opened this issue Mar 2, 2024 · 3 comments · May be fixed by #957
Assignees
@mbostock
Labels
enhancement New feature or request

Comments

@mbostock
Copy link
Member

mbostock commented Mar 2, 2024

E.g.,

import {printProgress} from "jsr:@luca/flag";

But it’s not clear to me that the JSR API supports conversion to vanilla ES modules? Like, I get that I can fetch https://jsr.io/@luca/flag/1.0.0/main.ts, but how would I get the default entry into a module? And how would I bundle and convert TypeScript to vanilla JavaScript? 🤔

Ref. https://jsr.io/docs/native-imports
Ref. https://jsr.io/docs/api
Ref. https://jsr.io/docs/native-imports#implementing-native-jsr-imports-in-tools (not yet written)
@mbostock mbostock added the enhancement New feature or request label Mar 2, 2024
@mbostock mbostock changed the title jsr imports JSR imports Mar 2, 2024
@mbostock
Copy link
Member Author

mbostock commented Mar 2, 2024

Some clues here… It looks like we could use the npm compatibility API to download the tarball, which contains the transpiled ES modules. So https://npm.jsr.io/@jsr/luca__flag tells us which versions are available and what’s the latest

{
  "name": "@jsr/luca__flag",
  "description": "I like flags!",
  "dist-tags": {
    "latest": "1.0.1"
  },
  "versions": {
    "1.0.1": {
      "name": "@jsr/luca__flag",
      "version": "1.0.1",
      "description": "I like flags!",
      "dist": {
        "tarball": "https://npm.jsr.io/~/5/@jsr/luca__flag/1.0.1.tgz",
        "shasum": "121867B05BC5E2DC7B8B0D094D257441B3925A03",
        "integrity": "sha512-H0HxTnwINL5VPb0d9Paa0rlWYKyEmm+/tKRodWcKQxOEDCQ2uSaIQmPacT6LH8r6nERmMt8qHOjIYo7F2Dpg3Q=="
      },
      "dependencies": {}
    },
    "1.0.0": {
      "name": "@jsr/luca__flag",
      "version": "1.0.0",
      "description": "I like flags!",
      "dist": {
        "tarball": "https://npm.jsr.io/~/5/@jsr/luca__flag/1.0.0.tgz",
        "shasum": "AE1F23270B377B1733E3C6626589A51A39998206",
        "integrity": "sha512-o3aiKqepCk3D3XHVoHH81Td6XDPa7VQWQabn566sLTFUxxX+vN+2BVxShji3bVply57l1n6Z07Q6g+4Gh5cNnQ=="
      },
      "dependencies": {}
    }
  },
  "time": {
    "created": "2023-12-14T23:05:13.518Z",
    "modified": "2024-02-08T00:18:46.212Z",
    "1.0.1": "2024-01-26T19:05:08.325Z",
    "1.0.0": "2023-12-15T11:19:06.411Z"
  }
}

and then https://npm.jsr.io/~/5/@jsr/luca__flag/1.0.1.tgz gives us

package
├── main.d.ts
├── main.js
└── package.json

1 directory, 3 files

And then the package.json gives the default export (or at least .):

{
  "name": "@jsr/luca__flag",
  "version": "1.0.1",
  "homepage": "https://jsr.io/@luca/flag",
  "type": "module",
  "dependencies": {},
  "exports": {
    ".": "./main.js"
  }
}

And the main.js is ES modules. Though I imagine we’ll have to rewrite external imports… not sure what those look like yet.

@mbostock
Copy link
Member Author

mbostock commented Mar 2, 2024

I imagine we could expand the tarball into docs/.observablehq/cache/_jsr/@jsr/[email protected] and this would dovetail nicely with our existing self-hosted npm imports.

@mbostock mbostock self-assigned this Mar 2, 2024
@mbostock mbostock linked a pull request Mar 2, 2024 that will close this issue
Draft
5 tasks
@huw
Copy link
Contributor

huw commented Mar 4, 2024 •
edited
Loading

FWIW esm.sh also supports JSR directly, which is what I'm using right now. You can run:

import {printProgress} from "https://esm.sh/jsr/@luca/[email protected]"

ESM.sh does a lot of its own transpiling & import changes etc that you mention you need (and it uses the @jsr NPM namespace under the hood). If the jsDelivr code for npm: is reusable it's probably the fastest way to production for now :)

@mbostock mbostock mentioned this issue Apr 12, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mbostock mbostock

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

jsr: imports observablehq/framework
2 participants
@mbostock @huw