update sandboxes to use vite and typescript

the native dependencies in parcel no longer work in browser sandboxes like stackblitz create react app has been (for all intents and purposes) deprecated by the react team vite offers a replacement for both also run sandboxes through typescript to catch potential issues with plugin compatibility and options.
remarkjs · Aug 9, 2023 · de04f8c · de04f8c
1 parent 1c6b1aa
commit de04f8c
Show file tree

Hide file tree

Showing 31 changed files with 183 additions and 113 deletions.
diff --git a/.github/ISSUE_TEMPLATE/1-bug.yml b/.github/ISSUE_TEMPLATE/1-bug.yml
@@ -44,9 +44,9 @@ body:
 
         | description | codesandbox | stackblitz |
         | - | - | - |
-        | remark only (for markdown to markdown) | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-parcel) | [stackblitz](https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-parcel) |
-        | remark and rehype (for markdown to html) | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/remark-rehype-with-parcel) | [stackblitz](https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-rehype-with-parcel) |
-        | react-markdown | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-create-react-app) | [stackblitz](https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-create-react-app) |
+        | remark only (for markdown to markdown) | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-vite) | [stackblitz](https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-vite) |
+        | remark and rehype (for markdown to html) | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/remark-rehype-with-vite) | [stackblitz](https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-rehype-with-vite) |
+        | react-markdown | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite) | [stackblitz](https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite) |
 
         Alternatively, use the next section *Steps to reproduce*.
     validations:

diff --git a/package.json b/package.json
@@ -12,17 +12,17 @@
     "Titus Wormer <tituswormer@gmail.com> (wooorm.com)"
   ],
   "workspaces": [
-    "sandbox-templates/react-markdown-with-create-react-app",
-    "sandbox-templates/remark-rehype-with-parcel",
-    "sandbox-templates/remark-with-parcel"
+    "sandbox-templates/react-markdown-with-vite",
+    "sandbox-templates/remark-rehype-with-vite",
+    "sandbox-templates/remark-with-vite"
   ],
   "devDependencies": {
-    "eslint-config-xo-react": "^0.26.0",
-    "prettier": "^2.0.0",
+    "eslint-config-xo-react": "^0.27.0",
+    "prettier": "^3.0.0",
     "remark-cli": "^10.0.0",
     "remark-frontmatter": "^4.0.0",
     "remark-preset-wooorm": "^9.0.0",
-    "xo": "^0.47.0"
+    "xo": "^0.55.0"
   },
   "scripts": {
     "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
@@ -48,7 +48,8 @@
           "sandbox-templates/**/*.tsx"
         ],
         "rules": {
-          "@typescript-eslint/naming-convention": "off"
+          "@typescript-eslint/naming-convention": "off",
+          "react/react-in-jsx-scope": "off"
         }
       }
     ]

diff --git a/sandbox-templates/react-markdown-with-create-react-app/package.json b/sandbox-templates/react-markdown-with-create-react-app/package.json
diff --git a/sandbox-templates/react-markdown-with-create-react-app/public/index.html b/sandbox-templates/react-markdown-with-create-react-app/public/index.html
diff --git a/sandbox-templates/react-markdown-with-create-react-app/src/index.tsx b/sandbox-templates/react-markdown-with-create-react-app/src/index.tsx
diff --git a/...kdown-with-create-react-app/.stackblitzrc → ...es/react-markdown-with-vite/.stackblitzrc b/...kdown-with-create-react-app/.stackblitzrc → ...es/react-markdown-with-vite/.stackblitzrc
diff --git a/sandbox-templates/react-markdown-with-vite/index.html b/sandbox-templates/react-markdown-with-vite/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-markdown + vite + typescript</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/sandbox-templates/react-markdown-with-vite/package.json b/sandbox-templates/react-markdown-with-vite/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-markdown-with-vite",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/main.tsx",
+  "type": "module",
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-markdown": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
+  },
+  "scripts": {
+    "start": "tsc && vite"
+  }
+}
diff --git a/...with-create-react-app/sandbox.config.json → ...ct-markdown-with-vite/sandbox.config.json b/...with-create-react-app/sandbox.config.json → ...ct-markdown-with-vite/sandbox.config.json
diff --git a/...arkdown-with-create-react-app/src/app.tsx → ...ates/react-markdown-with-vite/src/app.tsx b/...arkdown-with-create-react-app/src/app.tsx → ...ates/react-markdown-with-vite/src/app.tsx
@@ -3,7 +3,6 @@
 // On stackblitz, you can open the package.json file, update the versions,
 // then run npm install in the stackblitz terminal
 
