Storybook add-on to enable SWC builds.

Last update: Dec 20, 2022

Overview

storybook-addon-swc

Storybook addon that improves build time by building with swc.

🗒 Examples

🚀 Installation

$ npm install -D storybook-addon-swc

👏 Getting Started

Edit the .storybook/main.js file and register the addon.

module.exports = {
  addons: [
    'storybook-addon-swc',
  ],
};

🔧 Configurations

Additional configuration options can be passed as needed.

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {},
        swcMinifyOptions: {},
      },
    },
  ],
};

Options

Name	Description	Type	Default Value
`enable`	If set to false, this add-on will be disabled.	boolean	`true`
`enableSwcLoader`	If set to false, swc-loader is disabled and babel-loader is used.	boolean	`true`
`enableSwcMinify`	If set to false, minify using swc is disabled and minify using conventional terser is used.	boolean	`true`
`swcLoaderOptions`	Options for swc loader.	object	see
`swcMinifyOptions`	Options for swc minify.	object	see

SWC Plugins

The SWC plugins feature is still experimental, but can be used by changing the settings as follows.

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        swcLoaderOptions: {
          jsc: {
            experimental: {
              plugins: [['plugin-name', {}]],
            },
          },
        },
      },
    },
  ],
};

🎓 Alternative

storybook-addon-turbo-build

This add-on replaces babel-loader with esbuild-loader.
It was used as a reference in the development of storybook-addon-swc.

storybook-builder-vite

This builder changes the build system of Storybook from Webpack to Vite.
Vite is very fast because it does not bundle during development.

🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check issues page if you want to contribute.

📝 License

This project is MIT licensed.

Comments

[Help Wanted] Config SWC compiler with PostCSS, Tailwind and custom alias

Hi,

First of all thanks for your work!,

I have configurated Storybook to use it with PostCSS, Tailwind, custom alias and webpack 5, but now I want to move to SWC. I am tried to configurate it removing Webpack 5 and adding the SWC plugin, but I am reciving a error with PostCSS. Could you help me?

Here is my OLD configuration:

const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};

function getPaths(paths) {
  const pathsSB = {};
  const keys = Object.keys(paths);

  keys.forEach(function (key) {
    const alias = key.replace('/*', '');
    const pathNext = `../${paths[key][0].replace('*', '')}`;

    pathsSB[alias] = path.resolve(__dirname, pathNext);
  });

  return pathsSB;
}

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getPaths(pathsNext),
    };
    return config;
  },
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       *
       * Fix Storybook issue with CSS Module and PostCSS
       * @see https://github.com/storybookjs/addon-postcss/issues/29
       */
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['../public', '../assets', '../stories/assets'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

Here is my NEW configuration, removed core with Webpack 5 and added SWC plugin:

const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};

function getPaths(paths) {
  const pathsSB = {};
  const keys = Object.keys(paths);

  keys.forEach(function (key) {
    const alias = key.replace('/*', '');
    const pathNext = `../${paths[key][0].replace('*', '')}`;

    pathsSB[alias] = path.resolve(__dirname, pathNext);
  });

  return pathsSB;
}

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getPaths(pathsNext),
    };
    return config;
  },
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       *
       * Fix Storybook issue with CSS Module and PostCSS
       * @see https://github.com/storybookjs/addon-postcss/issues/29
       */
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    'storybook-addon-swc',
  ],
  staticDirs: ['../public', '../assets', '../stories/assets'],
  framework: '@storybook/react',
};

As I said before I tried to change the builder to SWC, removing core and added the SWC plugin. In the error message I see that Storybook said I am using Webpack 4, maybe I have a bad config. Here is the error:

