Storing render() data outside of its component

Stencil
1

Hey, I made an improved version of the CapacitorJS.com website which seems to be the best open-source example of how to implement a PWA with StencilJS. My fork introduces a handful of fixes and, hopefully, the last improvement I made is storing all the site content in a single file so that I can generate new sites by populating a single file. The source is at GitHub - megabyte-labs/install.doctor-site: Ionic Stencil site adapted for http://install.doctor.

I’m stuck on an issue with StencilJS though - I’m not sure how to store the layout that you normally pass to render() in each component in a separate file. Does anyone know how I can store the view’s component tree in another file?

I made a video here in case anyone’s interested in the fork or can help me by watching it: Storing StencilJS Component Layouts Outside the Component - YouTube

2

hey,

you could write a function that takes an object argument that contains all the data necessary for rendering, put that function in its own tsx file and export it. The component would then import that function, using its render() returning the result of the function call.

This has the benefit of being super easy testable…

hth… cheers,
Alex