Custom Slice Template

Hello, beautiful people

I double checked documentation and didn't found this awesome feature. So I consider sharing it.

If you create slice-template folder inside your project. SM will take template from this folder. In our case we are using typescript so this is big.

example we are using same default slice just with types.

Folder structure:

Screenshot 2021-02-22 at 10.13.59

Slice template:

Screenshot 2021-02-22 at 10.14.20

I hope this will be useful for someone and added to documentation in future.

Good luck! :heart::cherry_blossom:

3 Likes

Thanks Arnas,

I wasn't aware of this capability :slight_smile:

I'll update the documentation to include this.

Thanks again.

Hi!
We're using this for typescript as well and its working great! It acted exactly as expected but I found myself scratching my head when my new slice didn't appear in storybook. This is because the hardcoded slice name "name": "MySlice" in my model and mock did not update when copied over when the slice was created.

I looked for docs hoping to see if there is some secret token I can use to mark the name for replacing, e.g "name": "{{slicename}}", or whatever. You get the idea.

Not asking for a feature per se, but if it's not currently possible, the ability would be tight. If I end up finding a way I'll post here. If anyone else knows whats up, please share :pray:

Hi William,

This isn't something that's possible with the current version of the Prismic CLI, but we have been working on an improved version of the CLI which will include this functionality in the templates.

Once this new version is released we'll let you know here. :slightly_smiling_face:

Thanks.

I just started working with SM and would really like to get custom templates working, but if the model.json file can't be templated, it seems kinda useless. Is there any progress with a handlebars type token replacement in model.json?

(If I make my model.json have empty fields, it crashes Slice Machine)

Are you following the custom templating instructions as described here (without adding any secret tokens like name": "{{slicename}}")?

Yes, but without adding the tokens, the custom templates are very limited, as I have to go in and find/replace all of the hardcoded values (which have to be present or Slice Machine bombs out when trying to generate stories).

I would love to use these to autogenerate my TypeScript types, but given the fact that the values are hardcoded, it would be impossible to do that currently.

I'm kinda shocked you guys don't have a solution for custom templating with string variables (ala handlebars, etc.)

That makes sense. I've passed your feedback to the Slice Machine team and hopefully, they'll be able to look into this soon.

I'll let you know once I have more information.

Thanks.

Hi @will.schoenberger @Phil @jason.clark!

So I ran into the same problem as you guys - I wanted to use custom typescript templates for both the index.tsx and model.json files but could not figure out how to make the slice naming work for me automatically.

At first I left those files empty but that just made slice machine crash every time I tried to make a new slice. Then I copied one of the earlier generated slices as is, but then I would have to manually change the hardcoded naming for every new slice.

After digging around the code of slice machine, I finally figured out what's happening. Essentially, the application is using the copy-template-dirs package to fill the component name and id via the moustache syntax {{ }}.

So the key idea here is that you can have these values filled in the template files when a new slice is generated:

  • componentName
  • componentId
  • variationId

To do so, just add them to the template file inside moustaches, e.g. {{componentName}} and {{componentId}}.

I've attached screenshots of my own template index.tsx and model.json files.


@Phil I really think the documentation needs to be updated with this information. Slice templates are really useful but without this information most devs would just end up wasting time and stop using slice machine altogether. I personally had to spend 3-4 hours just to get to the point where I understood what to do. If you want, I can provide a write-up which can be added to the documentation page (the What is Slice Machine article).

Regards,
Ishaq Ibrahim

Hey @saas1, thanks a lot for your feedback. I'll share it with the team.

It's true that we don't have any TS documentation for now., but we're conscious that TypeScript is better than it was but not straightforward enough for now. We'll have automatic type generation with Slice Machine in the future. For now, we have the manual CLI: GitHub - prismicio/prismic-ts-codegen: An experimental Prismic model-to-TypeScript-type generator..

Hi @Pau,

Thanks for sharing details about the codegen cli, I'll definitely try it out!

And yeah do please share my feedback about adding the info about moustache-cased variables in the slice templates.

Thanks

1 Like

If anyone is looking for templates to achieve this, here is the folder with the default templates.

1 Like