test(react): update playground/react-emotion to tsx and remove playground/tsconfig (#737)

Author: hi-ogawa

playground/react-emotion/__tests__/react.spec.ts

@@ -14,12 +14,12 @@ test('should update', async () => {
 })
 
 test.runIf(isServe)('should hmr', async () => {
-  editFile('App.jsx', (code) =>
+  editFile('src/App.tsx', (code) =>
     code.replace('Vite + React + @emotion/react', 'Updated'),
   )
   await expect.poll(() => page.textContent('h1')).toMatch('Hello Updated')
 
-  editFile('Counter.jsx', (code) =>
+  editFile('src/Counter.tsx', (code) =>
     code.replace('color: #646cff;', 'color: #d26ac2;'),
   )
 
@@ -43,7 +43,7 @@ test('should update button style', async () => {
   expect(await getButtonBorderStyle()).toMatch('2px solid rgb(0, 0, 0)')
 
   if (isServe) {
-    editFile('Counter.jsx', (code) =>
+    editFile('src/Counter.tsx', (code) =>
       code.replace('border: 2px solid #000', 'border: 4px solid red'),
     )
 

playground/react-emotion/index.html

@@ -1,10 +1,2 @@
 <div id="app"></div>
-<script type="module">
-  import React from 'react'
-  import ReactDOM from 'react-dom/client'
-  import App from './App.jsx'
-
-  ReactDOM.createRoot(document.getElementById('app')).render(
-    React.createElement(App),
-  )
-</script>
+<script type="module" src="./src/main.tsx"></script>

playground/react-emotion/package.json

@@ -18,6 +18,8 @@
   "devDependencies": {
     "@babel/plugin-proposal-pipeline-operator": "^7.27.1",
     "@emotion/babel-plugin": "^11.13.5",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "workspace:*"
   },
   "babel": {

playground/react-emotion/App.jsx playground/react-emotion/src/App.tsxplayground/react-emotion/App.jsx renamed to playground/react-emotion/src/App.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import _Switch from 'react-switch'
-import { Counter, StyledCode } from './Counter'
-const Switch = _Switch.default || _Switch
+import { Counter, StyledCode } from './Counter.tsx'
+
+const Switch = (_Switch as any).default || _Switch
 
 function FragmentTest() {
   const [checked, setChecked] = useState(false)

playground/react-emotion/Counter.jsx playground/react-emotion/src/Counter.tsxplayground/react-emotion/Counter.jsx renamed to playground/react-emotion/src/Counter.tsx

@@ -14,6 +14,7 @@ export function Counter() {
     <button
       css={css`
         border: 2px solid #000;
+        background: orange;
       `}
       onClick={() => setCount((count) => count + 1)}
     >

playground/tsconfig/src/main.tsx playground/react-emotion/src/main.tsxplayground/tsconfig/src/main.tsx renamed to playground/react-emotion/src/main.tsx

@@ -1,4 +1,4 @@
 import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import App from './App.tsx'
 
 ReactDOM.createRoot(document.getElementById('app')!).render(<App />)

playground/tsconfig/tsconfig.json playground/react-emotion/tsconfig.jsonplayground/tsconfig/tsconfig.json renamed to playground/react-emotion/tsconfig.json

@@ -5,7 +5,6 @@ export default defineConfig({
   server: { port: 8904 /* Should be unique */ },
   plugins: [
     react({
-      jsxImportSource: '@emotion/react',
       babel: {
         plugins: ['@emotion/babel-plugin'],
       },
@@ -16,4 +15,7 @@ export default defineConfig({
     // to make tests faster
     minify: false,
   },
+  optimizeDeps: {
+    include: ['@emotion/styled/base'],
+  },
 })