Make a new entry point for Next.js only

packages/react-static-tweets/package.json

@@ -27,5 +27,10 @@
     "next": "^10.0.6",
     "react": ">=16",
     "react-dom": ">=16"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
   }
 }

packages/react-static-tweets/src/html/handlers.next.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+
+function getContainerClassName(dataType) {
+  if (!dataType) return
+
+  const [type, count] = dataType.split(' ')
+
+  switch (type) {
+    case 'image-container':
+      return `image-container image-count-${count}`
+    case 'gif-container':
+    case 'video-container':
+      return type
+  }
+}
+
+export default {
+  div(props, components, i) {
+    const { data } = props
+    const type = props.dataType || (data && data.type)
+
+    if (type === 'tweet') {
+      return (
+        <components.Tweet key={i} data={data}>
+          {props.children}
+        </components.Tweet>
+      )
+    }
+
+    if (type === 'poll-container') {
+      return <components.Poll key={i} data={data} />
+    }
+
+    const className = getContainerClassName(type)
+
+    return (
+      <components.div key={i} className={className} data={data}>
+        {props.children}
+      </components.div>
+    )
+  },
+
+  img({ dataType, ...props }, components, i) {
+    if (dataType === 'emoji-for-text') {
+      return <components.Emoji key={i} src={props.src} alt={props.alt} />
+    }
+
+    if (dataType === 'media-image') {
+      return <components.img key={i} {...props} />
+    }
+
+    return null
+  },
+
+  a(props, components, i) {
+    const type = props.dataType
+
+    if (type === 'mention') {
+      return (
+        <components.Mention
+          key={i}
+          href={props.href}
+          children={props.children}
+        />
+      )
+    }
+
+    if (type === 'hashtag') {
+      return (
+        <components.Hashtag
+          key={i}
+          href={props.href}
+          children={props.children}
+        />
+      )
+    }
+
+    if (type === 'cashtag') {
+      return (
+        <components.Cashtag
+          key={i}
+          href={props.href}
+          children={props.children}
+        />
+      )
+    }
+
+    if (type === 'quote-tweet') {
+      return <components.EmbeddedTweet key={i} href={props.href} />
+    }
+
+    return (
+      <components.a key={i} href={props.href} title={props.title}>
+        {props.children}
+      </components.a>
+    )
+  },
+
+  blockquote(props, components, i) {
+    const ast = props.data?.ast
+
+    if (ast) {
+      return <components.EmbeddedTweet key={i} ast={ast[0]} />
+    }
+
+    return <components.Blockquote key={i} children={props.children} />
+  }
+}

packages/react-static-tweets/src/html/handlers.tsx

