'$' breaks replacement in page when running the CLI

[awcodes]

When having code blocks that have '$' in them the CLI run breaks and causes unexpected output in the html file.

use Filament\Forms\Components\TextInput;

TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '$', thousandsSeparator: '.', decimalPlaces: 2))

[michael-mcgreal]

testing note: when using torchlight-cli on javascript code <pre><code data-language='js'></code></pre>, the $ character works as expected (so this problem might be language specific)

[awcodes]

Thanks for the reply. Are there any know caveats with mdx? I'm getting the issue in Astro with mdx.

[awcodes]

Here's the output html it's running against:

<pre><code class="language-php">use Filament\Forms\Components\TextInput;

TextInput::make(&#39;cost&#39;)-&gt;mask(fn (TextInput\Mask $mask) =&gt; $mask-&gt;money(prefix: &#39;$&#39;, thousandsSeparator: &#39;,&#39;, decimalPlaces: 2))
</code></pre>
<p>You can also control whether the number is signed or not. While the default is to allow both negative and positive numbers, <code>isSigned: false</code> allows only positive numbers:</p>
<pre><code class="language-php">use Filament\Forms\Components\TextInput;

TextInput::make(&#39;cost&#39;)-&gt;mask(fn (TextInput\Mask $mask) =&gt; $mask-&gt;money(prefix: &#39;$&#39;, thousandsSeparator: &#39;,&#39;, decimalPlaces: 2, isSigned: false))
</code></pre>
<h3 id="datalists">Datalists</h3>
<p>You may specify <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist">datalist</a> options for a text input using the <code>datalist()</code> method:</p>
<pre><code class="language-php">TextInput::make(&#39;manufacturer&#39;)
    -&gt;datalist([
        &#39;BWM&#39;,
        &#39;Ford&#39;,
        &#39;Mercedes-Benz&#39;,
        &#39;Porsche&#39;,
        &#39;Toyota&#39;,
        &#39;Tesla&#39;,
        &#39;Volkswagen&#39;,
    ])
</code></pre>

[michael-mcgreal]

Hey again @awcodes.

Just to confirm, are you providing torchlight-cli an html file (output from astro), or mdx? If you are providing it mdx, the remark-torchlight package might be better.

I am still testing this myself, but here is what I've learned so far. Maybe something will be useful:

• I'm using nextjs, which also outputs html files (and an associated javascript file). So originally, I was providing torchlight-cli a path to the files output by nextjs build command. The torchlight-cli successfully transformed the HTML files, for javascript code blocks. The secondary nextjs specific problem though is that nextjs also generates an associated javascript file for every html file. This javascript file is used as "instructions" for react to 'hydrate' the client. Therefore, when the browser initially painted the page, the beautiful torchlight html code was shown. But when react rehydrated it using the javascript instructions file (based on the html before torchlight modified it), the torchlight HTML was overwritten, and a hydration mismatch error was thrown. This seems irrelevant to Astro, since I think it does not require hydration on the client. Nice! So if you can run torchlight-cli on the output astro files (maybe after some 'astro build' type command), then maybe it could work.
• In my attempt to solve the above nextjs issue, I started testing remark-torchlight. Under the hood, remark-torchlight is also using the torchlight-cli. The difference is that remark-torchlight accepts input as markdown (via unified abstract syntax trees), transforms it to html, and then inputs it to torchlight-cli (since torchlight-cli requires input as html). I had to re-write my source as markdown files, but it works! there are a few gotchas with remark-torchlight@0.0.2 that I'm currently exploring here. But it definitely works with .md files! So this could work for your Astro site. Are you using any unified or remark plugins already?
• Now I have reached your problem space because I'd also like to implement .mdx files (not being able to add components to markdown files is a real problem!). After reading .mdx documentation, I see that it uses a slightly different Abstract Syntax Tree than regular .md files. Regular .md uses mast (markdown abstract syntax tree); whereas .mdx uses mdast, which is an extension of mast. Though, I think it might be as simple as adding this remark-mdx plugin to the unified chain!

Sorry I don't have a better answer yet, but I will let you know as soon as I test this remark-mdx plugin. Within the next few days.

[awcodes]

Yea. I'm running it after the build against the dist html files.

Also ran into the same issue you did with nextjs.

[awcodes]

Also just kinda want to run it after the build so it's not possibly getting throttled during dev with hmr, etc.

Thanks for taking the time to help though.

[tonypartridge]

+1 on this is anyone can find a solution.

[danharrin]

For clarification, it's not $, its ('$') as a combination