create-vike 0.0.3 → 0.0.5

package/files/ts/react/pages/index/Counter.tsx

@@ -1,12 +0,0 @@
-import React, { useState } from "react";
-
-export { Counter };
-
-function Counter() {
-  const [count, setCount] = useState(0);
-  return (
-    <button type="button" onClick={() => setCount((count) => count + 1)}>
-      Counter {count}
-    </button>
-  );
-}

package/files/ts/react/pages/index/index.page.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Counter } from "./Counter";
-
-export { Page };
-
-function Page() {
-  return (
-    <>
-      <h1>Welcome</h1>
-      This page is:
-      <ul>
-        <li>Rendered to HTML.</li>
-        <li>
-          Interactive. <Counter />
-        </li>
-      </ul>
-    </>
-  );
-}

package/files/ts/react/renderer/Link.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { usePageContext } from "./usePageContext";
-
-export { Link };
-
-function Link(props: {
-  href?: string;
-  className?: string;
-  children: React.ReactNode;
-}) {
-  const pageContext = usePageContext();
-  const className = [
-    props.className,
-    pageContext.urlPathname === props.href && "is-active",
-  ]
-    .filter(Boolean)
-    .join(" ");
-  return <a {...props} className={className} />;
-}

package/files/ts/react/renderer/PageWrapper.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import logo from "./logo.svg";
-import { PageContextProvider } from "./usePageContext";
-import "./PageWrapper.css";
-import { Link } from "./Link";
-import type { PageContext } from "./types";
-
-export { PageWrapper };
-
-function PageWrapper({
-  children,
-  pageContext,
-}: {
-  children: React.ReactNode;
-  pageContext: PageContext;
-}) {
-  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>
-  );
-}
-
-function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        maxWidth: 900,
-        margin: "auto",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function Sidebar({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        padding: 20,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        lineHeight: "1.8em",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function Content({ children }: { children: React.ReactNode }) {
-  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>
-  );
-}

package/files/ts/react/renderer/_default.page.client.tsx

@@ -1,21 +0,0 @@
-import ReactDOM from "react-dom";
-import React from "react";
-import { getPage } from "vite-plugin-ssr/client";
-import { PageWrapper } from "./PageWrapper";
-import type { PageContext } from "./types";
-import type { PageContextBuiltInClient } from "vite-plugin-ssr/types";
-
-hydrate();
-
-async function hydrate() {
-  // We do Server Routing, but we can also do Client Routing by using `useClientRouter()`
-  // instead of `getPage()`, see https://vite-plugin-ssr.com/useClientRouter
-  const pageContext = await getPage<PageContextBuiltInClient & PageContext>();
-  const { Page, pageProps } = pageContext;
-  ReactDOM.hydrate(
-    <PageWrapper pageContext={pageContext}>
-      <Page {...pageProps} />
-    </PageWrapper>,
-    document.getElementById("page-view")
-  );
-}

package/files/ts/react/renderer/_default.page.server.tsx

@@ -1,49 +0,0 @@
-import ReactDOMServer from "react-dom/server";
-import React from "react";
-import { PageWrapper } from "./PageWrapper";
-import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";
-import logoUrl from "./logo.svg";
-import type { PageContext } from "./types";
-import type { PageContextBuiltIn } from "vite-plugin-ssr/types";
-
-export { render };
-
-// See https://vite-plugin-ssr.com/data-fetching
-export const passToClient = ["pageProps", "urlPathname"];
-
-async function render(pageContext: PageContextBuiltIn & PageContext) {
-  const { Page, pageProps } = pageContext;
-  const pageHtml = ReactDOMServer.renderToString(
-    <PageWrapper pageContext={pageContext}>
-      <Page {...pageProps} />
-    </PageWrapper>
-  );
-
-  // See https://vite-plugin-ssr.com/html-head
-  const { documentProps } = pageContext;
-  const title = (documentProps && documentProps.title) || "Vite SSR app";
-  const desc =
-    (documentProps && documentProps.description) ||
-    "App using Vite + vite-plugin-ssr";
-
-  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="page-view">${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://vite-plugin-ssr.com/page-redirection
-    },
-  };
-}

