Merge branch 'next' into shilman/csf-feature-telemetry

This commit is contained in:
Michael Shilman 2024-07-19 18:51:27 +08:00
commit 1660f23ed6
15 changed files with 64 additions and 70 deletions

View File

@ -75,6 +75,7 @@ export default function Onboarding({ api }: { api: API }) {
const [createNewStoryForm, setCreateNewStoryForm] = useState<HTMLElement | null>();
const [createdStory, setCreatedStory] = useState<{
newStoryName: string;
newStoryExportName: string;
sourceFileContent: string;
sourceFileName: string;
} | null>();
@ -158,8 +159,8 @@ export default function Onboarding({ api }: { api: API }) {
}
const source = createdStory?.sourceFileContent;
const startIndex = source?.lastIndexOf(`export const ${createdStory?.newStoryName}`);
const snippet = source?.slice(startIndex);
const startIndex = source?.lastIndexOf(`export const ${createdStory?.newStoryExportName}`);
const snippet = source?.slice(startIndex).trim();
const startingLineNumber = source?.slice(0, startIndex).split('\n').length;
const steps: StepDefinition[] = [

View File

@ -142,6 +142,11 @@
"import": "./dist/manager/globals-module-info.js",
"require": "./dist/manager/globals-module-info.cjs"
},
"./manager/globals": {
"types": "./dist/manager/globals.d.ts",
"import": "./dist/manager/globals.js",
"require": "./dist/manager/globals.cjs"
},
"./preview/globals": {
"types": "./dist/preview/globals.d.ts",
"import": "./dist/preview/globals.js",
@ -229,6 +234,9 @@
"manager/globals-module-info": [
"./dist/manager/globals-module-info.d.ts"
],
"manager/globals": [
"./dist/manager/globals.d.ts"
],
"preview/globals": [
"./dist/preview/globals.d.ts"
]

View File

@ -28,17 +28,13 @@ export const getEntries = (cwd: string) => {
define('src/preview-api/index.ts', ['browser', 'node'], true),
define('src/manager-api/index.ts', ['browser', 'node'], true, ['react']),
define('src/router/index.ts', ['browser', 'node'], true, ['react']),
define('src/components/index.ts', ['browser', 'node'], true, [
'react',
'react-dom',
'@storybook/csf',
'@storybook/global',
]),
define('src/components/index.ts', ['browser', 'node'], true, ['react', 'react-dom']),
define('src/theming/index.ts', ['browser', 'node'], true, ['react']),
define('src/theming/create.ts', ['browser', 'node'], true, ['react']),
define('src/docs-tools/index.ts', ['browser', 'node'], true),
define('src/manager/globals-module-info.ts', ['node'], true),
define('src/manager/globals.ts', ['node'], true),
define('src/preview/globals.ts', ['node'], true),
];
};

View File

@ -9,7 +9,9 @@ export interface SaveStoryResponsePayload {
csfId: string;
newStoryId?: string;
newStoryName?: string;
newStoryExportName?: string;
sourceFileContent?: string;
sourceFileName?: string;
sourceStoryName?: string;
sourceStoryExportName?: string;
}

View File

@ -111,9 +111,11 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf
csfId,
newStoryId,
newStoryName,
newStoryExportName: name,
sourceFileContent: code,
sourceFileName,
sourceStoryName,
sourceStoryExportName: storyName,
},
error: null,
} satisfies ResponseData<SaveStoryResponsePayload>);

View File

