refactor: refactor directory structure for honox-island component

honojs · May 2, 2024 · 9638879 · 9638879
1 parent 70c9f2f
commit 9638879
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -60,9 +60,9 @@
       "types": "./dist/vite/client.d.ts",
       "import": "./dist/vite/client.js"
     },
-    "./vite/components": {
-      "types": "./dist/vite/components.d.ts",
-      "import": "./dist/vite/components.js"
+    "./site/components": {
+      "types": "./dist/site/components/index.d.ts",
+      "import": "./dist/site/components/index.js"
     }
   },
   "typesVersions": {
@@ -90,6 +90,9 @@
       ],
       "vite/client": [
         "./dist/vite/client"
+      ],
+      "site/components": [
+        "./dist/site/components"
       ]
     }
   },

diff --git a/src/vite/components.tsx → src/site/components/honox-island.tsx b/src/vite/components.tsx → src/site/components/honox-island.tsx
@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'hono/jsx'
-import { COMPONENT_NAME, DATA_SERIALIZED_PROPS, DATA_HONO_TEMPLATE } from '../constants'
+import { COMPONENT_NAME, DATA_SERIALIZED_PROPS, DATA_HONO_TEMPLATE } from '../../constants'
 
 const inIsland = Symbol()
 const inChildren = Symbol()

diff --git a/src/site/components/index.ts b/src/site/components/index.ts
@@ -0,0 +1 @@
+export { HonoXIsland } from './honox-island.js'
diff --git a/src/vite/island-components.test.ts b/src/vite/island-components.test.ts
@@ -8,7 +8,7 @@ describe('transformJsxTags', () => {
     }`
     const result = transformJsxTags(code, 'Badge.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const BadgeOriginal = function () {
   return <h1>Hello</h1>;
 };
@@ -29,7 +29,7 @@ export default WrappedBadge;`
     }`
     const result = transformJsxTags(code, 'AsyncComponent.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const AsyncComponentOriginal = async function () {
   return <h1>Hello</h1>;
 };
@@ -46,7 +46,7 @@ export default WrappedAsyncComponent;`
     }`
     const result = transformJsxTags(code, 'UnnamedComponent.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const __HonoIsladComponent__Original = async function () {
   return <h1>Hello</h1>;
 };
@@ -63,7 +63,7 @@ export default Wrapped__HonoIsladComponent__;`
     }`
     const result = transformJsxTags(code, 'UnnamedComponent.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const __HonoIsladComponent__Original = () => {
   return <h1>Hello</h1>;
 };
@@ -78,7 +78,7 @@ export default Wrapped__HonoIsladComponent__;`
     const code = 'export default () => <h1>Hello</h1>'
     const result = transformJsxTags(code, 'UnnamedComponent.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const __HonoIsladComponent__Original = () => <h1>Hello</h1>;
 const Wrapped__HonoIsladComponent__ = function (props) {
   return import.meta.env.SSR ? <HonoXIsland componentName="UnnamedComponent.tsx" Component={__HonoIsladComponent__Original} props={props} /> : <__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>;
@@ -91,7 +91,7 @@ export default Wrapped__HonoIsladComponent__;`
     const code = 'export default ExportViaVariable'
     const result = transformJsxTags(code, 'ExportViaVariable.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const WrappedExportViaVariable = function (props) {
   return import.meta.env.SSR ? <HonoXIsland componentName="ExportViaVariable.tsx" Component={ExportViaVariable} props={props} /> : <ExportViaVariable {...props}></ExportViaVariable>;
 };
@@ -105,7 +105,7 @@ const ExportViaVariable = () => <h1>Hello</h1>
 export { utilityFn, ExportViaVariable as default }`
     const result = transformJsxTags(code, 'ExportViaVariable.tsx')
     expect(result).toBe(
-      `import { HonoXIsland } from "honox/vite/components";
+      `import { HonoXIsland } from "honox/site/components";
 const utilityFn = () => {};
 const ExportViaVariable = () => <h1>Hello</h1>;
 const WrappedExportViaVariable = function (props) {
@@ -118,8 +118,11 @@ export { utilityFn, WrappedExportViaVariable as default };`
 
 describe('options', () => {
   describe('reactApiImportSource', () => {
-    // get full path of ./components.tsx
-    const component = path.resolve(__dirname, 'components.tsx').replace(/\\/g, '/')
+    // get full path of honox-island.tsx
+    const component = path
+      .resolve(__dirname, '../site/components/honox-island.tsx')
+      // replace backslashes for Windows
+      .replace(/\\/g, '/')
 
     // prettier-ignore
     it('use \'hono/jsx\' by default', async () => {

diff --git a/src/vite/island-components.ts b/src/vite/island-components.ts
@@ -156,7 +156,7 @@ export const transformJsxTags = (contents: string, componentName: string) => {
     ast.program.body.unshift(
       importDeclaration(
         [importSpecifier(identifier('HonoXIsland'), identifier('HonoXIsland'))],
-        stringLiteral('honox/vite/components')
+        stringLiteral('honox/site/components')
       )
     )
 
@@ -196,7 +196,7 @@ export function islandComponents(options?: IslandComponentsOptions): Plugin {
     },
 
     async load(id) {
-      if (/\/honox\/.*?\/vite\/components\./.test(id)) {
+      if (/\/honox\/.*?\/site\/components\//.test(id)) {
         if (!reactApiImportSource) {
           return
         }