package/files/ts/react/renderer/_error.page.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-export { Page };
-
-function Page({ is404 }: { is404: boolean }) {
-  if (is404) {
-    return (
-      <>
-        <h1>404 Page Not Found</h1>
-        <p>This page could not be found.</p>
-      </>
-    );
-  } else {
-    return (
-      <>
-        <h1>500 Internal Server Error</h1>
-        <p>Something went wrong.</p>
-      </>
-    );
-  }
-}

package/files/ts/react/renderer/types.ts

@@ -1,11 +0,0 @@
-export type PageProps = {};
-// The `pageContext` that are available in both on the server-side and browser-side
-export type PageContext = {
-  Page: (pageProps: PageProps) => React.ReactElement;
-  pageProps: PageProps;
-  urlPathname: string;
-  documentProps?: {
-    title?: string;
-    description?: string;
-  };
-};

package/files/ts/react/renderer/usePageContext.tsx

@@ -1,25 +0,0 @@
-// `usePageContext` allows us to access `pageContext` in any React component.
-// More infos: https://vite-plugin-ssr.com/pageContext-anywhere
-
-import React, { useContext } from "react";
-import type { PageContext } from "./types";
-
-export { PageContextProvider };
-export { usePageContext };
-
-const Context = React.createContext<PageContext>(undefined as any);
-
-function PageContextProvider({
-  pageContext,
-  children,
-}: {
-  pageContext: PageContext;
-  children: React.ReactNode;
-}) {
-  return <Context.Provider value={pageContext}>{children}</Context.Provider>;
-}
-
-function usePageContext() {
-  const pageContext = useContext(Context);
-  return pageContext;
-}

package/files/ts/react+client-router/renderer/_default.page.client.tsx

@@ -1,44 +0,0 @@
-import ReactDOM from "react-dom";
-import React from "react";
-import { useClientRouter } from "vite-plugin-ssr/client/router";
-import { PageWrapper } from "./PageWrapper";
-import { PageContext } from "./types";
-
-useClientRouter({
-  async render(pageContext: PageContext) {
-    if (pageContext.isHydration) {
-      // When we render the first page. (Since we do SSR, the first page is already
-      // rendered to HTML and we merely have to hydrate it.)
-      const { Page, pageProps } = pageContext;
-      ReactDOM.hydrate(
-        <PageWrapper pageContext={pageContext}>
-          <Page {...pageProps} />
-        </PageWrapper>,
-        document.getElementById("page-view")
-      );
-    } else {
-      // When the user navigates to a new page.
-      const { Page, pageProps } = pageContext;
-      ReactDOM.render(
-        <PageWrapper pageContext={pageContext}>
-          <Page {...pageProps} />
-        </PageWrapper>,
-        document.getElementById("page-view")
-      );
-    }
-  },
-
-  ensureHydration: true,
-
-  prefetchLinks: true,
-
-  onTransitionStart() {
-    // Page transition started
-  },
-
-  onTransitionEnd() {
-    // Page transition ended
-  },
-}).hydrationPromise.then(() => {
-  // Hydration finished; page is now interactive
-});

package/files/ts/react+client-router/renderer/types.ts

@@ -1,12 +0,0 @@
-export type PageProps = {};
-// The `pageContext` that are available in both on the server-side and browser-side
-export type PageContext = {
-  Page: (pageProps: PageProps) => React.ReactElement;
-  isHydration: boolean;
-  pageProps: PageProps;
-  urlPathname: string;
-  documentProps?: {
-    title?: string;
-    description?: string;
-  };
-};

package/files/ts/vike/server/index.ts