yarn run v1.22.17
$ start-storybook -p 6006
info @storybook/react v6.4.13
info 
info => Loading presets
info => Serving static files from ././public at /
info => Serving static files from ././assets at /
info => Serving static files from ././stories/assets at /
info => Loading custom manager config
info => Using PostCSS preset with [email protected]
info => Using default Webpack4 setup
info => Loading custom manager config
14% building 34/36 modules 2 active .../project-name/node_modules/@storybook/builder-webpack4/node_modules/webpack/buildin/module.js
info => Using cached manager
webpack built preview 086ae59b40b8b63edbce in 5673ms
✖ ｢wdm｣: Hash: 086ae59b40b8b63edbce
Version: webpack 4.46.0
Time: 5673ms
Built at: 22/03/2022 12:02:17
                    Asset      Size  Chunks                          Chunk Names
       0.iframe.bundle.js   225 KiB       0  [emitted]               
   0.iframe.bundle.js.map   215 KiB       0  [emitted] [dev]         
       1.iframe.bundle.js   186 KiB       1  [emitted]               
   1.iframe.bundle.js.map  88.4 KiB       1  [emitted] [dev]         
       2.iframe.bundle.js  68.5 KiB       2  [emitted]               
   2.iframe.bundle.js.map  53.4 KiB       2  [emitted] [dev]         
       3.iframe.bundle.js  9.14 KiB       3  [emitted]               
   3.iframe.bundle.js.map  6.47 KiB       3  [emitted] [dev]         
       4.iframe.bundle.js  62.1 KiB       4  [emitted]               
   4.iframe.bundle.js.map  48.5 KiB       4  [emitted] [dev]         
       5.iframe.bundle.js   372 KiB       5  [emitted]        [big]  
   5.iframe.bundle.js.map   412 KiB       5  [emitted] [dev]         
       6.iframe.bundle.js  15.7 KiB       6  [emitted]               
   6.iframe.bundle.js.map  16.6 KiB       6  [emitted] [dev]         
              iframe.html  11.7 KiB          [emitted]               
    main.iframe.bundle.js  7.84 MiB    main  [emitted]        [big]  main
main.iframe.bundle.js.map  6.53 MiB    main  [emitted] [dev]         main
Entrypoint main [big] = main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 208 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.63 KiB {main} [built]
[./generated-stories-entry.js] 674 bytes {main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js] 2.99 KiB {main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 3.04 KiB {main} [built]
[./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 3.04 KiB {main} [built]
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {main} [built]
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.99 KiB {main} [built]
    + 1695 hidden modules

ERROR in ./styles/storybook.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./styles/storybook.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/user-name/Sites/project-name/node_modules/postcss-loader/dist/index.js:40:24)
 @ ./styles/storybook.css (./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./styles/storybook.css) 2:26-136 53:4-74:5 56:18-128
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.27 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.04 KiB {HtmlWebpackPlugin_0} [built]
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/user-name/Sites/project-name/node_modules/postcss-loader/dist/index.js:40:24)
    at /Users/user-name/Sites/project-name/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/user-name/Sites/project-name/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/user-name/Sites/project-name/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:233:18

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

System

Environment Info:

  System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v17.3.1/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 98.0.1
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.4.13 => 6.4.13 
    @storybook/addon-docs: ^6.4.13 => 6.4.18 
    @storybook/addon-essentials: ^6.4.13 => 6.4.13 
    @storybook/addon-links: ^6.4.13 => 6.4.13 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/builder-webpack5: ^6.4.13 => 6.4.13 
    @storybook/manager-webpack5: ^6.4.13 => 6.4.13 
    @storybook/react: ^6.4.13 => 6.4.13 
    storybook-addon-swc: ^1.1.1 => 1.1.1

help wanted

opened by RodrigoTomeES 13

Breaking change in recent version
Hello! I've recently tried to upgrade from version 1.1.1 to 1.1.7 and the build were failing with error Error: failed to handle: not implemented: automatic polyfill for scripts:

I noticed that isModule were changed to isModule: 'unknown' in this commit ed714baecdb02df7efaebdeb8da4ef47d74c1e50. Changing it back to the default value isModule: true fixes it.

I don't know why it doesn't work with isModule: 'unknown' but letting you know about this issue and how it can be fixed if someone encounters it.

Info:

Storybook 6.4.19

React 17.0.2

TypeScript 4.6.2

@swc/core 1.2.170

Swc config:

