Skip to content

Commit

Permalink
refactor(storybok): upgrade to webpack5 in storybook of plugins (apac…
Browse files Browse the repository at this point in the history
…he#17909)

* refactor: use webpack5 in plugins storybook

* remove ./src from packages.json
  • Loading branch information
zhaoyongjie authored and shcoderAlex committed Feb 7, 2022
1 parent 8b5d75d commit 31fd053
Show file tree
Hide file tree
Showing 14 changed files with 84 additions and 137 deletions.
11 changes: 2 additions & 9 deletions superset-frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion superset-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@
"rison": "^0.1.1",
"scroll-into-view-if-needed": "^2.2.28",
"shortid": "^2.2.6",
"src": "file:./src",
"urijs": "^1.19.6",
"use-immer": "^0.6.0",
"use-query-params": "^1.1.9",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import ChartClient from '@superset-ui/core/src/chart/clients/ChartClient';
import ChartDataProvider, {
Props,
ChartDataProviderProps,
} from '@superset-ui/core/src/chart/components/ChartDataProvider';
import { bigNumberFormData } from '../fixtures/formData';

Expand Down Expand Up @@ -70,12 +70,12 @@ describe('ChartDataProvider', () => {
mockLoadQueryData.mockClear();
});

const props: Props = {
const props: ChartDataProviderProps = {
formData: { ...bigNumberFormData },
children: () => <div />,
};

function setup(overrideProps?: Partial<Props>) {
function setup(overrideProps?: Partial<ChartDataProviderProps>) {
return shallow(<ChartDataProvider {...props} {...overrideProps} />);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@

/* eslint-disable max-classes-per-file */
import React from 'react';
import { QueryFormData } from '@superset-ui/core';
import { ChartMetadata, ChartPlugin } from '@superset-ui/core/src/chart';
import { QueryFormData, ChartMetadata, ChartPlugin } from '@superset-ui/core';

const DIMENSION_STYLE = {
fontSize: 36,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('createLoadableRenderer', () => {
let loadChartSuccess = jest.fn(() => Promise.resolve(TestComponent));
let render: (loaded: { Chart: React.ComponentType }) => JSX.Element;
let loading: () => JSX.Element;
let LoadableRenderer: LoadableRendererType<{}, {}>;
let LoadableRenderer: LoadableRendererType<{}>;
let restoreConsole: RestoreConsole;

beforeEach(() => {
Expand Down
79 changes: 17 additions & 62 deletions superset-frontend/packages/superset-ui-demo/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,73 +1,28 @@
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { lstatSync, readdirSync } = require('fs');

// find @superset-ui packages
const basePath = path.resolve(__dirname, '../../../node_modules/@superset-ui');
const packages = readdirSync(basePath).filter(name => {
const stat = lstatSync(path.join(basePath, name));
return stat.isSymbolicLink();
});

const PLUGIN_PACKAGES_PATH_REGEXP = new RegExp(
`${path.resolve(
__dirname,
'../../../plugins/(legacy-)*(plugin|preset)-',
)}.+/src`,
);
const customConfig = require('../../../webpack.config.js');

module.exports = {
core: {
builder: 'webpack5',
},
addons: [
'@storybook/addon-knobs',
'storybook-addon-jsx',
'@storybook/addon-actions',
'@storybook/addon-links',
],
stories: ['../storybook/stories/**/*Stories.[tj]sx'],
webpackFinal: config => {
// Make sure babel is applied to the package src
// These are excluded by the default rule
// because they reside in node_modules
config.module.rules.push({
include: PLUGIN_PACKAGES_PATH_REGEXP,
exclude: /node_modules/,
test: /\.jsx?$/,
use: config.module.rules[0].use,
});

config.module.rules.push({
test: /\.tsx?$/,
use: [
{
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,
},
},
],
});

config.plugins.unshift(new ForkTsCheckerWebpackPlugin());

config.resolve.extensions.push('.ts', '.tsx');

// Let webpack know where to find the source code
Object.assign(config.resolve.alias, {
...packages.reduce(
(acc, name) => ({
...acc,
[`@superset-ui/${name}$`]: path.join(basePath, name, 'src'),
}),
{},
),
});

config.devtool = 'eval-cheap-module-source-map';
config.devServer = {
...config.devServer,
stats: 'minimal',
};

return config;
webpackFinal: config => ({
...config,
module: {
...config.module,
rules: customConfig.module.rules,
},
resolve: {
...config.resolve,
...customConfig.resolve,
},
}),
typescript: {
reactDocgen: 'none',
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
import {
ChartDataResponseResult,
GenericDataType,
} from '@superset-ui/core/src';
import { ChartDataResponseResult, GenericDataType } from '@superset-ui/core';
import {
TableChartFormData,
TableChartProps,
} from '@superset-ui/plugin-chart-table/src';
} from '@superset-ui/plugin-chart-table';
// @ts-ignore
// eslint-disable-next-line import/extensions
import birthNamesJson from './birthNames.json';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
sankeyFormData,
sunburstFormData,
wordCloudFormData,
} from '@superset-ui/core/test/chart/fixtures/formData';
} from '../../../../superset-ui-core/test/chart/fixtures/formData';

import Expandable from '../../shared/components/Expandable';
import VerifyCORS, { renderError } from '../../shared/components/VerifyCORS';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
DiligentChartPlugin,
BuggyChartPlugin,
ChartKeys,
} from '@superset-ui/core/test/chart/components/MockChartPlugins';
} from '../../../../superset-ui-core/test/chart/components/MockChartPlugins';
import ResizableChartDemo from '../../shared/components/ResizableChartDemo';

new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }).register();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

import React from 'react';
import { select, text, withKnobs } from '@storybook/addon-knobs';
import { bigNumberFormData } from '@superset-ui/core/test/chart/fixtures/formData';
import { bigNumberFormData } from '../../../../superset-ui-core/test/chart/fixtures/formData';

import VerifyCORS, {
Props as VerifyCORSProps,
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/packages/superset-ui-demo/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"include": [
"storybook",
"../**/src",
"../../packages/superset-ui-core/test",
"../../plugins/**/src",
"../../plugins/**/types",
]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,53 +17,52 @@
* under the License.
*/

/* eslint-disable import/no-webpack-loader-syntax, import/no-unresolved */
import austria from 'file-loader!./countries/austria.geojson';
import australia from 'file-loader!./countries/australia.geojson';
import belgium from 'file-loader!./countries/belgium.geojson';
import brazil from 'file-loader!./countries/brazil.geojson';
import bulgaria from 'file-loader!./countries/bulgaria.geojson';
import canada from 'file-loader!./countries/canada.geojson';
import china from 'file-loader!./countries/china.geojson';
import denmark from 'file-loader!./countries/denmark.geojson';
import egypt from 'file-loader!./countries/egypt.geojson';
import estonia from 'file-loader!./countries/estonia.geojson';
import france from 'file-loader!./countries/france.geojson';
import finland from 'file-loader!./countries/finland.geojson';
import germany from 'file-loader!./countries/germany.geojson';
import iceland from 'file-loader!./countries/iceland.geojson';
import india from 'file-loader!./countries/india.geojson';
import indonesia from 'file-loader!./countries/indonesia.geojson';
import iran from 'file-loader!./countries/iran.geojson';
import italy from 'file-loader!./countries/italy.geojson';
import italy_regions from 'file-loader!./countries/italy_regions.geojson';
import japan from 'file-loader!./countries/japan.geojson';
import korea from 'file-loader!./countries/korea.geojson';
import liechtenstein from 'file-loader!./countries/liechtenstein.geojson';
import norway from 'file-loader!./countries/norway.geojson';
import malaysia from 'file-loader!./countries/malaysia.geojson';
import morocco from 'file-loader!./countries/morocco.geojson';
import myanmar from 'file-loader!./countries/myanmar.geojson';
import netherlands from 'file-loader!./countries/netherlands.geojson';
import peru from 'file-loader!./countries/peru.geojson';
import poland from 'file-loader!./countries/poland.geojson';
import portugal from 'file-loader!./countries/portugal.geojson';
import russia from 'file-loader!./countries/russia.geojson';
import saudi_arabia from 'file-loader!./countries/saudi_arabia.geojson';
import singapore from 'file-loader!./countries/singapore.geojson';
import slovenia from 'file-loader!./countries/slovenia.geojson';
import sweden from 'file-loader!./countries/sweden.geojson';
import spain from 'file-loader!./countries/spain.geojson';
import switzerland from 'file-loader!./countries/switzerland.geojson';
import syria from 'file-loader!./countries/syria.geojson';
import thailand from 'file-loader!./countries/thailand.geojson';
import timorleste from 'file-loader!./countries/timorleste.geojson';
import uk from 'file-loader!./countries/uk.geojson';
import ukraine from 'file-loader!./countries/ukraine.geojson';
import uruguay from 'file-loader!./countries/uruguay.geojson';
import usa from 'file-loader!./countries/usa.geojson';
import zambia from 'file-loader!./countries/zambia.geojson';
import vietnam from 'file-loader!./countries/vietnam.geojson';
import austria from './countries/austria.geojson';
import australia from './countries/australia.geojson';
import belgium from './countries/belgium.geojson';
import brazil from './countries/brazil.geojson';
import bulgaria from './countries/bulgaria.geojson';
import canada from './countries/canada.geojson';
import china from './countries/china.geojson';
import denmark from './countries/denmark.geojson';
import egypt from './countries/egypt.geojson';
import estonia from './countries/estonia.geojson';
import france from './countries/france.geojson';
import finland from './countries/finland.geojson';
import germany from './countries/germany.geojson';
import iceland from './countries/iceland.geojson';
import india from './countries/india.geojson';
import indonesia from './countries/indonesia.geojson';
import iran from './countries/iran.geojson';
import italy from './countries/italy.geojson';
import italy_regions from './countries/italy_regions.geojson';
import japan from './countries/japan.geojson';
import korea from './countries/korea.geojson';
import liechtenstein from './countries/liechtenstein.geojson';
import norway from './countries/norway.geojson';
import malaysia from './countries/malaysia.geojson';
import morocco from './countries/morocco.geojson';
import myanmar from './countries/myanmar.geojson';
import netherlands from './countries/netherlands.geojson';
import peru from './countries/peru.geojson';
import poland from './countries/poland.geojson';
import portugal from './countries/portugal.geojson';
import russia from './countries/russia.geojson';
import saudi_arabia from './countries/saudi_arabia.geojson';
import singapore from './countries/singapore.geojson';
import slovenia from './countries/slovenia.geojson';
import sweden from './countries/sweden.geojson';
import spain from './countries/spain.geojson';
import switzerland from './countries/switzerland.geojson';
import syria from './countries/syria.geojson';
import thailand from './countries/thailand.geojson';
import timorleste from './countries/timorleste.geojson';
import uk from './countries/uk.geojson';
import ukraine from './countries/ukraine.geojson';
import uruguay from './countries/uruguay.geojson';
import usa from './countries/usa.geojson';
import zambia from './countries/zambia.geojson';
import vietnam from './countries/vietnam.geojson';

export const countries = {
austria,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
declare module 'file-loader!*.geojson' {
declare module '*.geojson' {
const geojsonPath: string;

export default geojsonPath;
Expand Down
10 changes: 7 additions & 3 deletions superset-frontend/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -282,10 +282,10 @@ const config = {
minimizer: [new CssMinimizerPlugin(), '...'],
},
resolve: {
modules: [APP_DIR, 'node_modules', ROOT_DIR],
modules: ['node_modules', APP_DIR],
alias: {
// TODO: remove alias once React has been upgraaded to v. 17
react: path.resolve('./node_modules/react'),
react: path.resolve(path.join(APP_DIR, './node_modules/react')),
},
extensions: ['.ts', '.tsx', '.js', '.jsx', '.yml'],
fallback: {
Expand Down Expand Up @@ -411,6 +411,10 @@ const config = {
include: ROOT_DIR,
loader: 'js-yaml-loader',
},
{
test: /\.geojson$/,
type: 'asset/resource',
},
],
},
externals: {
Expand All @@ -424,7 +428,7 @@ const config = {

// find all the symlinked plugins and use their source code for imports
Object.entries(packageConfig.dependencies).forEach(([pkg, relativeDir]) => {
const srcPath = `./node_modules/${pkg}/src`;
const srcPath = path.join(APP_DIR, `./node_modules/${pkg}/src`);
const dir = relativeDir.replace('file://', '');

if (/^superset-plugin-/.test(pkg) && fs.existsSync(srcPath)) {
Expand Down

0 comments on commit 31fd053

Please sign in to comment.