draft: merge webpack to vite #2371
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!-- | ||
| * Copyright (c) 2021 GraphQL Contributors | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| --> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| body { | ||
| height: 100%; | ||
| margin: 0; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| } | ||
| #graphiql { | ||
| height: 100vh; | ||
| } | ||
| </style> | ||
|
|
||
| <!-- | ||
| This GraphiQL example depends on Promise and fetch, which are available in | ||
| modern browsers, but can be "polyfilled" for older browsers. | ||
| GraphiQL itself depends on React DOM. | ||
| If you do not want to rely on a CDN, you can host these files locally or | ||
| include them directly in your favored resource bunder. | ||
| --> | ||
|
|
||
| <!-- | ||
| These two files can be found in the npm module, however you may wish to | ||
| copy them directly into your environment, or perhaps include them in your | ||
| favored resource bundler. | ||
| --> | ||
| </head> | ||
| <body> | ||
| <div id="graphiql">Loading...</div> | ||
| <script src="./src/main.tsx"></script> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| /** | ||
|
There was a problem hiding this comment. yeah, this file just needs to be removed from this PR. it should instead import |
||
| * UMD GraphiQL Example | ||
| * | ||
| * This is a simple example that provides a primitive query string parser on top of GraphiQL props | ||
| * It assumes a global umd GraphiQL, which would be provided by an index.html in the default example | ||
| * | ||
| * It is used by: | ||
| * - the netlify demo | ||
| * - end to end tests | ||
| * - webpack dev server | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
There was a problem hiding this comment. this file should not contain imports. this example was meant to be a CDN usage example, that tests the CDN example using the UMD without esm or any bundling. this example implementaiton is not a file for users to import, I hope that's clear. the vast amount of our users use the unpkg/jsdelivr bundle, not the esm import and a bundler. please see the comment at the top of this file |
||
| import ReactDOM from 'react-dom'; | ||
| import GraphiQL from './cdn'; | ||
| import './css/app.css'; | ||
| import './css/codemirror.css'; | ||
| import './css/foldgutter.css'; | ||
| import './css/info.css'; | ||
| import './css/jump.css'; | ||
| import './css/lint.css'; | ||
| import './css/loading.css'; | ||
| import './css/show-hint.css'; | ||
|
|
||
| import './css/doc-explorer.css'; | ||
| import './css/history.css'; | ||
|
There was a problem hiding this comment. I'm not sure how this file ended up in There was a problem hiding this comment. Yes, it seems that I didn't notice that tsc will compile all the files in the directory, and src/main.tsx is only used as the entry script of the web application (the official practice of the vite project). Probably should be excluded from tsc or moved to resources/ directory There was a problem hiding this comment. ah, yes There was a problem hiding this comment. Fixed, I excluded There was a problem hiding this comment. this file should not be importing individual css files either, the idea is that it's supposed to show a demo using the CDN bundle and thus the css bundle... I need to clean this file up in another PR! There was a problem hiding this comment. huh weird, webpack supports it for There was a problem hiding this comment. the esm bundle users want dynamic imports for SSR, and the cdn users just want a single file and don't really need dynamic imports. there has to be a way? we originally were using inline There was a problem hiding this comment. @rxliuli it seems some of these solutions might work: There was a problem hiding this comment. I played around with this too recently. There's a option that inlines all dynamic imports: export default defineConfig({
// ...
build: {
lib: { /* libarary mode */ },
rollupOptions: {
external: ['react', 'react-dom'],
output: { inlineDynamicImports: true },
},
},
}); |
||
|
|
||
| // Parse the search string to get url parameters. | ||
| const search = window.location.search; | ||
| const parameters = {}; | ||
| search | ||
| .substr(1) | ||
| .split('&') | ||
| .forEach(function (entry) { | ||
| const eq = entry.indexOf('='); | ||
| if (eq >= 0) { | ||
| // @ts-expect-error | ||
| parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent( | ||
| entry.slice(eq + 1), | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| // If variables was provided, try to format it. | ||
| // @ts-expect-error | ||
| if (parameters.variables) { | ||
| try { | ||
| // @ts-expect-error | ||
| parameters.variables = JSON.stringify( | ||
| // @ts-expect-error | ||
| JSON.parse(parameters.variables), | ||
| null, | ||
| 2, | ||
| ); | ||
| } catch (e) { | ||
| // Do nothing, we want to display the invalid JSON as a string, rather | ||
| // than present an error. | ||
| } | ||
| } | ||
|
|
||
| // If headers was provided, try to format it. | ||
| // @ts-expect-error | ||
| if (parameters.headers) { | ||
| try { | ||
| // @ts-expect-error | ||
| parameters.headers = JSON.stringify( | ||
| // @ts-expect-error | ||
| JSON.parse(parameters.headers), | ||
| null, | ||
| 2, | ||
| ); | ||
| } catch (e) { | ||
| // Do nothing, we want to display the invalid JSON as a string, rather | ||
| // than present an error. | ||
| } | ||
| } | ||
|
|
||
| // When the query and variables string is edited, update the URL bar so | ||
| // that it can be easily shared. | ||
| // @ts-expect-error | ||
| function onEditQuery(newQuery) { | ||
| // @ts-expect-error | ||
| parameters.query = newQuery; | ||
| updateURL(); | ||
| } | ||
|
|
||
| // @ts-expect-error | ||
| function onEditVariables(newVariables) { | ||
| // @ts-expect-error | ||
| parameters.variables = newVariables; | ||
| updateURL(); | ||
| } | ||
|
|
||
| // @ts-expect-error | ||
| function onEditHeaders(newHeaders) { | ||
| // @ts-expect-error | ||
| parameters.headers = newHeaders; | ||
| updateURL(); | ||
| } | ||
|
|
||
| // @ts-expect-error | ||
| function onEditOperationName(newOperationName) { | ||
| // @ts-expect-error | ||
| parameters.operationName = newOperationName; | ||
| updateURL(); | ||
| } | ||
|
|
||
| // @ts-expect-error | ||
| function onTabChange(tabsState) { | ||
| const activeTab = tabsState.tabs[tabsState.activeTabIndex]; | ||
| // @ts-expect-error | ||
| parameters.query = activeTab.query; | ||
| // @ts-expect-error | ||
| parameters.variables = activeTab.variables; | ||
| // @ts-expect-error | ||
| parameters.headers = activeTab.headers; | ||
| // @ts-expect-error | ||
| parameters.operationName = activeTab.operationName; | ||
| updateURL(); | ||
| } | ||
|
|
||
| function updateURL() { | ||
| const newSearch = | ||
| '?' + | ||
| Object.keys(parameters) | ||
| .filter(function (key) { | ||
| // @ts-expect-error | ||
| return Boolean(parameters[key]); | ||
| }) | ||
| .map(function (key) { | ||
| return ( | ||
| // @ts-expect-error | ||
| encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]) | ||
| ); | ||
| }) | ||
| .join('&'); | ||
| // @ts-expect-error | ||
| history.replaceState(null, null, newSearch); | ||
| } | ||
|
|
||
| function getSchemaUrl() { | ||
| const isDev = window.location.hostname.match(/localhost$/); | ||
|
|
||
| if (isDev) { | ||
| // This supports an e2e test which ensures that invalid schemas do not load. | ||
| // @ts-expect-error | ||
| if (parameters.bad && parameters.bad === 'true') { | ||
| return '/bad/graphql'; | ||
| } else { | ||
| return '/graphql'; | ||
| } | ||
| } | ||
| return '/.netlify/functions/schema-demo'; | ||
| } | ||
|
|
||
| // Render <GraphiQL /> into the body. | ||
| // See the README in the top level of this module to learn more about | ||
| // how you can customize GraphiQL by providing different values or | ||
| // additional child elements. | ||
| ReactDOM.render( | ||
| React.createElement(GraphiQL, { | ||
| // @ts-expect-error | ||
| fetcher: GraphiQL.createFetcher({ | ||
| url: getSchemaUrl(), | ||
| subscriptionUrl: 'ws://localhost:8081/subscriptions', | ||
| }), | ||
| // @ts-expect-error | ||
| query: parameters.query, | ||
| // @ts-expect-error | ||
| variables: parameters.variables, | ||
| // @ts-expect-error | ||
| headers: parameters.headers, | ||
| // @ts-expect-error | ||
| operationName: parameters.operationName, | ||
| onEditQuery, | ||
| onEditVariables, | ||
| onEditHeaders, | ||
| defaultSecondaryEditorOpen: true, | ||
| onEditOperationName, | ||
| headerEditorEnabled: true, | ||
| shouldPersistHeaders: true, | ||
| inputValueDeprecation: true, | ||
| tabs: { | ||
| onTabChange, | ||
| }, | ||
| }), | ||
| document.getElementById('graphiql'), | ||
| ); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove
main.tsxand instead point this torenderGraphiQL.jsas we were already doing. it will expect a UMD bundle w/ globalGraphiQL, not an esm module. This UMD bundle gets at least 700,000 downloads a month (that's only the stats for jsdelivr, we don't have unpkg stats)!There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the HTML file should look like this, to simulate the CDN setup:
https://github.com/graphql/graphiql/blob/eab257ba3e65e47625216fc3545b56426e0c4e61/packages/graphiql/resources/index.html.ejs