create-vike 0.0.4 → 0.0.304

package/boilerplate-react-ts/.eslintrc.cjs

@@ -0,0 +1,19 @@
+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',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  parser: '@typescript-eslint/parser'
+}

package/boilerplate-react-ts/.test-dev.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from '../.testRun'
+testRun('npm run dev', { uiFramewok: 'react', lang: 'ts' })

package/boilerplate-react-ts/.test-prod.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from '../.testRun'
+testRun('npm run prod', { uiFramewok: 'react', lang: 'ts' })

package/boilerplate-react-ts/.testCiJob.json

@@ -0,0 +1 @@
+{ "name": "Boilerplates" }

package/boilerplate-react-ts/_gitignore

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

package/boilerplate-react-ts/package.json

@@ -0,0 +1,36 @@
+{
+  "scripts": {
+    "dev": "npm run server:dev",
+    "prod": "npm run lint && npm run build && npm run server:prod",
+    "build": "vite build",
+    "server": "node --loader ts-node/esm ./server/index.ts",
+    "server:dev": "npm run server",
+    "server:prod": "cross-env NODE_ENV=production npm run server",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.4.10",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "@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",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sirv": "^2.0.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vike": "^0.4.142"
+  },
+  "type": "module"
+}

package/boilerplate-react-ts/pages/about/code.css

@@ -0,0 +1,6 @@
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}

package/boilerplate-react-ts/pages/about/index.page.tsx

@@ -0,0 +1,14 @@
+import './code.css'
+
+export { Page }
+
+function Page() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>
+        Example of using Vike.
+      </p>
+    </>
+  )
+}

package/{files/ts/react → boilerplate-react-ts}/pages/index/Counter.tsx

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

package/{files/ts/react → boilerplate-react-ts}/pages/index/index.page.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { Counter } from "./Counter";
+import { Counter } from './Counter'
 
-export { Page };
+export { Page }
 
 function Page() {
   return (
@@ -15,5 +14,5 @@ function Page() {
         </li>
       </ul>
     </>
-  );
+  )
 }

package/boilerplate-react-ts/renderer/Link.tsx

@@ -0,0 +1,9 @@
+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 → boilerplate-react-ts/renderer/PageShell.tsx}

@@ -1,19 +1,13 @@
-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";
+import React from 'react'
+import logo from './logo.svg'
+import { PageContextProvider } from './usePageContext'
+import type { PageContext } from './types'
+import './PageShell.css'
+import { Link } from './Link'
 
-export { PageWrapper };
+export { PageShell }
 
-function PageWrapper({
-  children,
-  pageContext,
-}: {
-  children: React.ReactNode;
-  pageContext: PageContext;
-}) {
+function PageShell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>
@@ -31,21 +25,21 @@ function PageWrapper({
         </Layout>
       </PageContextProvider>
     </React.StrictMode>
-  );
+  )
 }
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div
       style={{
-        display: "flex",
+        display: 'flex',
         maxWidth: 900,
-        margin: "auto",
+        margin: 'auto'
       }}
     >
       {children}
     </div>
-  );
+  )
 }
 
 function Sidebar({ children }: { children: React.ReactNode }) {
@@ -54,15 +48,15 @@ function Sidebar({ children }: { children: React.ReactNode }) {
       style={{
         padding: 20,
         flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        lineHeight: "1.8em",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        lineHeight: '1.8em'
       }}
     >
       {children}
     </div>
-  );
+  )
 }
 
 function Content({ children }: { children: React.ReactNode }) {
@@ -71,13 +65,13 @@ function Content({ children }: { children: React.ReactNode }) {
       style={{
         padding: 20,
         paddingBottom: 50,
-        borderLeft: "2px solid #eee",
-        minHeight: "100vh",
+        borderLeft: '2px solid #eee',
+        minHeight: '100vh'
       }}
     >
       {children}
     </div>
-  );
+  )
 }
 
 function Logo() {
@@ -85,12 +79,12 @@ function Logo() {
     <div
       style={{
         marginTop: 20,
-        marginBottom: 10,
+        marginBottom: 10
       }}
     >
       <a href="/">
         <img src={logo} height={64} width={64} alt="logo" />
       </a>
     </div>
-  );
+  )
 }

package/boilerplate-react-ts/renderer/_default.page.client.tsx

