Shallow rendering and parameter object serialization #256

Activity

1. remko79 commented on May 13, 2023

   

   remko79

   on May 13, 2023

   ContributorAuthor

   More actions

   After finally diving further into this, the "problem" occurs when we typecast the value to a string:
   s = s + ` ${name}="${encodeEntities(v + '')}"`;
   See: https://github.com/preactjs/preact-render-to-string/blob/master/src/pretty.js#L304

   It would be nice if we have a bit more control over that, so maybe we could pass in a function to the options which will be used instead of the default toString function for the object.

   We could change those lines into something like:

   if (opts.shallow
     && typeof v === 'object'
     && typeof opts.shallowObjectsToString === 'function'
   ) {
     s = s + ` ${name}="${encodeEntities(opts.shallowObjectsToString(name, v) +'')}"`;
   } else {
     s = s + ` ${name}="${encodeEntities(v + '')}"`;
   }
   

   And we can pass in an option 'shallowObjectsToString' to do whatever we want with it, for example:

   shallowObjectsToString: (name, v) => JSON.stringify(v),

   Note that I've added the 'name' to the function so you could do different things depending on the object's name

   👍React with 👍1Reacted by South Drifter
2. TechQuery commented on Nov 21, 2025

   

   TechQuery

   on Nov 21, 2025

   Last edited by TechQuery

   More actions

   We could change those lines into something like:

   if (opts.shallow
     && typeof v === 'object'
     && typeof opts.shallowObjectsToString === 'function'
   ) {
     s = s + ` ${name}="${encodeEntities(opts.shallowObjectsToString(name, v) +'')}"`;
   } else {
     s = s + ` ${name}="${encodeEntities(v + '')}"`;
   }

   And we can pass in an option 'shallowObjectsToString' to do whatever we want with it, for example:

   shallowObjectsToString: (name, v) => JSON.stringify(v),

   @remko79 @JoviDeCroock @rschristian We may use .toJSON() to handle JSON props value:

   -s = s + ` ${name}="${encodeEntities(v + '')}"`;
   +s = s + ` ${name}="${encodeEntities(v.toJSON?.() ?? v.toString())}"`;

   which is easy for users to hook:

   Object.prototype.toJSON = function () {
       const { toJSON, ...data } = this;
   
       return JSON.stringify(data);
   };

   and make SSR compatible with complex Web components, such as https://github.com/idea2app/ECharts-JSX