From 545e7e29b8791c87a776f6a4408aaeac4e1b84c3 Mon Sep 17 00:00:00 2001 From: Christian Murphy Date: Wed, 9 Aug 2023 02:27:44 -0700 Subject: [PATCH] Update sandboxes to use vite and typescript Closes GH-9. Reviewed-by: Titus Wormer --- .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"]
+}