search

storyblok / field-plugin

Create and deploy Storyblok Field Plugin
https://www.storyblok.com/docs/plugins/field-plugins/introduction
25 stars 3 forks source link

fix(helper): update react helper #267

Closed eunjae-lee closed 12 months ago

eunjae-lee commented 1 year ago

What?

This PR updates the react helper and the react template.

alternate (draft) implementation of useFieldPlugin for fine-grained reactivity control ```js import { createFieldPlugin, type CreateFieldPluginOptions, type FieldPluginResponse, type StoryData, } from '@storyblok/field-plugin' import { useEffect, useState } from 'react' export const useFieldPlugin = ({ parseContent, }: Omit< CreateFieldPluginOptions, 'onUpdateState' >): FieldPluginResponse => { type Plugin = FieldPluginResponse const [type, setType] = useState('loading') const [error, setError] = useState() const [actions, setActions] = useState() const [isModalOpen, setIsModalOpen] = useState() const [content, setContent] = useState() const [options, setOptions] = useState>() const [spaceId, setSpaceId] = useState() const [storyLang, setStoryLang] = useState() const [story, setStory] = useState() const [storyId, setStoryId] = useState() const [blockUid, setBlockUid] = useState() const [token, setToken] = useState() const [uid, setUid] = useState() useEffect(() => { createFieldPlugin({ onUpdateState: (state) => { if (state.type === 'error') { setType('error') setError(state.error) } else if (state.type === 'loaded') { setType('loaded') setActions(state.actions) setIsModalOpen((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.isModalOpen) ) { console.log('# updating isModalOpen') return state.data.isModalOpen } else { return prevValue } }) setContent((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.content) ) { console.log('# updating content') return state.data.content } else { return prevValue } }) setOptions((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.options) ) { console.log('# updating options') return state.data.options } else { return prevValue } }) setSpaceId((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.spaceId) ) { console.log('# updating spaceId') return state.data.spaceId } else { return prevValue } }) setStoryLang((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.storyLang) ) { console.log('# updating storyLang') return state.data.storyLang } else { return prevValue } }) setStory((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.story) ) { console.log('# updating story') return state.data.story } else { return prevValue } }) setStoryId((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.storyId) ) { console.log('# updating storyId') return state.data.storyId } else { return prevValue } }) setBlockUid((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.blockUid) ) { console.log('# updating blockUid') return state.data.blockUid } else { return prevValue } }) setToken((prevValue) => { if ( JSON.stringify(prevValue) !== JSON.stringify(state.data.token) ) { console.log('# updating token') return state.data.token } else { return prevValue } }) setUid((prevValue) => { if (JSON.stringify(prevValue) !== JSON.stringify(state.data.uid)) { console.log('# updating uid') return state.data.uid } else { return prevValue } }) } }, parseContent, }) }, []) if (type === 'loading') { return { type } } else if (type === 'error' && error) { return { type, error } } else if (type === 'loaded' && actions) { return { type, actions, data: { isModalOpen, content, options, spaceId, storyLang, story, storyId, blockUid, token, uid, }, } } else { throw new Error('it can never happen') } } ```

Why?

JIRA: EXT-1915

How to test? (optional)

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ā†—ļøŽ

Name Status Preview Comments Updated (UTC)
plugin-sandbox āŒ Failed (Inspect) Sep 14, 2023 2:39pm
eunjae-lee commented 1 year ago

Current dependencies on/for this PR:

This comment was auto-generated by Graphite.

eunjae-lee commented 1 year ago

Awesome, thank you for your effort šŸš€

Does the reactivity work the same as we expect it to work in Vue template? Just wondering....nothing that blocks this from being merged.

I guess so, but I'll give it the same test that you're doing on the vue 3 one. Good catch!

eunjae-lee commented 1 year ago

@BibiSebi You were right. After incrementing the counter, Story component was re-rendered as well.

Screenshot 2023-09-12 at 13 27 16

~gotta think about how to improve this šŸ¤”~

eunjae-lee commented 12 months ago

Merge Activity