@zikojs/server 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+[![ziko-server banner](https://raw.githubusercontent.com/zikojs/.github/main/assets/banners/ziko-server.svg)](https://github.com/zikojs)
+
+# Ziko-server
+
+Server-side rendering for Zikojs with file-based routing and client-side hydration.
+
+# Features 
+- ✅ Server Side Rendering 
+- ✅ Client Side Hydration with no additional config 
+- ✅ File Based Routing 
+- ✅ Mdzjs Supports
+- ✅ Supports Dynamic Routes
+- ✅ Supports both Sync And Async rendering
+- ✅ Supports API
+
+<!-- 
+compare with type
+ -->
+
+# Project Structure
+```
+App
+   ├──public/ 
+   ├── src/
+      ├── .ziko  #generated
+      ├── pages/ # required
+            ├── index.js 
+      ├── components/
+      ├── layouts/
+      ├── contents/
+      ├── db/
+      ├── i18n/
+      ├── middlewares.js
+   ├── tsconfig.json
+   ├── ziko.config.js
+   ├── package.json
+    
+```
+
+
+# Config 
+
+```js
+// server.js
+import { createServer } from "ziko-server/server";
+createServer()
+```
+
+```js
+// entry-server.js
+import {defineServerEntry} from "ziko-server/entry-server";
+export default defineServerEntry({
+   pages : import.meta.glob("./pages/**/*{.js,.mdz}")
+})
+```
+```js
+// entry-client.js
+import {EntryClient} from "ziko-server/entry-client";
+EntryClient({
+  pages : import.meta.glob("./pages/**/*{.js,.mdz}")
+})
+```
+
+# ⭐️ Show your support
+
+If you appreciate the project, kindly demonstrate your support by giving it a star!<br>
+
+[![Star](https://img.shields.io/github/stars/zakarialaoui10/ziko-server?style=social)](https://github.com/zakarialaoui10/ziko-server)
+<!--## Financial support-->
+# License 
+This projet is licensed under the terms of MIT License 
+<img src="https://img.shields.io/github/license/zakarialaoui10/ziko-server?color=rgb%2820%2C21%2C169%29" width="100" align="right">

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@zikojs/server",
+  "version": "0.1.0",
+  "description": "server side rendering in zikojs with file-based-routing and client side hydration",
+  "type": "module",
+  "source": "src/index.js",
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "LICENCE"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/*/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "ziko",
+    "zikojs",
+    "ssr",
+    "ssg",
+    "rendering",
+    "hydration",
+    "server",
+    "middlewares"
+  ],
+  "scripts": {
+    "dev": "rollup -c rollup.config.js -w",
+    "build": "rollup -c rollup.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start-demo": "cd demo && npm run dev "
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zakarialaoui10/ziko-server.git"
+  },
+  "author": "zakaria elalaoui",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zakarialaoui10/ziko-server/issues"
+  },
+  "homepage": "https://github.com/zakarialaoui10/ziko-server#readme",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "rollup": "^4.62.4"
+  },
+  "dependencies": {
+    "compression": "^1.8.1",
+    "cross-env": "^10.1.0",
+    "express": "^5.2.1",
+    "extendom": "^0.0.0",
+    "fast-glob": "^3.3.3",
+    "jsdom": "^30.0.1",
+    "sirv": "^3.0.2",
+    "vite": "^8.2.1",
+    "ziko": "^1.8.0"
+  }
+}

package/src/code-splitter/directives.js

@@ -0,0 +1,5 @@
+export const define_derictives=()=>{
+    globalThis.use_server_only = Symbol('use-server-only');
+    globalThis.use_server_only_end = Symbol('use-server-only-end');
+    globalThis.use_client_only = Symbol('use-client-only-end')
+}

package/src/code-splitter/index.js

@@ -0,0 +1 @@
+export * from './directives.js'

package/src/config/index.js

@@ -0,0 +1,13 @@
+import { defineConfig as defineViteConfig } from "vite";
+import { vite_setup } from "../vite/index.js";
+export function defineConfig({ outDir = "dist" } = {}) {
+  return defineViteConfig(({ command, mode }) => {
+    const base_config = vite_setup({
+      outDir,
+      mode,
+    });
+    base_config.plugins = base_config.plugins || [];
+    base_config.aaa = 10
+    return base_config;
+  });
+}

package/src/count.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# Count total lines in all .js and .ts files, excluding dist and node_modules
+total_lines=$(find . -type f \( -name "*.js" -o -name "*.ts" \) \
+  -not -path "*/node_modules/*" \
+  -not -path "*/dist/*" \
+  -exec wc -l {} + | awk '{total += $1} END {print total}')
+
+echo "Total JS + TS lines: $total_lines"

package/src/entry-client/index.js

@@ -0,0 +1,45 @@
+import {
+    normalize_path,
+    routesMatcher,
+    dynamicRoutesParser,
+    isDynamic,
+  } from "../utils/index.js";
+
+export function EntryClient({ base = '', pages } = {}) {
+  
+  if (import.meta.env.DEV) pages = import.meta.glob("/src/pages/**/*{.js,.mdz}");
+  pages = import.meta.glob("/src/pages/**/*{.js,.mdz}");
+  addEventListener("load", async () => {
+    const data = JSON.parse(document.head.querySelector('script#ziko-data')?.textContent ?? "{}")
+    globalThis.Ziko = data;
+    const root = "./pages/";
+    async function hydrate(path) {
+      if (path.endsWith("/")) path = path.slice(0, -1);
+      const matchEntry = Object.entries(pages).find(([route]) =>
+        routesMatcher(normalize_path(route, root), `/${path}`)
+      );
+      if (!matchEntry) return; 
+
+      const [mask, moduleImport] = matchEntry;
+
+      const module = await moduleImport();
+      let UIElement;
+
+      if (isDynamic(mask)) {
+        const params = dynamicRoutesParser(mask, `/${path}`);
+        UIElement = await module.default(params);
+      } else {
+        UIElement = await module.default();
+      }
+
+      UIElement.unmount();
+
+      const elementsToHydrate = [...document.querySelectorAll('[data-hydration-index]')];
+      elementsToHydrate.forEach(el => {
+        el.replaceWith(__Ziko__.__HYDRATION__.store.get(+el.dataset.hydrationIndex)().element);
+      });
+    }
+
+    hydrate(location.pathname.slice(1));
+  });
+}

package/src/entry-server/index.js

@@ -0,0 +1,39 @@
+import { 
+  renderToString,
+  globImports,
+  readFiles, 
+} from "../server-only-utils/index.js";
+
+import { 
+  routesMatcher,
+  dynamicRoutesParser,
+  isDynamic
+} from "../utils/routes-matcher.js";
+
+export function EntryServer() {
+  return async function render(path, req, res) {
+    if(path.endsWith("/")) path = path.slice(0, -1);
+    // const all_files = await readFiles()
+    const pairs = await globImports("./src/pages/**/*{.js,.mdz}")
+
+    let [mask, module] = Object.entries(pairs).find(([route]) => routesMatcher(route, `/${path}`));
+    let UIElement, ui, params;
+    if (isDynamic(mask)) params = dynamicRoutesParser(mask, `/${path}`);
+    const {Component, GET, POST, DELETE, UPDATE, head, prerender} = await module
+    if(Component){
+      UIElement = params ? await Component.call(this, params) : await Component();
+      ui = renderToString(UIElement);
+    }
+
+    return {
+      head,
+      ui,
+      prerender,
+      hydration_map : __Ziko__.__HYDRATION__,
+      GET,
+      POST,
+      DELETE,
+      UPDATE,
+    };
+  };
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export {EntryClient} from "./entry-client/index.js";
+export {EntryServer} from "./entry-server/index.js";
+export {createServer} from "./server/index.js";
+export * from './prerender/index.js'

package/src/prerender/index.js

@@ -0,0 +1,63 @@
+import { 
+  globImports,
+  renderToString,
+  writeToDist,
+  ManifestParser,
+  resolveStaticRoutes,
+ } from "ziko-server/server-only-utils";
+
+import { routesGrouper } from "../utils/routes-matcher.js";
+
+const StaticRoutesMap = {
+    "/blog/[...slug]":[
+        { slug : 1 },
+        { slug : 2 },
+        { slug : 3 }
+    ],
+    "/bb/[lang]/dd/[id]":[
+        { lang : "en", id : 1},
+        { lang : "en", id : 2},
+        { lang : "en", id : 3},
+        { lang : "fr", id : 1},
+        { lang : "fr", id : 2},
+        { lang : "fr", id : 3}
+    ]
+}
+
+
+
+async function prerender({outDir = 'dist'} = "") {
+    const PRERENDERED_ROUTES = []
+    const pages = await globImports("./src/pages/**/*{.js,.ts,.mdz}") 
+    const StaticPages = await resolveStaticRoutes(pages, StaticRoutesMap)
+
+    const grouped = routesGrouper(pages)
+
+    const Manifest = new ManifestParser(`${outDir}/.client/.vite/manifest.json`)
+    for(let route in grouped.static){
+        const Page = grouped.static[route];
+        const {Component, head} = Page
+        if(Component){
+          const res = await Component();
+          const ui = renderToString(res)
+          PRERENDERED_ROUTES.push(route)
+          writeToDist({route, ui, head, entry_client_path : Manifest.EntryClientFile, outDir})
+        }
+    }
+    for(let route in StaticPages){
+        const Page = StaticPages[route];
+        const {Component, head} = Page
+        if(Component){
+          const res = await Component();
+          const ui = renderToString(res)
+          PRERENDERED_ROUTES.push(route)
+        //   console.log({hi :__Ziko__.__HYDRATION__.store, route})
+        //   __Ziko__.__HYDRATION__.reset()
+          writeToDist({route, ui, head, entry_client_path : Manifest.EntryClientFile, outDir})
+        }
+        // console.log(PRERENDERED_ROUTES)
+    }
+}
+
+
+export { prerender }

package/src/server/api-handler.js

@@ -0,0 +1,22 @@
+export async function API_HANDLER(fn, req, res) {
+  const result = await fn(req, res);
+
+  if (result instanceof Response) {
+    const body = await result.text();
+    res
+      .status(result.status || 200)
+      .set(Object.fromEntries(result.headers.entries()))
+      .send(body);
+    return;
+  }
+  if (typeof result === "object" && result !== null) {
+    res.json(result);
+    return;
+  }
+  if (["string", "number", "boolean"].includes(typeof result)) {
+    res.send(String(result));
+    return;
+  }
+  if (result === undefined) return;
+  res.status(500).send("Unsupported response type");
+}

package/src/server/dev-server.js

@@ -0,0 +1,21 @@
+export const dev_server = async (app, base)=>{
+    const { createServer } = await import("vite");
+    let vite = await createServer({
+      server: { middlewareMode: true },
+      appType: "custom",
+      base,
+    });
+    app.use(vite.middlewares);
+    return vite
+}
+
+// import {join} from 'path'
+// export const prod_server = async (app, base, baseDir)=>{
+//   const compression = (await import("compression")).default;
+//   const sirv = (await import("sirv")).default;
+//   app.use(compression());
+//   app.use(
+//     base,
+//     sirv(join(baseDir, "./dist/.client"), { extensions: [] }),
+//   );
+// }

package/src/server/index.js

@@ -0,0 +1,105 @@
+import express from "express";
+import { readFile } from "node:fs/promises";
+import path, { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { dev_server } from "./dev-server.js";
+import { API_HANDLER } from "./api-handler.js";
+import { 
+  importMiddlewares,
+  importPrerenderedRoutes,
+} from '../server-only-utils/index.js'
+
+import { setup_ziko_folder } from "../setup/setup-ziko-folder.js";
+import { SetupMiddleware } from './setup-middleware.js'
+
+export async function createServer({ baseDir = process.cwd(), port = process.env.PORT || 5173 } = {}){
+  await setup_ziko_folder(join(baseDir, './.ziko-experimental'))
+  const isProduction = process.env.NODE_ENV === "production";
+  const base = process.env.BASE || "/";
+  const HTML_TEMPLATE = isProduction ? await readFile(join(baseDir, "./dist/.client/.ziko/index.html"), "utf-8") : "";
+  const app = express();
+
+  const Middlewares = await importMiddlewares()
+  app.use(Middlewares.logger)
+  app.use(SetupMiddleware)
+
+  let vite;
+  if (!isProduction) vite = await dev_server(app, base)
+  else {
+    const compression = (await import("compression")).default;
+    const sirv = (await import("sirv")).default;
+    app.use(compression());
+    app.use(
+      base,
+      sirv(join(baseDir, "./dist/.client"), { extensions: [] }),
+    );
+  }
+
+  // Serve HTML
+  app.use('/.client', express.static(path.join(process.cwd(), 'dist/.client')))
+  // app.use(express.static('public'))
+    
+  if(isProduction){
+      const PRERENDERED_ROUTES = await importPrerenderedRoutes()
+      for(let i=0; i<PRERENDERED_ROUTES.length; i++){
+        app.get(PRERENDERED_ROUTES[i], (req, res)=>{
+          res.sendFile(path.join(process.cwd(), `dist/${PRERENDERED_ROUTES[i]}/index.html`))
+        })
+      }
+  }
+
+
+  app.get('/--ziko--', (req, res)=>{
+    res.json(globalThis.Ziko)
+  })
+
+  app.use(async (req, res) => {
+    try {
+      const url = req.originalUrl.replace(base, "");
+      let template;
+      let render;
+      if (!isProduction) {
+        template = await readFile(join(baseDir, "./.ziko/index.html"), "utf-8");
+        template = await vite.transformIndexHtml(url, template);
+        render = (await vite.ssrLoadModule("/.ziko/entry-server.js")).default;
+      } 
+      else {
+        template = HTML_TEMPLATE;
+        const ENTRY_SERVER_PATH = pathToFileURL(join(baseDir, "./dist/.server/entry-server.js")).href;
+        render = (await import(/* @vite-ignore */ENTRY_SERVER_PATH)).default;
+      }
+      const rendered = await render(url, req);
+      const page = await rendered(url, req);
+      if(page.GET) return await API_HANDLER(page.GET, req, res)
+      if(page.POST) return await API_HANDLER(page.POST, req, res)
+      if(page.PUT) return await API_HANDLER(page.PUT, req, res)
+      if(page.DELETE) return await API_HANDLER(page.DELETE, req, res)
+      if(page.PATCH) return await API_HANDLER(page.PATCH, req, res)
+        
+      const html = template
+        .replace(
+          '<!--app-session-data-->',
+          `<script type='application/json' id='ziko-data'>
+${JSON.stringify(Ziko, null, 2)}
+          </script>
+          `
+        )
+        // .replace(`<!--app-head-->`, page.head ?? "")
+        .replace(`<!--app-html-->`, page.ui ?? "")
+        
+      res.status(200).set({ "Content-Type": "text/html" }).send(html);
+    } 
+    catch (e) {
+      vite?.ssrFixStacktrace(e);
+      res.status(500).end(e.stack);
+    }
+  });
+
+  app.listen(port, () => {
+    console.log(`Server started at http://localhost:${port}`);
+  });
+
+  return app;
+}
+
+

package/src/server/response.js

@@ -0,0 +1,6 @@
+// type ? : ssr | ssg | json
+// env ? : Dev | Prod 
+// 
+const response=(type, data)=>{
+
+}

package/src/server/setup-middleware.js

@@ -0,0 +1,21 @@
+// import { join } from 'path';
+// import { pathToFileURL } from 'url';
+// const ziko_config_path = pathToFileURL(join(process.cwd(), 'ziko.config.js')).href;
+
+export function SetupMiddleware(req, res, next) {
+    const protocol = req.protocol || (req.connection.encrypted ? 'https' : 'http');
+    const host = req.headers.host;
+    const origin = `${protocol}://${host}`
+    globalThis.Ziko = {
+      engine: 'zikojs',
+      isProd : process.env.NODE_ENV === "production",
+      url : req.url,
+      protocol,
+      host,
+      origin,
+      locals: {},   
+    };
+    if(globalThis?.__Ziko__) __Ziko__.__HYDRATION__.reset();
+  Object.assign(req, {Ziko})
+  next();
+}

package/src/server-only-utils/glob-imports.js

@@ -0,0 +1,47 @@
+import fg from 'fast-glob';
+import path from 'path';
+import { pathToFileURL } from 'url';
+import { normalize_path } from '../utils/normalize-path.js';
+
+export async function globImports(pattern = './src/pages/**/*.{js,ts,jsx,tsx,mdz}', { cwd = process.cwd() , root = "./pages/"} = {}) {
+  const files = await fg(pattern, { cwd });
+  const modules = {};
+
+  for (const file of files) {
+    const absPath = path.resolve(cwd, file);
+    const fileUrl = pathToFileURL(absPath).href;
+    const key = './' + file.replace(/\\/g, '/');
+    modules[key] = () => import(/* @vite-ignore */fileUrl);
+  }
+
+  const routes = Object.keys(modules);
+  
+  const pairs = {};
+  for (let i = 0; i < routes.length; i++) {
+      const module = await modules[routes[i]]();
+      const {
+        default : Component,
+        head,
+        prerender,
+        GET, 
+        POST, 
+        PUT, 
+        DELETE,
+        PATCH
+      } = await module
+
+      Object.assign(pairs, { 
+        [normalize_path(routes[i], root)]: {
+          ...(Component && {Component}),
+          ...(head && {head}),
+          ...(prerender !== undefined && {prerender}),
+          ...(GET && {GET}),
+          ...(POST && {POST}),
+          ...(PUT && {PUT}),
+          ...(PATCH && {PATCH}),
+          ...(DELETE && {DELETE}),
+        } });
+  }  
+
+  return pairs
+}

package/src/server-only-utils/import-middlwares.js

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+
+export async function importMiddlewares({ cwd = process.cwd() } = {}) {
+  const possibleFiles = [
+    path.join(cwd, 'src', 'middleware.js'),
+    path.join(cwd, 'src', 'middleware.ts')
+  ];
+
+  for (const file of possibleFiles) {
+    if (fs.existsSync(file)) {
+      const fileUrl = pathToFileURL(file).href;
+      const module = await import(/* @vite-ignore */ fileUrl);
+
+      const middlewares = {};
+      for (const [key, value] of Object.entries(module)) {
+        if (typeof value === 'function') {
+          middlewares[key] = value;
+        }
+      }
+
+      return middlewares;
+    }
+  }
+
+  // No middleware file found
+  return {};
+}

package/src/server-only-utils/import-prerendered-routes.js

@@ -0,0 +1,11 @@
+import { join } from 'path';
+import { pathToFileURL } from 'url';
+
+export async function importPrerenderedRoutes({ cwd = process.cwd(), isProduction } = {}) {
+    const file = isProduction 
+                    ? join(cwd, 'dist/.server/prerenderd-routes.js') 
+                    : join(cwd, '.ziko/cache/.prerenderd-routes.js')
+    const FileUrl = pathToFileURL(file).href;
+    const module = await import(/* @vite-ignore */ FileUrl);
+    return module?.PRERENDERED_ROUTES || []
+}

package/src/server-only-utils/index.d.ts.txt

@@ -0,0 +1,3 @@
+import {UIElement} from "ziko"
+export declare function renderToString(UIElement: UIElement): string;
+export declare function renderDomToString(UIElement: HTMLElement): string;

package/src/server-only-utils/index.js

@@ -0,0 +1,9 @@
+export * from "./renderToString.js";
+export * from "./renderDomToString.js";
+export * from "./glob-imports.js";
+export * from "./write-to-dist.js";
+export * from './manifest-parser.js';
+export * from './import-prerendered-routes.js'
+export * from './import-middlwares.js'
+export * from './resolve-static-routes.js'
+export * from './read-files.js'

package/src/server-only-utils/manifest-parser.js

@@ -0,0 +1,22 @@
+import {readFileSync, existsSync} from 'fs';
+import {join} from 'path';
+
+export class ManifestParser {
+    constructor(relative_path){
+        this.#init(relative_path)
+    }
+    #init(relative_path){
+        const file = join(process.cwd(), relative_path);
+        if (existsSync(file)) this.manifest = JSON.parse(readFileSync(file, "utf-8"));
+        else {
+            console.error(`Manifest file not found: ${file}`)
+            this.manifest = null
+        }
+    }
+    get EntryClientFile(){
+        return this.manifest['.ziko/entry-client.js'].file
+    }
+}
+
+// const manifest = new ManifestParser('./dist/client/.vite/manifest.json')
+// console.log(manifest.files)

package/src/server-only-utils/read-files.js

@@ -0,0 +1,20 @@
+import fg from "fast-glob";
+import { readFile } from "fs/promises";
+import { resolve, relative } from "path";
+
+export async function readFiles(pattern = './src/**/*.{js,ts}', { cwd = process.cwd() , root = "./pages/"} = {}) {
+  const files = await fg(pattern, { cwd });
+  const absoluteRoot = resolve(root);
+  console.log({files})
+  const modules = {};
+
+  const result = new Map()
+   for (const file of files) {
+    const code = await readFile(file, "utf8");
+    if(!code.includes('use client')) continue;
+    // Normalize route to something like "src/pages/index.js"
+    const route = relative(absoluteRoot, file).replace(/\\/g, "/");
+    result.set(route, code);
+  }
+  console.log(result)
+}

package/src/server-only-utils/renderDomToString.js

@@ -0,0 +1,8 @@
+import {JSDOM} from "jsdom"
+const {document} = new JSDOM().window;
+globalThis.document = document
+
+const renderDomToString=UIElement=>UIElement.outerHTML;
+export {
+    renderDomToString
+}

package/src/server-only-utils/renderToString.js

@@ -0,0 +1,8 @@
+import {JSDOM} from "jsdom"
+const {document} = new JSDOM().window;
+globalThis.document = document
+
+const renderToString=UIElement=>UIElement.element?.outerHTML;
+export {
+    renderToString
+}

package/src/server-only-utils/resolve-static-routes.js

@@ -0,0 +1,64 @@
+export async function resolveStaticRoutes(routes, StaticRoutesMap) {
+  const result = {};
+
+  for (const [routePattern, handler] of Object.entries(routes)) {
+    const { Component, prerender, head } = handler;
+    if(!Component || prerender === false) continue;
+    const staticParamsList = StaticRoutesMap[routePattern];
+    if (staticParamsList && /\[.*\]/.test(routePattern)) {
+      for (const params of staticParamsList) {
+        let resolvedRoute = routePattern;
+
+        // Handle [...param] → can include slashes
+        resolvedRoute = resolvedRoute.replace(/\[\.\.\.(\w+)\]/g, (_, key) => {
+          return encodeURIComponent(params[key])?.replace(/%2F/g, '/');
+        });
+
+        // Handle [param]+ or [param]
+        resolvedRoute = resolvedRoute.replace(/\[(\w+)\]\+?/g, (_, key) => {
+          return encodeURIComponent(params[key]);
+        });
+
+        result[resolvedRoute] = {
+          Component : () => Component(params),
+          head
+        }
+      }
+    } else {
+      result[routePattern] = {
+        Component,
+        head
+      }
+    }
+  }
+
+  return result;
+}
+
+
+// DEMO
+
+// const StaticRoutesMap = {
+//   "/blog/[...slug]": [
+//     { slug: "2025/oct/post1" },
+//     { slug: "2025/oct/post2" },
+//     { slug: "2025/nov/post3" }
+//   ],
+//   "/user/[id]+": [
+//     { id: 1 },
+//     { id: 2 },
+//     { id: 3 }
+//   ],
+//   "/product/[category]/[id]": [
+//     { category: "books", id: 12 },
+//     { category: "tech", id: 5 }
+//   ]
+// };
+
+// const routes = {
+//   "/blog/[...slug]": (params) => `Blog page for ${params.slug}`,
+//   "/user/[id]+": (params) => `User ${params.id}`,
+//   "/product/[category]/[id]": (params) => `Product ${params.category} #${params.id}`
+// };
+
+// resolveStaticRoutes(routes, StaticRoutesMap).then(console.log);

package/src/server-only-utils/write-to-dist.js

@@ -0,0 +1,24 @@
+import {mkdir, writeFile} from 'fs/promises';
+import {join, dirname} from 'path';
+
+export async function writeToDist({route, ui, head, outDir = 'dist', entry_client_path = ''}={}) {
+    entry_client_path = `/.client/${entry_client_path}`
+    const out = `
+<!doctype html>
+<html>
+<head>
+    <script type="module" src="${entry_client_path}"></script>
+    <script type='application/json' id='ziko-data'>
+${JSON.stringify(globalThis?.Ziko ?? {}, null, 2)}
+    </script>
+</head>
+<body>
+${ui}
+</body>
+</html>
+    `
+    const filePath = join(outDir, route === '/' ? '' : route, 'index.html');
+    await mkdir(dirname(filePath), { recursive: true });
+    await writeFile(filePath, out, 'utf8');
+    console.log(`✔️  Saved ${route} → ${filePath}`);
+}

package/src/setup/files-content.js

@@ -0,0 +1,53 @@
+const HTMLINDEX = `
+<!doctype html>
+<html>
+<head>
+    <title>Ziko - App </title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="/.ziko/entry-client.js"></script>
+    <!--app-head-->
+</head>
+<body>
+    <!--app-html-->
+</body>
+</html>
+`.trim()
+
+const SERVER = `
+import { createServer } from "ziko-server/server";
+createServer()
+`.trim()
+
+const ENTRY_SERVER = `
+import {EntryServer} from "ziko-server/entry-server";
+export default EntryServer
+`.trim()
+
+const ENTRY_CLIENT = `
+import {EntryClient} from "ziko-server/entry-client";
+EntryClient({
+  base : new URL(".", import.meta.url).pathname
+})
+`.trim()
+
+const PRERENDER_SCRIPT = `
+import {prerender} from 'ziko-server'
+prerender()
+`
+
+const GENERATE_ROUTES_SCRIPT = `
+import { generate_routes } from "ziko-server/setup";
+generate_routes()
+`
+
+export const Files_Content = {
+    'index.html': HTMLINDEX,
+    'server.js' : SERVER,
+    'entry-server.js' : ENTRY_SERVER,
+    'entry-client.js' : ENTRY_CLIENT,
+    'scripts/prerender.js' : PRERENDER_SCRIPT,
+    'scripts/generate-routes.js' : GENERATE_ROUTES_SCRIPT,
+    'cache/.keep' : null
+}

package/src/setup/generate-hydration-map.js

@@ -0,0 +1,3 @@
+export async function generate_hydration_map() {
+    
+}

package/src/setup/generate-routes.js

@@ -0,0 +1,22 @@
+import {writeFileSync} from "fs"
+import { join } from "path";
+
+const __pages__ = {
+  "/src/pages/index.js": () => import("/src/pages/index.js"),
+  "/src/pages/me.js": () => import("/src/pages/me.js"),
+  "/src/pages/about/index.js": () => import("/src/pages/about/index.js"),
+};
+
+export function generate_routes(){
+    const Pages = stringify(__pages__);
+    const Output = `export const pages = ${Pages}`
+    const path = join(process.cwd(), './.ziko/cache/.generated-routes.js')
+    writeFileSync(path, Output)
+}
+
+function stringify(obj) {
+  const entries = Object.entries(obj).map(
+    ([key, val]) => `  "${key}": ${val.toString()}`
+  );
+  return `{\n${entries.join(",\n")}\n}`;
+}

package/src/setup/index.js

@@ -0,0 +1,3 @@
+export * from "./generate-routes.js"
+export * from './setup-ziko-folder.js'
+export * from './generate-hydration-map.js'

package/src/setup/setup-ziko-folder.js

@@ -0,0 +1,16 @@
+import { mkdir, writeFile } from 'fs/promises';
+import { dirname, join } from 'path';
+import { Files_Content } from './files-content.js';
+
+export async function setup_ziko_folder(basePath) {
+  for (const [file, content] of Object.entries(Files_Content)) {
+    const fullPath = join(basePath, file);
+    const dir = dirname(fullPath);
+    await mkdir(dir, { recursive: true });
+    try {
+      const existing = await readFile(fullPath, 'utf8');
+      if (existing === content) continue;
+    } catch {}
+    await writeFile(fullPath, content ?? '', 'utf8');
+  }
+}

package/src/template.js

@@ -0,0 +1,14 @@
+  const HTML_TEMPLATE =`
+  <!doctype html>
+    <html>
+        <head>
+            <title> Ziko - Ssr - Template </title>
+            <!--app-head-->
+        </head>
+        <body>
+            <!--app-html-->
+        </body>
+    </html>
+`.trim()
+
+export default HTML_TEMPLATE;

package/src/utils/api.js

@@ -0,0 +1,7 @@
+export function isAPI(fn) {
+  return (
+    fn 
+    && (typeof fn === 'function')
+    && ['GET', 'POST', 'DELETE', 'PUT'].includes(fn.name)
+  )
+}

package/src/utils/html-template.js

@@ -0,0 +1,19 @@
+export const HTMLTemplate = `
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Z</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="test ziko-ssr"/>
+    <title>Vite App</title>
+    <!--app-head-->
+  </head>
+  <body>
+    <!--app-html-->
+    <script type="module" src="/src/entry-client.js" async></script>
+    <!-- <script type="module" src="node_modules/ziko-server/entry/client.js" async></script> -->
+  </body>
+</html>
+`

package/src/utils/index.js

@@ -0,0 +1,4 @@
+export * from "./normalize-path.js";
+export * from "./routes-matcher.js";
+export * from "./html-template.js";
+export * from "./isAsync.js";

package/src/utils/isAsync.js

@@ -0,0 +1,3 @@
+export function isAsync(fn) {
+  return fn && fn.constructor && fn.constructor.name === "AsyncFunction";
+}

package/src/utils/normalize-path.js

@@ -0,0 +1,21 @@
+export function normalize_path(inputPath, root = './src/pages', extensions = ['js', 'ts']) {
+    if(root.at(-1)==="/") root = root.slice(0, -1)
+    const normalizedPath = inputPath.replace(/\\/g, '/')
+                                    // .replace(/\[(\w+)\]/g, '$1/:$1');
+    const parts = normalizedPath.split('/');
+    const rootParts = root.split('/');
+    const rootIndex = parts.indexOf(rootParts[rootParts.length - 1]);
+    if (rootIndex !== -1) {
+        const subsequentParts = parts.slice(rootIndex + 1);
+        const lastPart = subsequentParts[subsequentParts.length - 1];
+        const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+        const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
+        if (isIndexFile) {
+            return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
+        }
+        if (hasValidExtension) {
+            return '/' + subsequentParts.join('/').replace(/\.(js|ts)$/, '');
+        }
+    }
+    return '';
+ }

package/src/utils/routes-matcher.js

@@ -0,0 +1,216 @@
+function routesMatcher(mask, route) {
+  const maskSegments = mask.split("/").filter(Boolean);
+  const routeSegments = route.split("/").filter(Boolean);
+
+  let i = 0,
+    j = 0;
+
+  while (i < maskSegments.length && j < routeSegments.length) {
+    const maskSegment = maskSegments[i];
+    const routeSegment = routeSegments[j];
+
+    // Catch-all segment `[...param]`
+    if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
+      const remainingMaskSegments = maskSegments.length - i - 1;
+
+      if (remainingMaskSegments === 0) {
+        // Last segment, matches all remaining
+        return true;
+      }
+
+      // Calculate minimum required route segments for remaining mask
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) {
+          requiredSegments++;
+        }
+      }
+
+      const remainingRouteSegments = routeSegments.length - j;
+      if (remainingRouteSegments < requiredSegments) return false;
+
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume < 1) return false;
+
+      j += segmentsToConsume;
+      i++;
+      continue;
+    }
+
+    // Optional `[param]+`
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
+      if (routeSegment) j++;
+      i++;
+      continue;
+    }
+
+    // Dynamic `[param]`
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
+      i++;
+      j++;
+      continue;
+    }
+
+    // Must match static segment
+    if (maskSegment !== routeSegment) return false;
+
+    i++;
+    j++;
+  }
+
+  // Handle optional parameters at the end
+  while (i < maskSegments.length) {
+    const seg = maskSegments[i];
+    if (seg.endsWith("]+")) {
+      i++;
+      continue;
+    }
+    return false;
+  }
+
+  return i === maskSegments.length && j === routeSegments.length;
+}
+
+function dynamicRoutesParser(mask, route) {
+  const maskSegments = mask.split("/").filter(Boolean);
+  const routeSegments = route.split("/").filter(Boolean);
+  const params = {};
+
+  let i = 0,
+    j = 0;
+
+  while (i < maskSegments.length && j < routeSegments.length) {
+    const maskSegment = maskSegments[i];
+    const routeSegment = routeSegments[j];
+
+    // Catch-all `[...param]`
+    if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
+      const paramName = maskSegment.slice(4, -1);
+
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) {
+        params[paramName] = routeSegments.slice(j).join("/");
+        break;
+      }
+
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) {
+          requiredSegments++;
+        }
+      }
+
+      const remainingRouteSegments = routeSegments.length - j;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+
+      if (segmentsToConsume >= 1) {
+        params[paramName] = routeSegments
+          .slice(j, j + segmentsToConsume)
+          .join("/");
+        j += segmentsToConsume;
+      } else {
+        return {};
+      }
+
+      i++;
+      continue;
+    }
+
+    // Optional `[param]+`
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
+      const paramName = maskSegment.slice(1, -2);
+      if (routeSegment) {
+        params[paramName] = routeSegment;
+        j++;
+      }
+      i++;
+      continue;
+    }
+
+    // Dynamic `[param]`
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
+      const paramName = maskSegment.slice(1, -1);
+      params[paramName] = routeSegment;
+    } else if (maskSegment !== routeSegment) {
+      return {};
+    }
+
+    i++;
+    j++;
+  }
+
+  return params;
+}
+
+function isDynamic(path) {
+  const DynamicPattern = /(:\w+|\[\.\.\.\w+\]|\[\w+\]\+?)/;
+  return DynamicPattern.test(path);
+}
+
+
+function routesGrouper(routeMap) {
+  const grouped = {
+    static: {},
+    dynamic: {},
+  };
+
+  for (const [path, value] of Object.entries(routeMap)) {
+    if (isDynamic(path)) {
+      const segments = path.split("/").filter(Boolean);
+      const optionalIndex = segments.findIndex(seg => seg.endsWith("]+"));
+      const hasInvalidOptional =
+        optionalIndex !== -1 && optionalIndex !== segments.length - 1;
+
+      if (hasInvalidOptional) {
+        throw new Error(
+          `Invalid optional param position in route: "${path}" — optional parameters can only appear at the end.`,
+        );
+      }
+
+      grouped.dynamic[path] = value;
+    } else {
+      grouped.static[path] = value;
+    }
+  }
+
+  return grouped;
+}
+
+
+export { routesMatcher, dynamicRoutesParser, isDynamic, routesGrouper };
+
+// // DEMO
+// console.log("=== EXISTING TESTS ===");
+// console.log(routesMatcher("/user/[id]+", "/user")); // true
+// console.log(routesMatcher("/user/[id]+", "/user/42")); // true
+// console.log(routesMatcher("/blog/[...slug]", "/blog/a/b")); // true
+// console.log(routesMatcher("/blog/[id]", "/blog")); // false
+// console.log(routesMatcher("/product/:id", "/product/99")); // true
+
+// console.log("\n=== PARSER TESTS ===");
+// console.log(dynamicRoutesParser("/user/[id]+", "/user"));
+// // 👉 {}
+
+// console.log(dynamicRoutesParser("/user/[id]+", "/user/42"));
+// // 👉 { id: "42" }
+
+// console.log(dynamicRoutesParser("/blog/[...slug]", "/blog/2025/oct/post"));
+// // 👉 { slug: "2025/oct/post" }
+
+// console.log(
+//   dynamicRoutesParser("/product/[category]/[id]+", "/product/electronics"),
+// );
+// // 👉 { category: "electronics" }
+
+// console.log("\n=== FIX TEST ===");
+// console.log(dynamicRoutesParser("/[...slug]/[id]", "/sl1/sl2/9"));
+// // 👉 { slug: "sl1/sl2", id: "9" }
+
+// console.log(dynamicRoutesParser("/[slug]/[...id]", "/sl1/id1/id2"));
+// // 👉 { slug: "sl1", id: "id1/id2" }
+
+// console.log(dynamicRoutesParser("/blog/lang/[lang]/id/[id]", "/blog/lang/en/id/10"));
+// // 👉 { lang: "en", id: "10" }
+
+
+// // Only the last one that can be optional 