@@ -97,18 +97,10 @@ export default {
   },
 
   blockquote(props, components, i) {
-    if (process.env.NEXT_PUBLIC_TWITTER_LOAD_WIDGETS === 'true') {
-      const isEmbeddedTweet = props.className?.includes('twitter-tweet')
-
-      if (isEmbeddedTweet) {
-        return <components.EmbeddedTweet {...props} />
-      }
-    } else {
-      const ast = props.data?.ast
-
-      if (ast) {
-        return <components.EmbeddedTweet key={i} ast={ast[0]} />
-      }
+    const ast = props.data?.ast
+
+    if (ast) {
+      return <components.EmbeddedTweet key={i} ast={ast[0]} />
     }
 
     return <components.Blockquote key={i} children={props.children} />

packages/react-static-tweets/src/html/node.next.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import handlers from './handlers.next'
+
+const defaultHandler = (name) => (props, components) => {
+  const Comp = components[name]
+  return Comp ? <Comp {...props} /> : React.createElement(name, props)
+}
+
+function handleNode(node, components, i = undefined) {
+  if (!node) {
+    return null
+  }
+
+  if (typeof node === 'string') {
+    return node
+  }
+
+  const handler = handlers[node.tag] || defaultHandler(node.tag)
+
+  if (!handler) {
+    console.error('tweet error missing handler for:', node)
+    return null
+  }
+
+  const { nodes } = node
+  const props = { ...node.props, key: i }
+
+  // Always send className as a string
+  if (props.className && Array.isArray(props.className)) {
+    props.className = props.className.join(' ')
+  }
+
+  if (node.data) {
+    props.data = node.data
+  }
+
+  if (nodes && Array.isArray(nodes)) {
+    props.children = nodes.map((node, i) => handleNode(node, components, i))
+  }
+
+  const element = handler(props, components, i, node)
+
+  if (!element) {
+    console.error('A handler returned null for:', node)
+  }
+
+  return element
+}
+
+export default function Node({ components, node }) {
+  return handleNode(node, components)
+}

packages/react-static-tweets/src/next.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react'
+import cs from 'classnames'
+import useSWR from 'swr'
+
+import { useTwitterContext } from './twitter'
+import Node from './html/node.next'
+import components from './twitter-layout/components/next'
+
+type TweetProps = {
+  id: string
+  ast?: any
+  caption?: string
+  className?: string
+  // TODO: understand what br is used for
+  // br?: string
+}
+
+const Tweet = forwardRef<HTMLElement, TweetProps>(
+  ({ id, ast, caption, className }: TweetProps, ref) => {
+    const twitter = useTwitterContext()
+    const { data: tweetAst } = useSWR(
+      id,
+      (id) => ast || twitter.tweetAstMap[id] || twitter.swrOptions.fetcher(id),
+      twitter.swrOptions
+    )
+
+    return (
+      <article ref={ref} className={cs('static-tweet', className)}>
+        {tweetAst && (
+          <>
+            <Node components={components} node={tweetAst[0]} />
+
+            {caption != null ? (
+              <p className='static-tweet-caption'>{caption}</p>
+            ) : null}
+          </>
+        )}
+      </article>
+    )
+  }
+)
+
+export { Tweet }

packages/react-static-tweets/src/twitter-layout/components/media.next.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+// import dynamic from 'next/dynamic' // TODO
+import Image from 'next/image'
+import { useTweet } from './tweet/tweet'
+
+export const Img = ({ width, height, src, ...p }) => {
+  const tweet = useTweet()
+  const tweetUrl = `https://twitter.com/${tweet.username}/status/${tweet.id}`
+
+  return (
+    <details className='static-tweet-details'>
+      <summary
+        className='static-tweet-summary'
+        style={{
+          paddingBottom: `${(height / width) * 100 || 0}%`
+        }}
+      >
+        <a
+          href={tweetUrl}
+          className='avatar'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <Image
+            {...p}
+            src={`${src}&name=small`}
+            layout='fill'
+            objectFit='cover'
+            quality={80}
+          />
+        </a>
+      </summary>
+    </details>
+  )
+}

packages/react-static-tweets/src/twitter-layout/components/media.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-// import dynamic from 'next/dynamic' // TODO
-import Image from 'next/image'
 import { useTweet } from './tweet/tweet'
 
 export const Img = ({ width, height, src, ...p }) => {
@@ -21,13 +19,7 @@ export const Img = ({ width, height, src, ...p }) => {
           target='_blank'
           rel='noopener noreferrer'
         >
-          <Image
-            {...p}
-            src={`${src}&name=small`}
-            layout='fill'
-            objectFit='cover'
-            quality={80}
-          />
+          <img {...p} className='bare' src={`${src}&name=small`} />
         </a>
       </summary>
     </details>

packages/react-static-tweets/src/twitter-layout/components/next.ts

@@ -0,0 +1,50 @@
+import { Div } from './containers'
+import { H1, H2, H3, H4, H5, H6 } from './headings'
+import { P, Blockquote, Hr } from './text'
+import { Code, Pre } from './code'
+import { A } from './anchor'
+import { Ul, Ol, Li } from './lists'
+import { Table, Th, Td } from './table'
+import { Img } from './media.next'
+import { Mention, Hashtag, Cashtag, Emoji, Poll } from './twitter'
+import Tweet from './tweet/tweet.next'
+import EmbeddedTweet from './embedded-tweet'
+
+export default {
+  div: Div,
+
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+
+  p: P,
+  blockquote: Blockquote,
+  hr: Hr,
+
+  code: Code,
+  pre: Pre,
+
+  a: A,
+
+  ul: Ul,
+  ol: Ol,
+  li: Li,
+
+  table: Table,
+  th: Th,
+  td: Td,
+
+  img: Img,
+
+  Mention,
+  Hashtag,
+  Cashtag,
+  Emoji,
+  Poll,
+
+  Tweet,
+  EmbeddedTweet
+}