poc(website): support emotion imports

website/next.config.js

@@ -6,9 +6,6 @@ const shouldPrefix = process.env.PREFIX === 'true'
 module.exports = {
   assetPrefix: shouldPrefix ? '/react-runner/' : '',
   basePath: shouldPrefix ? '/react-runner' : '',
-  compiler: {
-    styledComponents: true,
-  },
   // ensure counter won't be incremented twice
   reactStrictMode: false,
   webpack: (config, options) => {

website/package.json

@@ -10,19 +10,20 @@
     "deploy": "rm -rf node_modules/.cache build && PREFIX=true next build && next export -o build && touch build/.nojekyll && gh-pages -d build -t true"
   },
   "dependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "common-tags": "^1.8.2",
     "next": "12.1.0",
     "next-themes": "^0.2.0-beta.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "styled-components": "^5.3.3"
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@types/common-tags": "^1.8.1",
     "@types/lz-string": "^1.3.34",
     "@types/node": "17.0.5",
     "@types/react": "17.0.38",
-    "@types/styled-components": "^5.1.15",
     "eslint": "8.5.0",
     "eslint-config-next": "12.0.7",
     "gh-pages": "^3.2.3",

website/src/components/GlobalStyle.tsx

@@ -0,0 +1,57 @@
+import { Global, css } from '@emotion/react'
+
+export const GlobalStyle = () => (
+  <Global
+    styles={css`
+      :root {
+        --header-height: 48px;
+      }
+
+      [data-theme='dark'] [data-hide='dark'],
+      [data-theme='light'] [data-hide='light'] {
+        display: none;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        [data-theme='system'] [data-hide='dark'] {
+          display: none;
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        [data-theme='system'] [data-hide='light'] {
+          display: none;
+        }
+      }
+
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+        font-size: 16px;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      pre,
+      code,
+      kbd {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New,
+          monospace;
+      }
+
+      ul {
+        list-style: auto inside;
+        padding: 0;
+      }
+
+      a {
+        color: steelblue;
+        text-decoration: none;
+      }
+    `}
+  />
+)

website/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import NextLink from 'next/link'
 import { useTheme } from 'next-themes'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 const Container = styled.header`
   background: steelblue;
@@ -93,6 +93,8 @@ const ThemeToggle = () => {
   )
 }
 
+const GithubButton = IconButton.withComponent(Link)
+
 export const Header = ({ isExample }: { isExample: boolean }) => {
   if (isExample) {
     return (
@@ -129,7 +131,7 @@ export const Header = ({ isExample }: { isExample: boolean }) => {
       <NextLink href="/playground" passHref>
         <Link>Playground</Link>
       </NextLink>
-      <IconButton as={Link} href="https://github.com/nihgwu/react-runner">
+      <GithubButton href="https://github.com/nihgwu/react-runner">
         <svg
           width="20"
           height="20"
@@ -144,7 +146,7 @@ export const Header = ({ isExample }: { isExample: boolean }) => {
             clipRule="evenodd"
           />
         </svg>
-      </IconButton>
+      </GithubButton>
       <ThemeToggle />
     </Container>
   )

website/src/components/LiveRunner.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import { useRunner, Scope } from 'react-runner'
 import {
   LiveProvider,
@@ -85,11 +85,13 @@ type Props = {
   language?: Language
 }
 
+const StyledEditor = Editor.withComponent(LiveEditor)
+
 export const LiveRunner = (props: Props) => (
   <LiveProvider {...props}>
     <Container>
       <EditorContainer>
-        <Editor as={LiveEditor} />
+        <StyledEditor />
       </EditorContainer>
       <PreviewContainer>
         <Preview as={LivePreview} />

website/src/components/MultiFilesExample/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import { importCode, Runner, Scope } from 'react-runner'
 
 import {

website/src/constants.ts

@@ -1,24 +1,22 @@
 import React from 'react'
-import styled, { css, keyframes, createGlobalStyle } from 'styled-components'
-import * as Styled from 'styled-components'
+import * as EmotionCss from '@emotion/css'
+import * as EmotionReact from '@emotion/react'
+import styled from '@emotion/styled'
 import { codeBlock } from 'common-tags'
 // @ts-ignore
 import hn from '!!raw-loader!./pages/examples/hacker-news.tsx'
 
-// mimic babel plugin's behaviour to support SSR
+// mimic the babel plugin's behaviour to support `Components as selectors`
 let counter = 0
-function hijackedStyled(...args: any[]) {
-  // @ts-ignore
-  return styled(...args)
-}
+const hijackedStyled = styled.bind(undefined)
 const hash = 'runner'
 const ignoredProps = Object.getOwnPropertyNames(Function)
 Object.getOwnPropertyNames(styled).forEach((tag) => {
   if (ignoredProps.includes(tag)) return
   Object.defineProperty(hijackedStyled, tag, {
     get() {
-      return styled[tag].withConfig({
-        componentId: `sc-${hash}-${counter++}`,
+      return styled(tag as keyof JSX.IntrinsicElements, {
+        target: `e${hash}${counter++}`,
       })
     },
   })
@@ -28,19 +26,23 @@ export const resetCounter = () => {
   counter = 0
 }
 
-export const scope = {
+const _React = {
   ...React,
+  createElement: EmotionReact.jsx,
+}
+
+export const scope = {
+  React: _React,
+  ..._React,
   styled: hijackedStyled,
-  css,
-  keyframes,
-  createGlobalStyle,
+  css: EmotionReact.css,
+  keyframes: EmotionReact.keyframes,
+  createElement: EmotionReact.jsx,
   import: {
-    react: React,
-    'styled-components': {
-      ...Styled,
-      default: hijackedStyled,
-      __esModule: true,
-    },
+    react: _React,
+    '@emotion/css': EmotionCss,
+    '@emotion/react': EmotionReact,
+    '@emotion/styled': hijackedStyled,
   },
 }
 

website/src/pages/_document.tsx

@@ -1,52 +1,17 @@
-import Document, {
-  DocumentContext,
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import { Html, Head, Main, NextScript } from 'next/document'
 
 import { resetCounter } from '../constants'
 
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
-
-    try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />),
-        })
-
-      const initialProps = await Document.getInitialProps(ctx)
-      return {
-        ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
-      }
-    } finally {
-      sheet.seal()
-    }
-  }
-
-  render() {
-    // reset counter for SSR
-    resetCounter()
-    return (
-      <Html lang="en" data-theme="system">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
+export default function Document() {
+  // reset counter for SSR
+  resetCounter()
+  return (
+    <Html lang="en" data-theme="system">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
 }

website/src/pages/examples/hacker-news.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 type Item = {
   id: number

website/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 import { UseRunner as LiveRunner } from '../components/LiveRunner'
 import { MultiFilesExample } from '../components/MultiFilesExample'

website/src/pages/playground.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useReducer } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import { useLiveRunner } from 'react-live-runner'
 
 import {