-import React from 'react'
 import Markdown from 'react-markdown'
 
 const markdownSource = `
@@ -17,6 +16,8 @@ function () {}
 \`\`\`
 `
 
-const App = () => <Markdown>{markdownSource}</Markdown>
+function App() {
+  return <Markdown>{markdownSource}</Markdown>
+}
 
 export default App
diff --git a/sandbox-templates/react-markdown-with-vite/src/main.tsx b/sandbox-templates/react-markdown-with-vite/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+// eslint-disable-next-line n/file-extension-in-import
+import ReactDOM from 'react-dom/client'
+import App from './app.js'
+
+ReactDOM.createRoot(document.querySelector<HTMLDivElement>('#root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/sandbox-templates/react-markdown-with-vite/tsconfig.json b/sandbox-templates/react-markdown-with-vite/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "Node16",
+    "jsx": "react-jsx",
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}
diff --git a/sandbox-templates/react-markdown-with-vite/tsconfig.node.json b/sandbox-templates/react-markdown-with-vite/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/sandbox-templates/react-markdown-with-vite/vite.config.ts b/sandbox-templates/react-markdown-with-vite/vite.config.ts
@@ -0,0 +1,6 @@
+import {defineConfig} from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()]
+})
diff --git a/...ates/remark-rehype-with-parcel/.gitignore → ...plates/remark-rehype-with-vite/.gitignore b/...ates/remark-rehype-with-parcel/.gitignore → ...plates/remark-rehype-with-vite/.gitignore
diff --git a/...s/remark-rehype-with-parcel/.stackblitzrc → ...tes/remark-rehype-with-vite/.stackblitzrc b/...s/remark-rehype-with-parcel/.stackblitzrc → ...tes/remark-rehype-with-vite/.stackblitzrc
diff --git a/...ates/remark-rehype-with-parcel/index.html → ...plates/remark-rehype-with-vite/index.html b/...ates/remark-rehype-with-parcel/index.html → ...plates/remark-rehype-with-vite/index.html
@@ -1,19 +1,19 @@
 <!doctype html>
 <html>
   <head>
-    <title>remark-rehype + Parcel demo</title>
+    <title>remark-rehype + Vite demo</title>
     <meta charset="utf-8">
   </head>
 
   <body>
-    <h1><code>remark-rehype</code> with Parcel</h1>
+    <h1><code>remark-rehype</code> with Vite</h1>
     <h2>source</h2>
     <pre id="source"></pre>
     <h2>result</h2>
     <iframe id="result"></iframe>
     <h2>error</h2>
     <pre id="error">none</pre>
 
-    <script type="module" src="src/index.js"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>
diff --git a/...es/remark-rehype-with-parcel/package.json → ...ates/remark-rehype-with-vite/package.json b/...es/remark-rehype-with-parcel/package.json → ...ates/remark-rehype-with-vite/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "remark-rehype-with-parcel",
+  "name": "remark-rehype-with-vite",
   "version": "1.0.0",
   "private": true,
-  "main": "src/index.js",
+  "type": "module",
+  "main": "src/main.ts",
   "scripts": {
-    "start": "parcel index.html --open",
-    "build": "parcel build index.html"
+    "start": "tsc && vite"
   },
   "dependencies": {
     "rehype-stringify": "^9.0.0",
@@ -14,7 +14,7 @@
     "unified": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "parcel": "^2.0.0"
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
   }
 }
diff --git a/...rk-rehype-with-parcel/sandbox.config.json → ...mark-rehype-with-vite/sandbox.config.json b/...rk-rehype-with-parcel/sandbox.config.json → ...mark-rehype-with-vite/sandbox.config.json
diff --git a/...es/remark-rehype-with-parcel/src/index.js → ...lates/remark-rehype-with-vite/src/main.ts b/...es/remark-rehype-with-parcel/src/index.js → ...lates/remark-rehype-with-vite/src/main.ts
@@ -19,8 +19,9 @@ function () {}
 \`\`\`
 `
 
