-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
379 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
# vue-ssr-extra |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { test, expect } from "@playwright/test"; | ||
|
||
test("basic", async ({ page }) => { | ||
const res = await page.goto("/"); | ||
expect(await res?.text()).toContain("hydrated: false"); | ||
await expect(page.locator("#root")).toContainText("hydrated: true"); | ||
await expect(page.locator("#root")).toContainText("Count: 0"); | ||
await page.getByRole("button", { name: "+" }).click(); | ||
await expect(page.locator("#root")).toContainText("Count: 1"); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<title>vue-ssr-extra</title> | ||
<meta | ||
name="viewport" | ||
content="width=device-width, height=device-height, initial-scale=1.0" | ||
/> | ||
</head> | ||
<body> | ||
<script src="/src/entry-client" type="module"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
# cloudflare-workers | ||
|
||
copied from | ||
https://github.com/hi-ogawa/vite-plugins/tree/992368d0c2f23dbb6c2d8c67a7ce0546d610a671/packages/react-server/examples/basic/misc/cloudflare-workers |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
#!/bin/bash | ||
set -eu -o pipefail | ||
|
||
cd "$(dirname "${BASH_SOURCE[0]}")" | ||
|
||
# clean | ||
rm -rf dist | ||
mkdir -p dist/server dist/client | ||
|
||
# static | ||
cp -r ../../dist/client/. dist/client | ||
rm -rf dist/client/index.html | ||
|
||
# server (bundle by ourselve instead of relying on wrangler) | ||
npx esbuild ../../dist/server/index.js \ | ||
--outfile=dist/server/index.js \ | ||
--metafile=dist/esbuild-metafile.json \ | ||
--define:process.env.NODE_ENV='"production"' \ | ||
--log-override:ignored-bare-import=silent \ | ||
--bundle \ | ||
--minify \ | ||
--format=esm \ | ||
--platform=browser |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
name = "vite-environment-examples-vue-ssr" | ||
|
||
main = "dist/server/index.js" | ||
assets = "dist/client" | ||
workers_dev = true | ||
compatibility_date = "2024-01-01" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
{ | ||
"name": "@hiogawa/vite-environment-examples-vue-ssr-extra", | ||
"private": true, | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"dev-workerd": "vite --config vite.config.workerd.ts", | ||
"build": "vite build --all", | ||
"preview": "vite preview", | ||
"tsc": "vue-tsc -b", | ||
"tsc-dev": "vue-tsc -b --watch --preserveWatchOutput", | ||
"test-e2e": "playwright test", | ||
"test-e2e-preview": "E2E_PREVIEW=1 playwright test", | ||
"test-e2e-workerd": "E2E_WORKERD=1 playwright test", | ||
"cf-build": "SERVER_ENTRY=/src/adapters/workerd.ts pnpm build && bash misc/cloudflare-workers/build.sh", | ||
"cf-preview": "cd misc/cloudflare-workers && wrangler dev", | ||
"cf-release": "cd misc/cloudflare-workers && wrangler deploy" | ||
}, | ||
"dependencies": { | ||
"pinia": "^2.1.7", | ||
"vue": "^3.4.23", | ||
"vue-router": "^4.3.0" | ||
}, | ||
"devDependencies": { | ||
"@hiogawa/vite-plugin-workerd": "workspace:*", | ||
"@vitejs/plugin-vue": "^5.0.4", | ||
"vue-tsc": "^2.0.13" | ||
}, | ||
"volta": { | ||
"extends": "../../package.json" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { defineConfig, devices } from "@playwright/test"; | ||
|
||
const port = Number(process.env["E2E_PORT"] || 6174); | ||
const command = process.env["E2E_PREVIEW"] | ||
? `pnpm preview --port ${port} --strict-port` | ||
: process.env["E2E_WORKERD"] | ||
? `pnpm dev-workerd --port ${port} --strict-port` | ||
: `pnpm dev --port ${port} --strict-port`; | ||
|
||
export default defineConfig({ | ||
testDir: "e2e", | ||
use: { | ||
trace: "on-first-retry", | ||
}, | ||
projects: [ | ||
{ | ||
name: "chromium", | ||
use: devices["Desktop Chrome"], | ||
}, | ||
], | ||
webServer: { | ||
command, | ||
port, | ||
}, | ||
forbidOnly: !!process.env["CI"], | ||
retries: process.env["CI"] ? 2 : 0, | ||
reporter: "list", | ||
}); |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
import { createMiddleware } from "@hattip/adapter-node/native-fetch"; | ||
import { handler } from "../entry-server"; | ||
|
||
export default createMiddleware((ctx) => handler(ctx.request)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { handler } from "../entry-server"; | ||
|
||
export default { | ||
fetch: handler, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { createSSRApp } from "vue"; | ||
import { createPinia } from "pinia"; | ||
import Page from "./routes/page.vue"; | ||
import { createWebHistory, createRouter } from "vue-router"; | ||
import Root from "./root.vue"; | ||
|
||
async function main() { | ||
const pinia = createPinia(); | ||
const router = createRouter({ | ||
history: createWebHistory(), | ||
routes: [{ path: "/", component: Page }], | ||
}); | ||
await router.isReady(); | ||
|
||
const app = createSSRApp(Root); | ||
app.use(pinia); | ||
app.use(router); | ||
app.mount("#root"); | ||
} | ||
|
||
main(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { renderToWebStream } from "vue/server-renderer"; | ||
import { createSSRApp } from "vue"; | ||
import Page from "./routes/page.vue"; | ||
import { createMemoryHistory, createRouter } from "vue-router"; | ||
import Root from "./root.vue"; | ||
|
||
// cf. | ||
// https://github.com/frandiox/vite-ssr/blob/50461a4e0ebf431fdd96771e069a5e759e275b6b/src/vue/entry-server.ts | ||
|
||
export async function handler(req: Request) { | ||
// setup router | ||
const router = createRouter({ | ||
history: createMemoryHistory(), | ||
routes: [{ path: "/", component: Page }], | ||
}); | ||
const url = new URL(req.url); | ||
router.push(url.href.slice(url.origin.length)); | ||
await router.isReady(); | ||
|
||
// render app | ||
const app = createSSRApp(Root); | ||
app.use(router); | ||
|
||
const ssrStream = renderToWebStream(app); | ||
const html = (await import("virtual:index-html")).default; | ||
const htmlStream = ssrStream.pipeThrough(injectSsr(html)); | ||
return new Response(htmlStream, { headers: { "content-type": "text/html" } }); | ||
} | ||
|
||
function injectSsr(html: string) { | ||
let [pre, post] = html.split("<body>") as [string, string]; | ||
pre = pre + `<body><div id="root">`; | ||
post = `</div>` + post; | ||
return new TransformStream<Uint8Array, Uint8Array>({ | ||
start(controller) { | ||
controller.enqueue(new TextEncoder().encode(pre)); | ||
}, | ||
flush(controller) { | ||
controller.enqueue(new TextEncoder().encode(post)); | ||
}, | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script setup> | ||
import { RouterView } from "vue-router"; | ||
</script> | ||
|
||
<template> | ||
<main> | ||
<RouterView /> | ||
</main> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<script setup lang="ts"> | ||
import { ref, onMounted } from "vue"; | ||
const count = ref(0); | ||
const hydrated = ref(false); | ||
onMounted(() => { | ||
hydrated.value = true; | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<div>hydrated: {{ hydrated }}</div> | ||
<div>Count: {{ count }}</div> | ||
<button type="button" @click="count--">-1</button> | ||
<button type="button" @click="count++">+1</button> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
declare module "virtual:index-html" { | ||
const src: string; | ||
export default src; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
declare module "*.vue" { | ||
import type { DefineComponent } from "vue"; | ||
const component: DefineComponent<{}, {}, any>; | ||
export default component; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"extends": "@tsconfig/strictest/tsconfig.json", | ||
"include": ["src", "vite.config.ts", "e2e", "playwright.config.ts"], | ||
"compilerOptions": { | ||
"exactOptionalPropertyTypes": false, | ||
"verbatimModuleSyntax": true, | ||
"noEmit": true, | ||
"moduleResolution": "Bundler", | ||
"module": "ESNext", | ||
"target": "ESNext", | ||
"lib": ["ESNext", "DOM"], | ||
"types": ["vite/client"] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { defineConfig } from "vite"; | ||
import { | ||
vitePluginSsrMiddleware, | ||
vitePluginVirtualIndexHtml, | ||
} from "../react-ssr/vite.config"; | ||
import vue from "@vitejs/plugin-vue"; | ||
import { resolve } from "path"; | ||
|
||
export default defineConfig((_env) => ({ | ||
clearScreen: false, | ||
appType: "custom", | ||
plugins: [ | ||
vue(), | ||
vitePluginSsrMiddleware({ | ||
entry: process.env["SERVER_ENTRY"] || "/src/adapters/node", | ||
preview: resolve("./dist/server/index.js"), | ||
}), | ||
vitePluginVirtualIndexHtml(), | ||
], | ||
environments: { | ||
client: { | ||
build: { | ||
minify: false, | ||
sourcemap: true, | ||
outDir: "dist/client", | ||
}, | ||
}, | ||
ssr: { | ||
build: { | ||
outDir: "dist/server", | ||
}, | ||
}, | ||
}, | ||
|
||
builder: { | ||
async buildEnvironments(builder, build) { | ||
await build(builder.environments["client"]!); | ||
await build(builder.environments["ssr"]!); | ||
}, | ||
}, | ||
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { defineConfig } from "vite"; | ||
import vue from "@vitejs/plugin-vue"; | ||
import { vitePluginWorkerd } from "@hiogawa/vite-plugin-workerd"; | ||
import { vitePluginVirtualIndexHtml } from "../react-ssr/vite.config"; | ||
import { Log } from "miniflare"; | ||
|
||
export default defineConfig((_env) => ({ | ||
clearScreen: false, | ||
appType: "custom", | ||
plugins: [ | ||
vue(), | ||
vitePluginWorkerd({ | ||
entry: "/src/adapters/workerd.ts", | ||
miniflare: { | ||
log: new Log(), | ||
compatibilityDate: "2024-01-01", | ||
}, | ||
}), | ||
vitePluginVirtualIndexHtml(), | ||
], | ||
environments: { | ||
workerd: { | ||
webCompatible: true, | ||
resolve: { | ||
noExternal: true, | ||
}, | ||
}, | ||
}, | ||
})); |
Oops, something went wrong.