Add sandboxes to repo #6

ChristianMurphy · 2021-11-23T17:22:46Z

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)
If applicable, I’ve added docs and tests

Description of changes

related to mdx-js/.github#16

this applies the same approach, moving sandbox examples into the repository for easier maintenance and versioning.

.github/ISSUE_TEMPLATE/1-bug.yml

wooorm

would be nice to start using async/await in all these examples
would be nice of this is matching the code style that all other projects have for JS, prettier + xo

sandbox-templates/react-markdown-with-create-react-app/src/index.js

sandbox-templates/react-markdown-with-create-react-app/src/App.js

sandbox-templates/remark-rehype-with-parcel/index.html

sandbox-templates/remark-with-parcel/index.html

sandbox-templates/remark-with-parcel/package.json

Co-authored-by: Titus <[email protected]>

wooorm · 2021-11-23T17:49:27Z

Is prettier set up in this repo? Here’s the config if not: https://github.com/unifiedjs/collective/blob/b6d6fc9ae19643a7a982f4fc0f3dc11b9be9eb1a/package.json#L25-L39. And I typically have *.md and *.html in a .prettierignore

wooorm · 2021-11-23T17:53:07Z

Stackblitz can also be enabled with just a link right? In that case, 👍, better to not favor one particular vendor!

ChristianMurphy · 2021-11-23T18:05:35Z

.github/ISSUE_TEMPLATE/1-bug.yml

+        | 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-remark/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-remark/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-remark/tree/main/sandbox-templates/react-markdown-with-create-react-app) |


temporary links until merged

https://codesandbox.io/s/github/ChristianMurphy/.github-remark/tree/sandbox-starters-in-repo/sandbox-templates/remark-with-parcel

https://stackblitz.com/github/ChristianMurphy/.github-remark/tree/sandbox-starters-in-repo/sandbox-templates/remark-with-parcel

https://codesandbox.io/s/github/ChristianMurphy/.github-remark/tree/sandbox-starters-in-repo/sandbox-templates/remark-rehype-with-parcel

https://stackblitz.com/github/ChristianMurphy/.github-remark/tree/sandbox-starters-in-repo/sandbox-templates/remark-rehype-with-parcel

https://codesandbox.io/s/github/ChristianMurphy/.github-remark/tree/sandbox-starters-in-repo/sandbox-templates/react-markdown-with-create-react-app

https://stackblitz.com/github/ChristianMurphy/.github-remark/tree/sandbox-starters-in-repo/sandbox-templates/react-markdown-with-create-react-app

ChristianMurphy · 2021-11-23T18:06:21Z

Added prettier and xo.
Updated list of links to a table with description, codesandbox, and stackblitz

sandbox-templates/react-markdown-with-create-react-app/src/app.js

sandbox-templates/remark-rehype-with-parcel/src/index.js

sandbox-templates/remark-with-parcel/src/index.js

wooorm · 2021-11-23T18:15:27Z

build fails!

wooorm

one nit.
Did you see my earlier comment on maybe using async/await?

.github/ISSUE_TEMPLATE/1-bug.yml

ChristianMurphy · 2021-11-23T18:47:03Z

build fails!

XO warnings resolved

Co-authored-by: Titus <[email protected]>

ChristianMurphy · 2021-11-23T18:50:32Z

Did you see my earlier comment on maybe using async/await?

Parcel doesn't support top level await yet parcel-bundler/parcel#4028
An async IIFE could be used, but I don't have a strong preference on that 🤷‍♂️

wooorm · 2021-11-23T18:57:41Z

Examples in remark packages now use a main(), referencing an async function main() { ... }. You can catch that and display the error. And inside it, use await?

wooorm

fine!

sandbox-templates/react-markdown-with-create-react-app/package.json

ChristianMurphy · 2021-11-23T19:31:53Z

Examples in remark packages now use a main(),

updated to use an async main function

wooorm

Good to have a top-level place to catch errors. I think it’s weird to not have it, but have it wrapping the await, so that it catches some errors but not others. How about this for the samples?

wooorm · 2021-11-24T08:19:18Z

sandbox-templates/remark-rehype-with-parcel/src/index.js

+  }
+}
+
+main()


Suggested change

main()

main().catch((errror) => {

document.querySelector('#error').textContent = String(error)

})

Main itself has a try catch block for error catching.
I'm not sure there are any errors left from main for this to catch.

The function body is currently wrapped in a try/catch. I’m assuming that people are going to change the function body and introduce errors outside the try/catch, resulting in uncaught exceptions

wooorm · 2021-11-24T08:20:37Z

sandbox-templates/remark-rehype-with-parcel/src/index.js

+  try {
+    const file = await unified()
+      .use(remarkParse)
+      // Add any remark plugins here
+      .use(remarkRehype)
+      // Add any rehype plugins here
+      .use(rehypeStringify)
+      .process(sourceMarkdown)
+
+    document.querySelector('#result').contentWindow.document.body.innerHTML =
+      String(file)
+  } catch (error) {
+    document.querySelector('#error').textContent = error
+  }


