@warp-ds/isolate

A package to isolate sections of a page with SSR shadow DOM (via DSD) and Warp support. Includes ponyfill for browsers that don't support DSD natively.

Install

npm install @warp-ds/isolate

Basic Usage

import { isolate } from "@warp-ds/isolate";

const name = "my-isolated-content";
const markup = "<div>here is some markup to isolate</div>"; // can even be React SSR'd string
const options = {
  styles: "div { background-color: red; }", // purged Warp styles go here,
  mode: "open", // or "closed". Defaults to "open" and unless you have good reason, leave it that way.
};

const result = isolate(name, markup, options);
// respond with "result" from your HTTP server.

Warp usage

Setup

First, perform setup as per these instructions

Build

Build dist/styles.css by running build. In this example, this is done using the Uno CLI like so...

npx unocss ./server.js -c uno.config.js -o dist/styles.css

...but you could also use Vite.

server.js will be scanned for classes and a CSS file will be compiled and placed into dist/styles.css

Inline CSS into shadow DOM

In your server, read in dist/styles and inline it into the isolated shadow dom wrapper like so:

import { isolate } from "@warp/isolate";

const __dirname = new URL(".", import.meta.url).pathname;
const styles = await fs.readFile(join(__dirname, "dist/styles.css"), "utf-8");

const name = "my-warp-app";
const markup = `<div class="p-4">Hello World</div>`;
const options = { styles };
const result = isolate(name, markup, options);

// respond with "result" from your HTTP server.

See the examples/warp folder for a more complete working setup.

React SSR with hydration

In the server

import ReactDOMServer from "react-dom/server";
import { isolate } from "@warp-ds/isolate";
import App from "./app.jsx";

const name = "my-ssr-react-app";
const markup = `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`;
const result = isolate(name, `<div id="root">${app}</div>`);

// respond with "result" from your HTTP server.

In the client

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.hydrate(
  <App />,
  document.querySelector("my-ssr-react-app").shadowRoot.querySelector("#root")
);