{ "jsc": { "parser": { "syntax": "typescript", "tsx": true, "decorators": false, "dynamicImport": false }, "loose": true }, "env": { "targets": "> 0.5%, last 2 versions, Firefox ESR, not dead, not ie <= 11" } }
question
opened by lesha1201 5

exports is not definied using @storybook/testing-library

Hi,

I have a storybook with some components that make use of Stortybook's play function and they stopped working after I set it up the storybook-addon-swc in the project.

When I open the storybook in the browser, the following error message is being displayed

When I disable the enableSwcLoader setting, the Storybook works again.

Why does it happen? is an expected behavior?

Is it possible to do something to keep using enableSwcMinify enabled? The storybook build happens faster when we use it

Here is my configuration:

const path = require('path');
const { StorybookFrontLoaderPlugin } = require('./storybookFrontLoaderPlugin');

module.exports = {
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    'storybook-addon-next-router',

    // this will give error
    'storybook-addon-swc',

    // this will work
    // {
    //   name: 'storybook-addon-swc',
    //   options: {
    //     enableSwcLoader: false,
    //   },
    // },
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  staticDirs: ['../public'],
};

Here is a example story:

// MyComponent.stories.tsx
import { ComponentStory } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';

export default {
  title: 'MyComponent',
};

const Component = () => {
  return <input type="text" placeholder="Search..." />;
};

const Template: ComponentStory<typeof Component> = () => {
  return <Component />;
};

export const Main = Template.bind({});

Main.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  const input = canvas.getByPlaceholderText('Search...');

  await userEvent.type(input, 'Foo bar', {
    delay: 100,
  });
};

bug

opened by drianoaz 2

Question: Does storybook-addon-swc work when using the command npm run build-storybook?

I'm have the follow setup:

## System:
 - OS: macOS 11.7.1
 - CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
 - Memory: 390.71 MB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
 - npm: 8.14.0 - ~/.nvm/versions/node/v16.13.1/bin/npm

We are using Storybook v6.5.10 and MUI v5

Our devDependencies include the following versions: "@storybook/addon-a11y": "6.5.10", "@storybook/addon-actions": "6.5.10", "@storybook/addon-console": "1.2.3", "@storybook/addon-docs": "6.5.10", "@storybook/addon-essentials": "6.5.10", "@storybook/addon-jest": "6.5.10", "@storybook/addon-links": "6.5.10", "@storybook/builder-webpack5": "6.5.10", "@storybook/manager-webpack5": "6.5.10", "@storybook/node-logger": "6.5.10", "@storybook/preset-create-react-app": "4.1.2", "@storybook/preset-scss": "1.0.3", "@storybook/react": "6.5.10", "@storybook/theming": "6.5.10", "storybook-addon-swc": "^1.1.8", "webpack": "^5.65.0"

Here are the contents of our .storybook/main.cjs

module.exports = {
  staticDirs: ['../public'],
  stories: [
    '../src/content/*.stories.mdx',
    '../src/components/**/*.stories.mdx',
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {
          isModule: true,
          sourceMaps: false,
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true
            },
            transform: {
              react: {
                runtime: 'automatic'
              },
            }
          },
        },
        swcMinifyOptions: {},
      },
    },
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-a11y',
    '@storybook/addon-jest',
    '@etchteam/storybook-addon-status',
  ],
  features: {
    modernInlineRendering: true,
    emotionAlias: false,
    buildStoriesJson: true
  },
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

When I run npm run storybook everything works perfect. I go to a component's docs and click the button "show code" and I'm able to see the sample code to use the component.

When I run npm run build-storybook I have a problem. I go to a component's docs and click the button "show code" and the iframe goes blank with the following browser console message:

ReferenceError: create$5 is not defined
    at ../../node_modules/@storybook/components/dist/esm/syntaxhighlighter-b07b042a.js (709.6e99183f.iframe.bundle.js:1:39853)
    at Function.t (runtime~main.69bd329a.iframe.bundle.js:1:141)
g.error @ 644.63b74eb9.iframe.bundle.js:102

Have you ever experienced this before? Any ideas why?

Thank your time.

opened by visualjeff 1

Error when used with emotion-swc-plugin

I am getting the following error when trying to build storybook with SWC and the emotion-swc-plugin

