@ethicdevs/fastify-stream-react-views
TypeScript icon, indicating that this package has built-in type declarations

1.11.3 • Public • Published

@ethicdevs/fastify-stream-react-views

Built-in TypeScript definitions NPM MIT License

What started as a fastify reply decorator to renderToMarkupStream a React component as a view/template (plain-old fashioned SSR/monolith/PHP way, without CSR/hydration) is becoming a full-featured framework to build SSR/Islands based applications without the usual pain! 🚀


Looking for an SSR+Island ready solution?

Discover the React Monolith framework which is a framework we built on-top of this library so you don't have to! ⚡️

Sample usage for getting started quickly can be found in the the React Monolith samples repository


Installation

$ yarn add @ethicdevs/fastify-stream-react-views
# or
$ npm i @ethicdevs/fastify-stream-react-views

Usage

First create a server.ts file that will act as the application entry point.

// src/server.ts
import { join, resolve} from "path";
import fastify from "fastify";
import streamReactViews from "@ethicdevs/fastify-stream-react-views";

function main() {
  const app = fastify();

  // ... more fastify server setup ...

  app.register(streamReactViews, {
    appName: "YourAppName", // optional
    titleSeparatorChar: "∙", // optional
    commonProps: { // optional
      foo: 'bar',
      baz: 1,
    }
    islandsFolder: resolve(join(__dirname, 'islands'), // optional
    viewsFolder: resolve(join(__dirname, 'views'), // required
    viewContext: { // optional
      html: {
        dir: "ltr",
      },
      head: [
        { kind: "meta", charset: "utf-8" },
        {
          kind: "meta",
          name: "viewport",
          content: "width=device-width, initial-scale=1",
        },
        {
          kind: "link",
          rel: "icon",
          type: "image/x-icon",
          href: "/public/favicon.ico",
        },
      ],
    },
    withStyledSSR: true, // optional, set to true for styled-component usage
  });

  app.get('/', (_, reply) => {
    return reply.streamReactView('home', {
      title: "This will set the page title in tab bar!",
      hello: 'world',
      punctuation: '!'
    });
  });

  app.listen(...); // as usual
}

main();

Add an HomeView to test things works like this:

// src/views/HomeView.tsx
import type { ReactView } from "@ethicdevs/fastify-stream-react-views";
import React, { VFC } from "react";

import Counter from "../islands/Counter";

type HomeViewProps = {
  hello: string;
  punctuation?: "." | "!" | "?";
};

const HomeView: ReactView = ({ hello, punctuation }) => {
  return (
    <>
      <h1>{`Hello, ${hello}${punctuation || "!"}`}</h1>
      <Counter defaultValue={42} />
    </>
  );
};

export default HomeView;

Then the Counter Island so this component becomes interactive when page has loaded on the client-side (i.e. browser):

// src/islands/Counter.tsx
import type { ReactIsland } from "@ethicdevs/fastify-stream-react-views";
import React, { useState } from "react";

type CounterProps = {
  defaultValue?: number;
};

const Counter: ReactIsland<CounterProps> = ({ defaultValue = 0 }) => {
  const [counter, setCounter] = useState(defaultValue);
  const incrementCounter = () => setCounter((prev) => prev + 1);
  const decrementCounter = () => setCounter((prev) => prev - 1);
  return (
    <div>
      <strong aria-description={"Counter value"}>{`${counter}`}</strong>
      <button onClick={decrementCounter} title={"Decrement counter"}>
        -
      </button>
      <button onClick={incrementCounter} title={"Increment counter"}>
        +
      </button>
    </div>
  );
};

export default Counter;

Then navigate to the ip:port you listen to, and see the magic by inspecting both at the page source code level, as well as devtools/page inspector. Look how the generated HTML is neat and contains everything needed for the client to start being interactive in no-time (~6ms to be interactive in this example). Enjoy ;)

License

MIT

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.11.380latest

Version History

VersionDownloads (Last 7 Days)Published
1.11.380
1.11.219
1.11.10
1.11.022
1.10.20
1.10.12
1.10.00
1.9.91
1.9.80
1.9.70
1.9.60
1.9.50
1.9.40
1.9.30
1.9.20
1.9.10
1.9.00
1.8.90
1.8.71
1.8.60
1.8.50
1.8.40
1.8.30
1.8.21
1.8.10
1.8.00
1.7.90
1.7.80
1.7.70
1.7.60
1.7.50
1.7.40
1.7.30
1.7.20
1.7.10
1.7.00
1.6.30
1.6.20
1.6.10
1.6.00
1.5.40
1.5.30
1.5.20
1.5.10
1.5.02
1.4.00
1.3.60
1.3.50
1.3.40
1.3.30
1.3.20
1.3.10
1.3.00
1.2.20
1.2.10
1.2.00
1.1.20
1.1.10
1.1.00
1.0.00
0.9.140
0.9.130
0.9.120
0.9.110
0.9.100
0.9.90
0.9.70
0.9.60
0.9.50
0.9.42
0.9.32
0.9.20
0.9.10
0.9.00
0.8.10
0.8.00
0.7.00
0.6.10
0.6.00
0.5.00
0.4.10
0.4.01
0.3.10
0.3.00
0.3.0-rc30
0.3.0-rc21
0.3.0-rc10
0.2.120
0.2.110
0.2.100
0.2.90
0.2.80
0.2.70
0.2.60
0.2.51
0.2.40
0.2.30
0.2.20
0.2.10
0.2.00
0.1.20
0.1.10
0.1.00

Package Sidebar

Install

npm i @ethicdevs/fastify-stream-react-views

Weekly Downloads

135

Version

1.11.3

License

MIT

Unpacked Size

1.04 MB

Total Files

228

Last publish

Collaborators

  • wnemencha