[graphiql] @graphiql/toolkit : Add browser friendly distribution file without require and exports

[AniruddhaSadhukhan]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I am using a single index.html page for graphiql using cdn like here : https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html

Now I am trying to use createLocalStorage() of @graphiql/toolkit but when adding the script tag with source https://unpkg.com/@graphiql/[email protected]/dist/index.js, its throwing error like exports and require are undefined.

Expected Behavior

An alternative distribution that is browser friendly like es6 etc so that it can be directly consumed via cdn and added in the graphiql index.html

Steps To Reproduce

1. Use the graphiql-cdn example
2. Add script file with the index.js of @graphiql/toolkit
3. Serve the index.html and open in browser

Environment

• GraphiQL Version: 3.x.y
• OS: all
• Browser: all
• Bundler: cdn
• react Version: 18
• graphql Version: NA

Anything else?

No response

[acao]

Please see the readme:
https://github.com/graphql/graphiql/tree/main/packages/graphiql#umd

Also you can see our examples for using the CDN bundle:

graphiql/examples/graphiql-cdn/index.html

Line 52 in 9cc88df

src="https://unpkg.com/graphiql/graphiql.min.js"

(minified UMD bundle)
https://unpkg.com/graphiql/graphiql.min.js

(development, unminified bundle)
https://unpkg.com/graphiql/graphiql.js

we have canonically used the same paths, since 2014!

[AniruddhaSadhukhan]

Hi @acao, this is for @graphiql/toolkit package and I didn’t find any UMD bundle for that

[acao]

ah, my bad, I misunderstood

we export the toolkit methods like so:

https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/cdn.ts

so I just need to add this new method!

[acao]

try the unpkg bundle for [email protected], or soon 3.0.3, and you'll have a GraphiQL.createLocalStorage! toolkit does not have it's own UMD bundle on purpose

[acao]

[email protected] released! enjoy!

[AniruddhaSadhukhan]

Thanks! Worked like a charm