Skip to content

A very basic example showing how skatejs, undom, and preact combine to enable web component server-side-rendering.

Notifications You must be signed in to change notification settings

NeverOddOrEven/webcomponents-ssr-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SkateJS SSR

An example with some extra nuance, to cover the gaps where the documentation may not be as clear

Getting Started

The repository uses ts-node to run the jsx file directly, or you can transpile it down to js and run the code that way.

npm install
npm run start-js
npm run start-ts

Expected Output

> node -r ts-node/register src/index.jsx


Rendering JSX:
<body><script>function __ssr() {var r,s=document.currentScript,f=s.parentNode;h=f.parentNode;f.removeChild(s);h.removeChild(f);r=h.attachShadow({mode:h.getAttribute('mode')||'open'});while(f&&f.firstChild)r.appendChild(f.firstChild);}</script><x-hello><shadowroot><span>Hello, <x-yell><shadowroot><strong><slot></slot></strong><script>__ssr()</script></shadowroot><slot></slot></x-yell>!</span><script>__ssr()</script></shadowroot>World</x-hello></body>

Rendering imperative javascript:
<body><script>function __ssr() {var r,s=document.currentScript,f=s.parentNode;h=f.parentNode;f.removeChild(s);h.removeChild(f);r=h.attachShadow({mode:h.getAttribute('mode')||'open'});while(f&&f.firstChild)r.appendChild(f.firstChild);}</script><x-hello><shadowroot><span>Hello, <x-yell><shadowroot><strong><slot></slot></strong><script>__ssr()</script></shadowroot><slot></slot></x-yell>!</span><script>__ssr()</script></shadowroot>World</x-hello></body>

Plain HTML:
<body>
	<x-hello>
		World
	</x-hello>
</body>

About

A very basic example showing how skatejs, undom, and preact combine to enable web component server-side-rendering.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published