From d41cef52cbe2e8105b0c48dec68e8e76ba6dba05 Mon Sep 17 00:00:00 2001 From: MOCHIZUKI Natsune Date: Tue, 4 Jun 2024 17:21:50 +0900 Subject: [PATCH] feat: add `Link` component for external (built) css (#181) * feat: add `Link` component for external (built) css * fix: prod as optional --- mocks/app-link/routes/_renderer.tsx | 23 +++++++++++++++ mocks/app-link/routes/classic/index.tsx | 13 +++++++++ mocks/app-link/routes/index.tsx | 7 +++++ mocks/app/globals.css | 0 src/server/components/index.ts | 1 + src/server/components/link.tsx | 38 +++++++++++++++++++++++++ test-integration/apps.test.ts | 26 +++++++++++++++++ 7 files changed, 108 insertions(+) create mode 100644 mocks/app-link/routes/_renderer.tsx create mode 100644 mocks/app-link/routes/classic/index.tsx create mode 100644 mocks/app-link/routes/index.tsx create mode 100644 mocks/app/globals.css create mode 100644 src/server/components/link.tsx diff --git a/mocks/app-link/routes/_renderer.tsx b/mocks/app-link/routes/_renderer.tsx new file mode 100644 index 0000000..4a7467d --- /dev/null +++ b/mocks/app-link/routes/_renderer.tsx @@ -0,0 +1,23 @@ +import { jsxRenderer } from 'hono/jsx-renderer' +import { Link } from '../../../src/server' + +export default jsxRenderer( + ({ children }) => { + return ( + + + + + {children} + + ) + }, + { + docType: false, + } +) diff --git a/mocks/app-link/routes/classic/index.tsx b/mocks/app-link/routes/classic/index.tsx new file mode 100644 index 0000000..6d5b2d9 --- /dev/null +++ b/mocks/app-link/routes/classic/index.tsx @@ -0,0 +1,13 @@ +import { Hono } from 'hono' + +const app = new Hono() + +app.get('/', (c) => { + return c.render( +
+
+
+ ) +}) + +export default app diff --git a/mocks/app-link/routes/index.tsx b/mocks/app-link/routes/index.tsx new file mode 100644 index 0000000..6c4a568 --- /dev/null +++ b/mocks/app-link/routes/index.tsx @@ -0,0 +1,7 @@ +export default function Hello() { + return ( +
+
+
+ ) +} diff --git a/mocks/app/globals.css b/mocks/app/globals.css new file mode 100644 index 0000000..e69de29 diff --git a/src/server/components/index.ts b/src/server/components/index.ts index d154eb8..b2f936b 100644 --- a/src/server/components/index.ts +++ b/src/server/components/index.ts @@ -1,2 +1,3 @@ export { HasIslands } from './has-islands.js' export { Script } from './script.js' +export { Link } from './link.js' diff --git a/src/server/components/link.tsx b/src/server/components/link.tsx new file mode 100644 index 0000000..927b8ef --- /dev/null +++ b/src/server/components/link.tsx @@ -0,0 +1,38 @@ +import type { FC } from 'hono/jsx' +import type { Manifest } from 'vite' + +type Options = { manifest?: Manifest; prod?: boolean } & JSX.IntrinsicElements['link'] + +export const Link: FC = async (options) => { + let { href, prod, manifest, ...rest } = options + if (href) { + if (prod ?? import.meta.env.PROD) { + if (!manifest) { + const MANIFEST = import.meta.glob<{ default: Manifest }>('/dist/.vite/manifest.json', { + eager: true, + }) + for (const [, manifestFile] of Object.entries(MANIFEST)) { + if (manifestFile['default']) { + manifest = manifestFile['default'] + break + } + } + } + if (manifest) { + const assetInManifest = manifest[href.replace(/^\//, '')] + if (assetInManifest) { + if (href.startsWith('/')) { + return + } + + return + } + } + return <> + } else { + return + } + } + + return +} diff --git a/test-integration/apps.test.ts b/test-integration/apps.test.ts index 5ea3df3..485e473 100644 --- a/test-integration/apps.test.ts +++ b/test-integration/apps.test.ts @@ -583,6 +583,32 @@ describe('