@shopify/swcify

SWCify

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 with a 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.

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.

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.

// 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 and run:

   yarn install

2. Set up Rust

   • Install Rustup

   • 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 for a full breakdown of releasing a new version of the package.