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

ReeceM · January 29, 2021, 6:41pm

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:10pm

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:20pm

This is being implemented in the latest CLI updated.

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

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

Topic		Replies	Views
Enhance --create-slice so that it automatically sets the slice name to avoid seeing <Index> in Vue Dev Tools Features product-feature-idea	4	824	December 9, 2021
Slice templates with slicemachine 1.0.0 Developing with Prismic slice-machine	2	358	April 27, 2023
Custom Slice Template Developing with Prismic	15	1557	July 27, 2022
Changing the name of a slice1, slice2 Developing with Prismic slice-machine	1	56	July 2, 2024
Prismic API references a `xyz_type` that could not be matched by the SliceZone. Did you register libraries path correctly? Developing with Prismic slice-machine	13	1827	December 9, 2021

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

Related topics