From 7a419c9414049ce0569c81fe2bc63e31746aa031 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 5 Jul 2023 14:05:03 +0800
Subject: [PATCH] chore(deps): replace styled-components to `goober`.

---
 package.json         | 2 +-
 www/package.json     | 3 +--
 www/src/App.tsx      | 9 ++++-----
 www/src/Markdown.tsx | 2 +-
 www/src/index.tsx    | 4 ++++
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 3928137..07aff19 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "react-test-renderer": "^18.2.0",
     "tsbb": "^4.1.5",
     "jest-watch-typeahead": "^2.2.2",
-    "jest-environment-jsdom": "~29.5.0",
+    "jest-environment-jsdom": "^29.6.0",
     "jest-environment-node": "^29.5.0"
   }
 }
diff --git a/www/package.json b/www/package.json
index 858ab38..25f25d0 100644
--- a/www/package.json
+++ b/www/package.json
@@ -13,7 +13,6 @@
     "@kkt/scope-plugin-options": "^7.4.9",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
-    "@types/styled-components": "^5.1.25",
     "kkt": "^7.4.9",
     "markdown-react-code-preview-loader": "^2.1.5",
     "source-map-explorer": "^2.5.3"
@@ -28,7 +27,7 @@
     "react-code-preview-layout": "^3.0.0",
     "react-dom": "~18.2.0",
     "react-keywords": "0.0.5",
-    "styled-components": "^5.3.9"
+    "goober": "^2.1.13"
   },
   "eslintConfig": {
     "extends": [
diff --git a/www/src/App.tsx b/www/src/App.tsx
index 5da175b..68a6750 100644
--- a/www/src/App.tsx
+++ b/www/src/App.tsx
@@ -1,18 +1,17 @@
-import React from 'react';
 import GithubCorner from '@uiw/react-github-corners';
 import '@wcj/dark-mode';
 import Keywords from 'react-keywords';
-import styled from 'styled-components';
+import { styled } from 'goober';
 import pkg from '../package.json';
 import Markdown from './Markdown';
 
-const Warpper = styled.div``;
-const Content = styled.div`
+const Warpper = styled('div')``;
+const Content = styled('div')`
   max-width: 860px;
   margin: 0 auto;
 `;
 
-const Title = styled.h1`
+const Title = styled('h1')`
   font-size: 32px;
   font-weight: bold;
   text-align: center;
diff --git a/www/src/Markdown.tsx b/www/src/Markdown.tsx
index 9030063..f48939d 100644
--- a/www/src/Markdown.tsx
+++ b/www/src/Markdown.tsx
@@ -33,7 +33,7 @@ const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...prop
     const param = getURLParameters(meta);
     return (
       <CodeLayout disableCheckered style={{ marginBottom: 18 }}>
-        <Preview>
+        <Preview style={{ whiteSpace: 'pre-wrap' }}>
           <Child />
         </Preview>
         <Toolbar text={code}>{param.title || 'Example'}</Toolbar>
diff --git a/www/src/index.tsx b/www/src/index.tsx
index 0799734..2ea3612 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -1,6 +1,10 @@
+import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
+import { setup } from 'goober';
 import App from './App';
 
+setup(createElement);
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(<App />);