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

Svelte: Statically load docgen info for svelte components #13466

Merged
merged 1 commit into from
Dec 16, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions addons/docs/src/frameworks/svelte/extractArgTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,8 @@ type Docgen = {

export const extractArgTypes: ArgTypesExtractor = (component) => {
try {
// eslint-disable-next-line new-cap
const comp: ComponentWithDocgen = new component({ props: {} });
// eslint-disable-next-line no-underscore-dangle
const docgen = comp.__docgen;
const docgen = component.__docgen;
if (docgen) {
return createArgTypes(docgen);
}
Expand Down
2 changes: 1 addition & 1 deletion addons/docs/src/frameworks/svelte/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export function webpackFinal(webpackConfig: Configuration, options: any = {}) {
webpackConfig.module.rules.push({
test: /\.svelte$/,
loader: path.resolve(`${__dirname}/svelte-docgen-loader`),
enforce: 'pre',
enforce: 'post',
});

return webpackConfig;
Expand Down
13 changes: 8 additions & 5 deletions addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ import * as path from 'path';
* @param source raw svelte component
*/
export default async function svelteDocgen(source: string) {
// get filename for source content
// eslint-disable-next-line no-underscore-dangle
const file = path.basename(this._module.resource);
const { resource } = this._module;

// get filename for source content
const file = path.basename(resource);
// set SvelteDoc options
const options = {
fileContent: source,
filename: resource,
version: 3,
};

Expand All @@ -25,14 +26,16 @@ export default async function svelteDocgen(source: string) {
// populate filename in docgen
componentDoc.name = path.basename(file);

const componentName = path.parse(resource).name;

docgen = `
export const __docgen = ${JSON.stringify(componentDoc)};
${componentName}.__docgen = ${JSON.stringify(componentDoc)};
`;
} catch (error) {
console.error(error);
}
// inject __docgen prop in svelte component
const output = source.replace('</script>', `${docgen}</script>`);
const output = source + docgen;

return output;
}
24 changes: 14 additions & 10 deletions examples/svelte-kitchen-sink/src/stories/button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,24 @@ import ButtonView from './views/ButtonView.svelte';

export default {
title: 'Button',
component: ButtonView,
};

export const Rounded = () => ({
const Template = (args) => ({
Component: ButtonView,
props: {
rounded: true,
message: 'Rounded text',
...args,
},
});

export const Square = () => ({
Component: ButtonView,
props: {
rounded: false,
message: 'Squared text',
},
});
export const Rounded = Template.bind({});
Rounded.args = {
rounded: true,
message: 'Squared text',
};

export const Square = Template.bind({});
Square.args = {
rounded: false,
message: 'Squared text',
};