chore: added vike to the examples

examples/vite-vike/.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+    rules: {
+        "react-refresh/only-export-components": "warn",
+    },
+    reportUnusedDisableDirectives: true,
+    ignorePatterns: ["dist/*"],
+    env: { browser: true, es2020: true, node: true },
+    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    settings: { react: { version: "detect" } },
+    plugins: ["react-refresh"],
+    extends: ["eslint:recommended", "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended"],
+};

examples/vite-vike/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

examples/vite-vike/package.json

@@ -0,0 +1,28 @@
+{
+    "scripts": {
+        "dev": "npm run server:dev",
+        "prod": "npm run lint && npm run build && npm run server:prod",
+        "build": "vite build",
+        "server:dev": "node ./server",
+        "server:prod": "cross-env NODE_ENV=production node ./server",
+        "lint": "eslint . --max-warnings 0"
+    },
+    "dependencies": {
+        "@anolilab/unplugin-favicons": "workspace:*",
+        "@vitejs/plugin-react": "^4.0.4",
+        "compression": "^1.7.4",
+        "cross-env": "^7.0.3",
+        "eslint": "^8.47.0",
+        "eslint-plugin-react": "^7.33.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.3",
+        "express": "^4.18.2",
+        "prop-types": "15.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sirv": "^2.0.3",
+        "vite": "^4.4.9",
+        "vike": "^0.4.143"
+    },
+    "type": "module"
+}

examples/vite-vike/pages/test.jsx

@@ -0,0 +1 @@
+export const Page = () => <div>test</div>;

examples/vite-vike/renderer/Link.jsx

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import { usePageContext } from "./usePageContext";
+
+export { Link };
+
+Link.propTypes = {
+    className: PropTypes.string,
+    href: PropTypes.string.isRequired,
+};
+function Link(props) {
+    const pageContext = usePageContext();
+    const className = [props.className, pageContext.urlPathname === props.href && "is-active"].filter(Boolean).join(" ");
+    return <a {...props} className={className} />;
+}

examples/vite-vike/renderer/PageShell.css

@@ -0,0 +1,19 @@
+/* This CSS is common to all pages */
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+
+.navitem {
+  padding: 3px 10px;
+}
+.navitem.is-active {
+  background-color: #eee;
+}

examples/vite-vike/renderer/PageShell.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from "prop-types";
+import logo from "./logo.svg";
+import "./PageShell.css";
+import { PageContextProvider } from "./usePageContext";
+import { Link } from "./Link";
+import { childrenPropType } from "./PropTypeValues";
+
+export { PageShell };
+
+PageShell.propTypes = {
+    pageContext: PropTypes.any,
+    children: childrenPropType,
+};
+function PageShell({ pageContext, children }) {
+    return (
+        <React.StrictMode>
+            <PageContextProvider pageContext={pageContext}>
+                <Layout>
+                    <Sidebar>
+                        <Logo />
+                        <Link className="navitem" href="/">
+                            Home
+                        </Link>
+                        <Link className="navitem" href="/about">
+                            About
+                        </Link>
+                    </Sidebar>
+                    <Content>{children}</Content>
+                </Layout>
+            </PageContextProvider>
+        </React.StrictMode>
+    );
+}
+
+Layout.propTypes = {
+    children: childrenPropType,
+};
+function Layout({ children }) {
+    return (
+        <div
+            style={{
+                display: "flex",
+                maxWidth: 900,
+                margin: "auto",
+            }}
+        >
+            {children}
+        </div>
+    );
+}
+
+Sidebar.propTypes = {
+    children: childrenPropType,
+};
+function Sidebar({ children }) {
+    return (
+        <div
+            style={{
+                padding: 20,
+                flexShrink: 0,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                lineHeight: "1.8em",
+            }}
+        >
+            {children}
+        </div>
+    );
+}
+
+Content.propTypes = {
+    children: childrenPropType,
+};
+function Content({ children }) {
+    return (
+        <div
+            style={{
+                padding: 20,
+                paddingBottom: 50,
+                borderLeft: "2px solid #eee",
+                minHeight: "100vh",
+            }}
+        >
+            {children}
+        </div>
+    );
+}
+
+function Logo() {
+    return (
+        <div
+            style={{
+                marginTop: 20,
+                marginBottom: 10,
+            }}
+        >
+            <a href="/">
+                <img src={logo} height={64} width={64} alt="logo" />
+            </a>
+        </div>
+    );
+}

