TypeScript Can Read Your Weird Files

Today’s issue: JPEG’s new t-shirt size, a TypeScript pregnancy test, and a classic case of bundle phobia.

Welcome to #533.

---

TypeScript Can Read Your Weird Files:

What happens when you give a bunch of millennial JavaScript developers White Monsters, gas station Tornados, and access to the internet? They’re going to try and stick their JavaScript into every imaginable type of file, which explains why .jsx, .mdx, .astro, .svelte, and .vue exist.

But as we “matured” into TypeScript developers, this created a bunch of problems. In order to type check these random file types, you either needed to wrap the compiler and ship something like vue-tsc or use a project like @volar/typescript to build a language server for your project. That was until TypeScript 7.1 beta shipped this past week, which introduced a new feature called Content Mappers.

What are content mappers?

Content mappers are a new type of plugin that teaches TypeScript how to translate an arbitrary file type into a virtual TypeScript file that the type checker can use. It’s what powers reylo’s type inference for .sql files.

Here’s how they work:

• Register a mapper: Content mappers are added via tsconfig.json and specify the file extensions they are designed to handle. They are then executed by running tsc --runExternalCode.

• Transform the source: The mapper converts matching files into virtual TypeScript files with references to the original source. If you’re code curious, here’s an example for HTML.

• Check the types: TypeScript checks the virtual files and uses span mappings to report errors at the correct locations in your original file. These mappings also enable code completions, hover hints, and click-to-definition navigation (if anyone still uses their IDE).

Bottom Line: Content mappers are TypeScript’s midlife crisis marathon: you atone for the sins of your past, but it’s maybe a few years too late for it to really matter 🫠.

---

Fewer findings. Only real risks.

AI-generated code can introduce vulnerabilities that are easy to miss in a pull request. CodeRabbit Security continuously reviews your codebase for complex bugs and security risks, using full-codebase context to follow data flows, dependencies, and patterns beyond the latest diff.

Run CodeRabbit Security on your own repositories today

---

function buildSearchUrl(tags) {
  const params = new URLSearchParams();
  tags.forEach((tag) => params.set("tag", tag));
  return `/search?${params}`;
}

console.log(buildSearchUrl(["js", "ts"]));

---

1. Tanner released the well-named redact, a smaller, synchronous version of React, for those of you who still suffer from bundle phobia.

2. Jeff Lindsay created webframe, a tool that lets you run browser-dependent scripts from the command line.

3. Equip your AI on Apify for Black Friday and get live prices, availability, and ratings from Amazon, Walmart, eBay, or any other online store. Use code BYTES for $25 in credits. [sponsored]

4. Remix released version 3.1, patching up some post-launch issues and making it faster so now it’s really actually ready… probably.

5. Jake Archibald explains when to use JPEG XL rather than AVIF in his latest blog post. JPEG is also wearing size XL? The post-COVID years have been rough for all of us.

6. James Long compared Rune’s text render to macOS text rendering, pixel by pixel. Developers with OCD are the best.

7. Hyperagent lets you hire AI staff to take on roles across your business. They run in the cloud with their own browser, shell, and file system, connect to your tools, and hand work off to each other. Your whole team can work with the same agents—not just the person who set them up. [sponsored]

8. Shu Ding, inspired by Cheng Lou’s latest wizardry, compiled a dashboard UI into a single math function giving new meaning to the trope UI = fn(state).

9. Firefox 159 is out, which means scroll-driven-animations are now supported in all major browsers. I think this is a good thing.

10. Your code has bugs. Sentry finds them, figures out what caused them, and helps your agents fix them. [sponsored]

11. Vercel Labs created wterm, a terminal emulator for the web that renders DOM so text selection actually works 🥲.

12. tsts is another slopfork of the TypeScript compiler, but this time it’s running inside TypeScript’s own type system? I think this is the equivalent of Doom running inside of a pregnancy test.

---

The URL only contains tag=ts. URLSearchParams.set() replaces the previous value for a key, so the second tag overwrites the first. Use append() to keep both values:

function buildSearchUrl(tags) {
  const params = new URLSearchParams();
  tags.forEach((tag) => params.append("tag", tag));
  return `/search?${params}`;
}

console.log(buildSearchUrl(["js", "ts"]));