fragment-ts 2.0.3 → 2.0.4

package/dist/web/web/src/index.mjs

@@ -0,0 +1,644 @@
+// src/web/src/http/fragment-fetch.ts
+var FragmentHttpError = class extends Error {
+  constructor(message, init) {
+    super(message);
+    this.name = "FragmentHttpError";
+    this.status = init.status;
+    this.statusText = init.statusText;
+    this.body = init.body;
+    this.request = init.request;
+    this.response = init.response;
+  }
+};
+var memoryTokenState = { token: null };
+var FragmentFetchClient = class {
+  constructor() {
+    this.config = {
+      baseUrl: "",
+      timeout: 1e4,
+      retries: 0,
+      retryDelay: 300,
+      headers: {},
+      tokenTransport: "cookie",
+      tokenKey: "fragment_token",
+      onUnauthorized: "throw",
+      onForbidden: "throw",
+      onError: void 0
+    };
+    this.requestInterceptors = [];
+    this.responseInterceptors = [];
+  }
+  configure(config) {
+    this.config = {
+      ...this.config,
+      ...config,
+      headers: {
+        ...this.config.headers,
+        ...config.headers || {}
+      }
+    };
+  }
+  setToken(token) {
+    memoryTokenState.token = token;
+    if (this.config.tokenTransport === "localStorage" && typeof window !== "undefined") {
+      window.localStorage.setItem(this.config.tokenKey, token);
+    }
+  }
+  clearToken() {
+    memoryTokenState.token = null;
+    if (this.config.tokenTransport === "localStorage" && typeof window !== "undefined") {
+      window.localStorage.removeItem(this.config.tokenKey);
+    }
+  }
+  getToken() {
+    if (this.config.tokenTransport === "memory") {
+      return memoryTokenState.token;
+    }
+    if (this.config.tokenTransport === "localStorage" && typeof window !== "undefined") {
+      return window.localStorage.getItem(this.config.tokenKey);
+    }
+    return null;
+  }
+  addRequestInterceptor(fn) {
+    this.requestInterceptors.push(fn);
+    return () => {
+      this.requestInterceptors = this.requestInterceptors.filter((it) => it !== fn);
+    };
+  }
+  addResponseInterceptor(fn) {
+    this.responseInterceptors.push(fn);
+    return () => {
+      this.responseInterceptors = this.responseInterceptors.filter((it) => it !== fn);
+    };
+  }
+  get(path, options) {
+    return this.request(path, { method: "GET" }, options);
+  }
+  post(path, body, options) {
+    return this.request(path, { method: "POST", body: body ? JSON.stringify(body) : void 0 }, options);
+  }
+  put(path, body, options) {
+    return this.request(path, { method: "PUT", body: body ? JSON.stringify(body) : void 0 }, options);
+  }
+  patch(path, body, options) {
+    return this.request(path, { method: "PATCH", body: body ? JSON.stringify(body) : void 0 }, options);
+  }
+  delete(path, options) {
+    return this.request(path, { method: "DELETE" }, options);
+  }
+  async request(path, init = {}, options = {}) {
+    const url = this.buildUrl(path, options.params);
+    const headers = {
+      "Content-Type": "application/json",
+      ...this.config.headers,
+      ...options.headers
+    };
+    if (!options.skipAuth && this.config.tokenTransport !== "cookie") {
+      const token = this.getToken();
+      if (token) {
+        headers.Authorization = `Bearer ${token}`;
+      }
+    }
+    const controller = new AbortController();
+    const timeoutMs = options.timeout ?? this.config.timeout;
+    const timeout = setTimeout(() => controller.abort(), timeoutMs);
+    let request = new Request(url, {
+      ...init,
+      headers,
+      credentials: this.config.tokenTransport === "cookie" ? "include" : init.credentials,
+      signal: options.signal || controller.signal
+    });
+    for (const interceptor of this.requestInterceptors) {
+      request = await interceptor(request);
+    }
+    const retries = options.retries ?? this.config.retries;
+    try {
+      return await this.executeWithRetry(request, retries, this.config.retryDelay);
+    } catch (error) {
+      if (error instanceof FragmentHttpError) {
+        this.config.onError?.(error);
+      }
+      throw error;
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+  async executeWithRetry(request, retries, retryDelay) {
+    let attempt = 0;
+    let lastError = null;
+    while (attempt <= retries) {
+      try {
+        const response = await fetch(request.clone());
+        for (const interceptor of this.responseInterceptors) {
+          await interceptor(response, { request });
+        }
+        if (!response.ok) {
+          const body = await this.parseBody(response);
+          const error = new FragmentHttpError(`HTTP ${response.status}`, {
+            status: response.status,
+            statusText: response.statusText,
+            body,
+            request,
+            response
+          });
+          if (response.status === 401) {
+            const result = this.handleAuthMode(this.config.onUnauthorized);
+            if (result === "silent") return null;
+          }
+          if (response.status === 403) {
+            const result = this.handleAuthMode(this.config.onForbidden);
+            if (result === "silent") return null;
+          }
+          for (const interceptor of this.responseInterceptors) {
+            await interceptor(response, { request, error });
+          }
+          if (response.status >= 500 && attempt < retries) {
+            await this.delay(retryDelay);
+            attempt += 1;
+            continue;
+          }
+          throw error;
+        }
+        return await this.parseBody(response);
+      } catch (error) {
+        if (error instanceof FragmentHttpError) {
+          throw error;
+        }
+        if (error?.name === "AbortError") {
+          const syntheticResponse2 = new Response(null, { status: 408, statusText: "Request Timeout" });
+          throw new FragmentHttpError("Request timeout", {
+            status: 408,
+            statusText: "Request Timeout",
+            body: null,
+            request,
+            response: syntheticResponse2
+          });
+        }
+        lastError = error;
+        if (attempt >= retries) {
+          const syntheticResponse2 = new Response(null, { status: 503, statusText: "Service Unavailable" });
+          throw new FragmentHttpError(error?.message || "Network error", {
+            status: 503,
+            statusText: "Service Unavailable",
+            body: null,
+            request,
+            response: syntheticResponse2
+          });
+        }
+        await this.delay(retryDelay);
+      }
+      attempt += 1;
+    }
+    const syntheticResponse = new Response(null, { status: 503, statusText: "Service Unavailable" });
+    throw new FragmentHttpError("Request failed", {
+      status: 503,
+      statusText: "Service Unavailable",
+      body: lastError,
+      request,
+      response: syntheticResponse
+    });
+  }
+  async parseBody(response) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      return response.json();
+    }
+    const text = await response.text();
+    return text.length ? text : null;
+  }
+  buildUrl(path, params) {
+    const normalizedBase = this.config.baseUrl.replace(/\/$/, "");
+    const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+    const url = new URL(`${normalizedBase}${normalizedPath}`);
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((v) => url.searchParams.append(key, String(v)));
+          return;
+        }
+        url.searchParams.append(key, String(value));
+      });
+    }
+    return url.toString();
+  }
+  handleAuthMode(mode) {
+    if (!mode || mode === "throw") {
+      return "throw";
+    }
+    if (mode === "silent") {
+      return "silent";
+    }
+    if (mode.startsWith("redirect:")) {
+      const to = mode.slice("redirect:".length);
+      if (typeof window !== "undefined") {
+        window.location.href = to;
+      }
+    }
+    return "throw";
+  }
+  async delay(ms) {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  }
+};
+var client = new FragmentFetchClient();
+var FragmentFetch = {
+  configure(config) {
+    client.configure(config);
+  },
+  get(path, options) {
+    return client.get(path, options);
+  },
+  post(path, body, options) {
+    return client.post(path, body, options);
+  },
+  put(path, body, options) {
+    return client.put(path, body, options);
+  },
+  patch(path, body, options) {
+    return client.patch(path, body, options);
+  },
+  delete(path, options) {
+    return client.delete(path, options);
+  },
+  request(path, init, options) {
+    return client.request(path, init, options);
+  },
+  setToken(token) {
+    client.setToken(token);
+  },
+  clearToken() {
+    client.clearToken();
+  },
+  getToken() {
+    return client.getToken();
+  },
+  addRequestInterceptor(fn) {
+    return client.addRequestInterceptor(fn);
+  },
+  addResponseInterceptor(fn) {
+    return client.addResponseInterceptor(fn);
+  }
+};
+
+// src/web/src/core/application.tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/web/src/router/fragment-router.tsx
+import { useEffect, useMemo, useState } from "react";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+
+// src/web/src/core/decorators/page.ts
+var pageRegistry = [];
+function Page(options) {
+  return (target) => {
+    pageRegistry.push({
+      target,
+      path: options.path,
+      title: options.title,
+      layout: options.layout
+    });
+  };
+}
+function Layout(options) {
+  return (target) => {
+    const found = pageRegistry.find((page) => page.target === target);
+    if (found) {
+      found.layout = options.name;
+    }
+  };
+}
+function Guard(guardClass) {
+  return (target) => {
+    const found = pageRegistry.find((page) => page.target === target);
+    if (found) {
+      found.guard = guardClass;
+    }
+  };
+}
+function Param(_name) {
+  return () => void 0;
+}
+function Query(_name, _defaultValue) {
+  return () => void 0;
+}
+function RedirectIfAuthenticated(to = "/") {
+  return (target) => {
+    const found = pageRegistry.find((page) => page.target === target);
+    if (found) {
+      found.redirectIfAuthenticated = to;
+    }
+  };
+}
+function getPages() {
+  return [...pageRegistry];
+}
+
+// src/web/src/core/runtime.tsx
+import React from "react";
+function renderPageInstance(PageClass) {
+  const instance = new PageClass();
+  if (typeof instance.render === "function") {
+    return instance.render();
+  }
+  return React.createElement("div", null, PageClass.name);
+}
+
+// src/web/src/router/fragment-router.tsx
+import { jsx } from "react/jsx-runtime";
+function prefixMatch(route, pathname) {
+  if (route === "/") return pathname === "/";
+  return pathname === route || pathname.startsWith(`${route}/`);
+}
+async function resolveSession(config) {
+  if (config.fetch.tokenTransport === "cookie") {
+    try {
+      await FragmentFetch.get("/auth/me", { skipAuth: true });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  return Boolean(FragmentFetch.getToken());
+}
+function routeNeedsAuth(path, config) {
+  return config.authenticatedRoutes.some((route) => prefixMatch(route, path));
+}
+function routeIsPublic(path, config) {
+  return config.publicRoutes.some((route) => prefixMatch(route, path));
+}
+function extractRedirectPath(mode, fallback = "/login") {
+  if (!mode) return fallback;
+  if (mode.startsWith("redirect:")) return mode.slice("redirect:".length);
+  return fallback;
+}
+function PageRoute({ page, config }) {
+  const [checking, setChecking] = useState(true);
+  const [authenticated, setAuthenticated] = useState(false);
+  const [guardAllowed, setGuardAllowed] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const isAuthed = await resolveSession(config);
+      if (cancelled) return;
+      setAuthenticated(isAuthed);
+      if (page.guard) {
+        const guard = new page.guard();
+        if (typeof guard.canActivate === "function") {
+          const result = await Promise.resolve(guard.canActivate());
+          if (!cancelled) {
+            setGuardAllowed(result !== false);
+          }
+        }
+      }
+      if (!cancelled) {
+        setChecking(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [config]);
+  if (checking) {
+    return /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  }
+  const needsAuth = routeNeedsAuth(page.path, config);
+  const isPublic = routeIsPublic(page.path, config) || !needsAuth;
+  if (needsAuth && !authenticated) {
+    return /* @__PURE__ */ jsx(Navigate, { to: extractRedirectPath(config.fetch.onUnauthorized, "/login"), replace: true });
+  }
+  if (isPublic && page.redirectIfAuthenticated && authenticated) {
+    return /* @__PURE__ */ jsx(Navigate, { to: page.redirectIfAuthenticated, replace: true });
+  }
+  if (!guardAllowed) {
+    return /* @__PURE__ */ jsx(Navigate, { to: extractRedirectPath(config.fetch.onForbidden, "/403"), replace: true });
+  }
+  return renderPageInstance(page.target);
+}
+function FragmentRouter({ config }) {
+  const pages = useMemo(() => getPages(), []);
+  return /* @__PURE__ */ jsx(BrowserRouter, { basename: config.webRoot, children: /* @__PURE__ */ jsx(Routes, { children: pages.map((page) => /* @__PURE__ */ jsx(
+    Route,
+    {
+      path: page.path,
+      element: /* @__PURE__ */ jsx(PageRoute, { page, config })
+    },
+    page.path
+  )) }) });
+}
+
+// src/web/src/config/web-config.ts
+function defaultWebConfig() {
+  return {
+    webRoot: "/",
+    serverRoot: "/api",
+    publicRoutes: ["/", "/login", "/register"],
+    authenticatedRoutes: ["/dashboard", "/profile", "/settings"],
+    app: {
+      name: "My App",
+      rootElement: "#root",
+      strict: true,
+      router: "react-router",
+      stateAdapter: "zustand"
+    },
+    fetch: {
+      baseUrl: "http://localhost:3000",
+      timeout: 1e4,
+      retries: 2,
+      retryDelay: 300,
+      tokenTransport: "cookie",
+      tokenKey: "fragment_token",
+      onUnauthorized: "redirect:/login",
+      onForbidden: "redirect:/403"
+    },
+    structure: "layered",
+    di: {
+      autoScan: true,
+      scanPaths: ["src/components", "src/pages", "src/services"]
+    }
+  };
+}
+function interpolateEnv(value) {
+  const match = value.match(/^\$\{([^:}]+):([^}]+)\}$/);
+  if (!match) return value;
+  const [, envName, fallback] = match;
+  const fromEnv = typeof process !== "undefined" ? process.env?.[envName] : void 0;
+  return fromEnv || fallback;
+}
+async function loadWebConfig() {
+  try {
+    if (typeof fetch === "function") {
+      const response = await fetch("/fragment.web.json");
+      if (!response.ok) {
+        throw new Error("fragment.web.json not found");
+      }
+      const raw = await response.json();
+      return {
+        ...defaultWebConfig(),
+        ...raw,
+        fetch: {
+          ...defaultWebConfig().fetch,
+          ...raw.fetch,
+          baseUrl: interpolateEnv(raw.fetch?.baseUrl || defaultWebConfig().fetch.baseUrl || "")
+        }
+      };
+    }
+    throw new Error("fetch unavailable");
+  } catch {
+    return {
+      ...defaultWebConfig(),
+      fetch: {
+        ...defaultWebConfig().fetch,
+        baseUrl: interpolateEnv(defaultWebConfig().fetch.baseUrl || "")
+      }
+    };
+  }
+}
+
+// src/web/src/core/application.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var appMeta = /* @__PURE__ */ new WeakMap();
+function FragmentWebApplication(options) {
+  return (target) => {
+    appMeta.set(target, {
+      rootElement: options.rootElement,
+      strict: options.strict ?? true
+    });
+  };
+}
+var FragmentWebUIApplication = class {
+  async bootstrap(applicationClass) {
+    const config = await loadWebConfig();
+    const meta = appMeta.get(applicationClass) || {
+      rootElement: config.app.rootElement,
+      strict: config.app.strict
+    };
+    FragmentFetch.configure({
+      ...config.fetch,
+      baseUrl: `${config.fetch.baseUrl.replace(/\/$/, "")}${config.serverRoot}`
+    });
+    const rootElement = document.querySelector(meta.rootElement);
+    if (!rootElement) {
+      throw new Error(`Root element not found: ${meta.rootElement}`);
+    }
+    const root = createRoot(rootElement);
+    const app = /* @__PURE__ */ jsx2(FragmentRouter, { config });
+    if (meta.strict) {
+      root.render(/* @__PURE__ */ jsx2(StrictMode, { children: app }));
+      return;
+    }
+    root.render(app);
+  }
+};
+
+// src/web/src/core/di/container.ts
+var DIContainer = class {
+  static register(token, value) {
+    this.providers.set(token, value);
+  }
+  static resolve(token) {
+    if (!this.providers.has(token)) {
+      if (typeof token === "function") {
+        const instance = new token();
+        this.providers.set(token, instance);
+      } else {
+        throw new Error(`Provider not found for token ${String(token)}`);
+      }
+    }
+    return this.providers.get(token);
+  }
+  static clear() {
+    this.providers.clear();
+  }
+};
+DIContainer.providers = /* @__PURE__ */ new Map();
+
+// src/web/src/core/decorators/component.ts
+var componentMeta = /* @__PURE__ */ new Map();
+function Component(options = {}) {
+  return (target) => {
+    componentMeta.set(target, options);
+  };
+}
+function State(initial) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:state:${String(propertyKey)}`, initial, target);
+  };
+}
+function Computed(deps) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:computed:${String(propertyKey)}`, deps || [], target);
+  };
+}
+function Effect(options) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:effect:${String(propertyKey)}`, options, target);
+  };
+}
+function Watch(key) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:watch:${String(propertyKey)}`, key, target);
+  };
+}
+function Store(store, selector) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:store:${String(propertyKey)}`, { store, selector }, target);
+  };
+}
+function Prop(defaultValue) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:prop:${String(propertyKey)}`, defaultValue, target);
+  };
+}
+function Ref() {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:ref:${String(propertyKey)}`, true, target);
+  };
+}
+function Inject(token) {
+  return (target, propertyKey) => {
+    Reflect.defineMetadata(`fragment:inject:${String(propertyKey)}`, token, target);
+    const key = propertyKey;
+    Object.defineProperty(target, key, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return DIContainer.resolve(token);
+      }
+    });
+  };
+}
+function FragmentService() {
+  return (target) => {
+    DIContainer.register(target, new target());
+  };
+}
+function Injectable(_scope = "singleton") {
+  return (target) => {
+    DIContainer.register(target, new target());
+  };
+}
+export {
+  Component,
+  Computed,
+  DIContainer,
+  Effect,
+  FragmentFetch,
+  FragmentHttpError,
+  FragmentService,
+  FragmentWebApplication,
+  FragmentWebUIApplication,
+  Guard,
+  Inject,
+  Injectable,
+  Layout,
+  Page,
+  Param,
+  Prop,
+  Query,
+  RedirectIfAuthenticated,
+  Ref,
+  State,
+  Store,
+  Watch
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-ts",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Spring Boot-style framework for TypeScript with Express and TypeORM",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,9 @@
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build",
-    "test": "node dist/platform/testing/runner.js"
+    "test": "node dist/platform/testing/runner.js",
+    "test:web": "vitest run src/web/tests src/platform/cli/web/tests",
+    "build:web": "tsup src/web/src/index.ts src/platform/cli/web/index.ts --dts --format esm,cjs --out-dir dist/web"
   },
   "keywords": [
     "framework",
@@ -56,9 +58,15 @@
     "helmet": "^7.1.0",
     "inquirer": "^9.2.12",
     "jsonwebtoken": "^9.0.2",
+    "handlebars": "^4.7.8",
     "mobx": "^6.12.0",
     "openai": "^4.20.1",
     "ora": "^5.4.1",
+    "picocolors": "^1.1.1",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
     "reflect-metadata": "^0.1.13",
     "typeorm": "^0.3.17"
   },
@@ -75,9 +83,13 @@
     "@types/inquirer": "^9.0.9",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/node": "^20.10.5",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.3.3"
+    "tsup": "^8.5.0",
+    "typescript": "^5.3.3",
+    "vitest": "^2.1.9"
   },
   "engines": {
     "node": ">=16.0.0"