theKashey / react-prerendered-component

🤔Partial hydration and caching in a pre-suspense era
174 stars 4 forks source link

Error in cacheRenderedToString #9

Open kudmni opened 1 year ago

kudmni commented 1 year ago

Hello! There is an issue with unpaired curly braces in text before and after cached component:

TypeError: Cannot read property 'variables' of undefined                                                      
   at parseTag (/src/node_modules/react-prerendered-component/dist/es5/stream.js:207:136)                     
   at Object.exports.process (/src/node_modules/react-prerendered-component/dist/es5/stream.js:237:13)        
   at exports.cacheRenderedToString (/src/node_modules/react-prerendered-component/dist/es5/stream.js:274:15) 

Minimal code to reproduce:

  const cacheControl = cacheControler(cache);
  const result = renderToString(
    <PrerenderedControler control={cacheControl}>
      <p>{`Unpaired left curly brace { in text`}</p>
      <CachedLocation cacheKey="the-key">any content</CachedLocation>
      <p>{`Both {} or unpaired right curly brace } in text`}</p>
    </PrerenderedControler>
  );
  // result === <p>Unpaired left curly brace { in text</p><x-cachedygj_2ypb-rxwzbstimllv-store-1>any content</x-cachedygj_2ypb-rxwzbstimllv-store-1><p>Both {} or unpaired right curly brace } in text</p>
  const theRealResult = cacheRenderedToString(result, cacheControl);
theKashey commented 1 year ago

Got the problem. It's looking for template placeholders, but braces can be just a part of your code.

theKashey commented 1 year ago

v1.2.5 should handle your problem

kudmni commented 1 year ago

Thanks for the quick fix. But unfortunately it doesn't work with nested curly braces. For example:

    <PrerenderedControler control={cacheControl}>
      <p>{`Unpaired left curly brace { in text`}</p>
      <CachedLocation cacheKey="the-key">any content</CachedLocation>
      <p>{`Nested curly braces {{{}}} in text`}</p>
    </PrerenderedControler>

will produce next result:

Unpaired left curly brace { in text
any content

Nested curly braces {}{ in text
any content

Nested curly braces }}{ in text
any content

Nested curly braces {}}} in text
theKashey commented 1 year ago

Look like it's time to use a little smarter algorithm. The old sequential parser cannot handle situations like this. But that would take time