@@ -1,40 +0,0 @@
-import express from "express";
-import { createPageRenderer } from "vite-plugin-ssr";
-
-const isProduction = process.env.NODE_ENV === "production";
-const root = `${__dirname}/..`;
-
-startServer();
-
-async function startServer() {
-  const app = express();
-
-  let viteDevServer;
-  if (isProduction) {
-    app.use(express.static(`${root}/dist/client`));
-  } else {
-    const vite = require("vite");
-    viteDevServer = await vite.createServer({
-      root,
-      server: { middlewareMode: true },
-    });
-    app.use(viteDevServer.middlewares);
-  }
-
-  const renderPage = createPageRenderer({ viteDevServer, isProduction, root });
-  app.get("*", async (req, res, next) => {
-    const url = req.originalUrl;
-    const pageContextInit = {
-      url,
-    };
-    const pageContext = await renderPage(pageContextInit);
-    const { httpResponse } = pageContext;
-    if (!httpResponse) return next();
-    const { statusCode, body } = httpResponse;
-    res.status(statusCode).send(body);
-  });
-
-  const port = process.env.PORT || 3000;
-  app.listen(port);
-  console.log(`Server running at http://localhost:${port}`);
-}

package/files/ts/vue/pages/about/index.page.vue

@@ -1,11 +0,0 @@
-<template>
-  <h1>About</h1>
-  <p>A colored page.</p>
-</template>
-
-<style>
-h1,
-p {
-  color: green;
-}
-</style>

package/files/ts/vue/pages/index/Counter.vue

@@ -1,10 +0,0 @@
-<template>
-  <button type="button" @click="state.count++">
-    Counter {{ state.count }}
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from "vue";
-const state = reactive({ count: 0 });
-</script>

package/files/ts/vue/pages/index/index.page.vue

@@ -1,12 +0,0 @@
-<template>
-  <h1>Welcome</h1>
-  This page is:
-  <ul>
-    <li>Rendered to HTML.</li>
-    <li>Interactive. <Counter /></li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import Counter from "./Counter.vue";
-</script>

package/files/ts/vue/renderer/Link.vue

@@ -1,17 +0,0 @@
-<template>
-  <a :class="{ active: pageContext.urlPathname === $attrs.href }">
-    <slot />
-  </a>
-</template>
-<style scoped>
-a {
-  padding: 3px 10px;
-}
-a.active {
-  background-color: #eee;
-}
-</style>
-<script lang="ts" setup>
-import { usePageContext } from "./usePageContext";
-const pageContext = usePageContext();
-</script>

