RFC: Name component functions with the Slice Name

Current state

Right now when you create a slice with prismic sm --create-slice you are asked to give a location to build the slice, as well as a PascalCase name for that slice. The CLI then creates a folder with that name, and uses it in a few other places like the Storybook story file.

It does not use it to name the React functional component that it creates, so you get essentially this:

const MySlice = ({ slice }) => (
<div>
...
</div>
)

export default MySlice;

This means that all of your Slices have functions with the same name. This makes it less intuitive to debug errors like these:

Warning: Failed prop type: The prop `slice.primary.title` is marked as required in `MySlice`, but its value is `undefined`.

Proposed solution

We can apply the same Slice name to the function so that if I give a name of HeroSection I’ll get a component like this:

const HeroSection= ({ slice }) => (
<div>
...
</div>
)

export default HeroSection;

This will make debugging easier and also give a bit more context within the file. We are already asking for a PascalCase name, so this matches the React standard for components already.

Thoughts on this? Any potential pitfalls I’m missing with this approach?

[hypervillain]

The create-slice command is now part of the local builder and it does handle naming components: https://github.com/prismicio/slice-machine/blob/with-custom-types/packages/slice-machine/templates/slice/next/index.js#L4

As Alex said, thanks a lot for taking the time to read the project @ReeceM, it’s much appreciated

[a-trost]

Great call, @ReeceM! That’s exactly what I was talking about. Seems like it’s on its way. I appreciate you surfacing that!