SSG + Client script

[berlysia]

What is the feature you are proposing?

(update) Does not work even with the steps written in the README , there is no client bundles!

Currently, @hono/vite-ssg and honox/vite/client combination cannot work in naive way.

1. vite build --mode client && vite build results the latter build cleanups the former.
2. Failed to vite build . A generated client script referenced by Script component cannot resolve by Vite.

current `vite.config.ts` file example

```ts // vite.config.ts import honox from "honox/vite"; import client from "honox/vite/client"; import { defineConfig } from "vite"; import ssg from "@hono/vite-ssg"; const entry = "./app/server.ts"; export default defineConfig(({ mode, command }) => { const plugins = mode === "client" ? [client()] : [honox(), ssg({ entry })]; return { build: { rollupOptions: { input: ["./app/style.css"], output: { assetFileNames: "static/assets/[name].[ext]", }, } }, plugins, }; }); ```

An error log of server build

``` Error: [vite]: Rollup failed to resolve import "/static/client-qvhPWvF1.js" from "(repo-root)/.hono/index.html". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to `build.rollupOptions.external` at viteWarn (file://(repo-root)/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67040:27) at onRollupWarning (file://(repo-root)/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67068:9) at onwarn (file://(repo-root)/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:66777:13) at file://(repo-root)/node_modules/rollup/dist/es/shared/node-entry.js:17457:13 at Object.logger [as onLog] (file://(repo-root)/node_modules/rollup/dist/es/shared/node-entry.js:19117:9) at ModuleLoader.handleInvalidResolvedId (file://(repo-root)/node_modules/rollup/dist/es/shared/node-entry.js:18061:26) at file://(repo-root)/node_modules/rollup/dist/es/shared/node-entry.js:18019:26 error: script "build" exited with code 1 ``` Use of `build.rollupOptions.external` does not work. A generated script element will be removed in a generated HTML.

WORKAROUND for 1: Write a custom plugin that build.emptyOutDir set to false. This derives from build.emptyOutDir set to true by @hono/vite-ssg .

WORKAROUND for 2: Use resolve.alias.

`vite.config.ts` file with workaround

```ts // vite.config.ts import { dirname, resolve } from "node:path"; import { fileURLToPath } from "node:url"; import honox from "honox/vite"; import client from "honox/vite/client"; import { defineConfig } from "vite"; import ssg from "@hono/vite-ssg"; const entry = "./app/server.ts"; export default defineConfig(({ mode, command }) => { const plugins = mode === "client" ? [client()] : [ honox({ entry }), ssg({ entry }), { config() { return { build: { emptyOutDir: false } }; }, }, ]; return { build: { rollupOptions: { input: ["./app/style.css"], output: { assetFileNames: "static/assets/[name].[ext]", }, } }, plugins, resolve: { alias: [ { find: /^\/static\/(.*?)\.js/, replacement: resolve( // Node 18 support, for 20 or upper, `import.meta.dirname` also works dirname(fileURLToPath(import.meta.url)), "dist/static/$1.js" ), }, ], }, }; }); ```

[berlysia]

(edited) I thought "it works!" but there is errors. I folded up what I was writing.

References which points to generated codes built by client build cause not found and fallback to index.html

And previous workarounds 1 and 2 are also have same problem, but there is no error because the files by client build is also in dist directory.

(folded)

(update) Just work with this configuration: ```ts // vite.config.ts import honox from "honox/vite"; import client from "honox/vite/client"; import { defineConfig } from "vite"; import ssg from "@hono/vite-ssg"; const entry = "./app/server.ts"; export default defineConfig(({ mode, command }) => { if (mode === "client") { return { plugins: [client()], build: { outDir: ".hono", }, }; } return { plugins: [honox(), ssg({ entry })], }; }); ``` And fix manifest position for `Script` component. ```tsx // app/routes/_renderer.tsx import { Style } from "hono/css"; import { jsxRenderer } from "hono/jsx-renderer"; import { Script } from "honox/server"; import { Manifest } from "vite"; // here const manifestFile = Object.values( import.meta.glob<{ default: Manifest }>("/.hono/.vite/manifest.json", { eager: true, }), )[0]; const manifest = manifestFile.default; export default jsxRenderer(({ children, title }) => { return ( Githubissues.

Githubissues is a development platform for aggregating issues.