package/src/vite/index.js

@@ -0,0 +1 @@
+export * from './vite_setup.js'

package/src/vite/vite_setup.js

@@ -0,0 +1,37 @@
+import { resolve } from 'path'
+export function vite_setup({outDir = 'dist'} = {}){
+    const Target = process.env.TARGET;
+    const isClient = (Target === 'client')
+    const isServer = (Target === 'server')
+    if(isClient){
+        return {
+            build : {
+                modulePreload: false,
+                outDir : `${outDir}/.client`, 
+                emptyOutDir: true,
+                manifest: true, 
+                rollupOptions: {
+                    input: {
+                        main  : resolve(process.cwd(), ".ziko/entry-client.js"),
+                        index : resolve(process.cwd(), '.ziko/index.html')
+                    },
+                    output: {
+                        entryFileNames: `assets/[name].[hash].js`,
+                        chunkFileNames: `assets/[name].[hash].js`,
+                        assetFileNames: `assets/[name].[hash].[ext]`,
+                    },
+                },
+            }
+        }
+    }
+    if(isServer){
+        return {
+            build : {
+                outDir : `${outDir}/.server`,
+                ssr :  resolve(process.cwd(), ".ziko/entry-server.js"),
+                copyPublicDir: false,
+            }
+        }        
+    }
+    return {}
+}

package/types/global.d.ts

@@ -0,0 +1,11 @@
+export {};
+
+declare global {
+  const Ziko: {
+    locals? : {
+      auth? : {}
+    }
+  };
+  const use_server_only : unique symbol;
+  const use_server_only_end : unique symbol;
+}