effector / swc-plugin-legacy

SWC plugin to efficiently work with effector
https://npmjs.com/@effector/swc-plugin
27 stars 3 forks source link

Effector SWC Plugin

[!CAUTION] This project is abandoned and not maintained anymore. Please use effector-swc-plugin instead.

Plugin for SWC which can be used to automatically change imports (scope/no scope), insert sids (for scope) or for debugging.

⚠️ Please notice, that SWC Plugin API itself is not stable yet ⚠️

This means that @effector/swc-plugin can and probably will be affected by breaking changes in the SWC Plugins API in the future. At the moment this plugins is seems to be stable enough. But if you need guaranteed stability - prefer effector/babel-plugin instead.

When SWC Plugin API will be stabilized, we will be able to declare @effector/swc-plugin as stable too.

Installation

You can use any package manager that you want. You also need to make sure that @swc/core is installed, no matter where are you calling the transforms from. Be it unplugin-swc or @swc/cli.

pnpm add -D @effector/swc-plugin @swc/core

or

npm add -D @effector/swc-plugin @swc/core

or

yarn add -D @effector/swc-plugin @swc/core

Usage

In the simplest case, it can be used without any configuration.

.swcrc

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": ["@effector/swc-plugin"]
    }
  }
}

Configuration

importName

Specify import name or names to process by plugin. Import should be used in the code as specifed.

factories

Accepts an array of module names which exports treat as custom factories therefore each function call provides unique prefix for sids of units inside them. Used to SSR(Server Side Rendering) and it's not required for client-only application (except if you want to test your app).

.swcrc

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        "@effector/swc-plugin",
        {
          "factories": ["src/createEffectStatus", "~/createCommonPending"]
        }
      ]
    }
  }
}

./src/createEffectStatus.js

import { rootDomain } from './rootDomain';

export function createEffectStatus(fx) {
  const $status = rootDomain.createStore('init').on(fx.finally, (_, { status }) => status);

  return $status;
}

./src/statuses.js

import { createEffectStatus } from './createEffectStatus';
import { fetchUserFx, fetchFriendsFx } from './api';

export const $fetchUserStatus = createEffectStatus(fetchUserFx);
export const $fetchFriendsStatus = createEffectStatus(fetchFriendsFx);

Import createEffectStatus from ./createEffectStatus was treated as factory function so each store created by it has its own sid and will be handled by serialize independently, although without factories they will share the same sid.

bindings

If scopeReplace is enabled for the view library, imports will be replaced from effector-{viewLib} to effector-{viewLib}/scope. This config might get additional fields (nested as well) later.

addNames

Add names to units factories calls. Useful for minification and obfuscation of production builds.

addLoc

Add location to methods' calls. Used by devtools, for example effector-logger.

debugSids

Add path of a file and a variable name whether a unit was defined to a sid. Useful for debugging SSR.

Bundlers

Vite + Solid (SSR)

To use vite + solidjs you have to do the following:

  1. Install dependencies
    • pnpm add -D vite vite-plugin-solid solid-js
      pnpm add -D unplugin-swc
      pnpm add -D effector effector-solid @effector/swc-plugin
  2. vite.config.ts should look like this:

    • // vite.config.ts
      import { defineConfig } from 'vite';
      import solidPlugin from 'vite-plugin-solid';
      import swc from 'unplugin-swc';
      
      export default defineConfig({
      plugins: [
       solidPlugin(),
       swc.vite({
         jsc: {
           experimental: {
             plugins: ['@effector/swc-plugin'],
           },
         },
       }),
      ],
      });

Or you can store jsc field in .swcrc instead.