Suggested change

try {

const file = await unified()

.use(remarkParse)

// Add any remark plugins here

.use(remarkRehype)

// Add any rehype plugins here

.use(rehypeStringify)

.process(sourceMarkdown)

document.querySelector('#result').contentWindow.document.body.innerHTML =

String(file)

} catch (error) {

document.querySelector('#error').textContent = error

}

const file = await unified()

.use(remarkParse)

// Add any remark plugins here

.use(remarkRehype)

// Add any rehype plugins here

.use(rehypeStringify)

.process(sourceMarkdown)

document.querySelector('#result').contentWindow.document.body.innerHTML =

String(file)

🤷‍♂️ try {} catch {} reads cleaner than .then and .catch chaining. It would feel weird to make the example less clear 🤔

github-actions · 2021-11-24T13:33:48Z

Hi! This was closed. Team: If this was merged, please describe when this is likely to be released. Otherwise, please add one of the no/* labels.

docs: move sandbox examples into the repository

d0c12e0

github-actions bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels Nov 23, 2021

ChristianMurphy commented Nov 23, 2021

View reviewed changes

.github/ISSUE_TEMPLATE/1-bug.yml Outdated Show resolved Hide resolved

ChristianMurphy requested review from a team November 23, 2021 17:41

ChristianMurphy added the 📚 area/docs This affects documentation label Nov 23, 2021

wooorm reviewed Nov 23, 2021

View reviewed changes

ChristianMurphy and others added 2 commits November 23, 2021 10:45

Apply suggestions from code review

509ccb7

Co-authored-by: Titus <[email protected]>

style: run prettier on code

2443f29

ChristianMurphy added 2 commits November 23, 2021 10:54

style: add prettier and xo

7356c0f

docs: add stackblitz links

f35e86d

ChristianMurphy force-pushed the sandbox-starters-in-repo branch from e2f4d44 to f35e86d Compare November 23, 2021 18:02

Merge branch 'main' into sandbox-starters-in-repo

152e8f7

ChristianMurphy commented Nov 23, 2021

View reviewed changes

sandbox-templates/react-markdown-with-create-react-app/src/app.js Outdated Show resolved Hide resolved

sandbox-templates/remark-rehype-with-parcel/src/index.js Outdated Show resolved Hide resolved

sandbox-templates/remark-with-parcel/src/index.js Outdated Show resolved Hide resolved

ChristianMurphy requested a review from wooorm November 23, 2021 18:07

wooorm reviewed Nov 23, 2021

View reviewed changes

.github/ISSUE_TEMPLATE/1-bug.yml Show resolved Hide resolved

style: resolve xo warnings

cb9269e

Update code style in issue form

f72c93f

Co-authored-by: Titus <[email protected]>

docs: describe how to update dependencies on stackblitz

c4bda0d

wooorm reviewed Nov 23, 2021

View reviewed changes

sandbox-templates/react-markdown-with-create-react-app/package.json Outdated Show resolved Hide resolved

style: use async main function

2bf73b8

docs: update react markdown starter to use typescript

e897055

ChristianMurphy requested a review from wooorm November 23, 2021 19:36

ChristianMurphy added 4 commits November 23, 2021 12:53

test: resolve xo warnings

9eccb88

test: include workspace in dependency installation

8e0febb

docs: fix tsx import

2632eaa

docs: add sandbox configuration files

57dee0a

wooorm approved these changes Nov 24, 2021

View reviewed changes

wooorm requested changes Nov 24, 2021

View reviewed changes

wooorm approved these changes Nov 24, 2021

View reviewed changes

wooorm changed the title ~~docs: move sandbox examples into the repository~~ Add sandboxes to repo Nov 24, 2021

wooorm merged commit d4971fd into remarkjs:main Nov 24, 2021

ChristianMurphy deleted the sandbox-starters-in-repo branch November 24, 2021 13:36

+                }
+              }
+              main()

-main()
+main().catch((errror) => {
+  document.querySelector('#error').textContent = String(error)
+})

Add sandboxes to repo #6

Add sandboxes to repo #6

Uh oh!

Conversation

ChristianMurphy commented Nov 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Initial checklist

Description of changes

Uh oh!

Uh oh!

wooorm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wooorm commented Nov 23, 2021

Uh oh!

wooorm commented Nov 23, 2021

Uh oh!

ChristianMurphy Nov 23, 2021

Choose a reason for hiding this comment

Uh oh!

ChristianMurphy commented Nov 23, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wooorm commented Nov 23, 2021

Uh oh!

wooorm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ChristianMurphy commented Nov 23, 2021

Uh oh!

ChristianMurphy commented Nov 23, 2021

Uh oh!

wooorm commented Nov 23, 2021

Uh oh!

wooorm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ChristianMurphy commented Nov 23, 2021

Uh oh!

wooorm left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wooorm Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

ChristianMurphy Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

wooorm Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

wooorm Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

ChristianMurphy Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 24, 2021

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

ChristianMurphy commented Nov 23, 2021 •

edited

Loading

wooorm left a comment •

edited

Loading