Here's the error

Missing export __transform_plugin_process_impl', crates/swc/src/plugin.rs:222:14
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("filepath/.storybook/preview.js-generated-config-entry.js")'

Here's a reproduction repo:

https://github.com/alekangelov/emotion-swc-storybook-bug

invalid

opened by alekangelov 1

Optional dependency should not be statically imported

Please check https://github.com/Karibash/storybook-addon-swc/blob/e8f97e564b965f6545c48cbe4c16077cfbee0b11/src/transformers.ts#L3

IMHO, as terser-webpack-plugin is a optional peer dependency you should dynamically require it only when we use terser for minification.
bug

opened by HosseinAgha 1
Missing webpack dep in example project package.json files

https://github.com/Karibash/storybook-addon-swc/blob/main/examples/webpack4/package.json https://github.com/Karibash/storybook-addon-swc/blob/main/examples/webpack5/package.json

The relevant webpack version should be listed... At least for Webpack 5. Without it, you run into this issue.
bug

opened by kylemh 1

Releases(v1.1.9)

v1.1.9(Oct 1, 2022)
Patch Changes

#44 8866f93 Thanks @shinnoki! - Fix replaceMinimizer to preserve the original config (Fix #43)

Source code(tar.gz)
Source code(zip)
v1.1.8(Aug 2, 2022)
Patch Changes

#39 67d3b63 Thanks @Karibash! - Make it import when using TerserPlugin

Source code(tar.gz)
Source code(zip)
v1.1.7(Apr 2, 2022)
Patch Changes

#30 52fcb9a Thanks @Karibash! - Add webpack to peerDependencies

Source code(tar.gz)
Source code(zip)
v1.1.6(Mar 30, 2022)
Patch Changes

#27 ed714ba Thanks @Karibash! - Fix a bug that broke builds when using @storybook/testing-library

Source code(tar.gz)
Source code(zip)
v1.1.5(Mar 30, 2022)
Patch Changes

#24 8b587da Thanks @Karibash! - Add documentation about swc plugins feature

Source code(tar.gz)
Source code(zip)
v1.1.4(Mar 24, 2022)
Patch Changes

#18 f7448b3 Thanks @Karibash! - Fix typo in README.md

Source code(tar.gz)
Source code(zip)
v1.1.3(Mar 24, 2022)
Patch Changes

#16 c662145 Thanks @Karibash! - Add an alternative to README.md

Source code(tar.gz)
Source code(zip)
v1.1.2(Mar 23, 2022)
Patch Changes

#13 ee3c406 Thanks @Karibash! - Add a link to the example project in README.md

Source code(tar.gz)
Source code(zip)
v1.1.1(Mar 13, 2022)
Patch Changes

#8 db098cd Thanks @Karibash! - Fix wrong process of getting options

Source code(tar.gz)
Source code(zip)
v1.1.0(Mar 13, 2022)
Minor Changes

#5 d8c02ef Thanks @Karibash! - Make options deep merge

Patch Changes

#7 30466a6 Thanks @Karibash! - Make it so that terser is also available in v4

Source code(tar.gz)
Source code(zip)
v1.0.1(Mar 13, 2022)
Patch Changes

#3 8d00b85 Thanks @Karibash! - Update metadata for storybook

Source code(tar.gz)
Source code(zip)
v1.0.0(Mar 13, 2022)
Major Changes

First release.

Source code(tar.gz)
Source code(zip)

Owner

Karibash

GitHub

convert SWC to Babel AST

SWC-to-babel Convert SWC JavaScript AST to Babel AST. To use SWC parser with babel tools like: @babel/traverse @babel/types etc... The thing is @babel

23 Oct 28, 2022

💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

Electron App ?? A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, P

155 Dec 29, 2022

An experimental transpiler to bring tailwind macros to SWC 🚀

stailwc (speedy tailwind compiler) This is an experimental SWC transpiler to bring compile time tailwind macros to SWC (and nextjs) a-la twin macro. T

140 Jan 3, 2023

Builds components using a simple and explicit API around virtual-dom

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to

553 Dec 15, 2022

