How to import `renderToString` into a plain js/ts file

So, I have working serverless application, which has a

handler.ts

handler.ts

.
Inside I atm do:

const html = `
        <html>
          <head>
            <title>${item.title}</title>
            // lots of meta tags
          </head>
          <body>
            <h3>${item.title}</h3>
            <audio controls>
              <source src="${audioURL}" type="audio/mpeg">
            </audio>
          </body>
        </html>
      `,

const html = `
        <html>
          <head>
            <title>${item.title}</title>
            // lots of meta tags
          </head>
          <body>
            <h3>${item.title}</h3>
            <audio controls>
              <source src="${audioURL}" type="audio/mpeg">
            </audio>
          </body>
        </html>
      `,

now I would like to use

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const html = renderToString(() => <App item={item} />);

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const html = renderToString(() => <App item={item} />);

which of course doesn't work, because it's

tsx

tsx

and uses

/>

/>

etc.

is there a way I can build

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const pageRenderer = (data: {id: string, item: string}) => {
  const html = renderToString(() => <App id={data.id} event={data.item} />);
  return html
}
export pagerenderer

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const pageRenderer = (data: {id: string, item: string}) => {
  const html = renderToString(() => <App id={data.id} event={data.item} />);
  return html
}
export pagerenderer

into

 renderer.mjs

 renderer.mjs

that I can import into my serverless function?

SolidJS•4y ago•

70 replies

Bersaelor

How to import `renderToString` into a plain js/ts file

So, I have working serverless application, which has a

handler.ts

handler.ts

.
Inside I atm do:

const html = `
        <html>
          <head>
            <title>${item.title}</title>
            // lots of meta tags
          </head>
          <body>
            <h3>${item.title}</h3>
            <audio controls>
              <source src="${audioURL}" type="audio/mpeg">
            </audio>
          </body>
        </html>
      `,

const html = `
        <html>
          <head>
            <title>${item.title}</title>
            // lots of meta tags
          </head>
          <body>
            <h3>${item.title}</h3>
            <audio controls>
              <source src="${audioURL}" type="audio/mpeg">
            </audio>
          </body>
        </html>
      `,

now I would like to use

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const html = renderToString(() => <App item={item} />);

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const html = renderToString(() => <App item={item} />);

which of course doesn't work, because it's

tsx

tsx

and uses

/>

/>

etc.

is there a way I can build

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const pageRenderer = (data: {id: string, item: string}) => {
  const html = renderToString(() => <App id={data.id} event={data.item} />);
  return html
}
export pagerenderer

import { renderToString } from "solid-js/web";
import App from './site/src/App';

const pageRenderer = (data: {id: string, item: string}) => {
  const html = renderToString(() => <App id={data.id} event={data.item} />);
  return html
}
export pagerenderer

into

 renderer.mjs

 renderer.mjs

that I can import into my serverless function?

How to import `renderToString` into a plain js/ts file

Similar Threads

How to import `renderToString` into a plain js/ts file

Similar Threads

Similar Threads

Similar Threads