How to use the preact-render-to-string.render function in preact-render-to-string

To help you get started, we’ve selected a few preact-render-to-string examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github reshape / preact-components / test / index.js View on Github external
path.join(__dirname, '../node_modules/preact/dist/preact.js')
          )}
          // require reshapePreact
          ${fs.readFileSync(path.join(__dirname, '../lib/browser.js'))}
          // our custom component
          ${component}
          // implementation
          var el = document.querySelector('p')
          window.out = reshapePreact.hydrateInitialState(el.getAttribute('data-state'), {
            'my-component': MyComponent
          })
        
      `,
        { runScripts: 'dangerously' }
      )
      t.is(render(dom.window.out), '<p>the value of foo is "bar"</p>')
    })
})
github kristoferbaxter / preact-hn / src / server / routes / default.tsx View on Github external
<title>Preact Hacker News</title>
      
      ${supportsManifest ? '' : ''}
      <style>${resources.inline}</style>
      ${resources.inline === null &amp;&amp; resources.css !== null
        ? ''
        : ''}
      ${supportsManifest ? '' : ''}
      
      
      
    
    
      <div id="mount">`);

  const RoutedViewComponent: string = render();

  res.write(`
        ${RoutedViewComponent}
        </div>
      
    `);

  // TODO: More research on why these scripts cannot be loaded async.

  res.end();

  next();
}
github reshape / preact-components / lib / index.js View on Github external
node => {
        // encode/compress the original html structure
        // this can be rehydrated later to reduce client/server duplication
        const originalHtml = encode(node)
        return parse(render(toVdom(components, node, originalHtml)))
      }
    )
github preactjs / enzyme-adapter-preact-pure / src / StringRenderer.ts View on Github external
render(el: ReactElement, context?: any) {
    // FIXME - The behavior here is different across different Preact versions.
    // Historically this was because preact-render-to-string v4.x did not support
    // Preact 10. In future we should unify them. This will be a breaking change
    // as it will affect the output for either Preact v8 or Preact v10.
    if (isPreact10()) {
      const tempContainer = document.createElement('div');
      render(el as any, tempContainer);
      const html = tempContainer.innerHTML;
      render(h('unmount-me', {}), tempContainer);
      return html;
    } else {
      return renderToString(el as any, context);
    }
  }
github davideast / table-tracer / src / index.tsx View on Github external
col.get().then(snap =&gt; {
    const restaurants = snap.docs.map(d =&gt; ({ id: d.id, ...d.data() }));
    const html = render()
    const dataHtml = indexHtml.replace('/** window.__data__ = ::DATA:: ;**/', 
      `window.__data__ = ${JSON.stringify(restaurants)};`);
      console.log(dataHtml);
    const finalHtml = dataHtml.replace('', html);
    res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
    res.send(finalHtml);
  });
});
github choojs / choop / index.js View on Github external
this.state = xtend(this.state, state || {})

  assert.notEqual(typeof window, 'object', 'choo.mount: window was found. .toString() must be called in Node, use .start() or .mount() if running in the browser')
  assert.equal(typeof location, 'string', 'choo.toString: location should be type string')
  assert.equal(typeof this.state, 'object', 'choo.toString: state should be type object')

  var self = this
  this._stores.forEach(function (initStore) {
    initStore(self.state)
  })

  this._matchRoute(location)
  var html = this._prerender(this.state)
  assert.ok(html, 'choo.toString: no valid value returned for the route ' + location)
  assert(!Array.isArray(html), 'choo.toString: return value was an array for the route ' + location)
  return typeof html.outerHTML === 'string' ? html.outerHTML : rendertostring(html)
}
github kristoferbaxter / preact-hn / src / server / routes / default-serverrender.tsx View on Github external
<title>Preact Hacker News</title>
      
      ${supportsManifest ? '' : ''}
      ${resources.inline !== null
        ? `<style>${resources.inline}</style>`
        : resources.css !== null ? `` : ''}
      ${supportsManifest ? '' : ''}
      
      
      
      ${resources.route &amp;&amp; resources.route.js ? `` : ''}
    
    `);

  const RoutedViewComponent: string = render(
    ,
  );

  res.write(`
        ${RoutedViewComponent}
      
    `);

  res.end();

  next();
}
github timarney / htm-ssr-demo / main.js View on Github external
const renderPage = (title, page) => {
  return HtmlPage({ title, content: renderStylesToString(render(page)) });
};
github postlight / cloudflare-worker-app-kit / template / src / worker.tsx View on Github external
async function serverRender(): Promise {
  return { html: render() };
}

preact-render-to-string

Render JSX to an HTML string, with support for Preact components.

MIT
Latest version published 23 days ago

Package Health Score

92 / 100
Full package analysis