🐛 BUG: Code block opening brackets are replaced with `ASTRO_ESCAPED_LEFT_CURLY_BRACKET` in `[...rest].astro` files

[okikio]

What package manager are you using?

pnpm

What operating system are you using?

Linux

Describe the Bug

Markdown doesn't properly escape curly braces, e.g.

// There is,
//      .cjs - Common JS Module
//      .mjs - Modern ES Module
//      .js - UMD
import ASTRO_ESCAPED_LEFT_CURLY_BRACKET Manager } from "@okikio/manager";
import ASTRO_ESCAPED_LEFT_CURLY_BRACKET Manager } from "https://unpkg.com/@okikio/manager";
import ASTRO_ESCAPED_LEFT_CURLY_BRACKET Manager } from "https://cdn.jsdelivr.net/npm/@okikio/manager";
// Or
import ASTRO_ESCAPED_LEFT_CURLY_BRACKET Manager } from "https://cdn.skypack.dev/@okikio/manager";

// Via script tag
<script src="https://unpkg.com/@okikio/manager/lib/api.js"></script>
// Do note, on the web you need to do this, if you installed it via the script tag:
const ASTRO_ESCAPED_LEFT_CURLY_BRACKET Manager, methodCall } = window.manager;
// or
const ASTRO_ESCAPED_LEFT_CURLY_BRACKET default: Manager, methodCall } = window.manager;

My astro config file is,

export default {
    // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
    pages: './docs', // Path to Astro components, pages, and data
    // dist: './dist',       // When running `astro build`, path to final static output
    // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
    buildOptions: {
      site: 'https://okikio.github.io/native',  // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
      // sitemap: true,      // Generate sitemap (set to "false" to disable)
    },
    devOptions: {
      // port: 3000,         // The port to run the dev server on.
      tailwindConfig: './tailwind.config.cjs', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
    },
    renderers: ['@astrojs/renderer-solid'],
  };

and, no, this is a different issue, as I am currently running Astro@0.19.1

Steps to Reproduce

1. pnpm i astro@^0.19.1 @astrojs/renderer-solid@^0.1.0 -D
2. mkdir src
3. Create an astro.config.mjs with

   export default {
   // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
   // pages: './docs', // Path to Astro components, pages, and data
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
     site: 'https://okikio.github.io/native',  // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     // sitemap: true,      // Generate sitemap (set to "false" to disable)
   },
   devOptions: {
     // port: 3000,         // The port to run the dev server on.
     tailwindConfig: './tailwind.config.cjs', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
   renderers: ['@astrojs/renderer-solid'],
   };

4. cd src/pages && echo "## index.md" > index.md
5. Add this code into index.md as a code block, just like this:

   
   // There is,
   //      .cjs - Common JS Module
   //      .mjs - Modern ES Module
   //      .js - UMD
   import { Manager } from "@okikio/manager";
   import { Manager } from "https://unpkg.com/@okikio/manager";
   import { Manager } from "https://cdn.jsdelivr.net/npm/@okikio/manager";
   // Or
   import { Manager } from "https://cdn.skypack.dev/@okikio/manager";

// Via script tag

// Do note, on the web you need to do this, if you installed it via the script tag: const { Manager, methodCall } = window.manager; // or const { default: Manager, methodCall } = window.manager;

