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

Add Markdown support as an entry point (issue #2274) #2538

Merged
merged 10 commits into from Mar 6, 2019

Conversation

Benjmhart
Copy link
Contributor

↪️ Pull Request

  • added support for markdown entry points with dynamic installation of the marked package to parse the markdown code into html.
  • added initial test for markdown parsing
  • this is a partial fix toward ticket Markdown Support #2274
    Markdown Support #2274

💻 Examples

user can now run parcel build index.md, and get an index.html in the /dist folder

🚨 Test instructions

unit test is provided in the integration tests. it confirms that the markdown file is parsed into html, and that image assets are registered/handled correctly.

✔️ PR Todo

  • Added/updated unit tests for this change
  • Filled out test instructions (In case there aren't any unit tests)
  • Included links to related issues/PRs

const localRequire = require('../utils/localRequire');
const HTMLAsset = require('./HTMLAsset');

class MarkdownAsset extends HTMLAsset {
Copy link
Member

Choose a reason for hiding this comment

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

I wouldn't recommend extending from another asset type. Instead, we can rely on the pipeline to pass through the generated HTML to the HTMLAsset.

Extend from Asset here, and return the html from the generate method. For an example, see how e.g. JSONAsset does it.

Copy link
Member

Choose a reason for hiding this comment

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

Rather the PugAsset:

return compiled(config.locals);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

thanks, I'll take a look this weekend and also see about resolving the pipeline issues

@Benjmhart
Copy link
Contributor Author

Hi there,

So we've adjusted the MarkdownAsset to avoid extending the HTML Asset. We did need to add a flag to make the pipeline behave properly. Thank you for your useful examples in the JS and pug assets @devongovett and @mischnic

Please let us know if this is more in line with what you were looking for.

Also, we wanted to discuss front matter support. While the marked library appears to include support for basic front matter (mainly styling). the original feature request included mustache/templating specs. We held off on this aspect of the feature because it makes parcel a bit opinionated on exactly how it should be done, and we wanted input from the core team before moving ahead there.

Thanks

@@ -117,7 +116,9 @@ class Pipeline {
type,
value: asset.generated[type],
// for scope hoisting, we need to post process all JS
final: !(type === 'js' && this.options.scopeHoist)
final: asset.hasOwnProperty('needsPipelineProcessing')
? !asset.needsPipelineProcessing
Copy link
Member

Choose a reason for hiding this comment

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

Why is this new property needed? Normally, if the type of the asset changes (e.g. from .md to .html), the pipeline will automatically pass it through to the next asset type (in this case HTMLAsset).

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for your comment!

Normally, if the type of the asset changes (e.g. from .md to .html), the pipeline will automatically pass it through to the next asset type

Could you, please point out where that happens exactly?

From what we discovered, the only way for an asset to undergo one more processing by another asset type is for this final property to be false.

if (typeof value !== 'string' || rendition.final) {
generated.push(rendition);
continue;
}

As you can see in the diff, the original code only allows final to be false for JS.

Maybe the right way to go would be to remove those 4 lines above altogether. 😱 But I suppose they are there for a reason.

Please, let me know if I've got it wrong.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ohhh, I've got it!

@kirillrogovoy
Copy link
Contributor

Hey, @devongovett!

Just a quick update.

Our plan:

  1. Wait for you to take another look, and hopefully approve this PR.
  2. Get it merged to the upstream. (Wow, we have basic but useless support for Markdown!)
  3. Get your feedback on how the templating should work (Add Markdown support as an entry point (issue #2274) #2538 (comment)).
  4. Implement whatever we agree on in a separate PR.

Sounds good?

@kirillrogovoy
Copy link
Contributor

Shamelessly pinging you guys! 🙂
@devongovett @mischnic

@devongovett devongovett merged commit 03fdcfd into parcel-bundler:master Mar 6, 2019
@mischnic mischnic mentioned this pull request Mar 18, 2019
@tomfinney
Copy link

tomfinney commented Mar 30, 2019

Is there a way to opt out of this or something? I was importing markdown files with a glob import like

import foo from "/markdown/*.md";
// {
//   'file-1': '/file-1.8e73c985.md',
//   'file-2': '/file-1.8e73c985.md'
// }

Now, instead of file paths for each markdown file, I get the entire contents of the markdown file parsed as HTML which is cool but the meta data for each md file is now in the HTML body.

@kirillrogovoy
Copy link
Contributor

Hey @tomfinney,

Thanks for reporting this.

I'll try to look into this soon.

  1. Could you, please describe the sort of meta data you used and which is now inaccessible?
  2. The old and new behaviors aside, what would be the perfect interface for your use case?

@tomfinney
Copy link

Hi @kirillrogovoy

I was using the YAML front matter style to prepend markdown files with some meta data based on: https://jekyllrb.com/docs/front-matter/

I have an example of one of my files here: https://github.com/tomfinney/website/blob/master/src/markdown/blogs/01_new_website.md

I'm not really sure if using the YAML style for storing meta data in a file is standard so I guess it would make sense that it would be parsed as HTML. It's just now when I import a markdown file, I have no way of splitting the metadata from the contents unless I add some special delimiter characters around them.

Originally, I was fetching the contents of the markdown file and the splitting on the --- and using a YAML parser to convert the meta data to an object.

So I guess the perfect interface for my use case would be that if I were to use a glob import, it would still return the keyed object of the file name to the file paths so I can choose how to process the files.

@kirillrogovoy
Copy link
Contributor

I see.

Would it work for you if import resulted in a keyed object containing the parsed metadata and the parsed HTML?

I'm planning on adding the front-matter support out of the box.

@tomfinney
Copy link

I was just writing another comment about how that would actually be the best solution. I'm essentially just replicating front matter at the moment so if that was supported out of the box, it'd be perfect.

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.

None yet

6 participants