@ -214,6 +214,7 @@ export class MountMustBeDestructuredError extends StorybookError {
category: Category.PREVIEW_API,
code: 12,
message: dedent`
Incorrect use of mount in the play function.
To use mount in the play function, you must satisfy the following two requirements:

View File

@ -0,0 +1 @@
module.exports = require('storybook/internal/manager/globals');

View File

@ -0,0 +1 @@
module.exports = require('storybook/internal/preview/globals');

View File

@ -50,6 +50,26 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<
const exportName = exportNames[index];
// we remove nested object schemas here since they are not used inside Storybook (we don't generate controls for object properties)
// and they can cause "out of memory" issues for large/complex schemas (e.g. HTMLElement)
// it also reduced the bundle size when running "Storybook build" when such schemas are used
(['props', 'exposed'] as const).forEach((key) => {
meta[key].forEach((value) => {
if (typeof value.schema !== 'object') return;
// we need to use Object.defineProperty here since schema is a getter so we can not set it directly
Object.defineProperty(value, 'schema', {
configurable: true,
enumerable: true,
value: {
kind: value.schema.kind,
type: value.schema.type,
// note that value.schema.schema is not included here (see comment above)
},
});
});
});
const exposed =
// the meta also includes duplicated entries in the "exposed" array with "on"
// prefix (e.g. onClick instead of click), so we need to filter them out here

View File

@ -0,0 +1 @@
module.exports = require('@storybook/core/manager/globals');

View File

@ -0,0 +1,2 @@
export * from '@storybook/core/manager/globals';
export type * from '@storybook/core/manager/globals';

View File

@ -0,0 +1 @@
export * from '@storybook/core/manager/globals';

View File

@ -167,6 +167,11 @@
"types": "./core/preview/globals.d.ts",
"import": "./core/preview/globals.js",
"require": "./core/preview/globals.cjs"
},
"./internal/manager/globals": {
"types": "./core/manager/globals.d.ts",
"import": "./core/manager/globals.js",
"require": "./core/manager/globals.cjs"
}
},
"main": "dist/index.cjs",
@ -219,6 +224,9 @@
"internal/manager-errors": [
"./core/manager-errors.d.ts"
],
"internal/manager/globals": [
"./core/manager/globals.d.ts"
],
"internal/manager/globals-module-info": [
"./core/manager/globals-module-info.d.ts"
],

View File

@ -157,12 +157,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"value": {
"name": "object",
"required": false,
"value": {
"nestedProp": {
"name": "string",
"required": true,
},
},
"value": {},
},
},
},
@ -183,12 +178,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"value": {
"name": "object",
"required": false,
"value": {
"nestedProp": {
"name": "string",
"required": true,
},
},
"value": {},
},
},
},
@ -279,12 +269,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": true,
"value": {
"foo": {
"name": "string",
"required": true,
},
},
"value": {},
},
},
"literalFromContext": {
@ -325,12 +310,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": true,
"value": {
"nestedProp": {
"name": "string",
"required": true,
},
},
"value": {},
},
},
"nestedIntersection": {
@ -347,16 +327,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": true,
"value": {
"additionalProp": {
"name": "string",
"required": true,
},
"nestedProp": {
"name": "string",
"required": true,
},
},
"value": {},
},
},
"nestedOptional": {
@ -377,22 +348,12 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
{
"name": "object",
"required": false,
"value": {
"nestedProp": {
"name": "string",
"required": true,
},
},
"value": {},
},
{
"name": "object",
"required": false,
"value": {
"nestedProp": {
"name": "string",
"required": true,
},
},
"value": {},
},
],
},
@ -411,13 +372,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": false,
"value": {
"recursive": {
"name": "other",
"required": true,
"value": "MyNestedRecursiveProps",
},
},
"value": {},
},
},
"stringArray": {

View File

@ -1,3 +1,4 @@
import type { VueDocgenInfo, VueDocgenInfoEntry, VueDocgenPlugin } from '@storybook/vue3-vite';
import type { ExtractedProp } from 'storybook/internal/docs-tools';
import {
convert,
@ -6,7 +7,6 @@ import {
type ArgTypesExtractor,
} from 'storybook/internal/docs-tools';
import type { SBType, StrictArgTypes, StrictInputType } from 'storybook/internal/types';
import type { VueDocgenInfo, VueDocgenInfoEntry, VueDocgenPlugin } from '@storybook/vue3-vite';
type PropertyMetaSchema = VueDocgenInfoEntry<'vue-component-meta', 'props'>['schema'];
@ -283,17 +283,12 @@ export const convertVueComponentMetaProp = (
};
}
// recursively/deeply convert all properties of the object
case 'object':
return {
name: 'object',
value: Object.entries(schema.schema ?? {}).reduce<Record<string, SBType>>(
(obj, [propName, propSchema]) => {
obj[propName] = convertVueComponentMetaProp(propSchema);
return obj;
},
{}
),
// while Storybook generates simple JSON object controls, nested schemas don't have specialized controls
// so we don't need to recursively map the object schema here
value: {},
required,
};