npm package: @shopify/swcify
Description: [![Build dist binaries](https://github.com/Shopify/swcify/actions/workflows/build_and_commit_binaries.yml/badge.svg)](https://github.com/Shopify/swcify/actions/workflows/build_and_commit_binaries.yml) [![JS tests](https://github.com/Shopify/swcify/actions
Latest version: 0.1.17

# SWCify

[![Build dist binaries](https://github.com/Shopify/swcify/actions/workflows/build_and_commit_binaries.yml/badge.svg)](https://github.com/Shopify/swcify/actions/workflows/build_and_commit_binaries.yml)
[![JS tests](https://github.com/Shopify/swcify/actions/workflows/js_test.yml/badge.svg)](https://github.com/Shopify/swcify/actions/workflows/js_test.yml)

## What is this?

SWCify aims to bring fast modern JS builds to everyone using Shopify's tools, with a focus on providing support for our largest codebases (eg. Web.)

To accomplish this, we wrap [SWC](https://github.com/swc-project/swc) with a [napi-rs](https://github.com/napi-rs/napi-rs) package implementing custom transforms for Shopify.

In addition to the core JS wrapper, we also provide:

- A webpack loader
- A jest transformer

## How do I use it?

Most users will simply want to use the webpack and jest plugins.

### Webpack

Add the loader for your source files.

```ts
module: {
  rules: [
    {
      test: /\.(t|j)sx?$/,
      exclude: /node_modules/,
      use: {
        loader: '@shopify/swcify/webpack',
        options: {
          jsc: {
            parser: {
              tsx: true,
              decorators: true,
              dynamicImport: true,
              syntax: 'typescript',
            },
          },
        },
      },
    },
  ];
}
```

### Jest

Add the transformer for your source files.

```ts
transform: {
  '^.+\\.tsx?$': [
    '@shopify/swcify/jest',
    {
      jsc: {
        externalHelpers: false,
        parser: {
          syntax: 'typescript',
          tsx: true,
          decorators: true,
        },
      },
      module: {
        type: 'commonjs',
      },
    },
  ],
},
```

### Sewing-Kit

Add the transformer to your config by hooking into the relevant plugin and overriding the config.

```ts
// sewing-kit.config.ts
export default function sewingKitConfig(plugins: Plugins, env: Env) {
  /* rest of SK config */

  plugins.webpack((config) => {
    config.module.rules = config.module.rules.map((rule) => {
      if (rule.test.toString().includes('.tsx')) {
        const loader = '@shopify/swcify/webpack';
        rule.use[0] = {
          loader,
          options: {
            swc: {
              jsc: {
                parser: {
                  tsx: true,
                  decorators: true,
                  dynamicImport: true,
                  syntax: 'typescript',
                },
              },
            },
          },
        };
      }
    });
  });
}
```

## Development

### Installing the build toolchain

1. [Install Yarn](https://classic.yarnpkg.com/lang/en/docs/install) and run:

   `yarn install`

2. Set up Rust

   - [Install Rustup](https://www.rust-lang.org/tools/install)
   - You'll need the Rust nightly version listed in `rust-toolchain` in order to build this project. To install:

     `rustup toolchain install nightly`

     or set as default with:

     `rustup default nightly`

3. **macOS:** You may need to install dev tools/dependencies with:

   `xcode-select --install`

4. Build with:

   `yarn build`

### Using locally from a Node.js project

This package is currently not deployed anywhere, so there is a fairly manual process to use it.

- clone the repo
- Set up the build toolchain (see above)
- make your code changes
- `npx yalc publish`
- in your other repo `npx yalc install`
- `require('swcify')`;

> Note: If you want to run yalc without automatically building, use `npx yalc publish --no-scripts`

### Running Rust tests

To run rust tests use: `cargo test` or `yarn test:native`

### Running JS tests

You can run tests against JS changes without building using `yarn test:js`, but if you want to E2E test rust changes make sure to use `yarn build:rust dev` first.

### Releasing

See the [release guide](https://github.com/Shopify/swcify/blob/main/RELEASE.md) for a full breakdown of releasing a new version of the package.