Skip to content

Update GraphiQL CDN example using ESM-based CDN esm.sh #3902

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.

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

Merged
merged 54 commits into from
May 2, 2025

Conversation

dimaMachina
Copy link
Collaborator

@dimaMachina dimaMachina commented May 1, 2025

cc @mikespub, following request #3897 (comment)

closes #3775

Copy link

changeset-bot bot commented May 1, 2025

🦋 Changeset detected

Latest commit: 2c75d5e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@graphiql/plugin-code-exporter Major
@graphiql/plugin-explorer Major
@graphiql/react Minor
graphiql Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented May 1, 2025

The latest changes of this PR are available as canary in npm (based on the declared changesets):

@mikespub
Copy link

mikespub commented May 2, 2025

Thanks @dimaMachina

I did some basic smoke test by copying the index.html to a web server (no build/install) and trying a few queries.

This seems to work fine with Chrome except for the following error:

react.bundle.mjs:3 module "@emotion/is-prop-valid" not found
require	@	react.bundle.mjs:3
(anonymous)	@	filter-props.mjs:29

@dimaMachina
Copy link
Collaborator Author

dimaMachina commented May 2, 2025

Thanks @dimaMachina

I did some basic smoke test by copying the index.html to a web server (no build/install) and trying a few queries.

This seems to work fine with Chrome except for the following error:

react.bundle.mjs:3 module "@emotion/is-prop-valid" not found
require	@	react.bundle.mjs:3
(anonymous)	@	filter-props.mjs:29

You can ignore this error, I described why this error occurs in https://github.com/dimaMachina/graphiql-esm.sh#notes

This comes from framer-motion package, it tries to import an optional peer dependency

@dimaMachina dimaMachina mentioned this pull request May 2, 2025
Base automatically changed from react19 to v4 May 2, 2025 15:42
@dimaMachina dimaMachina merged commit 6ff205c into v4 May 2, 2025
2 checks passed
@dimaMachina dimaMachina deleted the graphiql-cdn-react-19 branch May 2, 2025 15:46
@acao acao mentioned this pull request May 2, 2025
dimaMachina added a commit that referenced this pull request May 3, 2025
* add some changes to create new branch