examples/vite-vike/renderer/PropTypeValues.js

@@ -0,0 +1,3 @@
+import PropTypes from "prop-types";
+
+export let childrenPropType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired;

examples/vite-vike/renderer/_default.page.client.jsx

@@ -0,0 +1,22 @@
+export { render };
+
+import { hydrateRoot } from "react-dom/client";
+import { PageShell } from "./PageShell";
+
+// This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+async function render(pageContext) {
+    const { Page, pageProps } = pageContext;
+    if (!Page) throw new Error("Client-side render() hook expects pageContext.Page to be defined");
+    const root = document.getElementById("react-root");
+    if (!root) throw new Error("DOM element #react-root not found");
+    hydrateRoot(
+        root,
+        <PageShell pageContext={pageContext}>
+            <Page {...pageProps} />
+        </PageShell>,
+    );
+}
+
+/* To enable Client-side Routing:
+export const clientRouting = true
+// !! WARNING !! Before doing so, read https://vike.dev/clientRouting */

examples/vite-vike/renderer/_default.page.server.jsx

@@ -0,0 +1,45 @@
+export { render };
+// See https://vike.dev/data-fetching
+export const passToClient = ["pageProps", "urlPathname"];
+
+import ReactDOMServer from "react-dom/server";
+import { PageShell } from "./PageShell";
+import { escapeInject, dangerouslySkipEscape } from "vike/server";
+import logoUrl from "./logo.svg";
+
+async function render(pageContext) {
+    const { Page, pageProps } = pageContext;
+    // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+    if (!Page) throw new Error("My render() hook expects pageContext.Page to be defined");
+    const pageHtml = ReactDOMServer.renderToString(
+        <PageShell pageContext={pageContext}>
+            <Page {...pageProps} />
+        </PageShell>,
+    );
+
+    // See https://vike.dev/head
+    const { documentProps } = pageContext.exports;
+    const title = (documentProps && documentProps.title) || "Vite SSR app";
+    const desc = (documentProps && documentProps.description) || "App using Vite + Vike";
+
+    const documentHtml = escapeInject`<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="${logoUrl}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="${desc}" />
+        <title>${title}</title>
+      </head>
+      <body>
+        <div id="react-root">${dangerouslySkipEscape(pageHtml)}</div>
+      </body>
+    </html>`;
+
+    return {
+        documentHtml,
+        pageContext: {
+            // We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection
+        },
+    };
+}

examples/vite-vike/renderer/_error.page.jsx

@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+
+export { Page };
+
+Page.propTypes = {
+    is404: PropTypes.bool,
+};
+function Page({ is404 }) {
+    if (is404) {
+        return (
+            <>
+                <h1>404 Page Not Found</h1>
+                <p>This page could not be found.</p>
+            </>
+        );
+    } else {
+        return (
+            <>
+                <h1>500 Internal Error</h1>
+                <p>Something went wrong.</p>
+            </>
+        );
+    }
+}

examples/vite-vike/renderer/usePageContext.jsx

@@ -0,0 +1,25 @@
+// `usePageContext` allows us to access `pageContext` in any React component.
+// See https://vike.dev/pageContext-anywhere
+
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { childrenPropType } from "./PropTypeValues";
+
+export { PageContextProvider };
+// eslint-disable-next-line react-refresh/only-export-components
+export { usePageContext };
+
+const Context = React.createContext(undefined);
+
+PageContextProvider.propTypes = {
+    pageContext: PropTypes.any,
+    children: childrenPropType,
+};
+function PageContextProvider({ pageContext, children }) {
+    return <Context.Provider value={pageContext}>{children}</Context.Provider>;
+}
+
+function usePageContext() {
+    const pageContext = useContext(Context);
+    return pageContext;
+}