npm - @taujs/server - Versions diffs - 0.0.7 → 0.0.8 - Mend

@taujs/server 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +9 -165
package/dist/data.d.ts +37 -0
package/dist/data.js +142 -0
package/dist/{SSRServer.d.ts → index.d.ts} +3 -2
package/dist/{SSRServer.js → index.js} +1 -1
package/package.json +18 -33
package/dist/SSRDataStore.d.ts +0 -15
package/dist/SSRDataStore.js +0 -58
package/dist/SSRRender.d.ts +0 -18
package/dist/SSRRender.js +0 -31

package/README.md CHANGED Viewed

@@ -38,122 +38,27 @@ Integrated ViteDevServer HMR + Vite Runtime API run alongside tsx (TS eXecute) p
 ### Fastify
-```
-import { SSRServer } from '@taujs/server;
-void (await fastify.register(SSRServer, {
-    clientEntryClient: 'entry-client',
-    clientEntryServer: 'entry-server',
-    clientHtmlTemplate: 'index.html',
-    clientRoot: path.resolve(__dirname, '../client'),
-    routes,
-    serviceRegistry,
-}));
-```
+https://github.com/aoede3/taujs/blob/main/src/server/index.ts
 Not utilising taujs [ τjs ] template? Add in your own `alias` object for your own particular setup e.g. `alias: { object }`
 ### React 'entry-client.tsx'
-```
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-import { createSSRStore, SSRStoreProvider } from '@taujs/server/data-store';
-import AppBootstrap from './AppBootstrap';
-const bootstrap = () => {
-  const initialDataPromise = Promise.resolve(window.__INITIAL_DATA__);
-  const store = createSSRStore(initialDataPromise);
-  hydrateRoot(
-    document.getElementById('root') as HTMLElement,
-    <SSRStoreProvider store={store}>
-      <AppBootstrap />
-    </SSRStoreProvider>,
-  );
-};
-if (document.readyState !== 'loading') {
-  bootstrap();
-} else {
-  document.addEventListener('DOMContentLoaded', () => {
-    bootstrap();
-  });
-}
-```
+https://github.com/aoede3/taujs/blob/main/src/client/entry-client.tsx
 ### React 'entry-server.tsx'
 Extended pipe object with callbacks to @taujs/server enabling additional manipulation of HEAD content from client code
-```
-import { ServerResponse } from 'node:http';
-import React from 'react';
-import { createSSRStore, SSRStoreProvider } from '@taujs/server/data-store';
-import { createStreamRenderer } from '@taujs/server/render';
-import AppBootstrap from '@client/AppBootstrap';
-import type { RenderCallbacks } from '@taujs/server';
-export const streamRender = (
-  serverResponse: ServerResponse,
-  { onHead, onFinish, onError }: RenderCallbacks,
-  initialDataPromise: Promise<Record<string, unknown>>,
-  bootstrapModules: string,
-) => {
-  const store = createSSRStore(initialDataPromise);
-  const headContent = `
-    <meta name="description" content="taujs [ τjs ]">
-    <link rel="icon" type="image/svg+xml" href="/taujs.svg" />
-    <title>taujs [ τjs ]</title>
-  `;
-  createStreamRenderer(
-    serverResponse,
-    { onHead, onFinish, onError },
-    {
-      appElement: (
-        <SSRStoreProvider store={store}>
-          <AppBootstrap />
-        </SSRStoreProvider>
-      ),
-      bootstrapModules,
-      getStoreSnapshot: store.getSnapshot,
-      headContent,
-    },
-  );
-};
-```
+https://github.com/aoede3/taujs/blob/main/src/client/entry-server.tsx
 ### index.html
-```
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!--ssr-head-->
-  </head>
-  <body>
-    <main id="root"><!--ssr-html--></main>
-  </body>
-</html>
-```
+https://github.com/aoede3/taujs/blob/main/src/client/index.html
 ### client.d.ts
-```
-interface Window {
-  __INITIAL_DATA__: Record<string, unknown>;
-}
-```
+https://github.com/aoede3/taujs/blob/main/src/client/client.d.ts
 ### Routes
@@ -172,73 +77,12 @@ In supporting Option 2. there is a registry of services. More detail in 'Service
 Each routes 'path' is a simple URL regex as per below examples.
