statelyai / xstate

Actor-based state management & orchestration for complex app logic.
https://stately.ai/docs
MIT License
26.53k stars 1.22k forks source link

CDN for @xstate/inspect #2605

Open a-y-u-s-h opened 2 years ago

a-y-u-s-h commented 2 years ago

Description There's confusion regarding usage of @xstate/inspect in a VanillaJS project. Docs don't say much about it right now. And though I tried multiple combinations of links and tried importing variables from files (this and this as well), with type="module" specified in script tag, it gave me errors.

Expected Result Would be nice if the documentation has a section all about it. Vanilla example of inspect makes use of npm, which is...also vanilla, but it doesn't say anything about the true vanilla - which is simply HTML, CSS and JS file with CDN.

Actual Result

Upon importing files this way -

    <script type="module" src="https://unpkg.com/xstate@4.23.3/dist/xstate.web.js"></script>
    <script type="module" src="https://unpkg.com/@xstate/inspect@0.5.0/es/index.js"></script>
    <script type="module" src="src/scripts/index.js"></script>

And trying to import exported variables from those files - it doesn't work. Gives different errors like -

Uncaught TypeError: Failed to resolve module specifier "xstate". Relative references must start with either "/", "./", or "../".
index.js:1 Uncaught SyntaxError: The requested module 'https://unpkg.com/@xstate/inspect@0.5.0/lib/index.js' does not provide an export named 'inspect'

And upon importing files this way -

    <script type="module" src="https://unpkg.com/xstate@4.23.3/dist/xstate.web.js"></script>
    <script type="module" src="https://unpkg.com/@xstate/inspect@0.5.0/lib/index.js"></script>
    <script type="module" src="src/scripts/index.js"></script>

I get these errors in console:

Uncaught ReferenceError: exports is not defined
    at index.js:3
index.js:1 Uncaught SyntaxError: The requested module 'https://unpkg.com/@xstate/inspect@0.5.0/lib/index.js' does not provide an export named 'inspect'

This is how I'm importing it -

import { inspect } from "https://unpkg.com/@xstate/inspect@0.5.0/lib/index.js"

console.log(inspect)

Reproduction This isn't really a bug (maybe a bug in documentation?), it's simply a question of how do I make xstate and xstate inspect work without npm, with CDN. @mattpocock told me to put it in issues lol :)

Additional context Xstate version: 4.23.3 Xstate inspect version: 0.5.0

davidkpiano commented 2 years ago

cc. @Andarist What can be improved here?