Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update sandboxes to use vite and typescript #9

Merged
merged 1 commit into from
Aug 9, 2023
Merged

Update sandboxes to use vite and typescript #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/ISSUE_TEMPLATE/1-bug.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
15 changes: 8 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -48,7 +48,8 @@
"sandbox-templates/**/*.tsx"
],
"rules": {
"@typescript-eslint/naming-convention": "off"
"@typescript-eslint/naming-convention": "off",
"react/react-in-jsx-scope": "off"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the vite react transform does not require react in scope

}
}
]
Expand Down
28 changes: 0 additions & 28 deletions sandbox-templates/react-markdown-with-create-react-app/package.json
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions sandbox-templates/react-markdown-with-create-react-app/public/index.html
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions sandbox-templates/react-markdown-with-create-react-app/src/index.tsx
View file
Open in desktop

This file was deleted.

0 ...kdown-with-create-react-app/.stackblitzrc → ...es/react-markdown-with-vite/.stackblitzrc
View file
Open in desktop
File renamed without changes.
12 changes: 12 additions & 0 deletions sandbox-templates/react-markdown-with-vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions sandbox-templates/react-markdown-with-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this also updates to React 18

"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"
}
}
0 ...with-create-react-app/sandbox.config.json → ...ct-markdown-with-vite/sandbox.config.json
View file
Open in desktop
File renamed without changes.
5 changes: 3 additions & 2 deletions ...arkdown-with-create-react-app/src/app.tsx → ...ates/react-markdown-with-vite/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `
Expand All @@ -17,6 +16,8 @@ function () {}
\`\`\`
`

const App = () => <Markdown>{markdownSource}</Markdown>
function App() {
return <Markdown>{markdownSource}</Markdown>
}

export default App
10 changes: 10 additions & 0 deletions sandbox-templates/react-markdown-with-vite/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react'
// eslint-disable-next-line n/file-extension-in-import
import ReactDOM from 'react-dom/client'
Comment on lines +2 to +3
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this lint rule will break the code by adding a .js extension.
react-dom/client is in the export map, react-dom/client.js is not a thing.

import App from './app.js'

ReactDOM.createRoot(document.querySelector<HTMLDivElement>('#root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
17 changes: 17 additions & 0 deletions sandbox-templates/react-markdown-with-vite/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}]
}
8 changes: 8 additions & 0 deletions sandbox-templates/react-markdown-with-vite/tsconfig.node.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "bundler"
},
"include": ["vite.config.ts"]
}
6 changes: 6 additions & 0 deletions sandbox-templates/react-markdown-with-vite/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
plugins: [react()]
})
0 ...ates/remark-rehype-with-parcel/.gitignore → ...plates/remark-rehype-with-vite/.gitignore
View file
Open in desktop
File renamed without changes.
0 ...s/remark-rehype-with-parcel/.stackblitzrc → ...tes/remark-rehype-with-vite/.stackblitzrc
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions ...ates/remark-rehype-with-parcel/index.html → ...plates/remark-rehype-with-vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 6 additions & 6 deletions ...es/remark-rehype-with-parcel/package.json → ...ates/remark-rehype-with-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
}
}
0 ...rk-rehype-with-parcel/sandbox.config.json → ...mark-rehype-with-vite/sandbox.config.json
View file
Open in desktop
File renamed without changes.
18 changes: 9 additions & 9 deletions ...es/remark-rehype-with-parcel/src/index.js → ...lates/remark-rehype-with-vite/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
})
18 changes: 18 additions & 0 deletions sandbox-templates/remark-rehype-with-vite/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be removed, currently it is blocked by rehypejs/rehype#147

},
"include": ["src"],
"references": [{"path": "./tsconfig.node.json"}]
}
8 changes: 8 additions & 0 deletions sandbox-templates/remark-rehype-with-vite/tsconfig.node.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "bundler"
},
"include": ["vite.config.ts"]
}
17 changes: 0 additions & 17 deletions sandbox-templates/remark-with-parcel/package.json
View file
Open in desktop

This file was deleted.

0 ...x-templates/remark-with-parcel/.gitignore → ...box-templates/remark-with-vite/.gitignore
View file
Open in desktop
File renamed without changes.
0 ...emplates/remark-with-parcel/.stackblitzrc → ...-templates/remark-with-vite/.stackblitzrc
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions ...x-templates/remark-with-parcel/index.html → ...box-templates/remark-with-vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions sandbox-templates/remark-with-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
0 ...es/remark-with-parcel/sandbox.config.json → ...ates/remark-with-vite/sandbox.config.json
View file
Open in desktop
File renamed without changes.
14 changes: 6 additions & 8 deletions ...templates/remark-with-parcel/src/index.js → ...ox-templates/remark-with-vite/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Loading
Loading