5. `astro dev`
6. Error! I would just expect the curly braces to remain without being removed
> _**Note**: you have to open [http://localhost:3000](http://localhost:3000) in the browser for the error to appear._

### Link to Minimal Reproducible Example (Optional)

_No response_

[jonathantneal]

Hey @okikio, I had been working on this. I’m sorry you’re having issues.

So, I’m having some trouble reproducing your issue. Would you mind looking over my reproduction and letting me know what we might be doing differently than each other?

• GitHub: https://codesandbox.io/s/github/jonathantneal/astro-issue-leftcurlybrace
• CodeSandbox: https://codesandbox.io/s/github/jonathantneal/astro-issue-leftcurlybrace

[okikio]

You can see a demo of this error here: Website: https://nativejs.netlify.app/manager/ Github: https://github.com/okikio/native/tree/beta/src/pages

[jasikpark]

nooooo I was really hoping I could just comment "just update to 0.19.1" 😆

[okikio]

I was able to create a simpler example, https://codesandbox.io/s/astro-curly-braces-bug-wyjc9. Astro currently has a bug where [...page].astro doesn't transform docs/animate/index.astro to docs/animate/ in the URL when using the getStaticPaths() method, so, you will need to add /index to the url e.g. https://.../index, https://wyjc9.sse.codesandbox.io/index

[okikio]

@jonathantneal Was able to create an even smaller reproduction, https://codesandbox.io/s/github/jonathantneal/astro-issue-leftcurlybrace?file=/src/pages/index.astro with a pull-request in the works #1186

[tbjgolden]

I'm also getting this issue:

It seems to happen here in this code block but not with ASTRO_ESCAPED_LEFT_CURLY_BRACKET

Worth noting that am having to call import { renderMarkdownWithFrontmatter } from '@astrojs/markdown-support' directly to work around a separate issue with markdown on my mac

[tbjgolden]

Source markdown

This is a normal paragraph:

    This is a code block.

Here is an example of {{JavaScript}}:

```
function jsBoi(arg1, arg2) {
  console.log(window.location.href);
}
```

[pyronaur]

Seeing the same issue as well in astro@next:

Markdown code:

\```php
$denmark = array(
  array('København', 1000, 1799),
  array('Frederiksberg', 1800, 2999),
  array('Nordsjælland', 3000, 3699),
  array('Bornholm', 3700, 3799),
  array('Færøerne', 3800, 3899),
  array('Grønland', 3900, 3999),
  array('Øvrige Sjælland', 4000, 4999),
  array('Fyn', 5000, 5999),
  array('Sønderjylland', 6000, 6999),
  array('Vestjylland', 7000, 7999),
  array('Østjylland og Midtjylland', 8000, 8999),
  array('Nordjylland', 9000, 9999)
);

function getStuff() { 
  return 'yes';
}
\```

\(minus the backslashes)

Renders as:

[theor]

same issue with astro 0.20.9.

my markdown: ```csharp public class FormulaTest : MonoBehaviour { public Formula Test; private EvaluationGraph _evalgraph; ```

my astro: [slug.astro]

---
import Layout from '../../layouts/BlogPost.astro';
import slug from 'slug';

export function getStaticPaths() {
    let allPosts = Astro.fetchContent('../../posts/**/*.md');
    const posts = allPosts.map(({astro, url, file,...page}) => {
        const slugurl = slug(page.title);
        return {
            params: {slug: slugurl},
            props: {
                page: {
                    ...page
                },
                html: astro.html
            }
        }
    }).filter(({ params }) => !!params.slug);

    return posts;
}

const content = Astro.props;
---
{content.html}

Hope that help. I started from the blog template.

[theor]

more info: what inserts that specific ASTRO_ESCAPED_LEFT_CURLY_BRACKET is rehypeCodeBlock in @astrojs\markdown-support\dist\codeblock.js.

it's still here in astro\dist\compiler\codegen\index.js in asyncWalk. the node containing it is this one (result of JSON.stringify):

{
    "type": "Attribute",
    "name": "code",
    "value": [
        {
            "type": "MustacheTag",
            "expression": {
                "type": "Expression",
                "codeChunks": [
                    "`public class FormulaTest : MonoBehaviour\nASTRO_ESCAPED_LEFT_CURLY_BRACKET\u0000\n    public Formula Test;\n`"
                ],
                "children": []
            }
        }
    ]
}

the full? hierarchy at this point:

{
    "start": 1488,
    "end": 2072,
    "type": "Fragment",
    "children": [
        {
            "start": 1589,
            "end": 1871,
            "type": "Element",
            "name": "p",
            "attributes": [],
            "children": [
                {
                    "start": 1592,
                    "end": 1867,
                    "type": "Text",
                    "raw": "Today I’m excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:",
                    "data":"Today I’m excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including: "}]
        },
        {"start":1871,"end":1872,"type":"Text","raw":"\n","data":"\n"},
        {"start":0,"end":0,"type":"InlineComponent","name":"Prism","attributes":[
            {"type":"Attribute","name":"lang","value":[
                {"type":"Text","raw":"csharp","data":"csharp"}
            ]},
            {"type":"Attribute","name":"class","value":[
                {"type":"Text","raw":"","data":""}
            ]},
            {"type":"Attribute","name":"code","value":[
                {"type":"MustacheTag","expression":
                    {"type":"Expression","codeChunks":
                        ["`public class FormulaTest : MonoBehaviour\nASTRO_ESCAPED_LEFT_CURLY_BRACKET\u0000\n    public Formula Test;\n`"],
                        "children":[]
                    }
                }
            ]}
        ],
        "children":[]}
    ]
}

asyncWalk is not replacing it. there is a case in the switch where it does, but that code is not executed at this point:

switch (node.type) {
    // ...
    case "Text": {
        // ...
        if (parent.name === "code") {
              text = node.raw.replace(/ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0/g, "{");
        }

when in that case, the deepest visitor used is in async leave(node, ...) { case "InlineComponent":.

[theor]

why does the result of convertMdToJsx contains both a js var content and html, and both have the same code block in it ? notice how public void F() appears THREEE TIMES in there, and two of them still have the ASTRO_ESCAPED_LEFT_CURLY_BRACKET

---
const __layout = undefined;
export const __content = {
  "title":"Introducing Astro: Ship Less JavaScript",
  "description":"We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.",
  "publishDate":"Tuesday, June 8 2021",
  "author":"fred","heroImage":"/social.jpg","alt":"Astro",
  "astro":{"headers":[],
           "source":"\r\nThere's a simple secret to building a faster website — _just ship less_.\r\n\r\n```csharp\r\npublic void F() {  }\r\n```","html":"<p>There’s a simple secret to building a faster website — <em>just ship less</em>.</p>\n<pre class=\"language-csharp\" lang=\"csharp\"><code class=\"language-csharp\" lang=\"csharp\">public void F() ASTRO_ESCAPED_LEFT_CURLY_BRACKET\u0000  }\n</code></pre>"}};
---
<p>There’s a simple secret to building a faster website — <em>just ship less</em>.</p>
<pre class="language-csharp" lang="csharp"><code class="language-csharp" lang="csharp">public void F() ASTRO_ESCAPED_LEFT_CURLY_BRACKET

[polpielladev]

I am still seeing this issue on latest stable version (0.20.12), is there any update on whether this is being looked at?

I can see that there was a PR (https://github.com/snowpackjs/astro/pull/1186) which has now been closed unsuccessfully. Does anyone have any updates/solutions to this? Thanks a lot in advance! 🙇

[IanVS]

I'm hitting this as well in 0.20, but the reproduction from @okikio seems to be fixed when updated to astro@0.21.0-next.2: https://codesandbox.io/s/astro-1184-jn9du.

[okikio]

@IanVS I think this might have been fixed in astro@0.21.0-next.2, I could be wrong though

[okikio]

@natemoo-re Is this fixed in astro@0.21.0-next.2?

[polpielladev]

I have just tested my site with astro@0.21.0-next.2 and it looks like the ASTRO_ESCAPED_LEFT_CURLY_BRACKET is gone 🎉

[natemoo-re]

Yes, it sure should be! There are no more references to ASTRO_ESCAPED_LEFT_CURLY_BRACKET or other hacks in our codebase. This bug should be good and dead.

Thanks for the patience, y'all!

[okikio]

Ok, @natemoo-re should I close this issue

[FredKSchott]

Yes! woo!

[okikio]

@FredKSchott Oh my god, yes! This bug is dead.