@zubyjs/react 1.0.29

package/README.md

@@ -0,0 +1,56 @@
+# @zubyjs/react
+
+This package provides the integration of [Zuby.js](https://www.npmjs.com/package/zuby) with the [React](https://react.dev/) framework through the `JsxProvider` interface.
+
+## Installation
+
+### Automatic Installation
+
+Zuby.js will automatically install this package when creating a new Zuby app with the `react` jsx provider option.
+
+All you need to do is run `npx zuby init` and follow the steps.
+Please refer to the [Zuby package](https://www.npmjs.com/package/zuby) for more details.
+
+### Manual Installation
+
+First, install the `@zubyjs/react` package using your favorite package manager.
+If you aren't sure, you can use npm:
+
+```sh
+npm install @zubyjs/react
+```
+
+Then add the `@zubyjs/react` JsxProvider to your `zuby.config.mjs` file under the `jsx` option:
+
+```diff lang="js" "react()"
+  import { defineConfig } from 'zuby';
++ import react from '@zubyjs/react';
+
+  export default defineConfig({
+    outDir: '.zuby',
++   jsx: react(),
+    //   ^^^^^^^^
+  });
+```
+
+Always make sure that all zuby packages are in sync in your `package.json` file:
+
+```diff lang="json"
+  {
+    "name": "my-zuby-app",
+    "version": "1.0.0",
+    "dependencies": {
+      "zuby": "latest",
+      "@zubyjs/react": "latest"
+    }
+  }
+```
+
+## Contributing
+
+This package is part of Zuby.js workspace and maintained by the team behind the [Zuby package](https://www.npmjs.com/package/zuby).
+Please refer to it for more details how to contribute.
+
+## License
+
+MIT

package/index.d.ts

@@ -0,0 +1,3 @@
+import { JsxProvider } from 'zuby/types.js';
+declare const _default: () => JsxProvider;
+export default _default;

package/index.js

@@ -0,0 +1,17 @@
+import render from './render.js';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { normalizePath } from 'zuby/utils/pathUtils.js';
+import react from '@vitejs/plugin-react';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+export default () => ({
+    name: 'react',
+    appTemplateFile: normalizePath(resolve(__dirname, 'templates', 'app.js')),
+    entryTemplateFile: normalizePath(resolve(__dirname, 'templates', 'entry.js')),
+    layoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'layout.js')),
+    innerLayoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'innerLayout.js')),
+    errorTemplateFile: normalizePath(resolve(__dirname, 'templates', 'error.js')),
+    render,
+    getPlugins: () => react(),
+});

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@zubyjs/react",
+  "version": "1.0.29",
+  "description": "Zuby.js JsxProvider for react",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "release": "cd ./dist && npm publish --access public && cd ..",
+    "bump-version": "npm version patch",
+    "build": "rm -rf dist/ stage/ && mkdir dist && tsc && cp -rf package.json README.md stage/react/src/* dist/ && rm -rf stage/",
+    "test": "exit 0"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "wouter": "^2.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15"
+  },
+  "peerDependencies": {
+    "zuby": "^1.0.0"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/futrou/zuby.js/-/issues",
+    "email": "zuby@futrou.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/futrou/zuby.js.git"
+  },
+  "homepage": "https://zuby.futrou.com",
+  "keywords": [
+    "zuby-jsx-provider",
+    "zuby",
+    "react"
+  ],
+  "engines": {
+    "node": ">=16"
+  }
+}

package/render.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+/**
+ * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
+ */
+export default function render(vnode: ReactElement): Promise<string>;

package/render.js

@@ -0,0 +1,16 @@
+import { renderToStaticNodeStream } from 'react-dom/server';
+/**
+ * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
+ */
+export default async function render(vnode) {
+    const stream = renderToStaticNodeStream(vnode);
+    return await streamToString(stream);
+}
+function streamToString(stream) {
+    const chunks = [];
+    return new Promise((resolve, reject) => {
+        stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
+        stream.on('error', (e) => reject(e));
+        stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
+    });
+}

package/router.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Zuby's Router component provides support for file-system based routing.
+ */
+export default function Router(): import("react/jsx-runtime").JSX.Element;

package/router.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch } from 'wouter';
+import { Suspense, lazy } from 'react';
+import { getContext } from 'zuby/context/index.js';
+import { createElement } from 'react';
+let pages;
+let apps;
+let errors;
+/**
+ * Zuby's Router component provides support for file-system based routing.
+ */
+export default function Router() {
+    const zubyContext = getContext();
+    const loadTemplates = (templates) => templates?.map((pageTemplate) => ({
+        ...pageTemplate,
+        component: lazy(pageTemplate.component),
+    })) || [];
+    if (!pages) {
+        pages = loadTemplates(zubyContext.templates?.pages);
+    }
+    if (!apps) {
+        apps = loadTemplates(zubyContext.templates?.apps);
+    }
+    if (!errors) {
+        errors = loadTemplates(zubyContext.templates?.errors);
+    }
+    const app = apps.find(({ pathRegex }) => {
+        return pathRegex.test(zubyContext.currentPath ?? '');
+    });
+    const error = errors.find(({ pathRegex }) => {
+        return pathRegex.test(zubyContext.currentPath ?? '');
+    });
+    const page = (_jsx(WouterSwitch, { children: pages.map((page) => (_jsx(WouterRoute, { path: page.path, component: page.component }))) }));
+    return (_jsx(WouterRouter, { ssrPath: zubyContext.currentPath, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: createElement(app?.component, {
+                children: page,
+            }) }) }));
+}

package/templates/app.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function App({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/templates/app.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export default function App({ children }) {
+    return _jsx(_Fragment, { children: children });
+}

package/templates/entry.d.ts

@@ -0,0 +1,2 @@
+import Router from '@zubyjs/react/router.js';
+export default Router;

package/templates/entry.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// This file serves as a template for the entry file of the React JSX provider.
+// @ts-nocheck
+import { hydrateRoot, createRoot } from 'react-dom/client';
+import Router from '@zubyjs/react/router.js';
+if (typeof window !== 'undefined') {
+    const appElement = document.getElementById('app');
+    if (appElement.hasChildNodes()) {
+        hydrateRoot(appElement, _jsx(Router, {}));
+    }
+    else {
+        createRoot(appElement).render(_jsx(Router, {}));
+    }
+}
+export default Router;

package/templates/error.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function App({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/templates/error.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export default function App({ children }) {
+    return _jsx(_Fragment, { children: children });
+}

package/templates/innerLayout.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function InnerLayout({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/templates/innerLayout.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function InnerLayout({ children }) {
+    return _jsx("div", { id: "app", children: children });
+}

package/templates/layout.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function Layout({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/templates/layout.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Layout({ children }) {
+    return (_jsxs("html", { children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("title", { children: "Something" })] }), _jsx("body", { children: children })] }));
+}