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

Example tag hover support #763

Merged
merged 4 commits into from
Feb 7, 2025
Merged

Example tag hover support #763

merged 4 commits into from
Feb 7, 2025

Conversation

EvilGenius13
Copy link
Contributor

@EvilGenius13 EvilGenius13 commented Feb 5, 2025

What are you adding in this PR?

Closes: https://github.com/Shopify/developer-tools-team/issues/529

Add hover support for @example in liquid {% doc %} tags.

Along with parameter hover introduced in #703, we are adding support for examples.

Example product card snippet:

{% doc %}
  @param {String} title - The title of the product
  @param {Number} border-radius - The border radius in px
  @example
  {% render 'product-card', title: 'Product Title', border-radius: 10 %}
  @example
  {% render 'product-cards', title: 'Product Title', border-radius: 20 %}
{% enddoc %}

<div class="product-card" style="border-radius: {{ border-radius }}px">
  <h2>{{ title }}</h2>
</div>

Hovering over the render snippet will look like:
image

Before you deploy

  • I included a minor bump changeset
  • My feature is backward compatible

@EvilGenius13 EvilGenius13 added the #gsd:44310 LiquidDoc label Feb 5, 2025
@EvilGenius13 EvilGenius13 force-pushed the example-tag-hover-support branch from e14c075 to 15b7590 Compare February 5, 2025 20:28
@EvilGenius13 EvilGenius13 marked this pull request as ready for review February 5, 2025 21:27
@EvilGenius13 EvilGenius13 requested a review from a team as a code owner February 5, 2025 21:27
Copy link
Contributor

@aswamy aswamy left a comment

Choose a reason for hiding this comment

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

Tophat went great Josh!

image

@@ -60,6 +60,14 @@ export class RenderSnippetHoverProvider implements BaseHoverProvider {
parts.push('', '**Parameters:**', parameters);
}

if (liquidDoc.examples?.length) {
const examples = liquidDoc.examples
?.map(({ content }) => `\`\`\`liquid\n${content.trimStart().trimEnd()}\n\`\`\``)
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure about this .trimStart().trimEnd() - I get why you're doing it but seems clunky that we would have to worry about "examples" having extra spaces. Could we modify LiquidDocExampleNode in liquidDoc.ts so that we always trim the string for content. That way, we would never have to worry about it in the provider flow.

);
LiquidDocExampleNode(node: LiquidDocExampleNode) {
return {
content: node.exampleContent.value,
Copy link
Contributor

Choose a reason for hiding this comment

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

Actually, we might have to be a bit smarter than just trimming the string. When we have an example written like the following, trimming the leading+trailing spaces will end up looking like the 2nd picture.
image
image

Instead, we should see how many space characters are leading the first line, then remove that many spaces for each line in the example. This also means that you need to update the prettier rule so that we allow format on save. What do you think?

cc: @jamesmengo

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Great thought. thanks @aswamy. I think I want to have a bigger chat surrounding how we format our prettier rules and what we want to get out of the example tags.

Copy link
Contributor

Choose a reason for hiding this comment

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

If you want, you can separate multi-line example support and multi-line param support into another ticket. I assume they would encounter the same formatting issues.

Copy link
Contributor

@EvilGenius13 +1 to Alok's comment - though I agree we can follow up with that:

Follow up with a change that:

  • Removes trimEnd and trimStart in the hover provider
  • changes the prettier printing to just consider the raw example input

I have an example here

I'll document this in our decision log.

@EvilGenius13 EvilGenius13 force-pushed the example-tag-hover-support branch 3 times, most recently from 16a33f9 to 3444477 Compare February 7, 2025 15:21
@EvilGenius13 EvilGenius13 force-pushed the example-tag-hover-support branch from 3444477 to d628ec8 Compare February 7, 2025 19:01
@EvilGenius13 EvilGenius13 merged commit bffb95b into main Feb 7, 2025
6 checks passed
@EvilGenius13 EvilGenius13 deleted the example-tag-hover-support branch February 7, 2025 19:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:44310 LiquidDoc
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants