Links don't work anymore for pagePerSection

[alexcanessa]

Current behavior

Since 11.0.9 (I suspect because of this PR), when clicking on any component (with pagePerSection: true) the routing goes to #/-?id=ComponentName.

To reproduce

1. Configure styleguidist to have pagePerSection: true
2. Click on any component.
3. The link will resolve to a Page Not Found.

Expected behavior

Routing to the actual component page, showing the component.

[mitsuruog]

@alexcanessa Would you create a code sandbox?

https://codesandbox.io/s/github/mitsuruog/react-styleguidist-issue-template

[alexcanessa]

@mitsuruog sure:

https://codesandbox.io/s/small-hill-fg8yr?file=/styleguide.config.js

[mitsuruog]

This seems to be due to the fact that pagePerSection: true is set but sections is not in the config.
A simple workaround is to move your components into the sections for now.

module.exports = {
  webpackConfig: require("./webpack.config"),
  // This is what breaks the URL:
  pagePerSection: true,
  sections: [
    {
      name: "<section name>",
      components: "src/components/**/*.{js,jsx}"
    }
  ]
};

[mitsuruog]

@sapegin
If pagePerSection: true is set, I think we need to make an error while checking the configuration file scheme when sections are required.
What do you think?

[sapegin]

Not sure why it should be an error, seems like a valid configuration. What am I missing?

(The problem is that this feature wasn't well thought and too brittle, that why we constantly have bugs, and when someone fixes one bug they usually create several others.)

[mitsuruog]

From what I've seen in the implementation, it doesn't seem to work properly without sections.
if the name in the sections isn't passed, the - is used as a section name.
that's why the URL looks like#/-?id=ComponentName. The part marked with - is where the section name is originally set.

• https://github.com/styleguidist/react-styleguidist/blob/master/src/client/utils/processSections.ts#L19

Since the implementation looked like that, I thought that it was designed from the beginning to always have sections.

[sapegin]

Please don't use the current implementation as the source of how it should work ;-) I also haven't written any of this code so I can't say either how it should work.

But for me having each component on its own page looks like the most common use case, and I remember it used to work at some point.

[alexcanessa]

It's definitely working on the version 11.0.8.

I don't think sections should be mandatory as it's a distinct feature from having each component per page.

[sapegin]

You always have sections even if you don't define them explicitly in the config file.

react-styleguidist/src/scripts/schemas/config.ts

Lines 219 to 234 in d80a190

	sections: {
	type: 'array',
	default: [],
	process: (val: Rsg.ConfigSection[], config: Rsg.StyleguidistConfig): Rsg.ConfigSection[] => {
	if (!val) {
	// If root `components` isn't empty, make it a first section
	// If `components` and `sections` weren’t specified, use default pattern
	const components = config.components || DEFAULT_COMPONENTS_PATTERN;
	return [
	{
	components,
	},
	];
	}
	return val;
	},

[alexcanessa]

You always have sections even if you don't define them explicitly in the config file.

react-styleguidist/src/scripts/schemas/config.ts

Lines 219 to 234 in d80a190

	sections: {
	type: 'array',
	default: [],
	process: (val: Rsg.ConfigSection[], config: Rsg.StyleguidistConfig): Rsg.ConfigSection[] => {
	if (!val) {
	// If root `components` isn't empty, make it a first section
	// If `components` and `sections` weren’t specified, use default pattern
	const components = config.components || DEFAULT_COMPONENTS_PATTERN;
	return [
	{
	components,
	},
	];
	}
	return val;
	},

@sapegin yes. I think I'm missing your point?

In the configuration file, I should be able to not specify sections and have a component per page.

[sapegin]

You'll always have one section with your components, components option is converted to sections.

[alexcanessa]

@sapegin Yes, ok. So what does it change in terms of my configuration file?

[sapegin]

Nothing I guess? I don't know what's in your config file.

I was answering to this statement:

I don't think sections should be mandatory as it's a distinct feature from having each component per page.

Sections are mandatory because you can't have no sections.

[alexcanessa]

Well that's the point lol. Config file is in the sandbox.

Anyway, they're not mandatory to have in the config file. The fact that the library then creates them it's a separate story.

So to answer the actual bug: you should be able to not specify sections and still expect the pagePerSection to work right?

[styleguidist-bot]

🎉 This issue has been resolved in version 11.1.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