Update sandboxes to use vite and typescript

package.json

@@ -12,13 +12,17 @@
     "Titus Wormer <tituswormer@gmail.com> (wooorm.com)",
     "Christian Murphy (https://github.com/ChristianMurphy)"
   ],
+  "workspaces": [
+    "sandbox-templates/rehype-debug",
+    "sandbox-templates/rehype-dom-debug"
+  ],
   "devDependencies": {
-    "eslint-config-xo-react": "^0.26.0",
-    "prettier": "^2.0.0",
-    "remark-cli": "^10.0.0",
+    "eslint-config-xo-react": "^0.27.0",
+    "prettier": "^3.0.0",
+    "remark-cli": "^11.0.0",
     "remark-frontmatter": "^4.0.0",
     "remark-preset-wooorm": "^9.0.0",
-    "xo": "^0.47.0"
+    "xo": "^0.56.0"
   },
   "scripts": {
     "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",

sandbox-templates/rehype-debug/index.html

@@ -11,6 +11,6 @@ <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/index.ts"></script>
   </body>
 </html>

sandbox-templates/rehype-debug/package.json

@@ -1,17 +1,18 @@
 {
   "name": "rehype-debug",
   "version": "1.0.0",
-  "license": "MIT",
   "private": true,
-  "source": "index.html",
+  "license": "MIT",
+  "type": "module",
+  "main": "src/index.ts",
   "scripts": {
-    "start": "parcel",
-    "build": "parcel build"
+    "start": "tsc && vite"
   },
   "dependencies": {
-    "rehype": "12.0.1"
+    "rehype": "^13.0.0"
   },
   "devDependencies": {
-    "parcel": "2.2.1"
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
   }
 }

sandbox-templates/rehype-debug/src/index.js → sandbox-templates/rehype-debug/src/index.ts

@@ -19,17 +19,14 @@ const sourceHtml = `
 </html>
 `
 
-async function main() {
-  document.querySelector('#source').textContent = sourceHtml
+try {
+  document.querySelector('#source')!.textContent = sourceHtml
 
-  rehype()
+  const file = await rehype()
     // Add any plugins here
     .process(sourceHtml)
-    .then((file) => {
-      document.querySelector('#result').textContent = String(file)
-    })
-}
 
-main().catch((error) => {
-  document.querySelector('#error').textContent = error
-})
+  document.querySelector('#result')!.textContent = String(file)
+} catch (error) {
+  document.querySelector('#error')!.textContent = String(error)
+}

sandbox-templates/rehype-debug/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"}]
+}

sandbox-templates/rehype-debug/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}

sandbox-templates/rehype-dom-debug/index.html

@@ -11,6 +11,6 @@ <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/index.ts"></script>
   </body>
 </html>

sandbox-templates/rehype-dom-debug/package.json

@@ -2,15 +2,16 @@
   "name": "rehype-dom-debug",
   "version": "1.0.0",
   "private": true,
-  "source": "index.html",
+  "main": "src/index.ts",
+  "type": "module",
   "scripts": {
-    "start": "parcel",
-    "build": "parcel build"
+    "start": "tsc && vite"
   },
   "dependencies": {
-    "rehype-dom": "6.0.1"
+    "rehype-dom": "^6.0.0"
   },
   "devDependencies": {
-    "parcel": "2.2.1"
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
   }
 }

sandbox-templates/rehype-dom-debug/src/index.js → sandbox-templates/rehype-dom-debug/src/index.ts

@@ -19,18 +19,14 @@ const sourceHtml = `
 </html>
 `
 
-async function main() {
-  document.querySelector('#source').textContent = sourceHtml
+try {
+  document.querySelector('#source')!.textContent = sourceHtml
 
-  rehypeDom()
+  const file = await rehypeDom()
     .use({settings: {fragment: false}})
     // Add any plugins here
     .process(sourceHtml)
-    .then((file) => {
-      document.querySelector('#result').textContent = String(file)
-    })
+  document.querySelector('#result')!.textContent = String(file)
+} catch (error) {
+  document.querySelector('#error')!.textContent = String(error)
 }
-
-main().catch((error) => {
-  document.querySelector('#error').textContent = error
-})

sandbox-templates/rehype-dom-debug/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"}]
+}

sandbox-templates/rehype-dom-debug/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}