Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle assets - expose meta changes #4811

Closed
wants to merge 14 commits into from
Closed
8 changes: 4 additions & 4 deletions fixtures/webpack-stats.baseline.json
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,10 @@
"entry": true,
"initial": true,
"files": [
"vendors.8b6bb4f.css",
"vendors.176a5f6.js",
"vendors.8b6bb4f.css.map",
"vendors.176a5f6.js.map"
"assets/css/vendors.8b6bb4f.css",
"assets/js/vendors.176a5f6.js",
"assets/css/vendors.8b6bb4f.css.map",
"assets/js/vendors.176a5f6.js.map"
],
"names": [
"vendors"
Expand Down
8 changes: 4 additions & 4 deletions fixtures/webpack-stats.current.json
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,10 @@
"entry": true,
"initial": true,
"files": [
"vendors.5024abb.css",
"vendors.278dc2f.js",
"vendors.5024abb.css.map",
"vendors.278dc2f.js.map"
"assets/css/vendors.5024abb.css",
"assets/js/vendors.278dc2f.js",
"assets/css/vendors.5024abb.css.map",
"assets/js/vendors.278dc2f.js.map"
],
"names": [
"vendors"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { createJobs } from '@bundle-stats/utils';

/* eslint-disable import/no-unresolved, import/no-relative-packages */
Expand All @@ -20,16 +21,21 @@ const BASELINE_SOURCE = {

const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);

export default {
const meta: Meta<typeof App> = {
title: 'App/Gladys',
component: App,
decorators: [
(Story) => (
<div style={{ margin: '-1rem' }}>
<Story />
</div>
),
],
parameters: {
layout: 'fullscreen',
},
args: {
version: '1.0',
},
};

export const Default = () => <App jobs={JOBS} version="1.0" />;
export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
render: (args) => <App jobs={JOBS} {...args} />,
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { createJobs } from '@bundle-stats/utils';

/* eslint-disable import/no-unresolved, import/no-relative-packages */
Expand All @@ -20,16 +21,21 @@ const BASELINE_SOURCE = {

const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);

export default {
const meta: Meta<typeof App> = {
title: 'App/HomeAssistant',
component: App,
decorators: [
(Story) => (
<div style={{ margin: '-1rem' }}>
<Story />
</div>
),
],
parameters: {
layout: 'fullscreen',
},
args: {
version: '1.0',
},
};

export const Default = () => <App jobs={JOBS} version="1.0" />;
export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
render: (args) => <App jobs={JOBS} {...args} />,
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { createJobs } from '@bundle-stats/utils';

/* eslint-disable import/no-unresolved, import/no-relative-packages */
Expand All @@ -20,16 +21,21 @@ const BASELINE_SOURCE = {

const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);

export default {
const meta: Meta<typeof App> = {
title: 'App/Outline',
component: App,
decorators: [
(Story) => (
<div style={{ margin: '-1rem' }}>
<Story />
</div>
),
],
parameters: {
layout: 'fullscreen',
},
args: {
version: '1.0',
},
};

export const Default = () => <App jobs={JOBS} version="1.0" />;
export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
render: (args) => <App jobs={JOBS} {...args} />,
};
88 changes: 0 additions & 88 deletions packages/ui/src/app/app.stories.jsx

This file was deleted.

127 changes: 127 additions & 0 deletions packages/ui/src/app/app.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { createJobs } from '@bundle-stats/utils';
import merge from 'lodash/merge';

/* eslint-disable import/no-unresolved, import/no-relative-packages */
import currentData from '../../../../fixtures/job.current';
import baselineData from '../../../../fixtures/job.baseline';
/* eslint-enable import/no-unresolved, import/no-relative-packages */
import { App } from '.';

const CURRENT_SOURCE = {
webpack: {
...currentData.rawData.webpack,
builtAt: currentData.createdAt,
hash: currentData.commit,
},
};

const BASELINE_SOURCE = {
webpack: {
...baselineData.rawData.webpack,
builtAt: baselineData.createdAt,
hash: baselineData.commit,
},
};

const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);

const MULTIPLE_JOBS = createJobs([
CURRENT_SOURCE,
BASELINE_SOURCE,
{
webpack: {
...baselineData.rawData.webpack,
builtAt: baselineData.createdAt,
hash: 'aaaa1111',
assets: baselineData.rawData.webpack.assets.filter((asset) => asset.name.match(/.(css|js)$/)),
modules: baselineData.rawData.webpack.modules.slice(0, 100),
},
},
]);

const [CURRENT_JOB, BASELINE_JOB] = JOBS;

const meta: Meta<typeof App> = {
title: 'App',
component: App,
parameters: {
layout: 'fullscreen',
},
args: {
version: '1.0',
},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
render: (args) => <App jobs={JOBS} {...args} />,
};

export const NoInsights: Story = {
render: (args) => (
<App
jobs={[
{
...CURRENT_JOB,
insights: undefined,
},
BASELINE_JOB,
]}
{...args}
/>
),
};

export const AssetMetaChanges: Story = {
render: (args) => {
const current = merge({}, CURRENT_SOURCE);
const baseline = merge({}, CURRENT_SOURCE);

current.webpack.assets.push({
name: 'assets/js/vendors-auth.1a278dc.js',
size: 26364,
});
current.webpack.chunks.push({
id: 100,
entry: false,
initial: false,
files: ['assets/js/vendors-auth.1a278dc.js'],
names: ['vendors-auth'],
});

baseline.webpack.assets.push({
name: 'assets/js/vendors-auth.1a278dc.js',
size: 26364,
});
baseline.webpack.chunks.push({
id: 100,
entry: false,
initial: true,
files: ['assets/js/vendors-auth.1a278dc.js'],
names: ['vendors-auth'],
});

return <App jobs={createJobs([current, baseline])} {...args} />;
},
};

export const NoBaseline: Story = {
render: (args) => <App jobs={createJobs[CURRENT_SOURCE]} {...args} />,

Check warning

Code scanning / CodeQL

Implicit operand conversion Warning

This expression will be implicitly converted from object or undefined to string.
};

export const EmptyBaseline: Story = {
render: (args) => <App jobs={createJobs([CURRENT_SOURCE, { webpack: null }])} {...args} />,
};

export const MultipleBaselines: Story = {
render: (args) => <App jobs={MULTIPLE_JOBS} {...args} />,
};

export const Empty: Story = {
render: (args) => <App {...args} />,
};
Loading