diff --git a/playground/react/App.tsx b/playground/react/App.tsx index 26d8fb27..5f189be7 100644 --- a/playground/react/App.tsx +++ b/playground/react/App.tsx @@ -1,14 +1,31 @@ -import { StoryblokComponent, useStoryblok } from '@storyblok/react'; import React from 'react'; +import { BrowserRouter, Link, Route, Routes } from 'react-router'; +import Home from './pages/Home'; +import RichtextPage from './pages/RichtextPage'; function App() { - const story = useStoryblok('home', { version: 'draft' }); + return ( + +
+ - if (!story?.content) { - return
Loading...
; - } - - return ; + + } /> + } /> + } /> + +
+ + ); } export default App; diff --git a/playground/react/index.tsx b/playground/react/index.tsx index 92d30608..36708023 100644 --- a/playground/react/index.tsx +++ b/playground/react/index.tsx @@ -10,8 +10,9 @@ import Feature from './components/feature'; import { apiPlugin, storyblokInit } from '@storyblok/react'; import IFrameEmbed from './components/iframe-embed'; +// https://app.storyblok.com/#/me/spaces/147897 storyblokInit({ - accessToken: 'd6IKUtAUDiKyAhpJtrLFcwtt', + accessToken: 'OurklwV5XsDJTIE1NJaD2wtt', use: [apiPlugin], components: { 'teaser': Teaser, diff --git a/playground/react/package.json b/playground/react/package.json index 3c8b18d3..547bf698 100644 --- a/playground/react/package.json +++ b/playground/react/package.json @@ -9,11 +9,13 @@ "dependencies": { "@storyblok/react": "workspace:^", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router": "^7.1.1" }, "devDependencies": { "@types/node": "^20.17.10", "@types/react": "18.3.4", + "@vitejs/plugin-basic-ssl": "^1.2.0", "vite": "^5.4.3" } } diff --git a/playground/react/pages/Home.tsx b/playground/react/pages/Home.tsx new file mode 100644 index 00000000..374dae01 --- /dev/null +++ b/playground/react/pages/Home.tsx @@ -0,0 +1,19 @@ +import { StoryblokComponent, useStoryblok } from '@storyblok/react'; +import React from 'react'; + +function Home() { + const story = useStoryblok('react', { version: 'draft' }); + + if (!story?.content) { + return
Loading...
; + } + + return ( +
+

Home

+ +
+ ); +} + +export default Home; diff --git a/playground/react/pages/RichtextPage.tsx b/playground/react/pages/RichtextPage.tsx new file mode 100644 index 00000000..f8b68c16 --- /dev/null +++ b/playground/react/pages/RichtextPage.tsx @@ -0,0 +1,16 @@ +import { StoryblokRichText, useStoryblok } from '@storyblok/react'; +import React from 'react'; + +function RichtextPage() { + const story = useStoryblok('react/test-richtext', { version: 'draft' }); + + if (!story?.content) { + return
Loading...
; + } + + return ( + story.content.richText && + ); +} + +export default RichtextPage; diff --git a/playground/react/vite.config.ts b/playground/react/vite.config.ts index 0dde4f9d..23d87078 100644 --- a/playground/react/vite.config.ts +++ b/playground/react/vite.config.ts @@ -1,9 +1,13 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { resolve } from 'node:path'; +import basicSsl from '@vitejs/plugin-basic-ssl'; export default defineConfig({ - plugins: [react()], + plugins: [ + react(), + basicSsl(), + ], resolve: { alias: { '@storyblok/react': resolve(__dirname, '../../src/index.ts'), diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6019637b..af68763f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 3.2.2 next: specifier: ^13 || ^14 || ^15 - version: 13.5.7(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 13.5.7(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@babel/core': specifier: ^7.26.0 @@ -180,6 +180,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-router: + specifier: ^7.1.1 + version: 7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@types/node': specifier: ^20.17.10 @@ -187,6 +190,9 @@ importers: '@types/react': specifier: 18.3.4 version: 18.3.4 + '@vitejs/plugin-basic-ssl': + specifier: ^1.2.0 + version: 1.2.0(vite@5.4.14(@types/node@20.17.16)) vite: specifier: ^5.4.3 version: 5.4.14(@types/node@20.17.16) @@ -253,26 +259,14 @@ packages: resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==} engines: {node: '>=6.9.0'} - '@babel/compat-data@7.26.2': - resolution: {integrity: sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==} - engines: {node: '>=6.9.0'} - '@babel/compat-data@7.26.5': resolution: {integrity: sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==} engines: {node: '>=6.9.0'} - '@babel/core@7.26.0': - resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==} - engines: {node: '>=6.9.0'} - '@babel/core@7.26.7': resolution: {integrity: sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==} engines: {node: '>=6.9.0'} - '@babel/generator@7.26.2': - resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==} - engines: {node: '>=6.9.0'} - '@babel/generator@7.26.5': resolution: {integrity: sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==} engines: {node: '>=6.9.0'} @@ -281,10 +275,6 @@ packages: resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==} engines: {node: '>=6.9.0'} - '@babel/helper-compilation-targets@7.25.9': - resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==} - engines: {node: '>=6.9.0'} - '@babel/helper-compilation-targets@7.26.5': resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==} engines: {node: '>=6.9.0'} @@ -360,19 +350,10 @@ packages: resolution: {integrity: sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==} engines: {node: '>=6.9.0'} - '@babel/helpers@7.26.0': - resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==} - engines: {node: '>=6.9.0'} - '@babel/helpers@7.26.7': resolution: {integrity: sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==} engines: {node: '>=6.9.0'} - '@babel/parser@7.26.2': - resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==} - engines: {node: '>=6.0.0'} - hasBin: true - '@babel/parser@7.26.7': resolution: {integrity: sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==} engines: {node: '>=6.0.0'} @@ -848,18 +829,10 @@ packages: resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==} engines: {node: '>=6.9.0'} - '@babel/traverse@7.25.9': - resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==} - engines: {node: '>=6.9.0'} - '@babel/traverse@7.26.7': resolution: {integrity: sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==} engines: {node: '>=6.9.0'} - '@babel/types@7.26.0': - resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==} - engines: {node: '>=6.9.0'} - '@babel/types@7.26.7': resolution: {integrity: sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==} engines: {node: '>=6.9.0'} @@ -1406,10 +1379,6 @@ packages: resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - '@jridgewell/gen-mapping@0.3.5': - resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} - engines: {node: '>=6.0.0'} - '@jridgewell/gen-mapping@0.3.8': resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==} engines: {node: '>=6.0.0'} @@ -1789,6 +1758,9 @@ packages: '@types/conventional-commits-parser@5.0.0': resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==} + '@types/cookie@0.6.0': + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} @@ -1926,6 +1898,12 @@ packages: '@ungap/structured-clone@1.2.1': resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==} + '@vitejs/plugin-basic-ssl@1.2.0': + resolution: {integrity: sha512-mkQnxTkcldAzIsomk1UuLfAu9n+kpQ3JbHcpCp7d2Oo6ITtji8pHS3QToOWjhPFvNQSnhlkAjmGbhv2QvwO/7Q==} + engines: {node: '>=14.21.3'} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 + '@vitejs/plugin-react@4.3.4': resolution: {integrity: sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==} engines: {node: ^14.18.0 || >=16.0.0} @@ -2262,11 +2240,6 @@ packages: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} - browserslist@4.24.2: - resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==} - engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} - hasBin: true - browserslist@4.24.4: resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -2461,6 +2434,10 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + core-js-compat@3.40.0: resolution: {integrity: sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==} @@ -2659,9 +2636,6 @@ packages: ecc-jsbn@0.1.2: resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==} - electron-to-chromium@1.5.60: - resolution: {integrity: sha512-HcraRUkTKJ+8yA3b10i9qvhUlPBRDlKjn1XGek1zDGVfAKcvi8TsUnImGqLiEm9j6ZulxXIWWIo9BmbkbCTGgA==} - electron-to-chromium@1.5.88: resolution: {integrity: sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==} @@ -4230,9 +4204,6 @@ packages: node-int64@0.4.0: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} - node-releases@2.0.18: - resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} - node-releases@2.0.19: resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==} @@ -4515,6 +4486,16 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} + react-router@7.1.1: + resolution: {integrity: sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -4701,6 +4682,9 @@ packages: engines: {node: '>=10'} hasBin: true + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + set-function-length@1.2.2: resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} @@ -5033,6 +5017,9 @@ packages: tunnel-agent@0.6.0: resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==} + turbo-stream@2.4.0: + resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} + tweetnacl@0.14.5: resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==} @@ -5144,12 +5131,6 @@ packages: resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} engines: {node: '>=8'} - update-browserslist-db@1.1.1: - resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} - hasBin: true - peerDependencies: - browserslist: '>= 4.21.0' - update-browserslist-db@1.1.2: resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==} hasBin: true @@ -5436,32 +5417,8 @@ snapshots: js-tokens: 4.0.0 picocolors: 1.1.1 - '@babel/compat-data@7.26.2': - optional: true - '@babel/compat-data@7.26.5': {} - '@babel/core@7.26.0': - dependencies: - '@ampproject/remapping': 2.3.0 - '@babel/code-frame': 7.26.2 - '@babel/generator': 7.26.2 - '@babel/helper-compilation-targets': 7.25.9 - '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0) - '@babel/helpers': 7.26.0 - '@babel/parser': 7.26.2 - '@babel/template': 7.25.9 - '@babel/traverse': 7.25.9 - '@babel/types': 7.26.0 - convert-source-map: 2.0.0 - debug: 4.3.7 - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - optional: true - '@babel/core@7.26.7': dependencies: '@ampproject/remapping': 2.3.0 @@ -5482,15 +5439,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/generator@7.26.2': - dependencies: - '@babel/parser': 7.26.2 - '@babel/types': 7.26.0 - '@jridgewell/gen-mapping': 0.3.5 - '@jridgewell/trace-mapping': 0.3.25 - jsesc: 3.0.2 - optional: true - '@babel/generator@7.26.5': dependencies: '@babel/parser': 7.26.7 @@ -5503,15 +5451,6 @@ snapshots: dependencies: '@babel/types': 7.26.7 - '@babel/helper-compilation-targets@7.25.9': - dependencies: - '@babel/compat-data': 7.26.2 - '@babel/helper-validator-option': 7.25.9 - browserslist: 4.24.2 - lru-cache: 5.1.1 - semver: 6.3.1 - optional: true - '@babel/helper-compilation-targets@7.26.5': dependencies: '@babel/compat-data': 7.26.5 @@ -5565,16 +5504,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-module-imports': 7.25.9 - '@babel/helper-validator-identifier': 7.25.9 - '@babel/traverse': 7.25.9 - transitivePeerDependencies: - - supports-color - optional: true - '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.7)': dependencies: '@babel/core': 7.26.7 @@ -5629,22 +5558,11 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/helpers@7.26.0': - dependencies: - '@babel/template': 7.25.9 - '@babel/types': 7.26.0 - optional: true - '@babel/helpers@7.26.7': dependencies: '@babel/template': 7.25.9 '@babel/types': 7.26.7 - '@babel/parser@7.26.2': - dependencies: - '@babel/types': 7.26.0 - optional: true - '@babel/parser@7.26.7': dependencies: '@babel/types': 7.26.7 @@ -6207,19 +6125,6 @@ snapshots: '@babel/parser': 7.26.7 '@babel/types': 7.26.7 - '@babel/traverse@7.25.9': - dependencies: - '@babel/code-frame': 7.26.2 - '@babel/generator': 7.26.2 - '@babel/parser': 7.26.2 - '@babel/template': 7.25.9 - '@babel/types': 7.26.0 - debug: 4.4.0(supports-color@8.1.1) - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - optional: true - '@babel/traverse@7.26.7': dependencies: '@babel/code-frame': 7.26.2 @@ -6232,12 +6137,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/types@7.26.0': - dependencies: - '@babel/helper-string-parser': 7.25.9 - '@babel/helper-validator-identifier': 7.25.9 - optional: true - '@babel/types@7.26.7': dependencies: '@babel/helper-string-parser': 7.25.9 @@ -6882,13 +6781,6 @@ snapshots: '@types/yargs': 17.0.33 chalk: 4.1.2 - '@jridgewell/gen-mapping@0.3.5': - dependencies: - '@jridgewell/set-array': 1.2.1 - '@jridgewell/sourcemap-codec': 1.5.0 - '@jridgewell/trace-mapping': 0.3.25 - optional: true - '@jridgewell/gen-mapping@0.3.8': dependencies: '@jridgewell/set-array': 1.2.1 @@ -7241,6 +7133,8 @@ snapshots: dependencies: '@types/node': 20.17.16 + '@types/cookie@0.6.0': {} + '@types/debug@4.1.12': dependencies: '@types/ms': 0.7.34 @@ -7474,6 +7368,10 @@ snapshots: '@ungap/structured-clone@1.2.1': {} + '@vitejs/plugin-basic-ssl@1.2.0(vite@5.4.14(@types/node@20.17.16))': + dependencies: + vite: 5.4.14(@types/node@20.17.16) + '@vitejs/plugin-react@4.3.4(vite@5.4.14(@types/node@20.17.16))': dependencies: '@babel/core': 7.26.7 @@ -7898,14 +7796,6 @@ snapshots: dependencies: fill-range: 7.1.1 - browserslist@4.24.2: - dependencies: - caniuse-lite: 1.0.30001680 - electron-to-chromium: 1.5.60 - node-releases: 2.0.18 - update-browserslist-db: 1.1.1(browserslist@4.24.2) - optional: true - browserslist@4.24.4: dependencies: caniuse-lite: 1.0.30001695 @@ -8084,6 +7974,8 @@ snapshots: convert-source-map@2.0.0: {} + cookie@1.0.2: {} + core-js-compat@3.40.0: dependencies: browserslist: 4.24.4 @@ -8322,9 +8214,6 @@ snapshots: jsbn: 0.1.1 safer-buffer: 2.1.2 - electron-to-chromium@1.5.60: - optional: true - electron-to-chromium@1.5.88: {} emittery@0.13.1: @@ -10514,31 +10403,6 @@ snapshots: natural-compare@1.4.0: {} - next@13.5.7(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@next/env': 13.5.7 - '@swc/helpers': 0.5.2 - busboy: 1.6.0 - caniuse-lite: 1.0.30001680 - postcss: 8.4.31 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - styled-jsx: 5.1.1(@babel/core@7.26.0)(react@18.3.1) - watchpack: 2.4.0 - optionalDependencies: - '@next/swc-darwin-arm64': 13.5.7 - '@next/swc-darwin-x64': 13.5.7 - '@next/swc-linux-arm64-gnu': 13.5.7 - '@next/swc-linux-arm64-musl': 13.5.7 - '@next/swc-linux-x64-gnu': 13.5.7 - '@next/swc-linux-x64-musl': 13.5.7 - '@next/swc-win32-arm64-msvc': 13.5.7 - '@next/swc-win32-ia32-msvc': 13.5.7 - '@next/swc-win32-x64-msvc': 13.5.7 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - next@13.5.7(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@next/env': 13.5.7 @@ -10596,9 +10460,6 @@ snapshots: node-int64@0.4.0: {} - node-releases@2.0.18: - optional: true - node-releases@2.0.19: {} normalize-package-data@2.5.0: @@ -10869,6 +10730,16 @@ snapshots: react-refresh@0.14.2: {} + react-router@7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@types/cookie': 0.6.0 + cookie: 1.0.2 + react: 18.3.1 + set-cookie-parser: 2.7.1 + turbo-stream: 2.4.0 + optionalDependencies: + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -11081,6 +10952,8 @@ snapshots: semver@7.7.1: optional: true + set-cookie-parser@2.7.1: {} + set-function-length@1.2.2: dependencies: define-data-property: 1.1.4 @@ -11335,13 +11208,6 @@ snapshots: strip-json-comments@3.1.1: {} - styled-jsx@5.1.1(@babel/core@7.26.0)(react@18.3.1): - dependencies: - client-only: 0.0.1 - react: 18.3.1 - optionalDependencies: - '@babel/core': 7.26.0 - styled-jsx@5.1.1(@babel/core@7.26.7)(react@18.3.1): dependencies: client-only: 0.0.1 @@ -11454,6 +11320,8 @@ snapshots: dependencies: safe-buffer: 5.2.1 + turbo-stream@2.4.0: {} + tweetnacl@0.14.5: {} type-check@0.4.0: @@ -11558,13 +11426,6 @@ snapshots: untildify@4.0.0: {} - update-browserslist-db@1.1.1(browserslist@4.24.2): - dependencies: - browserslist: 4.24.2 - escalade: 3.2.0 - picocolors: 1.1.1 - optional: true - update-browserslist-db@1.1.2(browserslist@4.24.4): dependencies: browserslist: 4.24.4 diff --git a/src/utils.ts b/src/utils.ts index 2f1acc82..038b416c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,5 +1,47 @@ import React from 'react'; +const HTML_ENTITIES: Record = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + ''': '\'', + ''': '\'', + ' ': ' ', + '©': '©', + '®': '®', + '°': '°', + '±': '±', + '¶': '¶', + '·': '·', + '–': '\u2013', + '—': '\u2014', + '‘': '\u2018', + '’': '\u2019', + '‚': '\u201A', + '“': '\u201C', + '”': '\u201D', + '„': '\u201E', + '…': '\u2026', +}; + +function decodeHtmlEntities(text: string): string { + return text.replace(/&[#\w]+;/g, (entity) => { + // Handle numeric entities + if (entity.startsWith('&#')) { + const code = entity.slice(2, -1); + // Hex entities (e.g. ') + if (code.startsWith('x')) { + return String.fromCharCode(Number.parseInt(code.slice(1), 16)); + } + // Decimal entities (e.g. ') + return String.fromCharCode(Number.parseInt(code, 10)); + } + // Handle named entities + return HTML_ENTITIES[entity] || entity; + }); +} + function camelCase(str: string) { return str.replace(/-([a-z])/g, g => g[1].toUpperCase()); } @@ -29,6 +71,10 @@ export function convertAttributesInElement(element: React.ReactElement | React.R // Base case: if the element is not a React element, return it unchanged. if (!React.isValidElement(element)) { + // If it's a text node, decode any HTML entities + if (typeof element === 'string') { + return decodeHtmlEntities(element) as unknown as React.ReactElement; + } return element; } @@ -55,7 +101,13 @@ export function convertAttributesInElement(element: React.ReactElement | React.R newProps.key = (element.key as string); // Process children recursively. - const children = React.Children.map((element.props as React.PropsWithChildren).children, child => convertAttributesInElement(child as React.ReactElement)); + const children = React.Children.map((element.props as React.PropsWithChildren).children, (child) => { + if (typeof child === 'string') { + return decodeHtmlEntities(child); + } + return convertAttributesInElement(child as React.ReactElement); + }); + const newElement = React.createElement(element.type, newProps, children); // Clone the element with the new properties and updated children. return newElement;