Skip to content

Conversation

ericclemmons
Copy link
Contributor

@ericclemmons ericclemmons commented Jun 1, 2020

See: https://app.asana.com/0/0/1177340596341441/f

This is a proof-of-concept for useChunk based on my integration with customer apps. The benefit of useChunk is that it allows for experimenting with dynamic content by computing content_key ad run-time. identifier isn't immediately known for dynamic content:

export default function Message({ children, ...props }) {
  return (
    <Box {...props}>
      <Text>{children}</Text>
    </Box>
  );
}

In the previous example, the chunk identifier would have to be tracked through the component hierarchies to dynamically render {children} inside of a <Chunk>.

  • <Chunk identifier="...">Default Content</Chunk> still works as expected, but internally uses useChunk.

  • useChunk(defaultContent, props) returns { content, element }:

    • content is the value of chunk.content from the API.
    • element is the value of renderChunk(chunk), for ease-of-use.
  • Based on experimentation with useChunk(defaultContent), there may be a need to update <Editmode> provider to include projectId.

  • useChunk(defaultContent) will compute content_key and request using that in absence of identifier.

const headline = useChunk("Welcome!", { identifier });

// Majority use-case with editmode.js integration
return <h1>{headline.element}</h1>

// Directly use value, but loses editmode.js integration.
// This is when the value is passed to a Component that requires a string.
return <Form label={headline.content} />
📦 Published PR as canary version: 1.0.23-canary.3.1fd3776.0

✨ Test out this PR locally via:

npm install [email protected]
# or 
yarn add [email protected]

@ericclemmons
Copy link
Contributor Author

With the recent API publish, I found that the Accept request header had to be exactly application/json. Clicking https://www.editmode.app/api/v1/chunks/cnk_3b48542a99a45966bc7c will fail due to the Accept type.

@ericclemmons ericclemmons marked this pull request as ready for review June 12, 2020 02:41
@ericclemmons ericclemmons added the major Increment the major version when merged label Jun 12, 2020
@ericclemmons ericclemmons merged commit 76ecbb5 into master Jun 12, 2020
@ericclemmons ericclemmons deleted the useChunk branch June 12, 2020 02:41
@github-actions
Copy link

🚀 PR was released in v2.0.0 🚀

@github-actions github-actions bot added the released This issue/pull request has been released. label Jun 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

major Increment the major version when merged released This issue/pull request has been released.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant