svelte/src/index.js

  1. /**
  2.  * @module @serveside/svelte
  3.  */
  5. /**
  6.  * @param req
  7.  * @param res
  8.  * @param next
  9.  */
  10. async function htmlLoader(req, res, next) {
  11.   const { ResolvedComponent, componentProps, component } = req.locals;
  13.   try {
  14.     const { html, css } = ResolvedComponent.render(componentProps);
  16.     res.locals.html = `
  17.           <style>${css.code}</style>
  18.           <div
  19.               data-serveside-component="${component}"
  20.               data-serveside-id="serveside_${req.id}"
  21.           >${html}</div>
  22.           <script>
  23.               window.__SERVESIDE_LOAD_PROPS__ ||= {};
  24.               window.__SERVESIDE_LOAD_PROPS__[${req.id}] = ${JSON.stringify(
  25.   componentProps,
  26.   null,
  27.   3,
  28. )};
  29.           </script>
  30.       `;
  32.     next();
  33.   } catch (error) {
  34.     res.locals.error = error;
  36.     next('route');
  37.   }
  38. }
  40. /**
  41.  * @param req
  42.  * @param res
  43.  * @param next
  44.  */
  45. function errorHtmlLoader(req, res, next) {
  46.   const { componentProps, component, error } = req.locals;
  48.   res.locals.html = `
  49.         <div 
  50.             data-serveside-component="${component}" 
  51.             data-serveside-id="serveside_${req.id}"
  52.         ></div>
  53.         <script>
  54.             window.__SERVESIDE_LOAD_ERROR__ = ${JSON.stringify(error.message)};
  55.             window.__SERVESIDE_LOAD_PROPS__ ||= {};
  56.             window.__SERVESIDE_LOAD_PROPS__[${req.id}] = ${JSON.stringify(
  57.   componentProps,
  58.   null,
  59.   3,
  60. )};
  61.         </script>
  62.     `;
  64.   next();
  65. }
  67. /**
  68.  * @param __
  69.  * @param res
  70.  */
  71. function htmlRenderer(__, res) {
  72.   res.send(res.locals.html);
  73. }
  75. export { htmlLoader, errorHtmlLoader, htmlRenderer };