kevin940726 / remark-code-import

📝 Populate code blocks from files
https://npm.im/remark-code-import
MIT License
62 stars 11 forks source link

Create a version which can use snippetId #11

Closed johnrom closed 3 years ago

johnrom commented 3 years ago

Usage:

Source file:

// @snippet:start yolo-snippet
const yolo = () => alert('yolo');
// @snippet:end

Markdown file:

```tsx file=./your-file.tsx@yolo-snippet


## Additional info.

- End snippet supports ids as well, like `@snippet:end yolo-snippet`. Could be useful for mixing using multiple snippets on a page, maybe??
- Adds a basePath option to the plugin, so `file=./path.tsx` can be based from somewhere else than the markdown document.
kevin940726 commented 3 years ago

Hi, I intended to make this plugin as small and extensible as possible. Such feature can be implemented in a separate plugin along side with remark-code-import. Maybe something like remark-plugin-truncate-code-block that loads after this plugin. So the basic flow is as follow:

  1. Use remark-code-import and file=./your-file.tsx meta tag to copy all the contents of the file into the code block.
  2. Add an additional meta tag like snippet=yolo-snippet and use your custom plugin.
  3. Write the custom plugin to truncate the contents inside the code block (rather than in the file).
  4. Done!

This should be more flexible and don't need to introduce yet another option or new syntax.

In addition, this plugin supports all kinds of source code, so we couldn't just expect special comment syntax in the file. Python files have different syntax for comments and plain text files don't have comments at all. If you build it in your custom plugin however, you can limit that plugin to be only used with js/ts files instead.

I hope that it makes sense to you :)! I'll close this one, but LMK if there's anything else I can help with ❤️, thank you!

johnrom commented 3 years ago

@kevin940726 makes sense in terms of adding the additional meta tag. However, this doesn't solve the basePath issue, re: I created an option where remark-code-import could be called relative to a basePath instead of importing code from a specific file. This is especially useful with remote files like next-mdx-remote since files called remotely won't have an actual path within the filesystem. Do you have a different option for this?

edit:

It seems like we could pass filepath to mdx options which could "fake" where the path is (I'd have to test, probably 2 weeks). I personally think it makes more sense to configure a basePath at the plugin level but I'll leave it to your discretion if the above is a suitable workaround.

kevin940726 commented 3 years ago

Oh yes I've considered a similar option before. Could you give an actual use case of such feature? (Code snippets will help a lot!) Would using an absolute path solve the issue?

I don't think a global option should change how the resolution works. That is, providing a basePath option should not change the to look for absolute paths rather than relative path to the file. You can already achieve that by passing absolute paths in the code block metas. I'd imagine an option like cwd or rootPath to change the root path of absolute paths. I believe this is what you mean, right?