feat(md): support load remote react component

Innei · Innei · commit 9e284181a9e2 · 2024-02-09T22:50:47.000+08:00
Signed-off-by: Innei &lt;i@innei.in&gt;
diff --git a/src/app/(app)/(home)/page.tsx b/src/app/(app)/(home)/page.tsx
@@ -222,6 +222,7 @@ const Welcome = () => {
 
 const PostScreen = () => {
   const { posts } = useHomeQueryData()
+
   return (
     <Screen className="h-fit min-h-[120vh]">
       <TwoColumnLayout leftContainerClassName="h-[30rem] lg:h-1/2">
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -7,6 +7,7 @@ import type { PropsWithChildren } from 'react'
 import { ClerkProvider } from '@clerk/nextjs'
 
 import PKG from '~/../package.json'
+import { Global } from '~/components/common/Global'
 import { HydrationEndDetector } from '~/components/common/HydrationEndDetector'
 import { ScrollTop } from '~/components/common/ScrollTop'
 import { Root } from '~/components/layout/root/Root'
@@ -145,6 +146,7 @@ export default async function RootLayout(props: PropsWithChildren) {
           suppressHydrationWarning
         >
           <head>
+            <Global />
             <SayHi />
             <HydrationEndDetector />
             <AccentColorStyleInjector color={themeConfig.config.color} />
diff --git a/src/components/common/Global.ts b/src/components/common/Global.ts
@@ -0,0 +1,17 @@
+'use client'
+
+import React, { useLayoutEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+import * as Button from '~/components/ui/button'
+
+export const Global = () => {
+  useLayoutEffect(() => {
+    Object.assign(window, {
+      React,
+      ReactDOM,
+      ShiroComponents: { ...Button },
+    })
+  }, [])
+  return null
+}
diff --git a/src/components/modules/comment/CommentMarkdown.tsx b/src/components/modules/comment/CommentMarkdown.tsx
@@ -1,6 +1,7 @@
 import type { MarkdownToJSX } from '~/components/ui/markdown'
 import type { FC } from 'react'
 
+import { HighLighter } from '~/components/ui/code-highlighter'
 import { Markdown } from '~/components/ui/markdown'
 
 const disabledTypes = [
@@ -23,6 +24,19 @@ export const CommentMarkdown: FC<{
       disableParsingRawHTML
       forceBlock
       value={children}
+      extendsRules={{
+        codeBlock: {
+          react(node, output, state) {
+            return (
+              <HighLighter
+                key={state?.key}
+                content={node.content}
+                lang={node.lang}
+              />
+            )
+          },
+        },
+      }}
     />
   )
 }
diff --git a/src/components/modules/shared/BlockLoading.tsx b/src/components/modules/shared/BlockLoading.tsx
@@ -1,8 +1,13 @@
-import type { FC, PropsWithChildren } from 'react'
+import { clsxm } from '~/lib/helper'
 
-export const BlockLoading: FC<PropsWithChildren> = (props) => {
+export const BlockLoading: Component = (props) => {
   return (
-    <div className="flex h-[500px] items-center justify-center rounded-lg bg-slate-100 text-sm dark:bg-neutral-800">
+    <div
+      className={clsxm(
+        'flex h-[500px] items-center justify-center rounded-lg bg-slate-100 text-sm dark:bg-neutral-800',
+        props.className,
+      )}
+    >
       {props.children}
     </div>
   )
diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx
@@ -1,3 +1,4 @@
+import { ReactComponentRender } from '~/components/ui/react-component-render'
 import { lazy, Suspense, useMemo, useState } from 'react'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import dynamic from 'next/dynamic'
@@ -26,25 +27,32 @@ const ExcalidrawLazy = ({ data }: any) => {
     </Suspense>
   )
 }
-export const CodeBlock = (props: {
+export const CodeBlockRender = (props: {
   lang: string | undefined
   content: string
 }) => {
   const Content = useMemo(() => {
-    if (props.lang === 'mermaid') {
-      const Mermaid = dynamic(() =>
-        import('./Mermaid').then((mod) => mod.Mermaid),
-      )
-      return <Mermaid {...props} />
-    } else if (props.lang === 'excalidraw') {
-      return <ExcalidrawLazy data={props.content} />
-    } else {
-      const HighLighter = dynamic(() =>
-        import('~/components/ui/code-highlighter/CodeHighlighter').then(
-          (mod) => mod.HighLighter,
-        ),
-      )
-      return <HighLighter {...props} />
+    switch (props.lang) {
+      case 'mermaid': {
+        const Mermaid = dynamic(() =>
+          import('./Mermaid').then((mod) => mod.Mermaid),
+        )
+        return <Mermaid {...props} />
+      }
+      case 'excalidraw': {
+        return <ExcalidrawLazy data={props.content} />
+      }
+      case 'component': {
+        return <ReactComponentRender dls={props.content} />
+      }
+      default: {
+        const HighLighter = dynamic(() =>
+          import('~/components/ui/code-highlighter/CodeHighlighter').then(
+            (mod) => mod.HighLighter,
+          ),
+        )
+        return <HighLighter {...props} />
+      }
     }
   }, [props])
 
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
@@ -42,7 +42,9 @@ import { getFootNoteDomId, getFootNoteRefDomId } from './utils/get-id'
 import { redHighlight } from './utils/redHighlight'
 
 const CodeBlock = dynamic(() =>
-  import('~/components/modules/shared/CodeBlock').then((mod) => mod.CodeBlock),
+  import('~/components/modules/shared/CodeBlock').then(
+    (mod) => mod.CodeBlockRender,
+  ),
 )
 
 export interface MdProps {
diff --git a/src/components/ui/markdown/customize.md b/src/components/ui/markdown/customize.md
@@ -382,4 +382,31 @@ P\left(U,T\right)=100\left.\left(0.6\min\left(1,\frac{U-0.70}{0.90-0.70}\right)+
 
 $$
 
--
+
+## Excalidraw
+
+```excalidraw
+{"type":"excalidraw/clipboard","elements":[{"type":"rectangle","version":14,"versionNonce":1361369853,"isDeleted":false,"id":"_PSpf6pLwkWIJubC_tf9D","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":545.0390625,"y":387.296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":177.53515625,"height":138.328125,"seed":1495751197,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706954302946,"link":null,"locked":false}],"files":{}}
+```
+
+````markdown
+```excalidraw
+{"type":"excalidraw/clipboard","elements":[{"type":"rectangle","version":14,"versionNonce":1361369853,"isDeleted":false,"id":"_PSpf6pLwkWIJubC_tf9D","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":545.0390625,"y":387.296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":177.53515625,"height":138.328125,"seed":1495751197,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706954302946,"link":null,"locked":false}],"files":{}}
+```
+````
+
+## React Remote Component Render
+
+```component
+import=http://127.0.0.1:2333/snippets/js/components
+name=MyComponents.Card
+```
+
+````markdown
+```component
+import=http://127.0.0.1:2333/snippets/js/components
+name=MyComponents.Card
+```
+````
+
+ 
diff --git a/src/components/ui/markdown/index.demo.tsx b/src/components/ui/markdown/index.demo.tsx
@@ -1,31 +1,90 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactComponentRender } from '~/components/ui/react-component-render/ComponentRender'
+import { lazy, Suspense, useMemo, useState } from 'react'
 import { ToastContainer } from 'react-toastify'
+import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import { ThemeProvider } from 'next-themes'
+import type { ReactNode } from 'react'
 import type { DocumentComponent } from 'storybook/typings'
 
+import { BlockLoading } from '~/components/modules/shared/BlockLoading'
+import { Mermaid } from '~/components/modules/shared/Mermaid'
+import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
+
+import { HighLighter } from '../code-highlighter'
 // @ts-expect-error
 import customize from './customize.md?raw'
 import { Markdown } from './Markdown'
 
 const queryClient = new QueryClient()
+
+const ExcalidrawLazy = ({ data }: any) => {
+  const [Excalidraw, setComponent] = useState(null as ReactNode)
+
+  useIsomorphicLayoutEffect(() => {
+    const Component = lazy(() =>
+      import('~/components/ui/excalidraw').then((mod) => ({
+        default: mod.Excalidraw,
+      })),
+    )
+
+    setComponent(<Component key={data} data={data} />)
+  }, [data])
+
+  return (
+    <Suspense fallback={<ExcalidrawLoading />}>
+      {Excalidraw ?? <ExcalidrawLoading />}
+    </Suspense>
+  )
+}
+const CodeBlockRender = (props: {
+  lang: string | undefined
+  content: string
+}) => {
+  const Content = useMemo(() => {
+    switch (props.lang) {
+      case 'mermaid': {
+        return <Mermaid {...props} />
+      }
+      case 'excalidraw': {
+        return <ExcalidrawLazy data={props.content} />
+      }
+      case 'component': {
+        return <ReactComponentRender dls={props.content} />
+      }
+      default: {
+        return <HighLighter {...props} />
+      }
+    }
+  }, [props])
+
+  return (
+    <Suspense fallback={<BlockLoading>CodeBlock Loading...</BlockLoading>}>
+      {Content}
+    </Suspense>
+  )
+}
+
 export const MarkdownCustomize: DocumentComponent = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <main className="relative m-auto mt-6 max-w-[800px]">
           <Markdown
+            value={customize}
             extendsRules={{
               codeBlock: {
                 react(node, output, state) {
                   return (
-                    <pre>
-                      <code>{node.content}</code>
-                    </pre>
+                    <CodeBlockRender
+                      key={state?.key}
+                      content={node.content}
+                      lang={node.lang}
+                    />
                   )
                 },
               },
             }}
-            value={customize}
             className="prose"
             as="article"
           />
diff --git a/src/components/ui/react-component-render/ComponentRender.tsx b/src/components/ui/react-component-render/ComponentRender.tsx
@@ -0,0 +1,74 @@
+import { Suspense, useState } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { useIsomorphicLayoutEffect } from 'framer-motion'
+import type { FC } from 'react'
+
+import { BlockLoading } from '~/components/modules/shared/BlockLoading'
+import { loadScript } from '~/lib/load-script'
+import { get } from '~/lib/lodash'
+
+export interface ReactComponentRenderProps {
+  dls: string
+}
+/**
+ * define the render dls of the component
+ * ```component
+ * import=http://127.0.0.1:2333/snippets/js/components.js
+ * name=Components.Card
+ * ```
+ *
+ * name will be used to find the component in the import, if in the nested object, use dot to separate
+ *
+ */
+export const ReactComponentRender: FC<ReactComponentRenderProps> = (props) => {
+  const { dls } = props
+  const [Component, setComponent] = useState({
+    component: ComponentBlockLoading,
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    const props = parseDlsContent(dls)
+
+    loadScript(
+      'https://unpkg.com/styled-components/dist/styled-components.min.js',
+    )
+      .then(() => loadScript(props.import))
+      .then(() => {
+        const Component = get(window, props.name)
+        console.log('Component', Component)
+        setComponent({ component: Component })
+      })
+  }, [dls])
+
+  return (
+    <ErrorBoundary FallbackComponent={ComponentBlockError}>
+      <Suspense fallback={<ComponentBlockLoading />}>
+        <Component.component />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+
+const ComponentBlockError = () => {
+  return (
+    <BlockLoading className="bg-red-300 dark:bg-red-700">
+      Component Error
+    </BlockLoading>
+  )
+}
+const ComponentBlockLoading = () => {
+  return <BlockLoading>Component Loading...</BlockLoading>
+}
+
+function parseDlsContent(dls: string) {
+  const parsedProps = {} as {
+    name: string
+    import: string
+  }
+  dls.split('\n').forEach((line) => {
+    const [key, value] = line.split('=')
+    ;(parsedProps as any)[key] = value
+  })
+
+  return parsedProps
+}
diff --git a/src/components/ui/react-component-render/index.ts b/src/components/ui/react-component-render/index.ts
@@ -0,0 +1 @@
+export * from './ComponentRender'
diff --git a/src/lib/lodash.ts b/src/lib/lodash.ts
@@ -156,3 +156,15 @@ export function uniqBy<T, K>(array: T[], iteratee: (item: T) => K): T[] {
     return false
   })
 }
+
+export function get(target: object, path: string) {
+  const keys = path.split('.')
+  let result = target as any
+  for (const key of keys) {
+    result = result[key]
+    if (result === undefined) {
+      return result
+    }
+  }
+  return result
+}

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,9 @@ import { getFootNoteDomId, getFootNoteRefDomId } from './utils/get-id'`
`42`	`42`	`import { redHighlight } from './utils/redHighlight'`
`43`	`43`
`44`	`44`	`const CodeBlock = dynamic(() =>`
`45`		`- import('~/components/modules/shared/CodeBlock').then((mod) => mod.CodeBlock),`
	`45`	`+ import('~/components/modules/shared/CodeBlock').then(`
	`46`	`+ (mod) => mod.CodeBlockRender,`
	`47`	`+ ),`
`46`	`48`	`)`
`47`	`49`
`48`	`50`	`export interface MdProps {`