Skip to content
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.

Sign up for GitHub

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

Jump to bottom

draft: merge webpack to vite #2371

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

draft: merge webpack to vite #2371

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7911591
feat: merge webpack to vite
rxliuli Apr 22, 2022
1c0b702
fix: Fix unit test
rxliuli Apr 22, 2022
1a0a3ef
fix: Fixed erroneously compiling main.tsx also as lib
rxliuli Apr 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions jest.config.base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ module.exports = (dir, env = 'dom') => {
'\\.(css|less)$': 'identity-obj-proxy',
'^graphql-language-([^/]+)': `${__dirname}/packages/graphql-language-$1/src`,
'^@graphiql-plugins\\/([^/]+)': `${__dirname}/plugins/$1/src`,
'^codemirror-graphql\\/esm\\/([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
'^codemirror-graphql\\/([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
'^example-([^/]+)': `${__dirname}/examples/$1/src`,
},
Expand Down
2 changes: 1 addition & 1 deletion packages/graphiql/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"analyze-bundle": "cross-env NODE_ENV=production CDN=1 ANALYZE=1 yarn webpack -p",
"build": "yarn build-cjs && yarn build-esm",
"build-bundles": "yarn build-bundles-clean && yarn build-bundles-dev && yarn build-bundles-min",
"build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
"build-bundles-clean": "rimraf 'graphiql.*{js,css}'",
"build-bundles-dev": "cross-env NODE_ENV=development CDN=1 yarn vite build --mode dev",
"build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 vite build",
"build-cjs": "tsc",
Expand Down
47 changes: 38 additions & 9 deletions packages/graphiql/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,28 @@ import './css/doc-explorer.css';
import './css/history.css';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how this file ended up in src (maybe I moved it?) but it should not be part of the resulting build. It's meant to just be an example implementation. It should be example.js, and not be a typescript file. The bundler should not pick up this file

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, yes src/main.tsx should be src/example.js and should not be used as the bundling entry point, that should be src/cdn.js if you see in the webpack config. I originally had this file in the resources/ directory, it must have been moved during the tabs effort. src/index.js is the ESM main, which is different, and not what you want to treat as the entrypoint with vite.

Copy link
Author

@rxliuli rxliuli Apr 22, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, I excluded src/main.tsx from tsconfig.json/tsconfig.esm.json
1a0a3ef

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

huh weird, webpack supports it for umd by just un-splitting the code and inlining the dynamic imports. this is going to be a big problem then.

Copy link
Member

@acao acao Apr 22, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 require() statements when I inherited the project, as dynamic import was only a proposal then, but now esbuild can't handle that, so we switched to modern dynamic imports for codemirror/etc, which requires window to be present on import (thus why we can't import top-level)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rxliuli it seems some of these solutions might work:

vitejs/vite#2982

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 },
    },
  },
});

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

brilliant!


// Parse the search string to get url parameters.
var search = window.location.search;
var parameters = {};
const search = window.location.search;
const parameters = {};
search
.substr(1)
.split('&')
.forEach(function (entry) {
var eq = entry.indexOf('=');
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,
Expand All @@ -55,9 +59,12 @@ if (parameters.variables) {
}

// 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,
Expand All @@ -70,48 +77,64 @@ if (parameters.headers) {

// 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() {
var newSearch =
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);
}

Expand All @@ -120,6 +143,7 @@ function getSchemaUrl() {

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 {
Expand All @@ -135,24 +159,29 @@ function getSchemaUrl() {
// 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: onEditQuery,
onEditVariables: onEditVariables,
onEditHeaders: onEditHeaders,
onEditQuery,
onEditVariables,
onEditHeaders,
defaultSecondaryEditorOpen: true,
onEditOperationName: onEditOperationName,
onEditOperationName,
headerEditorEnabled: true,
shouldPersistHeaders: true,
inputValueDeprecation: true,
tabs: {
onTabChange: onTabChange,
onTabChange,
},
}),
document.getElementById('graphiql'),
Expand Down
2 changes: 2 additions & 0 deletions packages/graphiql/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
"composite": true,
"jsx": "react",
"target": "ESNext",
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"strictPropertyInitialization": false
},
"include": ["src"],
Expand Down
4 changes: 2 additions & 2 deletions resources/tsconfig.build.esm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
"path": "../packages/graphiql-toolkit/tsconfig.esm.json"
},
{
"path": "../packages/graphiql/tsconfig.esm.json"
"path": "../packages/codemirror-graphql/tsconfig.esm.json"
},
{
"path": "../packages/codemirror-graphql/tsconfig.esm.json"
"path": "../packages/graphiql/tsconfig.esm.json"
},
{
"path": "../packages/monaco-graphql/tsconfig.esm.json"
Expand Down