adobecom · raissanjay · Jun 4, 2025 · Jun 4, 2025
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/index.html b/index.html
@@ -10,6 +10,11 @@
     <meta name="template" content="" />
     <meta name="description" content="Card Artboard 2" />
 
+    <!-- Preconnect to Adobe domains and preload CSS to improve LCP -->
+    <link rel="preconnect" href="https://www.adobe.com" crossorigin>
+    <link rel="dns-prefetch" href="https://www.adobe.com">
+    <link rel="preload" href="./dist/app.css" as="style">
+
     <link rel="stylesheet" href="./dist/app.css" type="text/css">
     <link rel="stylesheet" href="./dependencies/typekit.css" type="text/css">
     <link rel="stylesheet" href="./dependencies/dexter/publish.css" type="text/css">
@@ -45,9 +50,14 @@
         </div>
     </div>
 
+    <link
+            rel="preload"
+            as="image"
+            href="https://www.adobe.com/content/dam/www/us/en/max/2021/speakers/S907-Deep-Blizzard_1628658923394001pGLY.jpg"
+            type="image/jpeg"
+    />
 
-
-    <script type="text/javascript" src="./dist/main.source.js"></script>
+    <script type="text/javascript" src="./dist/main.min.js"></script>
 
     <script type="text/javascript">
         var config = {

diff --git a/jest.config.js b/jest.config.js
@@ -2,6 +2,8 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
+    // Module name mappings (none by default)
+    moduleNameMapper: {},
     // Automatically clear mock calls and instances between every test
     clearMocks: true,
     collectCoverage: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "jest-cli": "^23.6.0",
     "prop-types": "^15.6.2",
     "react": "^16.12.0",
+    "preact": "^10.0.0",
     "react-dom": "^16.12.0",
     "react-dom-components": "^3.0.0",
     "react-if": "2.2.2",

diff --git a/react/src/js/app.jsx b/react/src/js/app.jsx
@@ -1,6 +1,19 @@
 /* eslint-disable */
 import "./polyfills";
 import React from 'react';
+// Expose React (preact/compat) to window for runtime inspection
+if (typeof window !== 'undefined' && React) {
+    window.ReactCompat = React;
+    console.log('ReactCompat.createElement.name =', React.createElement.name);
+    console.log('ReactCompat.version =', React.version);
+}
+// Import Preact directly to inspect its version and createElement (h)
+import { version as preactVersion, h as preactH } from 'preact';
+if (typeof window !== 'undefined') {
+    window.preactH = preactH;
+    console.log('preact.h.name =', preactH.name);
+    console.log('preact.version =', preactVersion);
+}
 import ReactDOM, { render } from 'react-dom';
 import { DOMRegistry } from 'react-dom-components';
 import { parseToPrimitive } from './components/Consonant/Helpers/general';

diff --git a/sourcemaps.config.js b/sourcemaps.config.js
@@ -32,6 +32,14 @@ module.exports = {
         path: path.resolve(__dirname, 'dist'),
     },
     resolve: {
+        // Alias React imports to Preact for compatibility in development sourcemap build
+        alias: {
+            react: 'preact/compat',
+            'react-dom': 'preact/compat',
+            // alias test-utils and JSX runtime if used
+            'react-dom/test-utils': 'preact/test-utils',
+            'react/jsx-runtime': 'preact/jsx-runtime'
+        },
         extensions: ['.js', '.jsx'],
     },
     module: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -41,6 +41,14 @@ module.exports = {
         path: path.resolve(__dirname, 'dist'),
     },
     resolve: {
+        // Alias React imports to Preact for smaller footprint and compatibility
+        alias: {
+            react: 'preact/compat',
+            'react-dom': 'preact/compat',
+            // alias test-utils and JSX runtime if used
+            'react-dom/test-utils': 'preact/test-utils',
+            'react/jsx-runtime': 'preact/jsx-runtime'
+        },
         extensions: ['.js', '.jsx'],
     },
     module: {