prismicio / slice-simulator Goto Github PK

I love this new option, Storybook has caused me problems in the past. Looking forward to you guys building out this simulator.

Is your feature request related to a problem? Please describe.

I'm developing a website in dark mode (the majority of the background is black, the text is white). When previewing slices in Slice Simulator the background is hardcoded to white, so my slice does not look correct.

Describe the solution you'd like

Either a dark mode toggle alongside the current device viewport choices. Or a way of overriding the background color as a parameter on the component itself.

Describe alternatives you've considered

Additional context

I am using React.

Is your feature request related to a problem? Please describe.

Currently, detection of the <SliceZone /> component (or its wrapper in case it only renders children like the one from @prismicio/react) is a bit hacky and could break/be inconsistent in some edge cases (e.g. users decide to render additional elements along the <SliceZone /> in its simulator).

Describe the solution you'd like

To deal with edge-cases, users could have the ability flag the <SliceZone /> component (or its wrapper) with a class (.slice-simulator-slicezone or (strict, TBD) a data attribute (data-slicezone). This flag would then be preferred when resolving the <SliceZone /> component or its wrapper.

Describe alternatives you've considered

The simulator could take care of rendering this <SliceZone /> component itself. However this limits the ability of users to wrap their <SliceZone /> component with containers or similar, like they might be doing in their applications.

Additional context

/

Versions

• @prismicio/slice-canvas-vue: ^0.0.9
• node: v16.13.1
• slice-machine-ui: 0.2.0-alpha.27

Reproduction

Tried to replace Storybook in the new blog repo and run in to some issues:

The docs says to use: "localSliceCanvasURL": "http://localhost:3000/_canvas" but SM tells me that I need: "localSlicePreviewURL": "http://localhost:3000/_preview", this is kind of confusing.

1. When going for the "localSlicePreviewURL": "http://localhost:3000/_canvas": I get previews working inside SM, but problem is I can't access my posts which lives in /pages/_post.vue since Nuxt thinks it should use _canvas for post rendering instead, this is because _canvas comes before _post alphabetically. This results in an error page that says "You're seeing this page because you're accessing Slice Canvas directly" when trying to reach a post in Nuxt.
2. If I instead use: "localSlicePreviewURL": "http://localhost:3000/_preview", then SliceCanvas preview tries to render a post since Nuxt choses _post before _preview.

Is your feature request related to a problem? Please describe.

With some frameworks, HMR can behave differently and cause the simulator component to hard reload while developing, ultimately losing its state.

Describe the solution you'd like

Leveraging bundler's HMR APIs

Describe alternatives you've considered

At first, I thought that maybe the simulator could save and recover its state from session storage, not sure this would play nicely.

Additional context

Should not impact production as the simulator shouldn't be responsible for recovering its state in that environment.

Versions

"@prismicio/client": "6.6.1",
"@prismicio/helpers": "2.3.1",
"@prismicio/next": "0.1.3",
"@prismicio/react": "2.4.2",

Reproduction

Steps to reproduce

1. run git clone https://github.com/jeremytenjo/prismic-enum-error.git && cd prismic-enum-error && npm i && npm run build

What is expected?

Build successfully

What is actually happening?

Returns error:

./node_modules/@prismicio/slice-simulator-core/dist/index.d.ts:143:159
Type error: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

  141 | declare const sliceSimulatorAccessedDirectly: string;
  142 | 
> 143 | export { CoreManager, ManagedState, SliceSimulatorOptions, SliceSimulatorProps, SliceSimulatorState, StateManager, StateManagerEventType, StateManagerEvents, StateManagerStatus, disableEventHandler, getActiveSliceDOM, getDefaultManagedState, getDefaultMessage, getDefaultProps, getDefaultSlices, getSliceZoneDOM, onClickHandler, simulatorClass, simulatorRootClass, sliceSimulatorAccessedDirectly };
      |                                                                                                                                                               ^
  144 | 

--isolatedModules has to remain as true because Nextjs depends on it to work.