@@ -0,0 +1,23 @@
+export { render }
+
+import { hydrateRoot } from 'react-dom/client'
+import { PageShell } from './PageShell'
+import type { PageContextClient } from './types'
+
+// This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+async function render(pageContext: PageContextClient) {
+  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 */

package/boilerplate-react-ts/renderer/_default.page.server.tsx

@@ -0,0 +1,46 @@
+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'
+import type { PageContextServer } from './types'
+
+async function render(pageContext: PageContextServer) {
+  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
+    }
+  }
+}

package/{files/ts/react → boilerplate-react-ts}/renderer/_error.page.tsx

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

package/boilerplate-react-ts/renderer/types.ts

@@ -0,0 +1,35 @@
+export type { PageContextServer }
+export type { PageContextClient }
+export type { PageContext }
+export type { PageProps }
+
+import type {
+  PageContextBuiltInServer,
+  /*
+  // When using Client Routing https://vike.dev/clientRouting
+  PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient
+  /*/
+  // When using Server Routing
+  PageContextBuiltInClientWithServerRouting as PageContextBuiltInClient
+  //*/
+} from 'vike/types'
+
+type Page = (pageProps: PageProps) => React.ReactElement
+type PageProps = Record<string, unknown>
+
+export type PageContextCustom = {
+  Page: Page
+  pageProps?: PageProps
+  urlPathname: string
+  exports: {
+    documentProps?: {
+      title?: string
+      description?: string
+    }
+  }
+}
+
+type PageContextServer = PageContextBuiltInServer<Page> & PageContextCustom
+type PageContextClient = PageContextBuiltInClient<Page> & PageContextCustom
+
+type PageContext = PageContextClient | PageContextServer

package/boilerplate-react-ts/renderer/usePageContext.tsx

@@ -0,0 +1,20 @@
+// `usePageContext` allows us to access `pageContext` in any React component.
+// See https://vike.dev/pageContext-anywhere
+
+import React, { useContext } from 'react'
+import type { PageContext } from './types'
+
+export { PageContextProvider }
+// eslint-disable-next-line react-refresh/only-export-components
+export { usePageContext }
+
+const Context = React.createContext<PageContext>(undefined as unknown as PageContext)
+
+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/boilerplate-react-ts/server/index.ts

@@ -0,0 +1,74 @@
+// This file isn't processed by Vite, see https://github.com/vikejs/vike/issues/562
+// Consequently:
+//  - When changing this file, you needed to manually restart your server for your changes to take effect.
+//  - To use your environment variables defined in your .env files, you need to install dotenv, see https://vike.dev/env
+//  - To use your path aliases defined in your vite.config.js, you need to tell Node.js about them, see https://vike.dev/path-aliases
+
+// If you want Vite to process your server code then use one of these:
+//  - vavite (https://github.com/cyco130/vavite)
+//     - See vavite + Vike examples at https://github.com/cyco130/vavite/tree/main/examples
+//  - vite-node (https://github.com/antfu/vite-node)
+//  - HatTip (https://github.com/hattipjs/hattip)
+//    - You can use Bati (https://batijs.github.io/) to scaffold a vike + HatTip app. Note that Bati generates apps that use the V1 design (https://vike.dev/migration/v1-design) and Vike packages (https://vike.dev/vike-packages)
+
+import express from 'express'
+import compression from 'compression'
+import { renderPage } from 'vike/server'
+import { root } from './root.js'
+const isProduction = process.env.NODE_ENV === 'production'
+
+startServer()
+
+async function startServer() {
+  const app = express()
+
+  app.use(compression())
+
+  // Vite integration
+  if (isProduction) {
+    // In production, we need to serve our static assets ourselves.
+    // (In dev, Vite's middleware serves our static assets.)
+    const sirv = (await import('sirv')).default
+    app.use(sirv(`${root}/dist/client`))
+  } else {
+    // We instantiate Vite's development server and integrate its middleware to our server.
+    // ⚠️ We instantiate it only in development. (It isn't needed in production and it
+    // would unnecessarily bloat our production server.)
+    const vite = await import('vite')
+    const viteDevMiddleware = (
+      await vite.createServer({
+        root,
+        server: { middlewareMode: true }
+      })
+    ).middlewares
+    app.use(viteDevMiddleware)
+  }
+
+  // ...
+  // Other middlewares (e.g. some RPC middleware such as Telefunc)
+  // ...
+
+  // Vike middleware. It should always be our last middleware (because it's a
+  // catch-all middleware superseding any middleware placed after it).
+  app.get('*', async (req, res, next) => {
+    const pageContextInit = {
+      urlOriginal: req.originalUrl
+    }
+    const pageContext = await renderPage(pageContextInit)
+    const { httpResponse } = pageContext
+    if (!httpResponse) {
+      return next()
+    } else {
+      const { body, statusCode, headers, earlyHints } = httpResponse
+      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
+      headers.forEach(([name, value]) => res.setHeader(name, value))
+      res.status(statusCode)
+      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/stream
+      res.send(body)
+    }
+  })
+
+  const port = process.env.PORT || 3000
+  app.listen(port)
+  console.log(`Server running at http://localhost:${port}`)
+}

