@zubyjs/preact 1.0.23

package/README.md

@@ -0,0 +1,56 @@
+# @zubyjs/preact
+
+This package provides the integration of [Zuby.js](https://www.npmjs.com/package/zuby) with the [Preact](https://preactjs.com/) framework through the `JsxProvider` interface.
+
+## Installation
+
+### Automatic Installation
+
+Zuby.js will automatically install this package when creating a new Zuby app with the `preact` 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/preact` package using your favorite package manager.
+If you aren't sure, you can use npm:
+
+```sh
+npm install @zubyjs/preact
+```
+
+Then add the `@zubyjs/preact` JsxProvider to your `zuby.config.mjs` file under the `jsx` option:
+
+```diff lang="js" "preact()"
+  import { defineConfig } from 'zuby';
++ import preact from '@zubyjs/preact';
+
+  export default defineConfig({
+    outDir: '.zuby',
++   jsx: preact(),
+    //   ^^^^^^^^
+  });
+```
+
+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": "^1.0.22",
+      "@zubyjs/preact": "^1.0.22"
+    }
+  }
+```
+
+## 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/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@zubyjs/preact",
+  "version": "1.0.23",
+  "description": "Zuby.js JsxProvider for Preact",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "release": "npm publish --access public ./dist/",
+    "bump-version": "npm version patch",
+    "build": "rm -rf dist/ stage/ && mkdir dist && tsc && cp -rf package.json README.md stage/preact/src/* dist/ && rm -rf stage/",
+    "test": "exit 0"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@preact/preset-vite": "^2.6.0",
+    "wouter-preact": "^2.12.0",
+    "preact-render-to-string": "^6.3.1",
+    "preact": "^10.19.2",
+    "zuby": "^1.0.22"
+  },
+  "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",
+    "preact"
+  ],
+  "engines": {
+    "node": ">=16"
+  }
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+import render from './render.js';
+import { JsxProvider } from 'zuby/types.js';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { normalizePath } from 'zuby/utils/pathUtils.js';
+import { preact } from '@preact/preset-vite';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default (): JsxProvider => ({
+  name: 'preact',
+  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: () => preact(),
+});

package/src/render.ts

@@ -0,0 +1,58 @@
+import { h, options, cloneElement, VNode } from 'preact';
+import { render as renderToString } from 'preact-render-to-string';
+
+type VNodeHook = (vnode: VNode) => void;
+let vnodeHook: VNodeHook | undefined;
+
+const old = options.vnode;
+options.vnode = (vnode: VNode) => {
+  if (old) old(vnode);
+  if (vnodeHook) vnodeHook(vnode);
+};
+
+interface PrerenderOptions {
+  maxDepth?: number;
+  props?: object;
+}
+
+/**
+ * @param {ReturnType<h>} vnode The root JSX element to render (eg: `<App />`)
+ * @param {PrerenderOptions} [options]
+ * @param {number} [options.maxDepth = 10] The maximum number of nested asynchronous operations to wait for before flushing
+ * @param {object} [options.props] Additional props to merge into the root JSX element
+ */
+export default async function render(vnode: ReturnType<typeof h>, options?: PrerenderOptions) {
+  options = options || {};
+
+  const maxDepth = options.maxDepth || 10;
+  const props = options.props;
+  let tries = 0;
+
+  if (typeof vnode === 'function') {
+    vnode = h(vnode, props as Object | null);
+  } else if (props) {
+    vnode = cloneElement(vnode, props);
+  }
+
+  const renderNode = async (): Promise<string> => {
+    if (++tries > maxDepth) {
+      console.warn(
+        `WARNING: Maximum depth of ${maxDepth} of lazy components exceeded while prerendering page.`
+      );
+      console.warn(`This may indicate a circular dependency in your code.`);
+      return '';
+    }
+    try {
+      // @ts-ignore
+      return renderToString(vnode);
+    } catch (e) {
+      if (e instanceof Promise) {
+        await e;
+        return renderNode();
+      }
+      throw e;
+    }
+  };
+
+  return await renderNode();
+}

package/src/router.tsx

@@ -0,0 +1,62 @@
+import { Component } from 'preact';
+import {
+  Router as WouterRouter,
+  Route as WouterRoute,
+  Switch as WouterSwitch,
+} from 'wouter-preact';
+import { Suspense, lazy } from 'preact/compat';
+import { getContext } from 'zuby/context/index.js';
+import { LazyTemplate } from 'zuby/templates/types.js';
+import { createElement } from 'preact';
+
+let pages: LazyTemplate[] | undefined;
+let apps: LazyTemplate[] | undefined;
+let errors: LazyTemplate[] | undefined;
+
+/**
+ * Zuby's Router component provides support for file-system based routing.
+ */
+export default function Router() {
+  const zubyContext = getContext();
+
+  const loadTemplates = (templates?: LazyTemplate[]) =>
+    templates?.map((pageTemplate: any) => ({
+      ...pageTemplate,
+      component: lazy(pageTemplate.component as () => Promise<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 = (
+    <WouterSwitch>
+      {pages.map((page: LazyTemplate) => (
+        <WouterRoute path={page.path} component={page.component} />
+      ))}
+    </WouterSwitch>
+  );
+
+  return (
+    <WouterRouter ssrPath={zubyContext.currentPath}>
+      <Suspense fallback={<div>Loading...</div>}>
+        {createElement(app?.component, {
+          children: page,
+        })}
+      </Suspense>
+    </WouterRouter>
+  );
+}

package/src/templates/app.tsx

@@ -0,0 +1,5 @@
+import { ComponentChildren } from 'preact';
+
+export default function App({ children }: { children: ComponentChildren }) {
+  return <>{children}</>;
+}

package/src/templates/entry.tsx

@@ -0,0 +1,13 @@
+// This file serves as a template for the entry file of the Preact JSX provider.
+// @ts-nocheck
+import { render, hydrate } from 'preact';
+import Router from '@zubyjs/preact/router.js';
+
+if (typeof window !== 'undefined') {
+  const appElement = document.getElementById('app')!;
+  const renderMethod = appElement.hasChildNodes() ? hydrate : render;
+
+  renderMethod(<Router />, appElement);
+}
+
+export default Router;

package/src/templates/error.tsx

@@ -0,0 +1,5 @@
+import { ComponentChildren } from 'preact';
+
+export default function App({ children }: { children: ComponentChildren }) {
+  return <>{children}</>;
+}

package/src/templates/innerLayout.tsx

@@ -0,0 +1,5 @@
+import { ComponentChildren } from 'preact';
+
+export default function InnerLayout({ children }: { children: ComponentChildren }) {
+  return <div id="app">{children}</div>;
+}

package/src/templates/layout.tsx

@@ -0,0 +1,13 @@
+import { ComponentChildren } from 'preact';
+
+export default function Layout({ children }: { children: ComponentChildren }) {
+  return (
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <title>Something</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "declaration": true,
+    "outDir": "./stage",
+    "strict": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "lib": ["es2020", "dom"],
+    "skipLibCheck": true,
+    "baseUrl": "..",
+    "paths": {
+      "zuby": ["zuby/src"],
+      "zuby/*": ["zuby/src/*"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}