type: fix children type error.

uiwjs · Aug 2, 2022 · f780b32 · f780b32
1 parent a004b85
commit f780b32
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 48 deletions.
diff --git a/core/README.md b/core/README.md
@@ -31,47 +31,17 @@ export default function Demo() {
       <input value={value} onChange={(evn) => setValue(evn.target.value)} />
       <Keywords value={value}>
         Highlight a keyword in a piece of text and return a React element.
+        <br />
+        React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+
+        Build encapsulated components that manage their own state, then compose them to make complex UIs.
       </Keywords>
     </Fragment>
   );
 }
 ```
 
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
-    <script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
-    <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
-  </head>
-  <body>
-    <div id="container" style="padding: 24px"></div>
-    <script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
-    <script type="text/babel">
-      import Keywords from 'react-keywords';
-
-      function Demo() {
-        const [value, setValue] = React.useState('react');
-        return (
-          <React.Fragment>
-            <input value={value} onChange={(evn) => setValue(evn.target.value)} />
-            <Keywords value={value}>
-              Highlight a keyword in a piece of text and return a React element.
-            </Keywords>
-          </React.Fragment>
-        );
-      }
-      const container = document.getElementById('container');
-      const root = ReactDOM.createRoot(container);
-      root.render(<Demo />);
-    </script>
-  </body>
-</html>
-```
-
-## render
+### render
 
 ```jsx mdx:preview
 import React, { useState, Fragment } from 'react';
@@ -91,7 +61,7 @@ export default function Demo() {
 }
 ```
 
-## color
+### color
 
 ```jsx mdx:preview
 import React, { useState, Fragment } from 'react';
@@ -111,6 +81,42 @@ export default function Demo() {
 }
 ```
 
+## Support bundle
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
+    <script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
+  </head>
+  <body>
+    <div id="container" style="padding: 24px"></div>
+    <script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
+    <script type="text/babel">
+      import Keywords from 'react-keywords';
+
+      function Demo() {
+        const [value, setValue] = React.useState('react');
+        return (
+          <React.Fragment>
+            <input value={value} onChange={(evn) => setValue(evn.target.value)} />
+            <Keywords value={value}>
+              Highlight a keyword in a piece of text and return a React element.
+            </Keywords>
+          </React.Fragment>
+        );
+      }
+      const container = document.getElementById('container');
+      const root = ReactDOM.createRoot(container);
+      root.render(<Demo />);
+    </script>
+  </body>
+</html>
+```
+
 ## API
 
 ```ts

diff --git a/core/src/index.tsx b/core/src/index.tsx
@@ -2,7 +2,6 @@ import { FC, Fragment, PropsWithChildren, useMemo } from 'react';
 
 export interface KeywordsProps {
   value?: string;
-  children?: string;
   color?: string;
   backgroundColor?: string;
   render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
@@ -23,9 +22,9 @@ const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
   );
 };
 
-export default function Keywords(props: KeywordsProps) {
+const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
   const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
-  if (typeof children !== 'string') return children;
+  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;
   const splitMatch = new RegExp(`${value}`, 'ig');
   const matched = children.split(splitMatch);
   return (
@@ -45,4 +44,6 @@ export default function Keywords(props: KeywordsProps) {
       })}
     </Fragment>
   );
-}
+};
+
+export default KeywordsInner;
diff --git a/www/package.json b/www/package.json
@@ -12,8 +12,8 @@
     "@kkt/less-modules": "~7.2.0",
     "@kkt/raw-modules": "~7.2.0",
     "@kkt/scope-plugin-options": "~7.2.0",
-    "@types/react": "~18.0.9",
-    "@types/react-dom": "~18.0.3",
+    "@types/react": "~18.0.15",
+    "@types/react-dom": "~18.0.6",
     "@types/styled-components": "^5.1.25",
     "kkt": "~7.1.5",
     "markdown-react-code-preview-loader": "^2.1.2",

diff --git a/www/src/App.tsx b/www/src/App.tsx
@@ -1,5 +1,7 @@
+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 pkg from '../package.json';
 import Markdown from './Markdown';
@@ -22,17 +24,17 @@ const Title = styled.h1`
   }
 `;
 
-const Keywords = styled.span`
-  background-color: #ffff00;
-`;
-
 export default function App() {
   return (
     <Warpper className="wmde-markdown-var">
       <GithubCorner fixed target="__blank" zIndex={99999} href="https://github.com/uiwjs/react-keywords" />
       <dark-mode permanent light="Light" dark="Dark"></dark-mode>
       <Title>
-        React <Keywords>key</Keywords>words<sup>v{pkg.version}</sup>
+        React{' '}
+        <Keywords value="keywords" color="#000">
+          keywords
+        </Keywords>
+        <sup>v{pkg.version}</sup>
       </Title>
       <Content>
         <Markdown />

diff --git a/www/src/index.tsx b/www/src/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';