From de04f8c32fc263c0689217955b36f1de8d68d139 Mon Sep 17 00:00:00 2001 From: Christian Murphy Date: Tue, 8 Aug 2023 21:23:19 -0700 Subject: [PATCH] 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. --- .github/ISSUE_TEMPLATE/1-bug.yml | 6 ++-- package.json | 15 +++++----- .../package.json | 28 ------------------- .../public/index.html | 14 ---------- .../src/index.tsx | 13 --------- .../.stackblitzrc | 0 .../react-markdown-with-vite/index.html | 12 ++++++++ .../react-markdown-with-vite/package.json | 22 +++++++++++++++ .../sandbox.config.json | 0 .../src/app.tsx | 5 ++-- .../react-markdown-with-vite/src/main.tsx | 10 +++++++ .../react-markdown-with-vite/tsconfig.json | 17 +++++++++++ .../tsconfig.node.json | 8 ++++++ .../react-markdown-with-vite/vite.config.ts | 6 ++++ .../.gitignore | 0 .../.stackblitzrc | 0 .../index.html | 6 ++-- .../package.json | 12 ++++---- .../sandbox.config.json | 0 .../src/main.ts} | 18 ++++++------ .../remark-rehype-with-vite/tsconfig.json | 18 ++++++++++++ .../tsconfig.node.json | 8 ++++++ .../remark-with-parcel/package.json | 17 ----------- .../.gitignore | 0 .../.stackblitzrc | 0 .../index.html | 6 ++-- .../remark-with-vite/package.json | 17 +++++++++++ .../sandbox.config.json | 0 .../index.js => remark-with-vite/src/main.ts} | 14 ++++------ .../remark-with-vite/tsconfig.json | 16 +++++++++++ .../remark-with-vite/tsconfig.node.json | 8 ++++++ 31 files changed, 183 insertions(+), 113 deletions(-) delete mode 100644 sandbox-templates/react-markdown-with-create-react-app/package.json delete mode 100644 sandbox-templates/react-markdown-with-create-react-app/public/index.html delete mode 100644 sandbox-templates/react-markdown-with-create-react-app/src/index.tsx rename sandbox-templates/{react-markdown-with-create-react-app => react-markdown-with-vite}/.stackblitzrc (100%) create mode 100644 sandbox-templates/react-markdown-with-vite/index.html create mode 100644 sandbox-templates/react-markdown-with-vite/package.json rename sandbox-templates/{react-markdown-with-create-react-app => react-markdown-with-vite}/sandbox.config.json (100%) rename sandbox-templates/{react-markdown-with-create-react-app => react-markdown-with-vite}/src/app.tsx (83%) create mode 100644 sandbox-templates/react-markdown-with-vite/src/main.tsx create mode 100644 sandbox-templates/react-markdown-with-vite/tsconfig.json create mode 100644 sandbox-templates/react-markdown-with-vite/tsconfig.node.json create mode 100644 sandbox-templates/react-markdown-with-vite/vite.config.ts rename sandbox-templates/{remark-rehype-with-parcel => remark-rehype-with-vite}/.gitignore (100%) rename sandbox-templates/{remark-rehype-with-parcel => remark-rehype-with-vite}/.stackblitzrc (100%) rename sandbox-templates/{remark-rehype-with-parcel => remark-rehype-with-vite}/index.html (61%) rename sandbox-templates/{remark-rehype-with-parcel => remark-rehype-with-vite}/package.json (54%) rename sandbox-templates/{remark-rehype-with-parcel => remark-rehype-with-vite}/sandbox.config.json (100%) rename sandbox-templates/{remark-rehype-with-parcel/src/index.js => remark-rehype-with-vite/src/main.ts} (65%) create mode 100644 sandbox-templates/remark-rehype-with-vite/tsconfig.json create mode 100644 sandbox-templates/remark-rehype-with-vite/tsconfig.node.json delete mode 100644 sandbox-templates/remark-with-parcel/package.json rename sandbox-templates/{remark-with-parcel => remark-with-vite}/.gitignore (100%) rename sandbox-templates/{remark-with-parcel => remark-with-vite}/.stackblitzrc (100%) rename sandbox-templates/{remark-with-parcel => remark-with-vite}/index.html (63%) create mode 100644 sandbox-templates/remark-with-vite/package.json rename sandbox-templates/{remark-with-parcel => remark-with-vite}/sandbox.config.json (100%) rename sandbox-templates/{remark-with-parcel/src/index.js => remark-with-vite/src/main.ts} (62%) create mode 100644 sandbox-templates/remark-with-vite/tsconfig.json create mode 100644 sandbox-templates/remark-with-vite/tsconfig.node.json diff --git a/.github/ISSUE_TEMPLATE/1-bug.yml b/.github/ISSUE_TEMPLATE/1-bug.yml index 32a2d0a..7659975 100644 --- 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 index e5fea5d..dc28b1c 100644 --- a/package.json +++ b/package.json @@ -12,17 +12,17 @@ "Titus Wormer (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 deleted file mode 100644 index eeb3b5e..0000000 --- a/sandbox-templates/react-markdown-with-create-react-app/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "react-markdown-with-create-react-app", - "version": "1.0.0", - "private": true, - "main": "src/index.tsx", - "dependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0", - "react-markdown": "^8.0.0", - "react-scripts": "^5.0.0" - }, - "devDependencies": { - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - "typescript": "^4.0.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] -} 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 deleted file mode 100644 index 44d1eff..0000000 --- a/sandbox-templates/react-markdown-with-create-react-app/public/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - react-markdown + CRA - - - -
- - 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 deleted file mode 100644 index 1833ea4..0000000 --- a/sandbox-templates/react-markdown-with-create-react-app/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, {StrictMode} from 'react' -import * as ReactDOM from 'react-dom' - -import App from './app.tsx' - -const rootElement = document.querySelector('#root') - -ReactDOM.render( - - - , - rootElement -) diff --git a/sandbox-templates/react-markdown-with-create-react-app/.stackblitzrc b/sandbox-templates/react-markdown-with-vite/.stackblitzrc similarity index 100% rename from sandbox-templates/react-markdown-with-create-react-app/.stackblitzrc rename to sandbox-templates/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 new file mode 100644 index 0000000..a9317af --- /dev/null +++ b/sandbox-templates/react-markdown-with-vite/index.html @@ -0,0 +1,12 @@ + + + + + + react-markdown + vite + typescript + + +
+ + + diff --git a/sandbox-templates/react-markdown-with-vite/package.json b/sandbox-templates/react-markdown-with-vite/package.json new file mode 100644 index 0000000..5c5b7da --- /dev/null +++ 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/sandbox-templates/react-markdown-with-create-react-app/sandbox.config.json b/sandbox-templates/react-markdown-with-vite/sandbox.config.json similarity index 100% rename from sandbox-templates/react-markdown-with-create-react-app/sandbox.config.json rename to sandbox-templates/react-markdown-with-vite/sandbox.config.json diff --git a/sandbox-templates/react-markdown-with-create-react-app/src/app.tsx b/sandbox-templates/react-markdown-with-vite/src/app.tsx similarity index 83% rename from sandbox-templates/react-markdown-with-create-react-app/src/app.tsx rename to sandbox-templates/react-markdown-with-vite/src/app.tsx index e8156d2..fdcb45c 100644 --- a/sandbox-templates/react-markdown-with-create-react-app/src/app.tsx +++ b/sandbox-templates/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 = () => {markdownSource} +function App() { + return {markdownSource} +} 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 new file mode 100644 index 0000000..5e549fd --- /dev/null +++ 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('#root')!).render( + + + +) diff --git a/sandbox-templates/react-markdown-with-vite/tsconfig.json b/sandbox-templates/react-markdown-with-vite/tsconfig.json new file mode 100644 index 0000000..d80c21c --- /dev/null +++ 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 new file mode 100644 index 0000000..28c03f4 --- /dev/null +++ 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 new file mode 100644 index 0000000..caf4916 --- /dev/null +++ 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/sandbox-templates/remark-rehype-with-parcel/.gitignore b/sandbox-templates/remark-rehype-with-vite/.gitignore similarity index 100% rename from sandbox-templates/remark-rehype-with-parcel/.gitignore rename to sandbox-templates/remark-rehype-with-vite/.gitignore diff --git a/sandbox-templates/remark-rehype-with-parcel/.stackblitzrc b/sandbox-templates/remark-rehype-with-vite/.stackblitzrc similarity index 100% rename from sandbox-templates/remark-rehype-with-parcel/.stackblitzrc rename to sandbox-templates/remark-rehype-with-vite/.stackblitzrc diff --git a/sandbox-templates/remark-rehype-with-parcel/index.html b/sandbox-templates/remark-rehype-with-vite/index.html similarity index 61% rename from sandbox-templates/remark-rehype-with-parcel/index.html rename to sandbox-templates/remark-rehype-with-vite/index.html index 07ee5e7..f4a5f1e 100644 --- a/sandbox-templates/remark-rehype-with-parcel/index.html +++ b/sandbox-templates/remark-rehype-with-vite/index.html @@ -1,12 +1,12 @@ - remark-rehype + Parcel demo + remark-rehype + Vite demo -

