feat(core): Create build setup for GraphiQL pages

vendure-ecommerce · Nov 30, 2024 · 38888e8 · 38888e8
1 parent c0e9fbc
commit 38888e8
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 1 deletion.
diff --git a/packages/core/build/copy-static.ts b/packages/core/build/copy-static.ts
@@ -6,6 +6,7 @@ import path from 'path';
 
 const SCHEMAS_GLOB = '**/*.graphql';
 const MESSAGES_GLOB = 'i18n/messages/**/*';
+const GRAPHIQL_GLOB = 'graphiql/output/**/*';
 const DEST_DIR = path.join(__dirname, '../dist');
 
 function copyFiles(sourceGlob: string, destinationDir: string) {
@@ -42,17 +43,29 @@ function copyI18nMessages() {
     }
 }
 
+function copyBundlededGraphiQLPage() {
+    try {
+        copyFiles(GRAPHIQL_GLOB, DEST_DIR);
+        console.log('Bundled GraphiQL page copied successfully!');
+    } catch (error) {
+        console.error('Error copying GraphiQL page:', error);
+    }
+}
+
 function build() {
     copySchemas();
     copyI18nMessages();
+    copyBundlededGraphiQLPage();
 }
 
 function watch() {
     const watcher1 = chokidar.watch(SCHEMAS_GLOB, { cwd: path.join(__dirname, '../src') });
     const watcher2 = chokidar.watch(MESSAGES_GLOB, { cwd: path.join(__dirname, '../src') });
+    const watcher3 = chokidar.watch(GRAPHIQL_GLOB, { cwd: path.join(__dirname, '../src') });
 
     watcher1.on('change', copySchemas);
     watcher2.on('change', copyI18nMessages);
+    watcher3.on('change', copyBundlededGraphiQLPage);
 
     console.log('Watching for changes...');
 }

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -21,7 +21,9 @@
     "scripts": {
         "tsc:watch": "tsc -p ./build/tsconfig.build.json --watch",
         "copy:watch": "ts-node build/copy-static.ts watch",
-        "build": "rimraf dist && tsc -p ./build/tsconfig.build.json && tsc -p ./build/tsconfig.cli.json && ts-node build/copy-static.ts build",
+        "build": "rimraf dist && tsc -p ./build/tsconfig.build.json && tsc -p ./build/tsconfig.cli.json && npm run build:graphiql && npm run build:copyfiles",
+        "build:copyfiles": "ts-node build/copy-static.ts build",
+        "build:graphiql": "webpack --config ./src/graphiql/webpack.config.js",
         "watch": "concurrently npm:tsc:watch npm:copy:watch",
         "lint": "eslint --fix .",
         "test": "vitest --config vitest.config.mts --run",

diff --git a/packages/core/src/graphiql/index.html b/packages/core/src/graphiql/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>GraphiQL Playground</title>
+        <style>
+            body {
+                height: 100%;
+                margin: 0;
+                width: 100%;
+                overflow: hidden;
+            }
+
+            #root {
+                height: 100vh;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/packages/core/src/graphiql/index.mjs b/packages/core/src/graphiql/index.mjs
@@ -0,0 +1,12 @@
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import 'graphiql/graphiql.css';
+
+// this is replaced when the bundled graphiql code is read in
+// src/api/config/config-graphql-module.ts
+const fetcher = createGraphiQLFetcher({ url: '__API_URL__' });
+
+const root = createRoot(document.getElementById('root'));
+root.render(React.createElement(GraphiQL, { fetcher: fetcher }));
diff --git a/packages/core/src/graphiql/webpack.config.js b/packages/core/src/graphiql/webpack.config.js
@@ -0,0 +1,45 @@
+const path = require('node:path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
+const webpack = require('webpack');
+
+/**
+ * @type {import('webpack').Configuration}
+ */
+module.exports = {
+    entry: path.resolve(__dirname, 'index.mjs'),
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+        publicPath: '',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.m?js$/,
+                loader: 'esbuild-loader',
+                options: {
+                    target: 'es2015',
+                },
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.js', '.json', '.jsx', '.css', '.mjs'],
+    },
+    plugins: [
+        new webpack.optimize.LimitChunkCountPlugin({
+            maxChunks: 1,
+        }),
+        new HtmlWebpackPlugin({
+            template: path.join(__dirname, '/index.html'),
+            inject: 'body',
+        }),
+        new HtmlInlineScriptPlugin(),
+    ],
+};