Field Plugin SDK v1 Stable Release

Eunjae Lee — Wed, 08 Nov 2023 15:35:52 +0000

We are happy to announce the stable release of Field Plugin SDK v1. Field Plugin SDK helps you create field plugins for your Storyblok projects in vanilla JavaScript, React, Vue, and any other frameworks.

What's changed since beta

For those following this project, here's a summary of the key changes since the beta version.

Breaking change

The setter function pattern is removed from plugin.actions.setModalOpen and plugin.actions.setContent.

-type SetModalOpen = (newValue: boolean | (prevValue: boolean) => boolean) => void;
+type SetModalOpen = (newValue: boolean) => Promise<FieldPluginData>;

-type SetContent = (content: TContent | (prevContent: TContent) => TContent) => void;
+type SetContent = (content: TContent) => Promise<FieldPluginData>;

`validateContent`

createFieldPlugin and useFieldPlugin now accepts an option called validateContent, which allows you to

validate the content
make changes before sending it to the Storyblok Visual Editor
provide type-safety

const plugin = useFieldPlugin({
  // For example,
  validateContent: (content: unknown) => {
    if (typeof content === 'string') {
      return {
        content,
      }
    } else {
      return {
        content,
        error: `content is expected to be a string (actual value: ${JSON.stringify(content)})`,
      }
    }
  }
})

Manifest file

The new templates come with a manifest file named field-plugin.config.json

{
  "options": [
    {
      "name": "somePredefinedOption",
      "value": "its value"
    }
  ]
}

which can be accessed like the following:

const { type, data, actions } = useFieldPlugin()
console.log(data.options.somePredefinedOption)

What's inside the SDK

The Field Plugin SDK comprises three essential components:

Library

The library empowers developers to create plugins using their preferred frontend framework. This flexibility allows you to leverage your existing skills and create custom plugins that perfectly align with your needs.

Command Line Interface (CLI)

The CLI is designed to streamline your development experience. It offers multiple templates, making it easy for developers to get started quickly. Moreover, it promotes the adoption of Continuous Integration and Continuous Deployment (CI/CD) processes, enabling you to build robust and efficient workflows.

Sandbox

To ensure a smooth and hassle-free experience, we have also developed a Sandbox environment. This Sandbox provides a dedicated space for testing and sharing your field plugins before they are ready for production. It offers a safe and controlled environment to fine-tune your plugins and gather valuable feedback from stakeholders.

Learn More

You can learn more about the Field Plugin SDK: https://www.storyblok.com/docs/plugins/field-plugins/introduction

DEV Community: Eunjae Lee