remark-rehype with Parcel

+

remark-rehype with Vite

source


     
result

@@ -14,6 +14,6 @@ 
result

     
error

     
none

 
-    
+    
   
 
diff --git a/sandbox-templates/remark-rehype-with-parcel/package.json b/sandbox-templates/remark-rehype-with-vite/package.json
similarity index 54%
rename from sandbox-templates/remark-rehype-with-parcel/package.json
rename to sandbox-templates/remark-rehype-with-vite/package.json
index 64f7409..c140c68 100644
--- a/sandbox-templates/remark-rehype-with-parcel/package.json
+++ b/sandbox-templates/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/sandbox-templates/remark-rehype-with-parcel/sandbox.config.json b/sandbox-templates/remark-rehype-with-vite/sandbox.config.json
similarity index 100%
rename from sandbox-templates/remark-rehype-with-parcel/sandbox.config.json
rename to sandbox-templates/remark-rehype-with-vite/sandbox.config.json
diff --git a/sandbox-templates/remark-rehype-with-parcel/src/index.js b/sandbox-templates/remark-rehype-with-vite/src/main.ts
similarity index 65%
rename from sandbox-templates/remark-rehype-with-parcel/src/index.js
rename to sandbox-templates/remark-rehype-with-vite/src/main.ts
index 4d31874..8c7ecea 100644
--- a/sandbox-templates/remark-rehype-with-parcel/src/index.js
+++ b/sandbox-templates/remark-rehype-with-vite/src/main.ts
@@ -19,8 +19,9 @@ function () {}
 \`\`\`
 `
 
