experimental cf pages example

examples/hono-react-cf-pages/package.json

@@ -19,7 +19,7 @@
   },
   "type": "module",
   "devDependencies": {
-    "vike-cloudflare": "^0.0.6",
+    "telefunc": "^0.1.76",
     "wrangler": "^3.71.0"
   }
 }

examples/hono-react-cf-pages/pages/dynamic/+Page.jsx

@@ -1,8 +1,12 @@
 export default Page
 
 import React, { useState } from 'react'
+import { useData } from 'vike-react/useData'
+import { getHello } from './page.telefunc'
 
 function Page() {
+  const data = useData()
+
   return (
     <>
       <h1>Welcome</h1>
@@ -11,8 +15,10 @@ function Page() {
         <li>Dynamic</li>
         <li>No static html generated</li>
         <li>Interactive</li>
+        <li>Server Rendered at: {data.d}</li>
       </ul>
       <Counter />
+      <TelefuncTest />
     </>
   )
 }
@@ -25,3 +31,12 @@ function Counter() {
     </button>
   )
 }
+
+function TelefuncTest() {
+  const [response, setResponse] = useState()
+  return (
+    <button type="button" onClick={() => getHello().then(setResponse)}>
+      Call telefunc {response}
+    </button>
+  )
+}

examples/hono-react-cf-pages/pages/dynamic/+data.js

@@ -0,0 +1,6 @@
+// https://vike.dev/onBeforeRender
+export default function data() {
+  return {
+    d: String(new Date())
+  }
+}

examples/hono-react-cf-pages/pages/dynamic/page.telefunc.js

@@ -0,0 +1,3 @@
+export async function getHello() {
+  return 'hello'
+}

examples/hono-react-cf-pages/server/app.js

@@ -1,7 +1,16 @@
 import { Hono } from 'hono'
 import vike from 'vike-node/hono'
+import { telefunc, config } from 'telefunc'
+config.disableNamingConvention = true
 
 const app = new Hono()
+app.post('_telefunc', async (ctx) => {
+  const { url, method } = ctx.req
+  const body = await ctx.req.text()
+  const httpResponse = await telefunc({ url, method, body })
+  return new Response(httpResponse.body, {
+    status: httpResponse.statusCode
+  })
+})
 app.use(vike())
 export default app
-console.log('import.meta.env.SSR app', import.meta.env.SSR)

examples/hono-react-cf-pages/vite.config.js

@@ -1,18 +1,22 @@
 import react from '@vitejs/plugin-react'
-import vike from 'vike/plugin'
+import { telefunc } from 'telefunc/vite'
 import vikeNode from 'vike-node/plugin'
-import { pages } from 'vike-cloudflare'
+import vike from 'vike/plugin'
 
 export default {
   plugins: [
-    react(),
     vike({ prerender: true }),
-    vikeNode({ entry: 'server/node-entry.js' }),
-    pages({
-      server: {
-        kind: 'hono',
-        entry: 'server/app.js'
+    vikeNode({
+      entry: {
+        index: 'server/node-entry.js',
+        cloudflare: {
+          entry: 'server/app.js',
+          runtime: 'cloudflare',
+          scaffold: 'dist/cloudflare'
+        }
       }
-    })
+    }),
+    react(),
+    telefunc()
   ]
 }

examples/hono-react-cf-pages/wrangler.toml

@@ -1,4 +1,3 @@
 name = "vike-cloudflare-hono-demo"
 compatibility_date = "2024-06-24"
-pages_build_output_dir = "./dist/cloudflare"
-compatibility_flags = [ "nodejs_compat" ]
+pages_build_output_dir = "./dist/cloudflare"

examples/hono-react-vercel-edge/vite.config.js

@@ -5,6 +5,7 @@ import vike from 'vike/plugin'
 
 export default {
   plugins: [
+    vike({ prerender: true }),
     vikeNode({
       entry: {
         index: 'server/node-entry.js',
@@ -14,7 +15,6 @@ export default {
         }
       }
     }),
-    vike({ prerender: true }),
     react(),
     telefunc()
   ]

packages/vike-node/src/plugin/constants.ts

@@ -1,3 +1,3 @@
 import type { Runtime } from '../types.js'
 
-export const RUNTIMES: Runtime[] = ['node', 'nodeless', 'deno', 'cloudflare', 'vercel']
+export const RUNTIMES: Runtime[] = ['node', 'nodeless', 'deno', 'cloudflare', 'cloudflare-nodejs-compat', 'vercel']

packages/vike-node/src/plugin/plugins/devServerPlugin.ts

@@ -91,7 +91,7 @@ export function devServerPlugin(): Plugin {
   async function initializeServerEntry(vite: ViteDevServer) {
     assert(resolvedConfig.server)
     const { index } = resolvedConfig.server.entry
-    const indexResolved = await vite.pluginContainer.resolveId(index.path)
+    const indexResolved = await vite.pluginContainer.resolveId(index.entry)
     assert(indexResolved?.id)
     entryAbs = indexResolved.id
     vite.ssrLoadModule(entryAbs).catch(logRestartMessage)