From f5bd18b8d5277b905e4eaa01452af4993823741b Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Sun, 28 Aug 2022 13:58:22 +0000
Subject: [PATCH] Test preact

---
 examples/nextjs/.gitignore                      |  4 ++++
 examples/nextjs/next.config.js                  | 11 +++++++++++
 examples/nextjs/package.json                    |  3 ++-
 packages/mdx/src/smooth-code/use-dimensions.tsx |  6 +++++-
 yarn.lock                                       |  5 +++++
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/examples/nextjs/.gitignore b/examples/nextjs/.gitignore
index b90a368f..4e051335 100644
--- a/examples/nextjs/.gitignore
+++ b/examples/nextjs/.gitignore
@@ -1,2 +1,6 @@
 node_modules
 .next
+
+
+# Contentlayer
+.contentlayer
diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
index 75aeb311..85da155b 100644
--- a/examples/nextjs/next.config.js
+++ b/examples/nextjs/next.config.js
@@ -11,4 +11,15 @@ const withMDX = require("@next/mdx")({
 module.exports = withMDX({
   pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
   eslint: { ignoreDuringBuilds: true },
+
+  webpack: (config, { dev, isServer }) => {
+    Object.assign(config.resolve.alias, {
+      "react/jsx-runtime.js": "preact/compat/jsx-runtime",
+      react: "preact/compat",
+      "react-dom/test-utils": "preact/test-utils",
+      "react-dom": "preact/compat",
+    })
+
+    return config
+  },
 })
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 4f9d186c..6dbfc754 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -12,6 +12,7 @@
     "@next/mdx": "^12.1.0",
     "next": "^12.1.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "preact": "^10.10.2"
   }
 }
diff --git a/packages/mdx/src/smooth-code/use-dimensions.tsx b/packages/mdx/src/smooth-code/use-dimensions.tsx
index 80679304..eab0f6a3 100644
--- a/packages/mdx/src/smooth-code/use-dimensions.tsx
+++ b/packages/mdx/src/smooth-code/use-dimensions.tsx
@@ -47,6 +47,7 @@ function useDimensions(
 
   const windowWidth = useWindowWidth()
   const prevLineRef = React.useRef<HTMLDivElement>(null!)
+  console.log(windowWidth)
 
   const { prevLongestLine, nextLongestLine, element } =
     React.useMemo(() => {
@@ -126,6 +127,8 @@ function useDimensions(
           <br />
         </code>
       )
+
+      console.log("memo", prevLineRef.current)
       return { prevLongestLine, nextLongestLine, element }
     }, [code])
 
@@ -137,7 +140,8 @@ function useDimensions(
     minColumns,
   ]
 
-  useLayoutEffect(() => {
+  React.useEffect(() => {
+    console.log("effect", prevLineRef)
     if (prevLineRef.current) {
       const pll = prevLineRef.current
       const contentElement = pll?.parentElement!
diff --git a/yarn.lock b/yarn.lock
index 059e7c74..753fdca6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18781,6 +18781,11 @@ postcss@^8.4.6:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact@^10.10.2:
+  version "10.10.6"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.6.tgz#1fe62aecf93974b64e6a42e09ba1f00f93207d14"
+  integrity sha512-w0mCL5vICUAZrh1DuHEdOWBjxdO62lvcO++jbzr8UhhYcTbFkpegLH9XX+7MadjTl/y0feoqwQ/zAnzkc/EGog==
+
 prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"