SliceName in in index.js is not the same as name given in CLI

ReeceM · February 1, 2021, 5:15pm

I don't know if it was because I didn't use the template for NextJS, I wanted to set it up from scratch kinda.

When I ran prismic sm --create-slice I created my slice, for instance we can call it SimpleHero.

The folder name comes out alright, and the directory structure.

What I find interesting is the name of the slice function inside index.js, it's called const MySlice. Surely it would be called const SimpleHero?

I know that the index.js at the top level @/slices directory exports the default from each of them to the correct name.

But would I be wrong in thinking that it would be clearer if the slice generated has a appropriate function name?

Open to correction on this

Phil · February 1, 2021, 5:15pm

Hi Reece,

I think this is a nice idea, this template is simply copied from the one that is present in the CLI.

github.com

prismicio/prismic-cli/blob/master/lib/commands/slicemachine/templates/next/index.js

import React from 'react';
import { array, shape } from 'prop-types';
import { RichText } from 'prismic-reactjs';

const section = {
  maxWidth: '600px',
  margin: '4em auto',
  textAlign: 'center',
};

const h2 = {
  color: '#8592e0',
};

const MySlice = ({ slice }) => (
  <section style={section}>
    <h2 style={h2}>Template slice, update me!</h2>
    { slice.primary.title ? <RichText render={slice.primary.title} /> : <p>{{ componentName }}</p>}
  </section>
);

This file has been truncated. show original

I'm not sure if it will be possible to dynamically update the function name, but it shouldn't be a problem manually updating this in your project.

I'm created an RFC in the CLI's github and hopefully @marc.mcintosh and/or the rest of the Slice Machine team can look in to it:

Thanks.

Phil · February 9, 2021, 2:21pm

This is being implemented in the latest CLI updated.

Phil · February 9, 2021, 2:21pm

marc.mcintosh · March 5, 2021, 3:51pm

It's been implemented in an upstream version that's not yet released.