npm - honox - Versions diffs - 0.0.1 → 0.0.2 - Mend

honox 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +30 -9
package/dist/constants.d.ts +2 -1
package/dist/constants.js +3 -1
package/dist/server/components.d.ts +5 -0
package/dist/server/components.js +10 -0
package/dist/server/index.d.ts +3 -0
package/dist/server/index.js +2 -0
package/dist/server/server.d.ts +5 -1
package/dist/server/server.js +30 -23
package/dist/vite/index.js +2 -0
package/dist/vite/inject-has-islands.d.ts +5 -0
package/dist/vite/inject-has-islands.js +52 -0
package/dist/vite/inject-importing-islands.d.ts +5 -0
package/dist/vite/inject-importing-islands.js +52 -0
package/dist/vite/island-components.js +2 -1
package/dist/vite/remove-elements.d.ts +8 -0
package/dist/vite/remove-elements.js +52 -0
package/package.json +15 -10

package/README.md CHANGED Viewed

@@ -1,15 +1,15 @@
 # HonoX
-**HonoX** is a simple and fast meta framework for creating websites and Web APIs with Server-Side Rendering - (formerly _[Sonik](https://github.com/sonikjs/sonik)_). It stands on the shoulders of giants; built on [Hono](https://hono.dev/), [Vite](https://hono.dev/), and UI libraries.
+**HonoX** is a simple and fast - _supersonic_ - meta framework for creating full-stack websites or Web APIs - (formerly _[Sonik](https://github.com/sonikjs/sonik)_). It stands on the shoulders of giants; built on [Hono](https://hono.dev/), [Vite](https://hono.dev/), and UI libraries.
-**Note**: _HonoX is currently in a "beta stage". There will be breaking changes without any announcement. Don't use it in production. However, feel free to try it in your hobby project and give us your feedback!_
+**Note**: _HonoX is currently in a "beta stage". Breaking changes are introduced without following semantic versioning._
 ## Features
-- **File-based routing** - You can create a large app by separating concerns.
+- **File-based routing** - You can create a large application like Next.js.
 - **Fast SSR** - Rendering is ultra-fast thanks to Hono.
 - **BYOR** - You can bring your own renderer, not only one using hono/jsx.
-- **Island hydration** - If you want interactions, create an island. JavaScript is hydrated only for it.
+- **Islands hydration** - If you want interactions, create an island. JavaScript is hydrated only for it.
 - **Middleware** - It works as Hono, so you can use a lot of Hono's middleware.
 ## Get Started - Basic
@@ -154,7 +154,7 @@ Before writing `_renderer.tsx`, write the Renderer type definition in `global.d.
 ```ts
 // app/global.d.ts
-import 'hono'
+import type {} from 'hono'
 type Head = {
   title?: string
@@ -179,7 +179,7 @@ export default jsxRenderer(({ children, title }) => {
       <head>
         <meta charset='UTF-8' />
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-        {title ? <title>{title}</title> : ''}
+        {title ? <title>{title}</title> : <></>}
       </head>
       <body>{children}</body>
     </html>
@@ -245,7 +245,7 @@ The below is the project structure of a minimal application including a client s
 ### Renderer
-This is a `_renderer.tsx` which will load the `/app/client.ts` entry file for the client. It can also load the JavaScript file for the production according to the variable `import.meta.env.PROD`.
+This is a `_renderer.tsx`, which will load the `/app/client.ts` entry file for the client. It will load the JavaScript file for the production according to the variable `import.meta.env.PROD`. And renders the inside of `HasIslands` if there are islands on that page.
 ```tsx
 // app/routes/_renderer.tsx
@@ -258,7 +258,9 @@ export default jsxRenderer(({ children }) => {
         <meta charset='UTF-8' />
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
         {import.meta.env.PROD ? (
-          <script type='module' src='/static/client.js'></script>
+          <HasIslands>
+            <script type='module' src='/static/client.js'></script>
+          </HasIslands>
         ) : (
           <script type='module' src='/app/client.ts'></script>
         )}
@@ -320,7 +322,7 @@ export default createRoute((c) => {
 You can bring your own renderer using a UI library like React, Preact, Solid, or others.
-**Note**: We cannot provide technical support for the renderer you bring.
+**Note**: We may not provide supports for the renderer you bring.
 ### React case
@@ -389,6 +391,25 @@ createClient({
 ## Guides
+### Nested Layouts
+If you are using the JSX Renderer middleware, you can nest layouts using ` <Layout />`.
+```tsx
+// app/routes/posts/_renderer.tsx
+import { jsxRenderer } from 'hono/jsx-renderer'
+export default jsxRenderer(({ children, Layout }) => {
+  return (
+    <Layout>
+      <nav>Posts Menu</nav>
+      <div>{children}</div>
+    </Layout>
+  )
+})
+```
 ### Using Middleware
 You can use Hono's Middleware in each root file with the same syntax as Hono. For example, to validate a value with the [Zod Validator](https://github.com/honojs/middleware/tree/main/packages/zod-validator), do the following:

package/dist/constants.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 declare const COMPONENT_NAME = "component-name";
 declare const DATA_SERIALIZED_PROPS = "data-serialized-props";
+declare const IMPORTING_ISLANDS_ID: "__importing_islands";
-export { COMPONENT_NAME, DATA_SERIALIZED_PROPS };
+export { COMPONENT_NAME, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };

package/dist/constants.js CHANGED Viewed

@@ -1,6 +1,8 @@
 const COMPONENT_NAME = "component-name";
 const DATA_SERIALIZED_PROPS = "data-serialized-props";
+const IMPORTING_ISLANDS_ID = "__importing_islands";
 export {
   COMPONENT_NAME,
-  DATA_SERIALIZED_PROPS
+  DATA_SERIALIZED_PROPS,
+  IMPORTING_ISLANDS_ID
 };

package/dist/server/components.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { FC } from 'hono/jsx';
+declare const HasIslands: FC;
+export { HasIslands };

package/dist/server/components.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { Fragment, jsx } from "hono/jsx/jsx-runtime";
+import { useRequestContext } from "hono/jsx-renderer";
+import { IMPORTING_ISLANDS_ID } from "../constants.js";
+const HasIslands = ({ children }) => {
+  const c = useRequestContext();
+  return /* @__PURE__ */ jsx(Fragment, { children: c.get(IMPORTING_ISLANDS_ID) ? children : /* @__PURE__ */ jsx(Fragment, {}) });
+};
+export {
+  HasIslands
+};

package/dist/server/index.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
 export { ServerOptions, createApp } from './server.js';
+export { HasIslands } from './components.js';
 import 'hono/types';
 import 'hono';
+import '../constants.js';
+import 'hono/jsx';

package/dist/server/index.js CHANGED Viewed

@@ -1,4 +1,6 @@
 import { createApp } from "./server.js";
+import { HasIslands } from "./components.js";
 export {
+  HasIslands,
   createApp
 };

package/dist/server/server.d.ts CHANGED Viewed

@@ -1,13 +1,17 @@
 import * as hono_types from 'hono/types';
 import { H } from 'hono/types';
 import { Env, Hono, MiddlewareHandler, NotFoundHandler, ErrorHandler } from 'hono';
+import { IMPORTING_ISLANDS_ID } from '../constants.js';
 declare const METHODS: readonly ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"];
+type InnerMeta = {
+    [key in typeof IMPORTING_ISLANDS_ID]?: boolean;
+};
 type RouteFile = {
     default?: Function;
 } & {
     [M in (typeof METHODS)[number]]?: H[];
-};
+} & InnerMeta;
 type RendererFile = {
     default: MiddlewareHandler;
 };

package/dist/server/server.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { Hono } from "hono";
+import { createMiddleware } from "hono/factory";
+import { IMPORTING_ISLANDS_ID } from "../constants.js";
 import {
   filePathToPath,
   groupByDirectory,
   listByDirectory,
-  pathToDirectoryPath,
   sortDirectoriesByDepth
 } from "../utils/file.js";
 const NOTFOUND_FILENAME = "_404.tsx";
@@ -28,10 +29,12 @@ const createApp = (options) => {
     eager: true
   });
   const rendererList = listByDirectory(RENDERER_FILE);
-  const applyRenderer = (rendererFile) => {
+  const applyRenderer = (app2, rendererFile) => {
     const renderer = RENDERER_FILE[rendererFile];
-    const path = pathToDirectoryPath(rendererFile).replace(rootRegExp, "");
-    app.all(`${filePathToPath(path)}*`, renderer.default);
+    const rendererDefault = renderer["default"];
+    if (rendererDefault) {
+      app2.all("*", rendererDefault);
+    }
   };
   const ROUTES_FILE = options?.ROUTES ?? import.meta.glob("/app/routes/**/[!_]*.(ts|tsx|mdx)", {
     eager: true
@@ -40,30 +43,31 @@ const createApp = (options) => {
   for (const map of routesMap) {
     for (const [dir, content] of Object.entries(map)) {
       const subApp = new Hono();
-      let rendererFiles = rendererList[dir];
-      if (rendererFiles) {
-        applyRenderer(rendererFiles[0]);
-      }
-      if (!rendererFiles) {
-        const dirPaths = dir.split("/");
-        const getRendererPaths = (paths) => {
-          rendererFiles = rendererList[paths.join("/")];
-          if (!rendererFiles) {
-            paths.pop();
-            if (paths.length) {
-              getRendererPaths(paths);
-            }
+      let rendererPaths = rendererList[dir] ?? [];
+      const getRendererPaths = (paths) => {
+        rendererPaths = rendererList[paths.join("/")];
+        if (!rendererPaths) {
+          paths.pop();
+          if (paths.length) {
+            getRendererPaths(paths);
           }
-          return rendererFiles;
-        };
-        rendererFiles = getRendererPaths(dirPaths);
-        if (rendererFiles) {
-          applyRenderer(rendererFiles[0]);
         }
-      }
+        return rendererPaths ?? [];
+      };
+      const dirPaths = dir.split("/");
+      rendererPaths = getRendererPaths(dirPaths);
+      rendererPaths.sort((a, b) => a.split("/").length - b.split("/").length);
+      rendererPaths.map((path) => {
+        applyRenderer(subApp, path);
+      });
       let rootPath = dir.replace(rootRegExp, "");
       rootPath = filePathToPath(rootPath);
       for (const [filename, route] of Object.entries(content)) {
+        const importingIslands = route[IMPORTING_ISLANDS_ID];
+        const setInnerMeta = createMiddleware(async function innerMeta(c, next) {
+          c.set(IMPORTING_ISLANDS_ID, importingIslands);
+          await next();
+        });
         const routeDefault = route.default;
         const path = filePathToPath(filename);
         if (routeDefault && "fetch" in routeDefault) {
@@ -72,13 +76,16 @@ const createApp = (options) => {
         for (const m of METHODS) {
           const handlers = route[m];
           if (handlers) {
+            subApp.on(m, path, setInnerMeta);
             subApp.on(m, path, ...handlers);
           }
         }
         if (routeDefault && Array.isArray(routeDefault)) {
+          subApp.get(path, setInnerMeta);
           subApp.get(path, ...routeDefault);
         }
         if (typeof routeDefault === "function") {
+          subApp.get(path, setInnerMeta);
           subApp.get(path, (c) => {
             return c.render(routeDefault(), route);
           });

package/dist/vite/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import path from "path";
 import devServer, { defaultOptions as devServerDefaultOptions } from "@hono/vite-dev-server";
+import { injectImportingIslands } from "./inject-importing-islands.js";
 import { islandComponents } from "./island-components.js";
 const defaultOptions = {
   islands: true,
@@ -23,6 +24,7 @@ function honox(options) {
   if (options?.islands !== false) {
     plugins.push(islandComponents());
   }
+  plugins.push(injectImportingIslands());
   return [
     {
       name: "honox-vite-config"

package/dist/vite/inject-has-islands.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { Plugin } from 'vite';
+declare function injectHasIslands(): Plugin;
+export { injectHasIslands };

package/dist/vite/inject-has-islands.js ADDED Viewed

@@ -0,0 +1,52 @@
+import _generate from "@babel/generator";
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import { HAS_ISLANDS_ID } from "../constants.js";
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
+function injectHasIslands() {
+  return {
+    name: "inject-has-islands",
+    transform(code, id) {
+      if (id.endsWith(".tsx") || id.endsWith(".jsx")) {
+        let hasIslandsImport = false;
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: ["jsx"]
+        });
+        traverse(ast, {
+          ImportDeclaration(path) {
+            if (path.node.source.value.includes("islands/")) {
+              hasIslandsImport = true;
+            }
+          }
+        });
+        if (hasIslandsImport) {
+          const hasIslandsNode = {
+            type: "ExportNamedDeclaration",
+            declaration: {
+              type: "VariableDeclaration",
+              declarations: [
+                {
+                  type: "VariableDeclarator",
+                  id: { type: "Identifier", name: HAS_ISLANDS_ID },
+                  init: { type: "BooleanLiteral", value: true }
+                }
+              ],
+              kind: "const"
+            }
+          };
+          ast.program.body.push(hasIslandsNode);
+        }
+        const output = generate(ast, {}, code);
+        return {
+          code: output.code,
+          map: output.map
+        };
+      }
+    }
+  };
+}
+export {
+  injectHasIslands
+};

package/dist/vite/inject-importing-islands.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { Plugin } from 'vite';
+declare function injectImportingIslands(): Plugin;
+export { injectImportingIslands };

package/dist/vite/inject-importing-islands.js ADDED Viewed

@@ -0,0 +1,52 @@
+import _generate from "@babel/generator";
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import { IMPORTING_ISLANDS_ID } from "../constants.js";
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
+function injectImportingIslands() {
+  return {
+    name: "inject-importing-islands",
+    transform(code, id) {
+      if (id.endsWith(".tsx") || id.endsWith(".jsx")) {
+        let hasIslandsImport = false;
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: ["jsx"]
+        });
+        traverse(ast, {
+          ImportDeclaration(path) {
+            if (path.node.source.value.includes("islands/")) {
+              hasIslandsImport = true;
+            }
+          }
+        });
+        if (hasIslandsImport) {
+          const hasIslandsNode = {
+            type: "ExportNamedDeclaration",
+            declaration: {
+              type: "VariableDeclaration",
+              declarations: [
+                {
+                  type: "VariableDeclarator",
+                  id: { type: "Identifier", name: IMPORTING_ISLANDS_ID },
+                  init: { type: "BooleanLiteral", value: true }
+                }
+              ],
+              kind: "const"
+            }
+          };
+          ast.program.body.push(hasIslandsNode);
+        }
+        const output = generate(ast, {}, code);
+        return {
+          code: output.code,
+          map: output.map
+        };
+      }
+    }
+  };
+}
+export {
+  injectImportingIslands
+};

package/dist/vite/island-components.js CHANGED Viewed

@@ -75,8 +75,9 @@ const transformJsxTags = (contents, componentName) => {
       ExportDefaultDeclaration(path) {
         if (path.node.declaration.type === "FunctionDeclaration") {
           const functionId = path.node.declaration.id;
-          if (!functionId)
+          if (!functionId) {
             return;
+          }
           const isAsync = path.node.declaration.async;
           const originalFunctionId = identifier(functionId.name + "Original");
           const originalFunction = functionExpression(

package/dist/vite/remove-elements.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+type RemoveElementsOptions = {
+    attributes: string[];
+};
+declare function removeElementsPlugin(options: RemoveElementsOptions): Plugin;
+export { removeElementsPlugin };

package/dist/vite/remove-elements.js ADDED Viewed

@@ -0,0 +1,52 @@
+import _generate from "@babel/generator";
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import { HAS_ISLANDS_ID } from "../constants";
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
+function injectHasIslands() {
+  return {
+    name: "inject-has-islands",
+    transform(code, id) {
+      if (id.endsWith(".tsx") || id.endsWith(".jsx")) {
+        let hasIslandsImport = false;
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: ["jsx"]
+        });
+        traverse(ast, {
+          ImportDeclaration(path) {
+            if (path.node.source.value.includes("islands/")) {
+              hasIslandsImport = true;
+            }
+          }
+        });
+        if (hasIslandsImport) {
+          const hasIslandsNode = {
+            type: "ExportNamedDeclaration",
+            declaration: {
+              type: "VariableDeclaration",
+              declarations: [
+                {
+                  type: "VariableDeclarator",
+                  id: { type: "Identifier", name: HAS_ISLANDS_ID },
+                  init: { type: "BooleanLiteral", value: true }
+                }
+              ],
+              kind: "const"
+            }
+          };
+          ast.program.body.push(hasIslandsNode);
+        }
+        const output = generate(ast, {}, code);
+        return {
+          code: output.code,
+          map: output.map
+        };
+      }
+    }
+  };
+}
+export {
+  injectHasIslands
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -8,15 +8,18 @@
     "test:unit": "vitest --run test/unit",
     "test:integration": "bun test:integration:api && bun test:integration:hono-jsx",
     "test:integration:hono-jsx": "vitest run -c ./test/hono-jsx/vitest.config.ts ./test/hono-jsx/integration.test.ts",
+    "test:integration:hono-jsx:watch": "vitest -c ./test/hono-jsx/vitest.config.ts ./test/hono-jsx/integration.test.ts",
     "test:integration:api": "vitest run -c ./test/api/vitest.config.ts ./test/api/integration.test.ts",
     "test:e2e": "playwright test -c ./test/hono-jsx/playwright.config.ts ./test/hono-jsx/e2e.test.ts",
     "typecheck": "tsc --noEmit",
     "build": "tsup && publint",
     "watch": "tsup --watch",
-    "lint": "eslint src/**.ts",
-    "lint:fix": "eslint src/**.ts --fix",
-    "prerelease": "yarn test && yarn build",
-    "release": "np --no-yarn"
+    "lint": "eslint --ext js,ts src test",
+    "lint:fix": "eslint --ext js,ts src test --fix",
+    "format": "prettier --check \"src/**/*.{js,ts}\" \"test/**/*.{js,ts}\"",
+    "format:fix": "prettier --write \"src/**/*.{js,ts}\" \"test/**/*.{js,ts}\"",
+    "prerelease": "bun run test && bun run build",
+    "release": "np"
   },
   "files": [
     "dist"
@@ -89,10 +92,10 @@
     "@babel/parser": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6",
-    "@hono/vite-dev-server": "^0.4.1"
+    "@hono/vite-dev-server": "^0.5.0"
   },
   "devDependencies": {
-    "@hono/eslint-config": "^0.0.3",
+    "@hono/eslint-config": "^0.0.4",
     "@mdx-js/rollup": "^3.0.0",
     "@playwright/test": "^1.41.0",
     "@types/babel__generator": "^7",
@@ -100,8 +103,8 @@
     "@types/node": "^20.10.5",
     "eslint": "^8.56.0",
     "glob": "^10.3.10",
-    "hono": "4.0.0-rc.2",
-    "np": "^9.2.0",
+    "hono": "4.0.0-rc.4",
+    "np": "7.7.0",
     "prettier": "^3.1.1",
     "publint": "^0.2.7",
     "tsup": "^8.0.1",
@@ -109,8 +112,10 @@
     "vite": "^5.0.12",
     "vitest": "^1.2.1"
   },
-  "packageManager": "yarn@4.0.2",
   "engines": {
     "node": ">=18.14.1"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   }
 }