Suggestion: Add a demo that consumes NPM package

[mattmazzola]

Related to #2. I think there actually is an issue with NPM package but it was never diagnosed because the neither of the demo applications use the NPM package. The both reference the script via relative path such as:

webauthn/demos/js/playground.js

Line 1 in 9d47c51

import * as webauthn from '../../dist/webauthn.min.js'

I think the current demos function by direction serving the contents of the demos folder. However, I think to use the NPM package you would need the demo to have some build step which installs the package and then generates a site from it.

Certainly a more complex, but it would provide value that the package works so I think it could be good investment.

[dagnelies]

Well, I actually have another project using it as dependency and it works just fine so I don't there is an issue ...for typescript at least. However, a JS project would probably be broken indeed.

I like that relative import though, it's very convinient during development or bugfixing rather than always re-publishing, re-importing, waiting for the pipelines and avoiding browser caching issues.

Perhaps I'll make a separate example project. I'll leave this ticket open for now when I have more time.

[dagnelies]

PS: thanks for the feedback

[dagnelies]

PS2: there is also the demo fetching the lib from the CDN: https://webauthn.passwordless.id/demos/example-cdn.html

The import is actually quite simple: import * as webauthn from 'https://unpkg.com/@passwordless-id/webauthn

I bumped the version to 0.0.11 which includes your PR #2

[dagnelies]

Well, I have the feeling the README is enough to know how to install and use the package. I'll close the ticket for now. If anybody else thinks a demo is necessary, just mention it here to reopen the ticket.

The slight concern I have for such a demo is also what tooling to use. There are currently so many frameworks and tool chains that I fear if making a demo with esbuild for example, the next would come and ask for a demo using vite or parcel or nuxt or tsc or whatever fancy build toolchain / framework they use.

I mean ...it's relatively trivial to use this package after all. Just by copy pasting the code snippets on the readme.

[mattmazzola]

At the time this issue was created there was not a demo which was validating the package. It was assumed it could be consumed although all the existing demos were linking local files.

The intention was that by building a demo which uses the package instead of directly linking local files, it acts as type of integration test to verify the integrity of the package.

Things to verify

• That it has proper main and types fields
• Sourcemaps and types included
• Exports both ESM and CJS formats

If you are using URL imports to verify the package. That is definitely improvement.
Although I believe that only works in the browser with manually adding script tag. If you want to use URL imports with Node I think you need the latest version with the experimental URL import option enabled which very few people would have or trust.

I fear if making a demo with esbuild for example, the next would come and ask for a demo using vite or parcel or nuxt or tsc or

I think you're grouping all tooling / frameworks at interchangeable.
The end result is that a package is published to NPM. It doesn't matter if you use esbuild or tsc for compilation so I think this point may not be relevant.

Although I think you have updated demos to use a more robust method so yes is likely is ok to close.