Intro

I would like to call it Remote Compile Service, RCS.

Table of Contents

Why?

You might ask : why esm.sh not work? Actually, it works, but needs extra setup, to use esm or build from import { build } from 'https://esm.sh/build, the code needs function from crypto Web API which only enabled under HTTPS, which is not that convinent for my need.

Why not just setup a server that help you transpile the TSX or typescript code to normal JS?

How?

The basic target is just: Transpile React Code to Pure JS to direct run in browser, as we all know that, JSX isn’t part of the ECMAScript standard, and browsers can’t execute it directly. So we have typescript, babel, swc, oxc, etc. to help us transpile the code to make it run in the browser.

The path is clear now.

Use Typescript to transpile

At first, I give typescript a try, and it is simple, install the typescript package, copy the tsconfig.json from another project, and write code like this:

const { options, errors } = convertCompilerOptionsFromJson(
  {
    target: "ES2020",
    lib: ["DOM", "ES2020"],
    module: "ESNext",
    jsx: "react-jsx",
    noEmit: true,
    strict: true,
    skipLibCheck: true,
    isolatedModules: true,
    resolveJsonModule: true,
    moduleResolution: "bundler",
    useDefineForClassFields: true,
    allowImportingTsExtensions: true,
  },
  "."
);
const code = transpile(sourceCode, options);

!NOTICE, for free plan, you have to reduce the worker JS size, the tree shaking could be the standard way of optimizing the output code size, to use it, simply add --minify args for the wrangler.

After tree shaking, the output zipped js size down to 978.89KiB, which can deploy on the free plan of Cloudflare Worker.

Sucrase

Surcase is another choice, it aims to provide another babel experience, without checking the type, language features, which makes it much faster then original babel.

[WIP]

SWC

Using SWC is another idea as Rust is the first class citizen of Cloudflare Worker.

[WIP]

Extra: Supporting Shadcn/ui

Shadcn/ui could be current the best choice for building modern app, it gives you full controls, integrated with Next.js native.

…[WIP]