feat: Support hide lines in remark-embed-snippet

[washingtonsoares]

For a more detailed explanation of this improvement, refer to the README.

This PR adds the ability to define rows to be hidden.

Given a file like this (eg examples/hello-world.js):

// hideline-range{1-3,9-11}
import React from "react"
import ReactDOM from "react-dom"

function App() {
  return (
    <h1>Hello world!</h1>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

Will generate a code like this:

This PR is related to PR #5619 and ReactJS.org PR reactjs/react.dev/pull/913

cc @cyan33

[cyan33]

The white space after the comma should be removed to keep consistency.

[cyan33]

Can you add a test case where hideline and highlight both exist?

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit 7324d39

https://deploy-preview-6084--gatsbygram.netlify.com

[gatsbybot]

Deploy preview for using-drupal ready!

Built with commit 7324d39

https://deploy-preview-6084--using-drupal.netlify.com

[cyan33]

I'm actually not quite sure about the expected behavior in the first place when we have both hideline and highlight-line at the same time. How should the number of hideline affect those in highlight-line?

Let's check with @bvaughn

[washingtonsoares]

@cyan33 I do not know if I understand correctly, but I believe the number of hidden lines should not influence the highlight line setting.

For example:

// hideline-range{1-3}
// highlight-range{4-8} - 
import React from "react"
import ReactDOM from "react-dom"

function App() {
  return (
    <h1>Hello world!</h1>
  )
}

Lines 1 to 3 will be hidden, so we could think of writing //highlight-range{1-5}. But I think it's more consistent to leave //highlight-range{4-8}.

[cyan33]

@washingtonsoares Agree. I've read the changes. Looks good to me. 👍

[pieh]

won't this url expire after some time?

[washingtonsoares]

Thanks @pieh! 🙂
I did not know that.

[bvaughn]

I was also not aware of that.

[pieh]

Oh, this was just question, not a statement - sorry for confusion here!

[bvaughn]

I think the expected behavior when highlight and hide lines overlap is ambiguous, and we should error if the ranges ever intersect.

[washingtonsoares]

@bvaughn I got it and come to think of it, it seems to make sense.

However in this case it is better to throw the exception or just console.error ?

[bvaughn]

I think it's better to error.

[washingtonsoares]

@bvaughn @cyan33 I have done the requested changes. 🙂

[pieh]

Could we display path to file that is offender here?

[washingtonsoares]

It sounds like a good idea.

[cyan33]

What about The range number of hide-lines and highlight-lines cannot be intersected. Check the file: ${path}.

[pieh]

I have question about DX - does this terminate both gatsby build and gatsby develop when "The range number of hide-lines and highlight-lines cannot be intersected" error is thrown? In general we want to terminate gatsby build on errors, but keep gatsby develop running so users can fix error without restarting it (but I guess this is tricky here, because I don't think hot reloading works for snippets content?)

[washingtonsoares]

@bvaughn @cyan33 What do you think ?

[pieh]

I feel like this is good to be merged now - is there anything else to do here?

[cyan33]

LGTM as well.

[KyleAMathews]

Deploy preview for using-postcss-sass failed.

Built with commit 7324d39

https://app.netlify.com/sites/using-postcss-sass/deploys/5b57b5b03813f0336b68bb8a