-async function main() {
-  document.querySelector('#source').textContent = sourceMarkdown
+try {
+  document.querySelector<HTMLPreElement>('#source')!.textContent =
+    sourceMarkdown
 
   const file = await unified()
     .use(remarkParse)
@@ -30,11 +31,10 @@ async function main() {
     .use(rehypeStringify)
     .process(sourceMarkdown)
 
-  document.querySelector('#result').contentWindow.document.body.innerHTML =
-    String(file)
-  document.querySelector('#error').textContent = ''
+  document.querySelector<HTMLIFrameElement>(
+    '#result'
+  )!.contentWindow!.document.body.innerHTML = String(file)
+  document.querySelector<HTMLPreElement>('#error')!.textContent = ''
+} catch (error) {
+  document.querySelector<HTMLPreElement>('#error')!.textContent = String(error)
 }
-
-main().catch((error) => {
-  document.querySelector('#error').textContent = error
-})
diff --git a/sandbox-templates/remark-rehype-with-vite/tsconfig.json b/sandbox-templates/remark-rehype-with-vite/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "Node16",
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}
diff --git a/sandbox-templates/remark-rehype-with-vite/tsconfig.node.json b/sandbox-templates/remark-rehype-with-vite/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/sandbox-templates/remark-with-parcel/package.json b/sandbox-templates/remark-with-parcel/package.json
diff --git a/...x-templates/remark-with-parcel/.gitignore → ...box-templates/remark-with-vite/.gitignore b/...x-templates/remark-with-parcel/.gitignore → ...box-templates/remark-with-vite/.gitignore
diff --git a/...emplates/remark-with-parcel/.stackblitzrc → ...-templates/remark-with-vite/.stackblitzrc b/...emplates/remark-with-parcel/.stackblitzrc → ...-templates/remark-with-vite/.stackblitzrc
diff --git a/...x-templates/remark-with-parcel/index.html → ...box-templates/remark-with-vite/index.html b/...x-templates/remark-with-parcel/index.html → ...box-templates/remark-with-vite/index.html
@@ -1,19 +1,19 @@
 <!doctype html>
 <html>
   <head>
-    <title>remark + Parcel demo</title>
+    <title>remark + Vite demo</title>
     <meta charset="utf-8" />
   </head>
 
   <body>
-    <h1><code>remark</code> with Parcel</h1>
+    <h1><code>remark</code> with Vite</h1>
     <h2>source</h2>
     <pre id="source"></pre>
     <h2>result</h2>
     <pre id="result"></pre>
     <h2>error</h2>
     <pre id="error">none</pre>
 
-    <script type="module" src="src/index.js"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>
diff --git a/sandbox-templates/remark-with-vite/package.json b/sandbox-templates/remark-with-vite/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "remark-with-vite",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/main.ts",
+  "scripts": {
+    "start": "tsc && vite"
+  },
+  "dependencies": {
+    "remark": "^14.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
+  }
+}
diff --git a/...es/remark-with-parcel/sandbox.config.json → ...ates/remark-with-vite/sandbox.config.json b/...es/remark-with-parcel/sandbox.config.json → ...ates/remark-with-vite/sandbox.config.json
diff --git a/...templates/remark-with-parcel/src/index.js → ...ox-templates/remark-with-vite/src/main.ts b/...templates/remark-with-parcel/src/index.js → ...ox-templates/remark-with-vite/src/main.ts
@@ -16,17 +16,15 @@ function () {}
 \`\`\`
 `
 
-async function main() {
-  document.querySelector('#source').textContent = sourceMarkdown
+try {
+  document.querySelector('#source')!.textContent = sourceMarkdown
 
   const file = await remark()
     // .use remark plugins here
     .process(sourceMarkdown)
 
-  document.querySelector('#result').textContent = String(file)
-  document.querySelector('#error').textContent = ''
+  document.querySelector('#result')!.textContent = String(file)
+  document.querySelector('#error')!.textContent = ''
+} catch (error) {
+  document.querySelector('#error')!.textContent = String(error)
 }
-
-main().catch((error) => {
-  document.querySelector('#error').textContent = error
-})