Slice Machine Iteration 8 June 2020 - Pull command & Next.js Support

renaud · June 10, 2020, 10:03am

We were so happy to see the feedback that we received after the release of Slicemachine. This gave us a lot of energy to continue improving the project and make it available for all of you.

Our goal is to work with and for our community to improve the process of creating websites with components.

In that sense, we will communicate every two weeks on the different topics that we will tackle and the one that we might need help with.

And this starts now, For the next two weeks, we will work on two main subjects.

Porting Slicemachine to next.js ▲

We are porting Slicemachine to next.js means three things.

Porting the Slicezone to next.js
Automating the configuration of your next.js project
Porting the nuxt.js component to next.js

We are currently working on implementing the Slicezone in next.js to replicate the behavior of the Slicezone that we created for nuxt.js.

Slicezone for next.js

You can find an RFC that will describe the work that needs to be done here for the Slicezone

github.com/prismicio/slice-machine

RFC: Port SliceZone to Next.js

opened 10:53AM - 09 Jun 20 UTC

closed 09:48AM - 05 Jan 21 UTC

hypervillain

rfc

Part of the port of SliceMachine to Next consists in porting the SliceZone. #…## What's a SliceZone A component that matches front-end components with Prismic data components (that we call slices). You can see it as an hybrid between a "components registry" and a router: - at build time, it scans and lists available components to create a custom resolver function - when a page hits, it fetches the corresponding content on Prismic - it then matches Prismic slices with components, and renders them accordingly ### Features - Auto-fetch Prismic data - Auto-match components - Theme (via context or props) - Vue slots-like pattern ### Static export and differences with Nuxt Next 9.3 introduced `getStaticProps` to pre-render pages at build time. Instead of relying on a `PageFetch` wrapper component, the `next-slicezone` exports a `useGetStaticProps` function that formats arguments and returns a Next `getStaticProps` function. The Nuxt module makes use of Nuxt templating to create the resolver function. A more idiomatic way to handle such cases in Next would be to create the registry (an object with components ids and paths) at `getStaticPaths` call and pass it down. The SliceZone would then pick up the registry and make calls to `loadableComponents`. ### On slots The Nuxt SliceZone makes use of Vue named-slots. When working with external libraries like [essential slices](https://github.com/prismicio/essential-slices), a common pattern is to defer part of the renderers to the user. Different solutions exist in React (notably render props pattern), and we might offer several. ### Example page This is subject to change, especially regarding how/where Prismic client is instantiated. ```javascript import { Client } from '../prismic' import SliceZone, { useGetStaticProps, useGetStaticPaths } from 'next-slicezone' const Page = ({ uid, registry, slices }) => ( <div> <h1 className="title"> Welcome to page "{uid}"! </h1> <SliceZone registry={registry} slices={slices} /> </div> ) export const getStaticProps = useGetStaticProps({ client: Client(), uid: ({ params }) => params.uid }) export const getStaticPaths = useGetStaticPaths({ client: Client(), type: 'page', fallback: true, formatPaths: ({ uid }) => `/${uid}` }) export default Page ````

Our essential set of component for react

In the meantime Octahedroid nicely offered us to port or vue-essential component to react for future support of Gatsby, plain React or Next.js

You can follow their progress in this repository.

And if you want to contribute have a look at the different issues

Synchronizing your content model from your repository to your code after each change

After creating a bootstrap component with the prismic sm --create-slice command, you will probably add a new field in the custom type builder for this component to enrich it.

Our goal is to add a new command that will allow you to keep your code in sync with your custom type.

You can find all details here.

github.com/prismicio/slice-machine

RFC: Add support of the `pull` command in the Prismic CLI

opened 12:36PM - 09 Jun 20 UTC

closed 04:08PM - 17 Feb 21 UTC

arnaudlewis

rfc

## Summary We want to add a way to synchronize your components between Prismi…c and your project. It would be a CLI command that will scan all your slices on Prismic side and all your slicemachine components on the other side to help you create the missing ones and update the others if needed. ## Motivation The goal of Slicemachine is to have a more code-centric approach and avoid all these steps of simply synchronizing your setup on Prismic and your project. The CLI is supposed to be here to resolve this connection and automate things for you. Here we face the case where you add Components from the Writing Room that is connected to all of our Slicemachine Libraries. You can even imagine that these slices that already exists in your project might have been updated since then. So here, it's just a quick way to resolve these cases seamlessly. ## Scenario Let's say that you just setup your project for SliceMachine with the following command: ``` > prismic sm --setup ``` It created 3 slices: - CallToAction - Banner - HighlightItems At some point, you decide to change the models of `CallToAction` and `Banner` and to add a new slice called `HelloWorld` from the writing room. You can use the following command to update your project accordingly: ``` > prismic sm --sync These slices were added to your project: - HelloWorld Conflicts on the custom type `page`. All these components already exists but their model diverge. Select the components you'd like to update: [ ] CallToAction [x] Banner We successfully updated the model of: - Banner Please update your implementation accordingly. ``` ## implementation - Create a new command `--sync` for slicemachine that will be recognize by the CLI. - Gather all the models of the slices coming from the different libraries listed in `sm.json` - Fetch all the slices coming from your custom types through the CustomTypes API (see `create-slice` as an example) - Make a diff between these to identify: - Existing slices already up to date - Existing slices that have conflicts because of updates on the Writing room - Missing slices that should be added to the project - Create the Missing Slices - Create an interactive way with `inquirer` (Already the dependency used for Prompts) to resolve conflicts and update or not the models in the code.

We are happy to get any feedback on this subject and will let you know as soon as we have progress on those topics.

Thanks a lot for all the energy that you're giving us, and don't hesitate to ask questions or contribute to the different topics.

Pau · September 14, 2020, 2:04pm

We Slice Machine!

Topic		Replies	Views
Slice Machine Iteration 30 June 2020 - Setup repo with your custom library, Next.js Documentation, New components Developing with Prismic slice-machine	3	925	December 9, 2021
Slice zone empty after slicezone upgrade Developing with Prismic nextjs	3	501	March 14, 2022
Slice machine with Next.Js Developing with Prismic slice-machine	5	1789	December 9, 2021
Pain points with Slice Machine Developing with Prismic nextjs	5	600	December 14, 2021
Bring Slice Machine to Gatsby, Next, Svelt, etc Developing with Prismic slice-machine	14	2159	February 20, 2024

Slice Machine Iteration 8 June 2020 - Pull command & Next.js Support

Porting Slicemachine to next.js ▲

Slicezone for next.js

Our essential set of component for react

Synchronizing your content model from your repository to your code after each change

Related topics