Ivan Banov ivanbanov

## bundlers.md

      
              1 file
            
          
              2 forks
            
          
              0 comments
            
          
              1 star
            
          
                ivanbanov
                / bundlers.md
            
            
              Last active
              June 17, 2023 15:06
            
              
                Bundlers comparison
              
          
Rollup
SWC
esbuild
tsup
Vite
Parcel
Webpack


Monorepo support
⛔️
⛔️
⛔️
⛔️
⛔️
✅
⛔️


Performance esbuid/swc
esbuid/swc
✅
✅
esbuid/swc
esbuid/swc
✅
esbuid/swc


Type declaration (.d.ts)
rollup-plugin-dts
⛔️
⛔️
rollup-plugin-dts
rollup-plugin-dts
✅
ts-loader


Declaration map (.d.ts.map)
⛔️
⛔️
⛔️
⛔️
⛔️
✅
ts-loader


Treeshaking
✅
✅
✅
esbuild + rollup
esbuild + rollup
✅
✅


Type-check


## styles-base-config.js
const defaultFontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';

const font = {
  size: {
    base: {
      small: '16px',
      large: '18px',
    },

    // PX to REM based on 16px

## cloudSettings
{"lastUpload":"2019-02-21T16:01:47.849Z","extensionVersion":"v3.2.5"}

## Brewfile
tap "homebrew/bundle"
tap "homebrew/cask"
tap "homebrew/cask-fonts"
tap "homebrew/core"
brew "docker"
brew "node"
brew "tig"
brew "wget"
brew "yarn"
brew "zsh"

## app.js
(() => {
  const icons = document.createElement('div');
  icons.innerHTML = require('images/icons.svg').match(/<svg.*<\/svg>/, '')[0];
  icons.style.display = 'none';
  document.body.appendChild(icons);
})();

## component.storybook.js
import React from 'react';
import {storiesOf} from '@kadira/storybook';
import mockRedux from '<path-to>/js/mocks/redux';
import {Component} from '../';

const storeState = {
  list: ['foo', 'bar', 'baz'],
  someData: {
    foo: true,
    bar: false

## component.storybook.js
import React from 'react';
import {storiesOf} from '@kadira/storybook';
import mockContext from '<path-to>/js/mocks/context';
import {Component} from '../';

const context = {
  user: 'Foo Bar'
};

storiesOf('Component', module)

## component.storybook.js
import React from 'react';
import {storiesOf} from '@kadira/storybook';
import mockRelay from '<path-to>/mocks/relay';
import {Component} from '../';
import viewer from './fixtures/viewer'; // json data

const relay = {
  variables: {
    foo: {},
    bar: true,

## Polling.js
const DEFAULT_BACKOFF = 200; // milliseconds

export class Polling {
  constructor(fn, maxRetries = 10, initialDelay = DEFAULT_BACKOFF) {
    this._fn = fn;
    this._remainingRetries = maxRetries;
    this._delay = initialDelay;
  }

  async perform() {

## FormValidator.html
<!-- *** Simples POC of FormValidator *** -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Validator</title>

  <style>
    * {
	Rollup	SWC	esbuild	tsup	Vite	Parcel	Webpack
Monorepo support	⛔️	⛔️	⛔️	⛔️	⛔️	✅	⛔️
Performance esbuid/swc	esbuid/swc	✅	✅	esbuid/swc	esbuid/swc	✅	esbuid/swc
Type declaration (.d.ts)	rollup-plugin-dts	⛔️	⛔️	rollup-plugin-dts	rollup-plugin-dts	✅	ts-loader
Declaration map (.d.ts.map)	⛔️	⛔️	⛔️	⛔️	⛔️	✅	ts-loader
Treeshaking	✅	✅	✅	esbuild + rollup	esbuild + rollup	✅	✅
Type-check
	const defaultFontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';

	const font = {
	size: {
	base: {
	small: '16px',
	large: '18px',
	},

	// PX to REM based on 16px
	tap "homebrew/bundle"
	tap "homebrew/cask"
	tap "homebrew/cask-fonts"
	tap "homebrew/core"
	brew "docker"
	brew "node"
	brew "tig"
	brew "wget"
	brew "yarn"
	brew "zsh"
	(() => {
	const icons = document.createElement('div');
	icons.innerHTML = require('images/icons.svg').match(/<svg.*<\/svg>/, '')[0];
	icons.style.display = 'none';
	document.body.appendChild(icons);
	})();
	import React from 'react';
	import {storiesOf} from '@kadira/storybook';
	import mockRedux from '<path-to>/js/mocks/redux';
	import {Component} from '../';

	const storeState = {
	list: ['foo', 'bar', 'baz'],
	someData: {
	foo: true,
	bar: false
	import React from 'react';
	import {storiesOf} from '@kadira/storybook';
	import mockContext from '<path-to>/js/mocks/context';
	import {Component} from '../';

	const context = {
	user: 'Foo Bar'
	};

	storiesOf('Component', module)
	import React from 'react';
	import {storiesOf} from '@kadira/storybook';
	import mockRelay from '<path-to>/mocks/relay';
	import {Component} from '../';
	import viewer from './fixtures/viewer'; // json data

	const relay = {
	variables: {
	foo: {},
	bar: true,
	const DEFAULT_BACKOFF = 200; // milliseconds

	export class Polling {
	constructor(fn, maxRetries = 10, initialDelay = DEFAULT_BACKOFF) {
	this._fn = fn;
	this._remainingRetries = maxRetries;
	this._delay = initialDelay;
	}

	async perform() {
	<!-- * Simples POC of FormValidator * -->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Validator</title>

	<style>
	* {