Upgrading to 0.23.0
If you haven’t upgraded to 0.20.0 please read the upgrading guide.
v0.23.0 of the runtime introduces new runtime internals, new components, and a few breaking changes. Refer to the official release notes for more details.
Breaking Changes
MakeswiftApiHandler requires instance of ReactRuntime
To initialize an instance of the MakeswiftApiHandler, you must now pass an instance of the ReactRuntime. See MakeswiftApiHandler for full details.
New props for ReactRuntimeProvider
In order to support the new <MakeswiftComponent> API (details below), which can be rendered multiple times on a Next.js page, we had to make some changes to the Makeswift provider. The ReactRuntimeProvider component now accepts two new props: previewMode and locale. previewMode is required in all cases, while locale is required if your site supports more than one locale.
Check out our updated App Router and Pages Router installation guides to learn how to provide these props in both setups.
Deprecated items
Shape control
The Shape control has been deprecated and will be removed in a future release. We recommend using the new Group control going forward.
New controls
Group control
We’ve added a new Group control which is designed to be a more versatile replacement for the Shape control.
Font control
We’ve added a new Font control which let’s you select a fontFamily, fontStyle, and fontWeight.
The available values are sourced from our Google Fonts integration within Makeswift and from the variants you pass to getFonts in your MakeswiftApiHandler.
New Apis
Built-in elements
This release introduces support for built-in elements which allow developers to define editable regions within a page. These regions are hard-coded instances of components using the new <MakeswiftComponent> API. This means these can’t elements can’t be removed by users in the Visual Builder, but they can be edited based on the properties developers decide to expose.
A good example of this would be a <Header> component that you want to be included on every page. Instead of the user having to drag and drop that component visually onto each page, the developer can make this a built-in element in the page template. This way, the <Header> will show up on every page without manually having to add it. More details in this example.
To support this, we’ve included to new components, <MakeswiftComponent> and <Slot>, along with a corresponding Makeswift client method, getComponentSnapshot.
Check out our new editable-regions example to learn how to combine these APIs to create a set of dynamic pages with a visually editable header, footer, and a slot for the main content.
Was this page helpful?