RFC: Setup your slicemachine project with your custom library

[Duaner]

Context

When using the command prismic sm --setup the slice machine CLI will generate a new prismic repository and import in your project a set of default Open Source components.

For nuxt.js : https://github.com/prismicio/vue-essential-slices For next.js : https://github.com/prismicio/essential-slices

We had different request to be able to specify your own custom library instead of the default one

Solution

We will create a new argument for the prismic sm --setup command allowing you to specify your own custom library. (This should be a npm package)

prismic sm --setup --lib my-npm-package

This command will

Generate a new repository and configure your project to be linked to your newly created repository

As the current setup command, the command will create a new repository The CLI command will generate a new prismic repository & add the different files in your codebase to link your project to your prismic endpoint & setup the toolbar

Download your custom library as a dependency

1. Add & download the dependency in your project
2. Reference your library in the sm-resolver to use those slices automatically in the Slicezone.

Import your custom slices in your first created custom type.

1. Generate a new prismic repository
2. Create a page custom type
3. Add all slices definition to your page custom type.

[hypervillain]

How would you handle bootstrapped files in that situation?

[Duaner]

For nuxt / vue we should be able to do everything automatically since we change the config

For react we will have to provide proper documentation to add the specific code for the library in

_app.js
_document.js

We will generate prismic.js

We should ask the library creator to add a proper readme in order to provide guidance on how to write properly the files to be bootstraped.

This should stay automatic with our own library.

[lihbr]

It'll be cool to also have a --no-lib flag like the --no-prismic one also to just setup the project for using a yet-to-be-coded local library 🙂, so we'll have:

$ prismic sm --setup                # install essential-slices
$ prismic sm --setup --library      # install said library instead of essential-slices
$ prismic sm --setup --no-library   # install no library

What's the current behavior of this flag then? (I know we talked about it already but I'm still not sure regarding it) https://www.slicemachine.dev/documentation/the-prismic-cli#specify-library is it just that the models aren't push to Prismic currently with it?

[hypervillain]

Why would you run setup at all if you want to bootstrap a library?

On Tue, Jun 30, 2020 at 6:11 PM lihbr [email protected] wrote:

It'll be cool to also have a --no-lib flag like the --no-prismic one also to just setup the project for using a yet-to-be-coded local library 🙂, so we'll have:

$ prismic sm --setup # install essential-slices

$ prismic sm --setup --library # install said library instead of essential-slices

$ prismic sm --setup --no-library # install no library

What's the current behavior of this flag then? https://www.slicemachine.dev/documentation/the-prismic-cli#specify-library is it just that the models aren't push to Prismic currently with it?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/prismicio/slice-machine/issues/25#issuecomment-651895322, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSDRAPM73PA2Q7OISM4R2DRZIFEFANCNFSM4OMKLQUA .

[lihbr]

For Vue: to get prismic-javascript, @prismicio/vue, @nuxtjs/prismic, vue-slicezone, nuxt-sm installed and sm.json & nuxt.config.js configured correctly in a blink?

[hypervillain]

You actually don't need @nuxtjs/prismic nor nuxt-sm nor nuxt.config.js as you develop a framework agnostic library! You probably wouldn't need prismic-javascript because you don't have to handle queries either. You'd use it maybe during development though.

What it could do: install sm-commons and @prismicio/vue, add a prepack script to bundle the library manifest and create an empty sm.config.json file, but that would be a different command (tbd)

On Tue, Jun 30, 2020 at 6:27 PM lihbr [email protected] wrote:

For Vue: to get prismic-javascript, @prismicio/vue, @nuxtjs/prismic, vue-slicezone, nuxt-sm and nuxt.config.js configured correctly in a blink?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/prismicio/slice-machine/issues/25#issuecomment-651903887, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSDRAPCOECIJY4CL4LLA4DRZIG5ZANCNFSM4OMKLQUA .

[lihbr]

Of course, if you're developing a library intended to be shared, but what if you just want to use Slice Machine in your Nuxt/Next project? 🤔 I feel like we're not on the same line here, we'll talk about it tomorrow most likely!

[Duaner]

I think what @lihbr wants is to basically create a new slicemachine project without having any component at bootstrap but only use his own component.

So the no-lib will not really to import your existing lib but more another need.

I want to set up my project and only create my slices so i don't want to have the noise and the hassle or remove the slices imported by default.

Is that right @lihbr ?

[lihbr]

Yup @srenault 👌

[lihbr]

Update 02/17/2021:

1. --lib flag is working
2. Setting up Slice Machine with no libraries should be the default now, @MarcMcIntosh to have that in mind when working on it 🙂 (will also reduce the overhead!)

[MarcMcIntosh]

@lihbr that could be done.... but then we would have to ask people to install them

[Duaner]

I don't think it should be the new default, for now, this will reduce the time to arrive at the first success for newcomers. This is a good thing for people already knowing the product but might create a steeper learning curve.

[lihbr]

To me the "getting started" tutorial should be saying: $ prismic sm --setup --lib=essential-slice or $ prismic sm --setup --basic to give a first success but really having these libraries has default comes with more cons than pros for everyone else in my opinion. Happy to discuss it though :)

@a-trost, what's your opinion?

Edit: I also noticed the new Nuxt documentation doesn't talk about this default library now 🤔

[a-trost]

Agreed that the components should be opt-in, rather than opt-out. I think adding the flag in the getting started tutorial handles that early success for newcomers.

[davidparys]

It'll be cool to also have a --no-lib flag like the --no-prismic one also to just setup the project for using a yet-to-be-coded local library 🙂, so we'll have:

$ prismic sm --setup                # install essential-slices
$ prismic sm --setup --library      # install said library instead of essential-slices
$ prismic sm --setup --no-library   # install no library

What's the current behavior of this flag then? (I know we talked about it already but I'm still not sure regarding it) https://www.slicemachine.dev/documentation/the-prismic-cli#specify-library is it just that the models aren't push to Prismic currently with it?

This could be super useful. I have some projects that don't require the essential slices.

[ReeceM]

It would be nice not to have the essential slices installed by default, I don't think it would have a steep learning curve. I find myself removing the essential-slice libraries as I don't use them. (May be digging up an old thing here?)

All a new person would see is the magic that it opens up a page possibly and has some slices, unfortunately, it does push it all by default to the Prismic repository created and sometimes that isn't wanted on say a new or old project. Because now I would need to go and clean those out.

If maybe setting up a template or new project, the tutorials or documentation can mention the use of the essential slices, and the code snippets have the flags there as Alex mentions.

Or during the starting process on setups with the CLI, the person could be presented with the option of one with the libs or without. But adding a description of what they are best for: (Best for first time SM users) and so forth.

(Personally if there is a guided option or flag to opt-in to the essential libraries and some docs on updating the themes that would be great as that would make it possible for first time users to start a page, build and configure. Then if they have the confidence, they can just skip that and start a new fresh on without it to see.)

[devmnj]

`

{{page}}

  <Logo />
  <h1 class="title">prismic-p1</h1>
  <div class="links">
    <a
      href="https://nuxtjs.org/"
      target="_blank"
      rel="noopener noreferrer"
      class="button--green"
    >
      Documentation
    </a>
    <a
      href="https://github.com/nuxt/nuxt.js"
      target="_blank"
      rel="noopener noreferrer"
      class="button--grey"
    >
      GitHub
    </a>
  </div>
</div>

`

`

  },
  headerData: {},

};

}, methods: { resolver({ sliceName, slice, i }) { return Slices[sliceName]; }, }, }; `

can any body tell what wrong with this Nuxt page ? The slice-zone not working .

[hypervillain]

Please create a new issue @manojap