simonw/til

Get JSR @datasette/table to work

Open

#89 opened on Mar 2, 2024

View on GitHub
 (3 comments) (0 reactions) (0 assignees)HTML (824 stars) (79 forks)batch import
help wanted

Description

As shown in this TIL, I got stuck! https://til.simonwillison.net/javascript/jsr-esbuild

mkdir /tmp/datasette-demo2
cd /tmp/datasette-demo2

echo '@jsr:registry=https://npm.jsr.io' > .npmrc
npm install @jsr/datasette__table

echo 'import * as mod from "@jsr/datasette__table";' > index.js
npx esbuild index.js --bundle --outfile=bundle.js

Error:

✘ [ERROR] Could not resolve "npm:lit@^2.2.7"

    node_modules/@jsr/datasette__table/datasette-table.js:1:36:
      1 │ import {LitElement, html, css} from 'npm:lit@^2.2.7';
        ╵                                     ~~~~~~~~~~~~~~~~

  You can mark the path "npm:lit@^2.2.7" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

1 error

I want to run my https://jsr.io/@datasette/table component in a browser, installed via JSR.

Here's what it looks like when it works: https://simonw.github.io/datasette-table/

Code here: https://github.com/simonw/datasette-table/

Contributor guide

Tech stack
javascriptnodejsweb componentshtmlcss
Domain
frontendtooling
Issue type
research
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
esbuild basicsJSR package resolutionnpm: import prefixLitElement basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate why esbuild cannot resolve 'npm:lit@^2.2.7' imports from the JSR package. This is likely because esbuild does not support the 'npm:' protocol by default. Look at esbuild plugins or configuration options to handle such imports, or consider using a different bundler that supports it. Check the JSR documentation and the datasette table source to see if there's a recommended way to bundle the component. The solution could be marking the import as external or providing a custom plugin to resolve 'npm:' to npm packages. Reference the attached TIL and the existing datasette table deployment for expected behavior.