GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 20:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add explicitly unsupported syntaxes for preview.js storySort extraction

Browse Source
This commit is contained in:
Michael Shilman 2021-09-20 14:09:45 +08:00
parent 74710f1cd0
commit 284a591b0c
3 changed files with 231 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/csf-tools/package.json
View File

@ -55,12 +55,12 @@
"js-string-escape": "^1.0.1",
"lodash": "^4.17.20",
"prettier": "^2.2.1",
"regenerator-runtime": "^0.13.7"
"regenerator-runtime": "^0.13.7",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@types/fs-extra": "^9.0.6",
"js-yaml": "^3.14.1",
"ts-dedent": "^2.0.0"
"js-yaml": "^3.14.1"
},
"publishConfig": {
"access": "public"

318
lib/csf-tools/src/getStorySortParameter.test.ts
View File

@ -2,155 +2,215 @@ import dedent from 'ts-dedent';
import { getStorySortParameter } from './getStorySortParameter';
describe('getStorySortParameter', () => {
it('no parameters', () => {
expect(
getStorySortParameter(dedent`
export const decorators = [];
`)
).toBeUndefined();
});
describe('supported', () => {
it('no parameters', () => {
expect(
getStorySortParameter(dedent`
export const decorators = [];
`)
).toBeUndefined();
});
it('invalid parameters', () => {
expect(
getStorySortParameter(dedent`
export const parameters = [];
`)
).toBeUndefined();
});
it('no storySort parameter', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
layout: 'fullscreen',
};
`)
).toBeUndefined();
});
it('no storySort parameter', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
layout: 'fullscreen',
};
`)
).toBeUndefined();
});
it('with wildcards', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: [
"Intro",
"Pages",
["Home", "Login", "Admin"],
"Components",
"*",
"WIP",
]
}
};
`)
).toMatchInlineSnapshot(`
Array [
"Intro",
"Pages",
it('with wildcards', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: [
"Intro",
"Pages",
["Home", "Login", "Admin"],
"Components",
"*",
"WIP",
]
}
};
`)
).toMatchInlineSnapshot(`
Array [
"Home",
"Login",
"Admin",
],
"Components",
"*",
"WIP",
]
`);
});
"Intro",
"Pages",
Array [
"Home",
"Login",
"Admin",
],
"Components",
"*",
"WIP",
]
`);
});
it('arrow function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
};
`)
).toMatchInlineSnapshot(`[Function]`);
});
it('function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: function sortStories(a, b) {
return a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
it('arrow function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
},
};
`)
).toMatchInlineSnapshot(`[Function]`);
};
`)
).toMatchInlineSnapshot(`[Function]`);
});
it('function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: function sortStories(a, b) {
return a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
},
},
};
`)
).toMatchInlineSnapshot(`[Function]`);
});
it('empty sort', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
};
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
it('parameters typescript', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
} as Parameters;
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
});
it('empty sort', () => {
expect(
getStorySortParameter(dedent`
describe('unsupported', () => {
it('invalid parameters', () => {
expect(() =>
getStorySortParameter(dedent`
export const parameters = [];
`)
).toThrowErrorMatchingInlineSnapshot(`
"Unexpected 'parameters'. Parameter 'options.storySort' should be defined inline e.g.:
export const parameters = {
options: {
storySort: <array | object | function>
}
}"
`);
});
it('parameters var', () => {
expect(
getStorySortParameter(dedent`
const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
};
export { parameters };
`)
).toBeUndefined();
});
it('options var', () => {
expect(() =>
getStorySortParameter(dedent`
const options = {
storySort: {
method: "",
order: [],
locales: "",
},
},
};
};
export const parameters = {
options,
};
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
).toThrowErrorMatchingInlineSnapshot(`
"Unexpected 'options'. Parameter 'options.storySort' should be defined inline e.g.:
it('parameters typescript', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
} as Parameters;
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
storySort: <array | object | function>
}
}"
`);
});
// unsupported
// eslint-disable-next-line jest/no-disabled-tests
it.skip('parameters var', () => {
expect(
getStorySortParameter(dedent`
const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
it('storySort var', () => {
expect(() =>
getStorySortParameter(dedent`
const storySort = {
method: "",
order: [],
locales: "",
};
export const parameters = {
options: {
storySort,
},
},
};
export { parameters };
};
`)
).toMatchInlineSnapshot(`undefined`);
).toThrowErrorMatchingInlineSnapshot(`
"Unexpected 'storySort'. Parameter 'options.storySort' should be defined inline e.g.:
export const parameters = {
options: {
storySort: <array | object | function>
}
}"
`);
});
});
});

42
lib/csf-tools/src/getStorySortParameter.ts
View File

@ -1,8 +1,11 @@
import * as t from '@babel/types';
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import dedent from 'ts-dedent';
import { babelParse } from './babelParse';
const logger = console;
const getValue = (obj: t.ObjectExpression, key: string) => {
let value: t.Expression;
obj.properties.forEach((p: t.ObjectProperty) => {
@ -34,6 +37,23 @@ const parseValue = (expr: t.Expression): any => {
throw new Error(`Unknown node type ${expr}`);
};
const unsupported = (unexpectedVar: string, isError: boolean) => {
const message = dedent`
Unexpected '${unexpectedVar}'. Parameter 'options.storySort' should be defined inline e.g.:
export const parameters = {
options: {
storySort: <array | object | function>
}
}
`;
if (isError) {
throw new Error(message);
} else {
logger.info(message);
}
};
export const getStorySortParameter = (previewCode: string) => {
let storySort: t.Expression;
const ast = babelParse(previewCode);
@ -50,13 +70,25 @@ export const getStorySortParameter = (previewCode: string) => {
: decl.init;
if (t.isObjectExpression(paramsObject)) {
const options = getValue(paramsObject, 'options');
if (options && t.isObjectExpression(options)) {
storySort = getValue(options, 'storySort');
if (options) {
if (t.isObjectExpression(options)) {
storySort = getValue(options, 'storySort');
} else {
unsupported('options', true);
}
}
} else {
unsupported('parameters', true);
}
}
}
});
} else {
node.specifiers.forEach((spec) => {
if (t.isIdentifier(spec.exported) && spec.exported.name === 'parameters') {
unsupported('parameters', false);
}
});
}
},
},
@ -82,5 +114,9 @@ export const getStorySortParameter = (previewCode: string) => {
return eval(wrapper);
}
return parseValue(storySort);
if (t.isLiteral(storySort) || t.isArrayExpression(storySort) || t.isObjectExpression(storySort)) {
return parseValue(storySort);
}
return unsupported('storySort', true);
};