A glance at the Rust SWC

A glance at the SWC
Speedy web compiler - written in Rust

About
- An extensible Rust-based platform for the next generation of fast developer
tools
- Main features: transform (to ecma targets, add new syntaxes,... ),
bundling(swcpack - still in development), ast parser,
- Used by tools like Next.js, Parcel, and Deno, the list goes on
- Used by companies like Vercel, ByteDance, Tencent, Shopify, etc.
*** SWC is 20x faster than Babel on a single thread and 70x faster on four cores.
(according to swc.rc)

Why SWC (pros)
Extensibility: allow extend features with plugin, in js(have bottleneck issue) or in rust
Performance: see page 2. (picture below: benchmarks for transform to es5)
WebAssembly: support for WASM => super fast even in browser environment
Community: ecosystem are bing and still expanding.

Why not SWC (cons)
Rust is new to learn:
Challenging learning curve —>
Bottleneck with other tools:
It can make the build process faster, but it may
not, if we have still Webpack, legacy babel
loaders, or swc js plugin in the pipe, to do
some work.
Source: humb1t

Why not SWC (cons)
Rust is new to learn:
Challenging learning curve —>
Bottleneck with other tools:
It can make the build process faster, but it may
not, if we have still Webpack (or with some
legacy babel loaders) in the pipe, to do some
work.
Source: humb1t

How SWC runs in Node/ Browser
On Nodejs:
using Foreign Function Interface (via Node C++ AddOn, https://nodejs.org/api/addons.html)
On Browser:
Rust core => Wasm => run directly in browser(see @swc/wasm )

plugin: javascript plugin
- Like babel plugin, but interfaces are not
- Have bottleneck issue: because the core which is written in rust has a high
performance but js plugin, which traveling on AST, is not
- Showcase: @formatjs/swc-plugin

Native Rust plugins
Extend from babel: see https://swc.rs/docs/migrating-from-babel
Provide from swc_project: see github.com/swc-project/plugins
Custom plugins:
=> To have a glance: let’s make one simple plugin

Example and practice
Setup env:
# install rust via rustup
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# install rust cli
cargo install swc_cli
# VSCODE setup rust language server
code --install-extension rust-lang.rust-analyzer

clone source plugin source code
# for quicker setup, clone this repository:
github.com/cute-me-on-repos/test-ts-miniapp.git
git checkout -b main/<.>

Init source plugin source code (target wasm32-wasi):
# init plugin with the name “tini-swc-plugin”:
swc plugin new --target-type wasm32-wasi tini-swc-plugin;
rustup target add wasm32-wasi # add target
cd tini-swc-plugin

Explaining simple example from document:
https://swc.rs/docs/plugin/ecmascript/getting-started
Then write our own one —> next page

# Practice problem:
Problem:
We want to limit some of the web Apis that users want to access in tini app;
Write a swc rust plugin to travel the AST of 1 js file and replace all statements
(include [`this`, `self`, `global`]) that refer to the global scope, except `this`
of Component/Page/App, with `(void 0)`(undefined).
Requirement: quick docs researching skill =))

# input:
```js
this;global; // thoses should be remove
global.unAllowWebApiCall();
(function unknow(){
this.unAllowWebApiCall();
})();
Page({
onLoad(){this.setData({value:”hi”})}
})
```

# output:
```js
(void 0);(void 0);
(void 0).unAllowWebApiCall();
(function unknow(){
(void 0).unAllowWebApiCall();
})();
Page({
onLoad(){this.setData({value:”hi”})}
})
```

Speed up Jest
In jest-transform pipe.

Addition: Rust to Wasm
- Light weight: rust have no GC -> not need to re-create GC in wasm like others
- Fast, safe, simple -> compare to cpp

? should
ArrayBuffer to transferring data between web contexts

A glance at the Rust SWC

More Related Content

Similar to A glance at the Rust SWC (20)

Recently uploaded (20)

A glance at the Rust SWC