* [v3] update vite to v6 (#3828)

* upd

* rm postcss since it's included in vite

* prettier

* upd

* upd

* upd

* fix lint

* [graphiql]: support react 19, drop support react 16 and react 17 (#3897)

* upd

* upd

* upd

* upd

* upd

* exclude react-dom/client from bundle

* bump react everywhere to v19

* bump react everywhere to v19

* polish

* fix failing text, to unblock canary

* upd

* try `minor` for graphiql/react, otherwise it pines to `1.0.0-next.2` in esm.sh

* try workaround

* try workaround

* try workaround

* try workaround

* this should fix vitest

* try

* try

* lint

* try

* fix test

* try SOURCEMAP var

* try ESM_SH_BUILD var

* try

* rm some unneeded code

* try to fix esbuild: package 'uWebSockets.js' not found

* update vite to see if it fix esbuild error?

* bump module "@emotion/is-prop-valid" not found to fix `module "@emotion/is-prop-valid" not found` on esm.sh

* upd

* upd

* upd

* fix e2e

* add changeset

* add migration markdown file

* fix

* Update GraphiQL CDN example using ESM-based CDN esm.sh (#3902)

* upd

* upd

* upd

* upd

* upd

* exclude react-dom/client from bundle

* bump react everywhere to v19

* bump react everywhere to v19

* polish

* fix failing text, to unblock canary

* upd

* try `minor` for graphiql/react, otherwise it pines to `1.0.0-next.2` in esm.sh

* try workaround

* try workaround

* try workaround

* try workaround

* this should fix vitest

* try

* try

* lint

* try

* fix test

* try SOURCEMAP var

* try ESM_SH_BUILD var

* try

* rm some unneeded code

* try to fix esbuild: package 'uWebSockets.js' not found

* update vite to see if it fix esbuild error?

* bump module "@emotion/is-prop-valid" not found to fix `module "@emotion/is-prop-valid" not found` on esm.sh

* upd

* upd

* upd

* fix e2e

* add changeset

* add migration markdown file

* fix

* upd

* upd graphiql plugin explorer docs

* upd

* upd

* upd

* update code exporter

* upd

* upd

* upd

* upd

* upd

* upd

* polish

* add changeset

* new tabs look for graphiql v4 (#3685)

* changeset pre enter alpha

* [graphiql-react/graphiql] new looks of tabs (#3644)

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* Update .changeset/thirty-spoons-call.md

* fix cypress

* this fix locally

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [2] GraphiQL x Vite v5 (#3679)

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [3] remove unused webpack deps (#3681)

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* remove webpack deps

* fix `yarn jest --coverage`

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [4] update graphql to `16.9.0` and use vite `define` configuration to remove development code from cdn bundle (#3683)

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* remove webpack deps

* fix `yarn jest --coverage`

* upd graphql

* aa

* yarn.lock

* fix tests

* remove `data-testid="graphiql-container"` (#3688)

* commit `pre.json` until `graphiql-v4` will be added to list of authorized branches to deploy

* remove `graphiql-v4` from release.yml

* [v4] remove `disableTabs` option (#3687)

* remove `disableTabs` option

* format

* commit `pre.json`

* add `graphiql-v4` in release.yml

* [v4] prefer `location` over `window.location` and prefer `navigator` over `window.navigator` (#3692)

* [v4] remove `build.sh` and `checkgit.sh` (#3694)

* [v4] test umd build only on ci, locally test cdn.ts (#3693)

* test umd build only on ci, locally test cdn.ts

* Update custom-words.txt

* [v4] convert graphiql e2e server to ESM (#3697)

* aa

* fix netlify

* fix

* fix fails on ci

* [v4] update changeset for changed exports (#3700)

* [v4] generate types with `vite-plugin-dts` (#3702)

* generate types with `vite-plugin-dts`

* add types:check in prebuild

* more

* more

* more

* update vite

* upd

* use terser

* [v4] use `vite build --watch` instead of `vite` for `dev` script because we don't need development server for them (#3705)

* [v4] remove graphiql default export (#3706)

* aa

* aa

* polish

* [v4] fix netlify deploy (#3708)

* fix netlify deploy

* fix cypress

* change `style.css` imports (#3709)

* Update poor-ghosts-jump.md

* Version Packages (alpha) (#3689)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] show tabs even there is only 1 tab (#3713)

* aa

* aa

* fix unit tests

* fix cypress

* [v4] Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in favor of `GraphiQL.Toolbar` render props. (#3707)

* Version Packages (alpha) (#3714)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] use `position: absolute` for `.graphiql-logo` class (#3716)

* [v4] remove `createComponentGroup` utility in favour `Object.assign` (#3717)

* Version Packages (alpha) (#3718)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] fix merge conflicts with `main` (#3719)

* upgrade to graphql v17 including support for new incremental delivery format (#3682)

* add support for new incremental delivery format

* fix vitest

* add patch for graphql-js bug

submittes upstream with test at graphql/graphql-js#4160

* apply feedback

* move patches!

* some fixes

* fix netlify/cypress

* remove export

* update changeset

---------

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Version Packages (#3715)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* prettier

* fix e2e

* update pr-graphql-compat-check.yml

* prettier

---------

Co-authored-by: Yaacov Rydzinski <[email protected]>
Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] fix scrollbar appearing in sidebar (#3720)

* replace `overflow-y: scroll` with `overflow-y: auto`

* fix netlify graphql function

* Version Packages (alpha) (#3723)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* style: Don't convert single \n to <br> (#3414)

* Update development instructions

* Don't convert single \n to <br>

* Add changeset

* Update .changeset/olive-mice-hide.md

---------

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* [v4] some refactoring (#3726)

* some refactoring

* use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo`

* more

* try to fix

* fix join is not defined

* Update packages/graphiql/cypress/e2e/incremental-delivery.cy.ts

Co-authored-by: Ted Thibodeau Jr <[email protected]>

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [v4] polish `tabs.cy` tests, remove `.graphiql-session` class (#3728)

* aa

* aa

* aa

* aa

* fix tests

* [v4] rollback `position: absolute` style for `.graphiql-logo` because tabs will behind logo (#3730)

* Version Packages (alpha) (#3725)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Add support for onPrettifyQuery callback to enable customised query formatting (#3733)

* aa

* prettifyyy

* Version Packages (alpha) (#3732)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] improve explorer styles (#3738)

* improve explorer styles

* aa

* Version Packages (alpha) (#3739)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix types incorrect types entry (#3740)

* Version Packages (alpha) (#3741)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* add vite replace html plugin for graphiql plugin explorer (#3742)

* add vite replace html plugin for graphiql plugin explorer

* fix build

* temp

* migrate `@graphiql/toolkit` to `tsup` (#3746)

* aa

* removes unneeded `undefined`

* try

* fix

* fix vitest

* rollback of `temp` commit

* update lock

* merge

* Update .changeset/rich-jobs-kick.md

* polish

* lint

* Update .changeset/good-vans-refuse.md

* update migration guide

* update migration guide

* upd

* upd

* fix

* make on prettify query async

* use maybe promise from toolkit

* upd

* message processor test pass

* fix e2e

* try

* FIX e2e

* try

* ok now it's good

* I hope now it's ok!

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yaacov Rydzinski <[email protected]>
Co-authored-by: Leonard Ehrenfried <[email protected]>

* GraphiQL v4: exit changeset alpha (#3907)

* exit changeset

* polish migration guide

* bump version

* bump version

* upd

* Update graphiql-4.0.0.md

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yaacov Rydzinski <[email protected]>
Co-authored-by: Leonard Ehrenfried <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants