How to use @bundle-stats/utils - 10 common examples

const getBundleAssetsById = (assets = []) => assets.reduce((aggregator, asset) => {
  if (IGNORE_PATTERN.test(asset.name)) {
    return aggregator;
  }

  const source = getAssetName(asset.name);
  // @TODO Get an uniq id (based on url, source)
  const id = source;

  const { size, ...restAssetProps } = asset;

  return {
    ...aggregator,
    [id]: {
      ...restAssetProps,
      value: size,
    },
  };
}, {});

/* global module */
import { storiesOf } from '@storybook/react';
import { createJobs } from '@bundle-stats/utils';

/* eslint-disable */
import currentData from 'Fixtures/job.current.json'; // eslint-disable-line
import baselineData from 'Fixtures/job.baseline.json'; // eslint-disable-line
/* eslint-enable */
import StandaloneApp from '.';

const JOBS = createJobs([
  { webpack: { stats: currentData.rawData.webpack.stats } },
  { webpack: { stats: baselineData.rawData.webpack.stats } },
  {
    webpack: {
      stats: {
        ...baselineData.rawData.webpack.stats,
        assets: baselineData.rawData.webpack.stats.assets.filter((asset) => asset.name.match(/.(css|js)$/)),
        modules: baselineData.rawData.webpack.stats.modules.slice(0, 100),
      },
    },
  },
]);
const [CURRENT_JOB, BASELINE_JOB] = JOBS;

const stories = storiesOf('StandaloneApp', module);

: console;

  const baselineFilepath = getBaselineStatsFilepath(outputPath);
  let baselineStats = null;

  try {
    if (compare) {
      baselineStats = await readBaseline();
      baselineStats = extractDataFromWebpackStats(baselineStats);
      logger.info(`Read baseline from ${baselineFilepath}`);
    }
  } catch (err) {
    logger.warn(TEXT.PLUGIN_BASELINE_MISSING_WARN);
  }

  const artifacts = createJobs([
    { webpack: { stats: data } },
    ...compare ? [{ webpack: { stats: baselineStats } }] : [],
  ]);

  let reports = [];

  try {
    reports = await createReports(artifacts, { html, json });

    reports.forEach(({ filename, output }) => {
      const filepath = path.join(outDir, filename);

      // eslint-disable-next-line no-param-reassign
      compilation.assets[filepath] = {
        size: () => 0,
        source: () => output,

task: async (ctx, task) => {
        const baselineFilepath = path.relative(process.cwd(), getBaselineStatsFilepath());
        // eslint-disable-next-line no-param-reassign
        task.title = `${task.title} (${baselineFilepath})`;

        ctx.artifacts = ctx.artifacts.concat([{
          webpack: {
            stats: extractDataFromWebpackStats(ctx.baselineStats),
          },
        }]);
      },
      skip: async (ctx) => {

const getOnEmit = (options) => async (compilation, callback) => {
  const {
    compare,
    baseline,
    html,
    json,
    outDir,
    stats: statsOptions,
  } = options;

  const data = extractDataFromWebpackStats(
    compilation.getStats().toJson(statsOptions),
  );

  // Webpack builtAt is not available yet
  if (!data.builtAt) {
    data.builtAt = Date.now();
  }

  const outputPath = get(compilation, 'options.output.path');

  const logger = compilation.getInfrastructureLogger
    ? compilation.getInfrastructureLogger('BundleStats')
    : console;

  const baselineFilepath = getBaselineStatsFilepath(outputPath);
  let baselineStats = null;

task: (ctx, task) => {
        const stats = get(ctx, 'artifacts.0.webpack.stats');
        const extractedWebpackStats = extractDataFromWebpackStats(stats);
        const baselineFilepath = path.relative(process.cwd(), getBaselineStatsFilepath());

        return writeBaseline(extractedWebpackStats).then(() => {
          // eslint-disable-next-line no-param-reassign
          task.title = `${task.title} (${baselineFilepath})`;
        });
      },
      skip: () => !baseline && TEXT.CLI_NO_BASELINE,

import React from 'react';
import { storiesOf } from '@storybook/react';
import { createStats, createStatsSummary } from '@bundle-stats/utils';

import currentData from '../../../__mocks__/job.current.json';
import baselineData from '../../../__mocks__/job.baseline.json';
import { getWrapperDecorator } from '../../stories';
import { BundleAssetsTotalsChartBars as Component } from './bundle-assets-totals-chart-bars';

const currentStats = createStats(baselineData.rawData, currentData.rawData);
const baselineStats = createStats(null, baselineData.rawData);

const currentJob = {
  ...currentData,
  stats: currentStats,
  summary: createStatsSummary(baselineStats, currentStats),
};

const baselineJob = {
  ...baselineData,
  stats: baselineStats,
  summary: createStatsSummary(null, baselineStats),
};

const jobs = [currentJob, baselineJob];

const stories = storiesOf('Components/BundleAssetsTotalsChartBars', module);

import React from 'react';
import { storiesOf } from '@storybook/react';
import { createStats, createStatsSummary } from '@bundle-stats/utils';

import currentData from '../../../__mocks__/job.current.json';
import baselineData from '../../../__mocks__/job.baseline.json';
import { getWrapperDecorator } from '../../stories';
import { BundleAssetsTotalsChartPie as Component } from './bundle-assets-totals-chart-pie';

const currentStats = createStats(baselineData.rawData, currentData.rawData);
const baselineStats = createStats(null, baselineData.rawData);

const currentJob = {
  ...currentData,
  stats: currentStats,
  summary: createStatsSummary(baselineStats, currentStats),
};

const baselineJob = {
  ...baselineData,
  stats: baselineStats,
  summary: createStatsSummary(null, baselineStats),
};

const jobs = [currentJob, baselineJob];

})).reduce((agg, job) => {
    const baseline = last(agg);
    const stats = createStats(baseline && baseline.rawData, job.rawData);
    const summary = createStatsSummary(baseline && baseline.stats, stats);

    return [
      ...agg,
      {
        ...job,
        stats,
        summary,
      },
    ];
  }, []);

import React from 'react';
import { storiesOf } from '@storybook/react';
import { createStats, createStatsSummary } from '@bundle-stats/utils';

import currentData from '../../../__mocks__/job.current.json';
import baselineData from '../../../__mocks__/job.baseline.json';
import { getWrapperDecorator } from '../../stories';
import { BundleModules } from './bundle-modules';

const currentStats = createStats(baselineData.rawData, currentData.rawData);
const baselineStats = createStats(null, baselineData.rawData);

const currentJob = {
  ...currentData,
  stats: currentStats,
  summary: createStatsSummary(baselineStats, currentStats),
};

const baselineJob = {
  ...baselineData,
  stats: baselineStats,
  summary: createStatsSummary(null, baselineStats),
};

const stories = storiesOf('Components/BundleModules', module);
stories.addDecorator(getWrapperDecorator());