Slice Machine with Solidjs

Developing with Prismic
1

I want to use SolidJS + AstroJS with Prismic. Any suggestions on how I can achieve this? I don't mind building wrappers, if I can get pointed into the right direction :slight_smile:

If it's super complicated to do so, how can I benefit from the Slice machine tool if it isn't supported?

How do I add a plugin to generate Astro Components from this json?

{
  "id": "call_to_action",
  "type": "SharedSlice",
  "name": "CallToAction",
  "description": "CallToAction",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "CallToAction",
      "primary": {
        "title": {
          "type": "StructuredText",
          "config": {
            "label": "Title",
            "placeholder": "",
            "allowTargetBlank": false,
            "single": "heading2"
          }
        },
        "body": {
          "type": "StructuredText",
          "config": {
            "label": "body",
            "placeholder": "",
            "allowTargetBlank": true,
            "single": "paragraph"
          }
        },
        "buttontext": {
          "type": "Text",
          "config": {
            "label": "buttonText",
            "placeholder": ""
          }
        },
        "background": {
          "type": "Image",
          "config": {
            "label": "background",
            "constraint": {},
            "thumbnails": []
          }
        }
      },
      "items": {},
      "imageUrl": "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
    }
  ]
}

But then how should I use the component on an AstroJS App?

PS: I really like what you've done here. It's a perfect solution for my needs. Hope I can contribute :slight_smile:

Thanks.

2

I can see that this exists: GitHub - prismicio/slicemachine-plugin-kit: A set of helpers to develop and run Slice Machine plugins

Is there any examples?

4

Hey @g.rosado,

Slice Machine plugins are still in early development, so they're not available for usage.

Thanks for offering to help with this! For now, the best way to implement this is with @prismicio/client and @prismicio/helpers as a basic JavaScript implementation within Solid or Astro. (This is basically how Svelte works currently.)

For now, you won't be able to use Slice Machine with these frameworks, so you'll have to do all of your content modeling in the Legacy Builder.

One way or another, this should be a fairly standard and robust build — we just don't offer documentation for it at the moment. If you run into any issues, please feel free to DM me and I'm happy to look into it.

Sam

6

Thanks for reaching out. I'm currently trying to create a generator that does most of the manual work but uses the slice machine as the UI for creating slices, entities etc. I'm already using the @prismicio/client and @prismicio/helpers, really useful.

I think this tool opens a lot of different ways for teams to create their own framework I guess.

The fact that it generates the models on the .json files makes this all possible :slight_smile:

The only thing I'm not taking advantage of is the preview of slices, but it's fine, I just add mock data to the Prismic dashboard. I don't really need it, since I'm coding I'm already creating the final product.

Question

Is there a way to leverage the preview of slices? Like I'm using the previousNext setting, but I already tried to create a page slice-preview.astro. When I preview nothing happens, I don't know how this works internally, but if the tool can send data to a page via Cookies, like on previews of entities, or some sort we can easily create wrappers for previewing slices.

  1. Get slice data from the cookie
  2. Render the specific slice component with the mock data

Easy as that, no?

Maybe already does that and I don't even know :laughing:

7

Hey @g.rosado,

I'm sorry I can't really help with Slice Machine and simulating Slices. Officially, we don't offer support for Astro or Solid at the moment, so configuring that support will be an advanced custom implementation. Also, you should know that there's some significant work underway on the internal API of Slice Machine, so any work you do to adapt a new framework with Slice Machine might be obviated in the coming months. However, if you're interested in working on a Solid or Astro adapter for Slice Machine, I can put you in touch with the team.

Sam

8

I've already done it! I mean, at least my own way. I just have a bunch of astro components and they generate the Slice components, then I just use solid components inside of those astro files (which are the generated slices components)

If the team has some idea or design on how an Astro/Solidjs adapter would look like I can give some feedback and maintain an possible adapter!

Thanks!

10

Hello @g.rosado

That's great. It would be great if you share your idea here. It will be helpful for others.

Thanks,
Priyanka

12

Sharing the implementation is a bit complicated since I have lots of things glued together. For example, I can't just export Astro components on the slices/index.ts, I have another file-watcher on top of the slice-machine file watcher that fixes the default behavior.

It all comes down to:

  1. on each page have a:
---
// need to insert the correct page slug to access all slices  & data
const { seo, slices } = await fetchPage("index"); 
---

<Page lang={lang}>
	<SEOAstro slot="head" {...seo} />
	{slices.map((slice) => <SliceRenderer slice={slice} />)}
</Page>
  1. On the SliceRenderer 
---
interface Props {
	slice: SliceExtended;
}

const { slice } = Astro.props;

const Component = components[slice.slice_type as keyof typeof components];
const hasComponent = Component !== undefined;
---

{
	hasComponent && (
		// @ts-ignore
		<Component {...slice} />
	)
}
  1. On every Slice Component:
import * as prismicH from "@prismicio/helpers";

interface Props {
  id: string;
  slice_type: string;
  slice_label: string;
  variation: string;
  version: string;
  // We set the primary and items as any because it's hard to know whats the
  // actual value at runtime, it varies on the slice variation, etc.
  primary: any;
  items: any[];
}

const props = Astro.props;
---

<section>
  <span>
    {
      props.primary.title ? (
        prismicH.asText(props.primary.title)
      ) : (
        <h2>Template slice, update me!</h2>
      )
    }
  </span>
  {
    props.primary.description ? (
      prismicH.asText(props.primary.description)
    ) : (
      <p>start by editing this slice from inside Slice Machine!</p>
    )
  }
</section>

Then you can just use SolidJS, React, Svelte components inside of the SliceComponent.astro. Re-order them as you like, whatever.

I would love to have end-to-end typesafety here but its very hard. Like I would love to have the types for the slices generated but it was too much work. Maybe later :joy: .

Also previews do not work. Would love to know how they work so that I can implement a solution. I've sent you a DM.

1 Like
14

Thanks, @g.rosado, For sharing the implementation. I will pass this on to my dedicated team. It would be helpful for them in the future if they create documentation. I Highly appreciate your response.