A demo to show how to re-use Eleventy Image’s disk cache across Netlify builds.

Re-use Eleventy Image Disk Cache across Netlify Builds Live Demo This repository takes all of the high resolution browser logos and processes them thr

9 Apr 5, 2022

Portfolioshop builds custom portfolio websites with submitted user data.

Portfolio Shop What our project does? We are trying to build a website to make the process of building personal portfolios easier. Often we have seen

44 Dec 22, 2022

🤖 Persist the Playwright executable between Netlify builds

?? Netlify Plugin Playwright Cache Persist the Playwright executables between Netlify builds. Why netlify-plugin-playwright-cache When you install pla

14 Oct 24, 2022

Stacks Voice is a reference project that builds on the SIP018 signed structured data standard to create an accountless internet forum.

Stacks Voice Stacks Voice is a reference project that builds on the SIP018 signed structured data standard to create an accountless internet forum. Th

4 Dec 21, 2022

A GitHub action to automate Rojo project builds.

Rojo Build Action This action swiftly builds your rojo places, models & assets. Inputs output Required This is the file you want the action to output

3 Oct 23, 2022

Using Storybook for Pixi.js graphics development

Storybook for Pixi.js Using Storybook for Pixi.js graphics development This project includes: Storybook Pixi.js Pixi Viiewport Background Often conven

5 Mar 9, 2022

Use macro-based Nunjucks components with Eleventy and Storybook.

eleventy-nunjucks-storybook Use macro-based Nunjucks components with Eleventy and Storybook. Links See Using Storybook with Nunjucks components in Ele

11 Dec 15, 2022

A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more.

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of this is taught in this course. What is inside? This project uses lot of

26 Dec 4, 2022

wagmi hooks 🤝 Storybook interaction testing

A quick demonstration of how Storybook decorators can be combined with a mocked wagmi client to facilitate automated interaction testing for web3-enab

21 Dec 13, 2022

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

160 Dec 30, 2022

Storybook add-on to enable SWC builds.

Related tags

Overview

storybook-addon-swc

🗒 Examples

🚀 Installation

👏 Getting Started

🔧 Configurations

Options

SWC Plugins

🎓 Alternative

🤝 Contributing

📝 License

Comments

Releases(v1.1.9)

v1.1.9(Oct 1, 2022)

Patch Changes

v1.1.8(Aug 2, 2022)

Patch Changes

v1.1.7(Apr 2, 2022)

Patch Changes

v1.1.6(Mar 30, 2022)

Patch Changes

v1.1.5(Mar 30, 2022)

Patch Changes

v1.1.4(Mar 24, 2022)

Patch Changes

v1.1.3(Mar 24, 2022)

Patch Changes

v1.1.2(Mar 23, 2022)

Patch Changes

v1.1.1(Mar 13, 2022)

Patch Changes

v1.1.0(Mar 13, 2022)

Minor Changes

Patch Changes

v1.0.1(Mar 13, 2022)

Patch Changes

v1.0.0(Mar 13, 2022)

Major Changes

Owner

Karibash

convert SWC to Babel AST

💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

An experimental transpiler to bring tailwind macros to SWC 🚀

Builds components using a simple and explicit API around virtual-dom

A demo to show how to re-use Eleventy Image’s disk cache across Netlify builds.

Portfolioshop builds custom portfolio websites with submitted user data.

🤖 Persist the Playwright executable between Netlify builds

Stacks Voice is a reference project that builds on the SIP018 signed structured data standard to create an accountless internet forum.

A GitHub action to automate Rojo project builds.

Using Storybook for Pixi.js graphics development

Use macro-based Nunjucks components with Eleventy and Storybook.

A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more.

wagmi hooks 🤝 Storybook interaction testing

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

Storybook Addon Root Attributes to switch html, body or some element attributes (multiple) at runtime for you story

DGPreview - Make UIKit project enable preview feature of SwiftUI

ZaDark is an open source extension that helps you enable Dark Mode for Zalo on PC and Browser.

A package to enable feature-flag support on Next.js via cookies and environment variables

Enable hover capabilities for Cypress. 🛸