package/boilerplate-react-ts/server/root.ts

@@ -0,0 +1,8 @@
+export { root }
+
+// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-when-using-the-experimental-modules-flag/50052194#50052194
+
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const root = `${__dirname}/..`

package/boilerplate-react-ts/server/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  // Make IDEs complain about missing file extension .js in import paths.
+  // Alternatively, we could always set "module" to "Node16" and add the file extension .js to import paths everywhere.
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16"
+  }
+}

package/boilerplate-react-ts/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "ES2020",
+    "target": "ES2020",
+    // Doesn't apply to server/, see ts-node config down below and server/tsconfig.json
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  },
+  "ts-node": {
+    "transpileOnly": true,
+    "esm": true,
+    "compilerOptions": {
+      "module": "Node16",
+      "moduleResolution": "Node16"
+    }
+  }
+}

package/boilerplate-react-ts/vite.config.ts

@@ -0,0 +1,9 @@
+import react from '@vitejs/plugin-react'
+import ssr from 'vike/plugin'
+import { UserConfig } from 'vite'
+
+const config: UserConfig = {
+  plugins: [react(), ssr()]
+}
+
+export default config

package/boilerplate-vue/.test-dev.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from '../.testRun'
+testRun('npm run dev', { uiFramewok: 'vue' })

package/boilerplate-vue/.test-prod.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from '../.testRun'
+testRun('npm run prod', { uiFramewok: 'vue' })

package/boilerplate-vue/.testCiJob.json

@@ -0,0 +1 @@
+{ "name": "Boilerplates" }

package/boilerplate-vue/_gitignore

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

package/boilerplate-vue/package.json

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "dev": "npm run server:dev",
+    "prod": "npm run build && npm run server:prod",
+    "build": "vite build",
+    "server:dev": "node ./server",
+    "server:prod": "cross-env NODE_ENV=production node ./server"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/server-renderer": "^3.3.4",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "express": "^4.18.2",
+    "sirv": "^2.0.3",
+    "vite": "^4.4.9",
+    "vike": "^0.4.142",
+    "vue": "^3.3.4"
+  },
+  "type": "module"
+}

package/boilerplate-vue/pages/about/index.page.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>About</h1>
+  <p>Example of app using Vike.</p>
+</template>
+
+<style>
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}
+</style>

package/boilerplate-vue/pages/index/Counter.vue

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

package/{files/js/vue → boilerplate-vue}/pages/index/index.page.vue

@@ -8,5 +8,5 @@
 </template>
 
 <script setup>
-import Counter from "./Counter.vue";
+import Counter from './Counter.vue'
 </script>

package/{files/js/vue → boilerplate-vue}/renderer/Link.vue

@@ -12,6 +12,6 @@ a.active {
 }
 </style>
 <script setup>
-import { usePageContext } from "./usePageContext";
-const pageContext = usePageContext();
+import { usePageContext } from './usePageContext'
+const pageContext = usePageContext()
 </script>

package/{files/js/vue/renderer/PageWrapper.vue → boilerplate-vue/renderer/PageShell.vue}

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import Link from "./Link.vue";
+import Link from './Link.vue'
 </script>
 
 <style>

package/boilerplate-vue/renderer/_default.page.client.js

@@ -0,0 +1,15 @@
+export { render }
+
+import { createApp } from './app'
+
+// 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 app = createApp(Page, pageProps, pageContext)
+  app.mount('#app')
+}
+
+/* To enable Client-side Routing:
+export const clientRouting = true
+// !! WARNING !! Before doing so, read https://vike.dev/clientRouting */