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.

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

Adopt svelte-kit package and add Markdoc.svelte #3

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

bayre
Copy link
Contributor

@bayre bayre commented May 16, 2022

This is a first attempt at adding Markdoc.svelte into the mix. I have rejigged the repo as per svelte-kit package, but if you can think of a cleaner way to bundle the component and the preprocessor then I'd be happy to abandon this approach.

These things remain on the todo list:

  • Updated README
  • Tests?
  • Types?

Copy link
Owner

@joshnuss joshnuss left a comment

Choose a reason for hiding this comment

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

Nice work!!

Left a couple comments/thoughts, but I like where it's headed.

For types, we could switch everything to TS or just use jsdoc.. maybe for now jsdoc is enough? That's what I did on the svelte-stripe project and it seemed to work well.

For testing, we can add playwright support, probably can be done in a separate PR though.
LMK, I can set it up.

@@ -20,11 +20,4 @@ function render(source, config) {
const configWithFrontmatter = addFrontmatter(ast, config)
const content = markdoc.transform(ast, configWithFrontmatter)
return markdoc.renderers.html(content)
Copy link
Owner

Choose a reason for hiding this comment

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

Maybe instead of using Markdoc's renderer, it can reuse Markdoc.svelte here?
That way tags can work for the preprocessor approach too.

The preprocessor can use the config to figure out what tags are supported.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah great idea! I've not looked into the preprocessor API before but it looks like this kind of thing should be possible?

Copy link
Owner

Choose a reason for hiding this comment

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

Yes, all the preprocessor needs to do is return a string containing valid svelte code. I think it should be doable.


const ast = Markdoc.parse(doc)
const configWithFrontmatter = addFrontmatter(ast, config)
const content = Markdoc.transform(ast, configWithFrontmatter)
Copy link
Owner

Choose a reason for hiding this comment

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

Previous three lines should probably be in a reactive block $: { .... }. since user can change props doc, config, etc..

Copy link
Contributor Author

Choose a reason for hiding this comment

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

100% yep

src/lib/renderer/Tags.svelte Show resolved Hide resolved
svelte.config.js Outdated Show resolved Hide resolved
@bayre
Copy link
Contributor Author

bayre commented May 20, 2022

Hey @joshnuss — I've tackled most of your comments bar the idea of using Markdoc.svelte in the preprocessor. I need to wrap my noggin around the API for that. Still needs tests too 🙃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants