Describe the Bug Object keys inside the JSX {} dynamic operator ar

Minimal repro: <div class="highlight highlight-source-astro notranslate position-r

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

🐛 BUG: Object keys inside the JSX {} dynamic operator aren't highlighted about language-tools HOT 4 CLOSED

withastro commented on August 24, 2024

🐛 BUG: Object keys inside the JSX {} dynamic operator aren't highlighted

from language-tools.

Comments (4)

RafidMuhymin commented on August 24, 2024

Minimal repro:

---
// Please view the code in VSCode. Highlighting in GitHub is different from VSCode
import { SEO } from "astro-seo";
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- The the keys and child keys inside the openGraph object prop aren't highlighted. However, the GitHub highlighter properly highlights them. -->
    <SEO
      title="Francis York Morgan"
      description="Agent"
      canonical="Zach"
      openGraph={{
        basic: {
          title: "Tinker Tailor Soldier Spy",
          type: "book",
          image:
            "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
          url: "smiley",
        },
        article: {
          publishedTime: "2021-09-22",
          modifiedTime: "2021-09-22",
          expirationTime: "2021-09-22",
          authors: ["Smiley", "Control"],
          section: "Literature",
          tags: ["Spy fiction", "Thriller"],
        },
      }}
    />
  </head>
  <body>Test</body>
</html>

from language-tools.

RafidMuhymin commented on August 24, 2024

Another good example:

(Please view the code in VSCode. GitHub highlights Astro code blocks differently than the VSCode extension)

---
const src = "https://picsum.photos/200/300";
const alt = "A random image";
const placeholder = "tracedSVG";

const traceOptions = {
  background: "#fff",
  color: "#000",
  turnPolicy: "black",
  turdSize: 1,
  alphaMax: 1,
  optCurve: true,
  threshold: 100,
  blackOnWhite: false,
};

const posterizeOptions = {
  fill: "spread",
  steps: [0, 50, 100],
  ranges: "equal",
};
---

<Image
  {src}
  {alt}
  {placeholder}
  formatOptions={{
    tracedSVG: {
      options: {
        background: "#fff",
        color: "#000",
        turnPolicy: "black",
        turdSize: 1,
        alphaMax: 1,
        optCurve: true,
        threshold: 100,
        blackOnWhite: false,
      },
    },
  }}
/>

<Image
  {src}
  {alt}
  {placeholder}
  formatOptions={{
    tracedSVG: {
      options: traceOptions,
    },
  }}
/>

<Image
  {src}
  {alt}
  {placeholder}
  // tracing SVG
  formatOptions={{
    tracedSVG: {
      function: "trace",
      options: traceOptions,
    },
  }}
/>

<Image
  {src}
  {alt}
  {placeholder}
  // posterizing SVG
  formatOptions={{
    tracedSVG: {
      function: "posterize",
      options: {
        ...traceOptions,
        ...posterizeOptions,
      },
    },
  }}
/>

from language-tools.

Princesseuh commented on August 24, 2024

This seems to have been fixed? There's still an issue with the usage of the word function, but you're not really supposed to use reserved names in general and that part I don't think is on us (inside expressions, we just use TSX's syntax)

Outside of that specific issue, the result shown is the same for me in both Astro and TSX files

from language-tools.

RafidMuhymin commented on August 24, 2024

@Princesseuh confirming that this issue has been fixed.

from language-tools.

Recommend Projects