package/files/ts/vue/renderer/PageWrapper.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="layout">
-    <div class="navigation">
-      <a href="/" class="logo">
-        <img src="./logo.svg" height="64" width="64" alt="logo" />
-      </a>
-      <Link href="/">Home</Link>
-      <Link href="/about">About</Link>
-    </div>
-    <div class="content"><slot /></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Link from "./Link.vue";
-</script>
-
-<style>
-body {
-  margin: 0;
-  font-family: sans-serif;
-}
-* {
-  box-sizing: border-box;
-}
-a {
-  text-decoration: none;
-}
-</style>
-
-<style scoped>
-.layout {
-  display: flex;
-  max-width: 900px;
-  margin: auto;
-}
-.content {
-  padding: 20px;
-  border-left: 2px solid #eee;
-  padding-bottom: 50px;
-  min-height: 100vh;
-}
-.navigation {
-  padding: 20px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  line-height: 1.8em;
-}
-.logo {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-</style>

package/files/ts/vue/renderer/_default.page.client.ts

@@ -1,14 +0,0 @@
-import { getPage } from "vite-plugin-ssr/client";
-import { createApp } from "./app";
-import type { PageContext } from "./types";
-import type { PageContextBuiltInClient } from "vite-plugin-ssr/types";
-
-hydrate();
-
-async function hydrate() {
-  // We do Server Routing, but we can also do Client Routing by using `useClientRouter()`
-  // instead of `getPage()`, see https://vite-plugin-ssr.com/useClientRouter
-  const pageContext = await getPage<PageContextBuiltInClient & PageContext>();
-  const app = createApp(pageContext);
-  app.mount("#app");
-}

package/files/ts/vue/renderer/_default.page.server.ts

@@ -1,43 +0,0 @@
-import { renderToString } from "@vue/server-renderer";
-import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";
-import { createApp } from "./app";
-import logoUrl from "./logo.svg";
-import type { PageContext } from "./types";
-import type { PageContextBuiltIn } from "vite-plugin-ssr/types";
-
-export { render };
-// See https://vite-plugin-ssr.com/data-fetching
-export const passToClient = ["pageProps", "urlPathname"];
-
-async function render(pageContext: PageContextBuiltIn & PageContext) {
-  const app = createApp(pageContext);
-  const appHtml = await renderToString(app);
-
-  // See https://vite-plugin-ssr.com/html-head
-  const { documentProps } = pageContext;
-  const title = (documentProps && documentProps.title) || "Vite SSR app";
-  const desc =
-    (documentProps && documentProps.description) ||
-    "App using Vite + vite-plugin-ssr";
-
-  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="app">${dangerouslySkipEscape(appHtml)}</div>
-      </body>
-    </html>`;
-
-  return {
-    documentHtml,
-    pageContext: {
-      // We can add some `pageContext` here, which is useful if we want to do page redirection https://vite-plugin-ssr.com/page-redirection
-    },
-  };
-}

package/files/ts/vue/renderer/_error.page.vue

@@ -1,14 +0,0 @@
-<template>
-  <div v-if="is404">
-    <h1>404 Page Not Found</h1>
-    <p>This page could not be found.</p>
-  </div>
-  <div v-else>
-    <h1>500 Internal Server Error</h1>
-    <p>Something went wrong.</p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps(["is404"]);
-</script>

package/files/ts/vue/renderer/app.ts

@@ -1,30 +0,0 @@
-import { createSSRApp, defineComponent, h } from "vue";
-import PageWrapper from "./PageWrapper.vue";
-import { setPageContext } from "./usePageContext";
-import type { PageContext } from "./types";
-
-export { createApp };
-
-function createApp(pageContext: PageContext) {
-  const { Page, pageProps } = pageContext;
-  const PageWithLayout = defineComponent({
-    render() {
-      return h(
-        PageWrapper,
-        {},
-        {
-          default() {
-            return h(Page, pageProps || {});
-          },
-        }
-      );
-    },
-  });
-
-  const app = createSSRApp(PageWithLayout);
-
-  // Make `pageContext` available from any Vue component
-  setPageContext(app, pageContext);
-
-  return app;
-}

package/files/ts/vue/renderer/types.ts

@@ -1,10 +0,0 @@
-export type PageProps = {};
-// The `pageContext` that are available in both on the server-side and browser-side
-export type PageContext = {
-  Page: any;
-  pageProps?: PageProps;
-  documentProps?: {
-    title?: string;
-    description?: string;
-  };
-};

package/files/ts/vue/renderer/usePageContext.ts

@@ -1,20 +0,0 @@
-// Hook `usePageContext()` to make `pageContext` available from any Vue component.
-// See https://vite-plugin-ssr.com/pageContext-anywhere
-
-import { inject } from "vue";
-import type { App } from "vue";
-import { PageContext } from "./types";
-
-export { usePageContext };
-export { setPageContext };
-
-const key = Symbol();
-
-function usePageContext() {
-  const pageContext = inject(key);
-  return pageContext;
-}
-
-function setPageContext(app: App, pageContext: PageContext) {
-  app.provide(key, pageContext);
-}

package/files/ts/vue/vue.d.ts

@@ -1,4 +0,0 @@
-declare module "*.vue" {
-  const Component: any;
-  export default Component;
-}

package/files/ts/vue+client-router/renderer/_default.page.client.ts

@@ -1,24 +0,0 @@
-import { useClientRouter } from "vite-plugin-ssr/client/router";
-import { createApp } from "./app";
-import { PageContext } from "./types";
-
-useClientRouter({
-  async render(pageContext: PageContext) {
-    const app = createApp(pageContext);
-    app.mount("#app");
-  },
-
-  ensureHydration: true,
-
-  prefetchLinks: true,
-
-  onTransitionStart() {
-    // Page transition started
-  },
-
-  onTransitionEnd() {
-    // Page transition ended
-  },
-}).hydrationPromise.then(() => {
-  // Hydration finished; page is now interactive
-});