Update CLI tool to consider TSX code components for pull and Tailwind build
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3579866. -->
Reported by: [hooroomoo](https://www.drupal.org/user/3688872)
Related to !750
>>>
<h3 id="overview">Overview</h3>
<p>Canvas can support typescript code components now since <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3562289" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3562289</a></span> got in. </p>
<p>Found 2 cases so far within the CLI Tool where <code>.tsx</code> is not supported yet which we need to update.</p>
<p><strong>1. The new pull command <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3578246" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3578246</a></span> assumes every component is <code>.jsx</code> so when writing to the local codebase, it creates a <code>.jsx</code> file instead of <code>.tsx</code>.</strong></p>
<p><strong>2. In the build command, for <code>buildTailwindForComponents()</code> flow, where we create cache entries for Tailwind class scanning. The cache entries are currently hard-coded to only write a <code>.jsx</code> file and also reading cache entries are only reading <code>.jsx</code> files. See <code>downloadJsSourceFromCanvas</code> and <code>getClassNameCandidatesForComponent</code> respectively </strong></p>
<h3>Steps to reproduce</h3>
<p>Steps for #1<br>
1. Create a new code component using typescript (attaching sample component below but either hardcode the prop values or fill out the props in the code editor).<br>
2. Save the JS component entity by publishing<br>
3. Run <code>npm run build</code> inside of <code>/packages/cli </code><br>
4. Run <code>npm link</code><br>
5. In your code repository where you want to pull into, run <code>npm link @drupal-canvas/cli </code><br>
6. Run <code>npx canvas pull</code> in the code repository<br>
7. See that the component pulled in is an JSX file instead of TSX.</p>
<p>// Sample component</p>
<pre>export interface FeatureProps {<br> title: string;<br> description: string;<br> icon: string;<br> color?: 'indigo' | 'emerald' | 'rose'; // Tailwind color variants<br>}<br><br>const FeatureCard = ({ title, description, icon, color = 'indigo' }: FeatureProps) => {<br> const colorMap = {<br> indigo: 'bg-indigo-100 text-indigo-600',<br> emerald: 'bg-emerald-100 text-emerald-600',<br> rose: 'bg-rose-100 text-rose-600',<br> };<br><br> return (<br> <div className="p-6 bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all"><br> <div className={`w-12 h-12 ${colorMap[color]} rounded-lg flex items-center justify-center text-2xl mb-4`}><br> {icon}<br> </div><br> <h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3><br> <p className="text-gray-500 leading-relaxed">{description}</p><br> </div><br> );<br>};</pre>
> Related issue: [Issue #3578246](https://www.drupal.org/node/3578246)
issue