-async function main() {
-  document.querySelector('#source').textContent = sourceMarkdown
+try {
+  document.querySelector('#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(
+    '#result'
+  )!.contentWindow!.document.body.innerHTML = String(file)
+  document.querySelector('#error')!.textContent = ''
+} catch (error) {
+  document.querySelector('#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
new file mode 100644
index 0000000..19d1ea9
--- /dev/null
+++ 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
new file mode 100644
index 0000000..28c03f4
--- /dev/null
+++ 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
deleted file mode 100644
index 837b22c..0000000
--- a/sandbox-templates/remark-with-parcel/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "remark-with-parcel",
-  "version": "1.0.0",
-  "private": true,
-  "main": "src/index.js",
-  "scripts": {
-    "start": "parcel index.html --open",
-    "build": "parcel build index.html"
-  },
-  "dependencies": {
-    "remark": "^14.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "parcel": "^2.0.0"
-  }
-}
diff --git a/sandbox-templates/remark-with-parcel/.gitignore b/sandbox-templates/remark-with-vite/.gitignore
similarity index 100%
rename from sandbox-templates/remark-with-parcel/.gitignore
rename to sandbox-templates/remark-with-vite/.gitignore
diff --git a/sandbox-templates/remark-with-parcel/.stackblitzrc b/sandbox-templates/remark-with-vite/.stackblitzrc
similarity index 100%
rename from sandbox-templates/remark-with-parcel/.stackblitzrc
rename to sandbox-templates/remark-with-vite/.stackblitzrc
diff --git a/sandbox-templates/remark-with-parcel/index.html b/sandbox-templates/remark-with-vite/index.html
similarity index 63%
rename from sandbox-templates/remark-with-parcel/index.html
rename to sandbox-templates/remark-with-vite/index.html
index bfd3811..1026779 100644
--- a/sandbox-templates/remark-with-parcel/index.html
+++ b/sandbox-templates/remark-with-vite/index.html
@@ -1,12 +1,12 @@
 
 
   
-    remark + Parcel demo
+    remark + Vite demo
     
   
 
   
-    
remark with Parcel

+    
remark with Vite

     
source

     

     
result

@@ -14,6 +14,6 @@ 
result

     
error

     
none

 
-    
+    
   
 
diff --git a/sandbox-templates/remark-with-vite/package.json b/sandbox-templates/remark-with-vite/package.json
new file mode 100644
index 0000000..cf52fe5
--- /dev/null
+++ 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/sandbox-templates/remark-with-parcel/sandbox.config.json b/sandbox-templates/remark-with-vite/sandbox.config.json
similarity index 100%
rename from sandbox-templates/remark-with-parcel/sandbox.config.json
rename to sandbox-templates/remark-with-vite/sandbox.config.json
diff --git a/sandbox-templates/remark-with-parcel/src/index.js b/sandbox-templates/remark-with-vite/src/main.ts
similarity index 62%
rename from sandbox-templates/remark-with-parcel/src/index.js
rename to sandbox-templates/remark-with-vite/src/main.ts
index 01dad5a..d802fec 100644
--- a/sandbox-templates/remark-with-parcel/src/index.js
+++ b/sandbox-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
-})
diff --git a/sandbox-templates/remark-with-vite/tsconfig.json b/sandbox-templates/remark-with-vite/tsconfig.json
new file mode 100644
index 0000000..9676439
--- /dev/null
+++ b/sandbox-templates/remark-with-vite/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "Node16",
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}
diff --git a/sandbox-templates/remark-with-vite/tsconfig.node.json b/sandbox-templates/remark-with-vite/tsconfig.node.json
new file mode 100644
index 0000000..28c03f4
--- /dev/null
+++ b/sandbox-templates/remark-with-vite/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}