chore(dep-graph): alias react to preact (#8563)

dep-graph/client-e2e/src/integration/app.spec.ts

@@ -192,7 +192,7 @@ describe('dep-graph-client', () => {
     });
   });
 
-  describe.only('setting url params', () => {
+  describe('setting url params', () => {
     it('should set focused project', () => {
       cy.contains('nx-dev').scrollIntoView().should('be.visible');
       cy.get('[data-project="nx-dev"]').prev('button').click({ force: true });

dep-graph/client/project.json

@@ -28,7 +28,8 @@
             "maximumWarning": "2mb",
             "maximumError": "5mb"
           }
-        ]
+        ],
+        "webpackConfig": "dep-graph/client/webpack.config.js"
       },
       "configurations": {
         "dev": {

dep-graph/client/src/app/sidebar/project-list.tsx

@@ -88,7 +88,7 @@ function ProjectListItem({
         <label
           className="font-mono font-normal ml-3 p-2 transition hover:bg-gray-50 cursor-pointer block rounded-md truncate w-full"
           data-project={project.projectGraphNode.name}
-          data-active={project.isSelected}
+          data-active={project.isSelected.toString()}
           onClick={() =>
             toggleProject(project.projectGraphNode.name, project.isSelected)
           }

dep-graph/client/webpack.config.js

@@ -0,0 +1,15 @@
+module.exports = (config, context) => {
+  return {
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat', // Must be below test-utils
+        'react/jsx-runtime': 'preact/jsx-runtime',
+      },
+    },
+  };
+};

package.json

@@ -280,6 +280,7 @@
     "gray-matter": "^4.0.2",
     "next-seo": "^4.28.1",
     "npm-run-path": "^4.0.1",
+    "preact": "10.6.4",
     "react": "17.0.2",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "17.0.2",

yarn.lock

@@ -18826,6 +18826,11 @@ postcss@^8.1.10, postcss@^8.2.15, postcss@^8.2.4, postcss@^8.2.9, postcss@^8.3.5
     picocolors "^1.0.0"
     source-map-js "^0.6.2"
 
+preact@10.6.4:
+  version "10.6.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.6.4.tgz#ad12c409ff1b4316158486e0a7b8d43636f7ced8"
+  integrity sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ==
+
 precise-commits@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/precise-commits/-/precise-commits-1.0.2.tgz#4659be01a9c3310f50ce51ddf913fead1d7cc940"