PORISD-110: Testing custom bundling approach - https://github.com/fac…

…ebook/create-react-app/issues/5306\#issuecomment-792338580

drupal/web/themes/custom/pori_events/dist/searchkit-v3/package.json

@@ -25,7 +25,9 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "npm run build:react && npm run build:bundle",
+    "build:react": "react-scripts build",
+    "build:bundle": "node scripts/build-bundle.js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },

drupal/web/themes/custom/pori_events/dist/searchkit-v3/scripts/build-bundle.js

@@ -0,0 +1,8 @@
+const { exec } = require('child_process');
+
+const assetManifest = require('../build/asset-manifest.json');
+const files = assetManifest.entrypoints.filter((path) => path.endsWith('js')).map((path) => `build/${path}`).join(' ');
+console.log(`Joining ${files}`);
+
+// Just shorthand for joining with a newline between the files
+exec(`awk 1 ${files} > build/static/js/bundle.min.js`);

drupal/web/themes/custom/pori_events/dist/searchkit-v3/src/index.js

@@ -8,13 +8,15 @@ import {SearchkitClient, SearchkitProvider} from '@searchkit/client';
 
 const skClient = new SearchkitClient();
 
+const drupalElem = document.getElementById('kada-event-search');
+
 ReactDOM.render(
   <React.StrictMode>
     <SearchkitProvider client={skClient}>
       <App />
     </SearchkitProvider>
   </React.StrictMode>,
-  document.getElementById('root'),
+  drupalElem,
 );
 
 // If you want to start measuring performance in your app, pass a function

drupal/web/themes/custom/pori_events/pori_events.libraries.yml

@@ -1,9 +1,11 @@
 kada-elastic-events:
   css:
     theme:
-      dist/kada-elastic-events/dist/styles.css: {}
+      # dist/kada-elastic-events/dist/styles.css: {}
+      dist/searchkit-v3/build/static/css/main.18bba869.css: {}
   js:
-    dist/kada-elastic-events/dist/app.bundle.js: {}
+    # dist/kada-elastic-events/dist/app.bundle.js: {}
+    dist/searchkit-v3/build/static/js/bundle.min.js: {}
 
 global-styling:
   version: 1.0