-```
-import type { Route, RouteParams } from '@taujs/server';
-export const routes: Route<RouteParams>[] = [
-  {
-    path: '/',
-    attributes: {
-      fetch: async () => {
-        return {
-          url: 'http://localhost:5173/api/initial',
-          options: {
-            method: 'GET',
-          },
-        };
-      },
-    },
-  },
-  {
-    path: '/:id',
-    attributes: {
-      fetch: async (params: RouteParams) => {
-        return {
-          url: `http://localhost:5173/api/initial/${params.id}`,
-          options: {
-            method: 'GET',
-          },
-        };
-      },
-    },
-  },
-  {
-    path: '/:id/:another',
-    attributes: {
-      fetch: async (params: RouteParams) => {
-        return {
-          options: { params },
-          serviceMethod: 'exampleMethod',
-          serviceName: 'ServiceExample',
-        };
-      },
-    },
-  },
-];
-```
+https://github.com/aoede3/taujs/blob/main/src/shared/routes/Routes.ts
 ### Service Registry
 In supporting internal calls via τjs a registry of available services and methods provides the linkage to your own architectural setup and developmental patterns
-```
-import { ServiceExample } from './ServiceExample';
-import type { ServiceRegistry } from '@taujs/server';
-export const serviceRegistry: ServiceRegistry = {
-  ServiceExample,
-};
-```
-```
-export const ServiceExample = {
-  async exampleMethod(params: Record<string, unknown>): Promise<Record<string, unknown>> {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({ hello: `world internal service call response with id: ${params.id} and another: ${params.another}` });
-      }, 5500);
-    });
-  },
-};
-```
+https://github.com/aoede3/taujs/blob/main/src/server/services/ServiceRegistry.ts
+https://github.com/aoede3/taujs/blob/main/src/server/services/ServiceExample.ts

package/dist/data.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ServerResponse } from 'node:http';
+type SSRStore<T> = {
+    getSnapshot: () => T;
+    getServerSnapshot: () => T;
+    setData: (newData: T) => void;
+    subscribe: (callback: () => void) => () => void;
+};
+declare const createSSRStore: <T>(initialDataPromise: Promise<T>) => SSRStore<T>;
+declare const SSRStoreProvider: React.FC<React.PropsWithChildren<{
+    store: SSRStore<Record<string, unknown>>;
+}>>;
+declare const useSSRStore: <T>() => SSRStore<T>;
+type HydrateAppOptions = {
+    appComponent: React.ReactElement;
+    initialDataKey?: keyof Window;
+    rootElementId?: string;
+    debug?: boolean;
+};
+declare const hydrateApp: ({ appComponent, initialDataKey, rootElementId, debug }: HydrateAppOptions) => void;
+type StreamRenderOptions = {
+    appComponent: React.ReactElement;
+    initialDataPromise: Promise<Record<string, unknown>>;
+    bootstrapModules: string;
+    headContent: string;
+};
+type RenderCallbacks = {
+    onHead: (headContent: string) => void;
+    onFinish: (initialDataResolved: unknown) => void;
+    onError: (error: unknown) => void;
+};
+declare const createStreamRenderer: (serverResponse: ServerResponse, { onHead, onFinish, onError }: RenderCallbacks, { appComponent, initialDataPromise, bootstrapModules, headContent }: StreamRenderOptions) => void;
+export { type SSRStore, SSRStoreProvider, createSSRStore, createStreamRenderer, hydrateApp, useSSRStore };

package/dist/data.js ADDED Viewed

@@ -0,0 +1,142 @@
+// src/SSRDataStore.tsx
+import { createContext, useContext, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+var createSSRStore = (initialDataPromise) => {
+  let currentData;
+  let status = "pending";
+  const subscribers = /* @__PURE__ */ new Set();
+  let resolvePromise = null;
+  const serverDataPromise = new Promise((resolve) => resolvePromise = resolve);
+  initialDataPromise.then((data) => {
+    currentData = data;
+    status = "success";
+    subscribers.forEach((callback) => callback());
+    if (resolvePromise) resolvePromise();
+  }).catch((error) => {
+    console.error("Failed to load initial data:", error);
+    status = "error";
+  });
+  const setData = (newData) => {
+    currentData = newData;
+    status = "success";
+    subscribers.forEach((callback) => callback());
+    if (resolvePromise) resolvePromise();
+  };
+  const subscribe = (callback) => {
+    subscribers.add(callback);
+    return () => subscribers.delete(callback);
+  };
+  const getSnapshot = () => {
+    if (status === "pending") {
+      throw initialDataPromise;
+    } else if (status === "error") {
+      throw new Error("An error occurred while fetching the data.");
+    }
+    return currentData;
+  };
+  const getServerSnapshot = () => {
+    if (status === "pending") {
+      throw serverDataPromise;
+    } else if (status === "error") {
+      throw new Error("Data is not available on the server.");
+    }
+    return currentData;
+  };
+  return { getSnapshot, getServerSnapshot, setData, subscribe };
+};
+var SSRStoreContext = createContext(null);
+var SSRStoreProvider = ({ store, children }) => /* @__PURE__ */ jsx(SSRStoreContext.Provider, { value: store, children });
+var useSSRStore = () => {
+  const store = useContext(SSRStoreContext);
+  if (!store) throw new Error("useSSRStore must be used within a SSRStoreProvider");
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+};
+// src/SSRHydration.tsx
+import React2 from "react";
+import { hydrateRoot } from "react-dom/client";
+// src/utils/Logger.ts
+var createLogger = (debug) => ({
+  log: (...args) => {
+    if (debug) console.log(...args);
+  },
+  warn: (...args) => {
+    if (debug) console.warn(...args);
+  },
+  error: (...args) => {
+    if (debug) console.error(...args);
+  }
+});
+// src/SSRHydration.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var hydrateApp = ({ appComponent, initialDataKey = "__INITIAL_DATA__", rootElementId = "root", debug = false }) => {
+  const { log, warn, error } = createLogger(debug);
+  const bootstrap = () => {
+    log("Hydration started");
+    const rootElement = document.getElementById(rootElementId);
+    if (!rootElement) {
+      error(`Root element with id "${rootElementId}" not found.`);
+      return;
+    }
+    const initialData = window[initialDataKey];
+    if (!initialData) {
+      warn(`Initial data key "${initialDataKey}" is undefined on window.`);
+    } else {
+      log("Initial data loaded:", initialData);
+    }
+    const initialDataPromise = Promise.resolve(initialData);
+    const store = createSSRStore(initialDataPromise);
+    log("Store created:", store);
+    hydrateRoot(
+      rootElement,
+      /* @__PURE__ */ jsx2(React2.StrictMode, { children: /* @__PURE__ */ jsx2(SSRStoreProvider, { store, children: appComponent }) })
+    );
+    log("Hydration completed");
+  };
+  if (document.readyState !== "loading") {
+    bootstrap();
+  } else {
+    document.addEventListener("DOMContentLoaded", bootstrap);
+  }
+};
+// src/SSRRender.tsx
+import { Writable } from "node:stream";
+import "react";
+import { renderToPipeableStream } from "react-dom/server";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var createStreamRenderer = (serverResponse, { onHead, onFinish, onError }, { appComponent, initialDataPromise, bootstrapModules, headContent }) => {
+  const store = createSSRStore(initialDataPromise);
+  const appElement = /* @__PURE__ */ jsx3(SSRStoreProvider, { store, children: appComponent });
+  const { pipe } = renderToPipeableStream(appElement, {
+    bootstrapModules: [bootstrapModules],
+    onShellReady() {
+      onHead(headContent);
+      pipe(
+        new Writable({
+          write(chunk, _encoding, callback) {
+            serverResponse.write(chunk, callback);
+          },
+          final(callback) {
+            onFinish(store.getSnapshot());
+            callback();
+          }
+        })
+      );
+    },
+    onAllReady() {
+    },
+    onError(error) {
+      onError(error);
+    }
+  });
+};
+export {
+  SSRStoreProvider,
+  createSSRStore,
+  createStreamRenderer,
+  hydrateApp,
+  useSSRStore
+};

package/dist/{SSRServer.d.ts → index.d.ts} RENAMED Viewed

@@ -40,8 +40,9 @@ type Manifest = {
         assets?: string[];
     };
 };
+type StreamRender = (serverResponse: ServerResponse, callbacks: RenderCallbacks, initialDataPromise: Promise<Record<string, unknown>>, bootstrapModules: string) => void;
 type RenderModule = {
-    streamRender: (serverResponse: ServerResponse, callbacks: RenderCallbacks, initialDataPromise: Promise<Record<string, unknown>>, bootstrapModules: string) => void;
+    streamRender: StreamRender;
 };
 type RouteAttributes<Params = {}> = {
     fetch: (params?: Params, options?: RequestInit & {
@@ -66,4 +67,4 @@ interface InitialRouteParams extends Record<string, unknown> {
 type RouteParams = InitialRouteParams & Record<string, unknown>;
 type RoutePathsAndAttributes<Params = {}> = Omit<Route<Params>, 'element'>;
-export { type FetchConfig, type InitialRouteParams, type Manifest, type RenderCallbacks, type RenderModule, type Route, type RouteAttributes, type RouteParams, type RoutePathsAndAttributes, SSRServer, type SSRServerOptions, type ServiceRegistry };
+export { type FetchConfig, type InitialRouteParams, type Manifest, type RenderCallbacks, type RenderModule, type Route, type RouteAttributes, type RouteParams, type RoutePathsAndAttributes, SSRServer, type SSRServerOptions, type ServiceRegistry, type StreamRender };

package/dist/{SSRServer.js → index.js} RENAMED Viewed

@@ -121,7 +121,7 @@ import { readFile } from "node:fs/promises";
 import path from "node:path";
 import { createViteRuntime } from "vite";
-// src/utils/index.ts
+// src/utils/Utils.ts
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 import { match } from "path-to-regexp";

package/package.json CHANGED Viewed

@@ -1,10 +1,17 @@
 {
+  "name": "@taujs/server",
+  "version": "0.0.8",
+  "description": "taujs | τjs",
   "author": "Aoede <taujs@aoede.uk.net> (https://www.aoede.uk.net)",
+  "license": "MIT",
+  "homepage": "https://github.com/aoede3/taujs-server",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aoede3/taujs-server.git"
+  },
   "bugs": {
     "url": "https://github.com/aoede3/taujs-server/issues"
   },
-  "description": "taujs | τjs",
-  "homepage": "https://github.com/aoede3/taujs-server",
   "keywords": [
     "fastify",
     "typescript",
@@ -14,44 +21,23 @@
     "react",
     "ssr"
   ],
-  "license": "MIT",
-  "name": "@taujs/server",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/aoede3/taujs-server.git"
-  },
-  "version": "0.0.7",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/SSRServer.js",
-      "types": "./dist/SSRServer.d.ts"
-    },
-    "./data-store": {
-      "import": "./dist/SSRDataStore.js",
-      "types": "./dist/SSRDataStore.d.ts"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
-    "./render": {
-      "import": "./dist/SSRRender.js",
-      "types": "./dist/SSRRender.d.ts"
+    "./data": {
+      "import": "./dist/data.js",
+      "types": "./dist/data.d.ts"
     },
     "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
-  "main": "./dist/SSRServer.js",
-  "types": "./dist/SSRServer.d.ts",
-  "typesVersions": {
-    "*": {
-      "data-store": [
-        "./dist/SSRDataStore.d.ts"
-      ],
-      "render": [
-        "./dist/SSRRender.d.ts"
-      ]
-    }
-  },
-  "type": "module",
   "dependencies": {
     "@fastify/static": "^7.0.4",
     "path-to-regexp": "^8.1.0"
@@ -76,7 +62,6 @@
     "vitest": "^2.0.5"
   },
   "peerDependencies": {
-    "@vitejs/plugin-react": "^4.3.1",
     "fastify": "^5.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -85,7 +70,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "ci": "npm run build && npm run check-format && npm run check-exports && npm run lint",
+    "ci": "npm run build && npm run check-format && npm run lint",
     "lint": "tsc",
     "test": "vitest run",
     "coverage": "vitest run --coverage",

package/dist/SSRDataStore.d.ts DELETED Viewed

@@ -1,15 +0,0 @@
-import React from 'react';
-type SSRStore<T> = {
-    getSnapshot: () => T;
-    getServerSnapshot: () => T;
-    setData: (newData: T) => void;
-    subscribe: (callback: () => void) => () => void;
-};
-declare const createSSRStore: <T>(initialDataPromise: Promise<T>) => SSRStore<T>;
-declare const SSRStoreProvider: React.FC<React.PropsWithChildren<{
-    store: SSRStore<Record<string, unknown>>;
-}>>;
-declare const useSSRStore: <T>() => SSRStore<T>;
-export { type SSRStore, SSRStoreProvider, createSSRStore, useSSRStore };

package/dist/SSRDataStore.js DELETED Viewed

@@ -1,58 +0,0 @@
-// src/SSRDataStore.tsx
-import { createContext, useContext, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
-var createSSRStore = (initialDataPromise) => {
-  let currentData;
-  let status = "pending";
-  const subscribers = /* @__PURE__ */ new Set();
-  let resolvePromise = null;
-  const serverDataPromise = new Promise((resolve) => resolvePromise = resolve);
-  initialDataPromise.then((data) => {
-    currentData = data;
-    status = "success";
-    subscribers.forEach((callback) => callback());
-    if (resolvePromise) resolvePromise();
-  }).catch((error) => {
-    console.error("Failed to load initial data:", error);
-    status = "error";
-  });
-  const setData = (newData) => {
-    currentData = newData;
-    status = "success";
-    subscribers.forEach((callback) => callback());
-    if (resolvePromise) resolvePromise();
-  };
-  const subscribe = (callback) => {
-    subscribers.add(callback);
-    return () => subscribers.delete(callback);
-  };
-  const getSnapshot = () => {
-    if (status === "pending") {
-      throw initialDataPromise;
-    } else if (status === "error") {
-      throw new Error("An error occurred while fetching the data.");
-    }
-    return currentData;
-  };
-  const getServerSnapshot = () => {
-    if (status === "pending") {
-      throw serverDataPromise;
-    } else if (status === "error") {
-      throw new Error("Data is not available on the server.");
-    }
-    return currentData;
-  };
-  return { getSnapshot, getServerSnapshot, setData, subscribe };
-};
-var SSRStoreContext = createContext(null);
-var SSRStoreProvider = ({ store, children }) => /* @__PURE__ */ jsx(SSRStoreContext.Provider, { value: store, children });
-var useSSRStore = () => {
-  const store = useContext(SSRStoreContext);
-  if (!store) throw new Error("useSSRStore must be used within a SSRStoreProvider");
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
-};
-export {
-  SSRStoreProvider,
-  createSSRStore,
-  useSSRStore
-};

package/dist/SSRRender.d.ts DELETED Viewed

@@ -1,18 +0,0 @@
-import { ServerResponse } from 'node:http';
-import React from 'react';
-type RenderCallbacks = {
-    onHead: (headContent: string) => void;
-    onFinish: (initialDataResolved: unknown) => void;
-    onError: (error: unknown) => void;
-};
-type StreamRender = {
-    appElement: React.JSX.Element;
-    bootstrapModules: string;
-    headContent: string;
-    getStoreSnapshot: () => unknown;
-};
-declare const createStreamRenderer: (serverResponse: ServerResponse, { onHead, onFinish, onError }: RenderCallbacks, { appElement, bootstrapModules, headContent, getStoreSnapshot }: StreamRender) => void;
-export { createStreamRenderer };

package/dist/SSRRender.js DELETED Viewed

@@ -1,31 +0,0 @@
-// src/SSRRender.ts
-import { Writable } from "node:stream";
-import "react";
-import { renderToPipeableStream } from "react-dom/server";
-var createStreamRenderer = (serverResponse, { onHead, onFinish, onError }, { appElement, bootstrapModules, headContent, getStoreSnapshot }) => {
-  const { pipe } = renderToPipeableStream(appElement, {
-    bootstrapModules: [bootstrapModules],
-    onShellReady() {
-      onHead(headContent);
-      pipe(
-        new Writable({
-          write(chunk, _encoding, callback) {
-            serverResponse.write(chunk, callback);
-          },
-          final(callback) {
-            onFinish(getStoreSnapshot());
-            callback();
-          }
-        })
-      );
-    },
-    onAllReady() {
-    },
-    onError(error) {
-      onError(error);
-    }
-  });
-};
-export {
-  createStreamRenderer
-};