Last active
February 1, 2023 12:44
-
-
Save espretto/bed01190dcc16a4cbb4b314cfc195d64 to your computer and use it in GitHub Desktop.
ts: drop json into html script tags
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const htmlSpecialChars = [ | |
| ["&", "&"], | |
| [">", ">"], | |
| ["<", "<"], | |
| ]; | |
| const encode = (data: string) => | |
| htmlSpecialChars.reduce( | |
| (data, [char, entity]) => data.replaceAll(char, entity), | |
| data | |
| ); | |
| const decode = (data: string) => | |
| htmlSpecialChars.reduceRight( | |
| (data, [char, entity]) => data.replaceAll(entity, char), | |
| data | |
| ); | |
| const comment = (data: string) => ["<!--", "-->"].join(data); | |
| const uncomment = (data: string) => data.slice(4, -3); | |
| export interface ScriptProps { | |
| id: string; | |
| data: any; | |
| } | |
| export const toScript = ({ id, data }: ScriptProps) => { | |
| const innerHTML = comment(encode(JSON.stringify(data))); | |
| return `<script id="${id}" type="application/json">${innerHTML}</script>`; | |
| }; | |
| export const fromScript = (id: string) => { | |
| const innerHTML = document.getElementById(id)?.innerHTML; | |
| return innerHTML ? JSON.parse(decode(uncomment(innerHTML))) : null | |
| }; | |
| export const Script: React.FC<ScriptProps> = ({ id, data }) => { | |
| const innerHTML = comment(encode(JSON.stringify(data))); | |
| return React.createElement("script", { | |
| id, | |
| type: "application/json", | |
| dangerouslySetInnerHTML: { __html: innerHTML }, | |
| }); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment