Update sandboxes to use vite and typescript

Closes GH-9. Reviewed-by: Titus Wormer <[email protected]>
remarkjs · Aug 9, 2023 · 545e7e2 · 545e7e2
1 parent 1c6b1aa
commit 545e7e2
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 <[email protected]> (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
-})