@erickxavier/no-js 1.0.0

package/src/filters.js

@@ -0,0 +1,137 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  BUILT-IN FILTERS
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _filters } from "./globals.js";
+
+// Text
+_filters.uppercase = (v) => String(v ?? "").toUpperCase();
+_filters.lowercase = (v) => String(v ?? "").toLowerCase();
+_filters.capitalize = (v) =>
+  String(v ?? "").replace(/\b\w/g, (c) => c.toUpperCase());
+_filters.truncate = (v, len = 100) => {
+  const s = String(v ?? "");
+  return s.length > len ? s.slice(0, len) + "..." : s;
+};
+_filters.trim = (v) => String(v ?? "").trim();
+_filters.stripHtml = (v) => String(v ?? "").replace(/<[^>]*>/g, "");
+_filters.slugify = (v) =>
+  String(v ?? "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+_filters.nl2br = (v) => String(v ?? "").replace(/\n/g, "<br>");
+_filters.encodeUri = (v) => encodeURIComponent(String(v ?? ""));
+
+// Numbers
+_filters.number = (v, decimals = 0) => {
+  const n = Number(v);
+  if (isNaN(n)) return v;
+  return n.toLocaleString(undefined, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+};
+_filters.currency = (v, code = "USD") => {
+  const n = Number(v);
+  if (isNaN(n)) return v;
+  try {
+    return n.toLocaleString(undefined, { style: "currency", currency: code });
+  } catch {
+    return `${code} ${n.toFixed(2)}`;
+  }
+};
+_filters.percent = (v, decimals = 0) => {
+  const n = Number(v);
+  if (isNaN(n)) return v;
+  return (n * 100).toFixed(decimals) + "%";
+};
+_filters.filesize = (v) => {
+  const n = Number(v);
+  if (isNaN(n)) return v;
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let i = 0;
+  let size = n;
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024;
+    i++;
+  }
+  return size.toFixed(i > 0 ? 1 : 0) + " " + units[i];
+};
+_filters.ordinal = (v) => {
+  const n = Number(v);
+  if (isNaN(n)) return v;
+  const s = ["th", "st", "nd", "rd"];
+  const mod = n % 100;
+  return n + (s[(mod - 20) % 10] || s[mod] || s[0]);
+};
+
+// Arrays
+_filters.count = (v) => (Array.isArray(v) ? v.length : 0);
+_filters.first = (v) => (Array.isArray(v) ? v[0] : v);
+_filters.last = (v) => (Array.isArray(v) ? v[v.length - 1] : v);
+_filters.join = (v, sep = ", ") => (Array.isArray(v) ? v.join(sep) : v);
+_filters.reverse = (v) => (Array.isArray(v) ? [...v].reverse() : v);
+_filters.unique = (v) => (Array.isArray(v) ? [...new Set(v)] : v);
+_filters.pluck = (v, key) => (Array.isArray(v) ? v.map((i) => i?.[key]) : v);
+_filters.sortBy = (v, key) => {
+  if (!Array.isArray(v)) return v;
+  const desc = key?.startsWith("-");
+  const k = desc ? key.slice(1) : key;
+  return [...v].sort((a, b) => {
+    const va = a?.[k],
+      vb = b?.[k];
+    const r = va < vb ? -1 : va > vb ? 1 : 0;
+    return desc ? -r : r;
+  });
+};
+_filters.where = (v, key, val) =>
+  Array.isArray(v) ? v.filter((i) => i?.[key] === val) : v;
+
+// Date
+_filters.date = (v, fmt = "short") => {
+  const d = new Date(v);
+  if (isNaN(d)) return v;
+  const opts =
+    fmt === "long"
+      ? { dateStyle: "long" }
+      : fmt === "full"
+        ? { dateStyle: "full" }
+        : { dateStyle: "short" };
+  return d.toLocaleDateString(undefined, opts);
+};
+_filters.datetime = (v) => {
+  const d = new Date(v);
+  if (isNaN(d)) return v;
+  return d.toLocaleString();
+};
+_filters.relative = (v) => {
+  const d = new Date(v);
+  if (isNaN(d)) return v;
+  const diff = (Date.now() - d.getTime()) / 1000;
+  if (diff < 60) return "just now";
+  if (diff < 3600) return Math.floor(diff / 60) + "m ago";
+  if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
+  if (diff < 2592000) return Math.floor(diff / 86400) + "d ago";
+  return d.toLocaleDateString();
+};
+_filters.fromNow = (v) => {
+  const d = new Date(v);
+  if (isNaN(d)) return v;
+  const diff = (d.getTime() - Date.now()) / 1000;
+  if (diff < 0) return _filters.relative(v);
+  if (diff < 60) return "in a moment";
+  if (diff < 3600) return "in " + Math.floor(diff / 60) + "m";
+  if (diff < 86400) return "in " + Math.floor(diff / 3600) + "h";
+  return "in " + Math.floor(diff / 86400) + "d";
+};
+
+// Utility
+_filters.default = (v, def = "") => (v == null || v === "" ? def : v);
+_filters.json = (v, indent = 2) => JSON.stringify(v, null, indent);
+_filters.debug = (v) => {
+  console.log("[No.JS debug]", v);
+  return v;
+};
+_filters.keys = (v) => (v && typeof v === "object" ? Object.keys(v) : []);
+_filters.values = (v) => (v && typeof v === "object" ? Object.values(v) : []);

package/src/globals.js

@@ -0,0 +1,58 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  SHARED STATE & UTILITIES
+// ═══════════════════════════════════════════════════════════════════════
+
+export const _config = {
+  baseApiUrl: "",
+  headers: {},
+  timeout: 10000,
+  retries: 0,
+  retryDelay: 1000,
+  credentials: "same-origin",
+  csrf: null,
+  cache: { strategy: "none", ttl: 300000 },
+  templates: { cache: true },
+  router: { mode: "history", base: "/", scrollBehavior: "top" },
+  i18n: { defaultLocale: "en", fallbackLocale: "en", detectBrowser: false },
+  debug: false,
+  devtools: false,
+  csp: null,
+  sanitize: true,
+};
+
+export const _interceptors = { request: [], response: [] };
+export const _eventBus = {};
+export const _stores = {};
+export const _storeWatchers = new Set();
+export const _filters = {};
+export const _validators = {};
+export const _cache = new Map();
+export const _refs = {};
+export let _routerInstance = null;
+
+export function setRouterInstance(r) {
+  _routerInstance = r;
+}
+
+export function _log(...args) {
+  if (_config.debug) console.log("[No.JS]", ...args);
+}
+
+export function _warn(...args) {
+  console.warn("[No.JS]", ...args);
+}
+
+export function _notifyStoreWatchers() {
+  for (const fn of _storeWatchers) fn();
+}
+
+export function _watchExpr(expr, ctx, fn) {
+  ctx.$watch(fn);
+  if (typeof expr === "string" && expr.includes("$store")) {
+    _storeWatchers.add(fn);
+  }
+}
+
+export function _emitEvent(name, data) {
+  (_eventBus[name] || []).forEach((fn) => fn(data));
+}

package/src/i18n.js

@@ -0,0 +1,36 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  i18n SYSTEM
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _config } from "./globals.js";
+
+export const _i18n = {
+  locale: "en",
+  locales: {},
+  t(key, params = {}) {
+    const messages =
+      _i18n.locales[_i18n.locale] ||
+      _i18n.locales[_config.i18n.fallbackLocale] ||
+      {};
+    let msg = key.split(".").reduce((o, k) => o?.[k], messages);
+    if (msg == null) return key;
+
+    // Pluralization: "one item | {count} items"
+    if (
+      typeof msg === "string" &&
+      msg.includes("|") &&
+      params.count != null
+    ) {
+      const forms = msg.split("|").map((s) => s.trim());
+      msg = Number(params.count) === 1 ? forms[0] : forms[1] || forms[0];
+    }
+
+    // Interpolation: {name}
+    if (typeof msg === "string") {
+      msg = msg.replace(/\{(\w+)\}/g, (_, k) =>
+        params[k] != null ? params[k] : "",
+      );
+    }
+    return msg;
+  },
+};

package/src/index.js

@@ -0,0 +1,189 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  No.JS — Module Entry Point
+//  For npm/ESM/CJS consumers: import NoJS from 'nojs'
+// ═══════════════════════════════════════════════════════════════════════
+
+// Core modules
+import {
+  _config,
+  _filters,
+  _validators,
+  _interceptors,
+  _eventBus,
+  _stores,
+  _refs,
+  _routerInstance,
+  setRouterInstance,
+  _log,
+} from "./globals.js";
+import { _i18n } from "./i18n.js";
+import { createContext } from "./context.js";
+import { evaluate, resolve } from "./evaluate.js";
+import { findContext, _loadRemoteTemplates, _loadRemoteTemplatesPhase1, _loadRemoteTemplatesPhase2, _processTemplateIncludes } from "./dom.js";
+import { registerDirective, processTree } from "./registry.js";
+import { _createRouter } from "./router.js";
+
+// Side-effect imports: register built-in filters
+import "./filters.js";
+
+// Side-effect imports: register all built-in directives
+import "./directives/state.js";
+import "./directives/http.js";
+import "./directives/binding.js";
+import "./directives/conditionals.js";
+import "./directives/loops.js";
+import "./directives/styling.js";
+import "./directives/events.js";
+import "./directives/refs.js";
+import "./directives/validation.js";
+import "./directives/i18n.js";
+
+// ═══════════════════════════════════════════════════════════════════════
+//  PUBLIC API
+// ═══════════════════════════════════════════════════════════════════════
+
+function _getDefaultRoutePath() {
+  if (typeof window === "undefined") return null;
+  const routerCfg = _config.router || {};
+  if (routerCfg.mode === "hash") {
+    return window.location.hash.slice(1) || "/";
+  }
+  const base = (routerCfg.base || "/").replace(/\/$/, "");
+  return window.location.pathname.replace(base, "") || "/";
+}
+
+const NoJS = {
+  get baseApiUrl() {
+    return _config.baseApiUrl;
+  },
+  set baseApiUrl(v) {
+    _config.baseApiUrl = v;
+  },
+
+  config(opts = {}) {
+    // Save nested objects before shallow assign overwrites them
+    const prevHeaders = { ..._config.headers };
+    const prevCache = { ..._config.cache };
+    const prevTemplates = { ..._config.templates };
+    const prevRouter = { ..._config.router };
+    const prevI18n = { ..._config.i18n };
+    Object.assign(_config, opts);
+    if (opts.headers)
+      _config.headers = { ...prevHeaders, ...opts.headers };
+    if (opts.csrf) _config.csrf = opts.csrf;
+    if (opts.cache) _config.cache = { ...prevCache, ...opts.cache };
+    if (opts.templates) _config.templates = { ...prevTemplates, ...opts.templates };
+    if (opts.router) _config.router = { ...prevRouter, ...opts.router };
+    if (opts.i18n) {
+      _config.i18n = { ...prevI18n, ...opts.i18n };
+      _i18n.locale = opts.i18n.defaultLocale || _i18n.locale;
+    }
+  },
+
+  async init(root) {
+    if (typeof document === "undefined") return;
+    root = root || document.body;
+    _log("Initializing...");
+
+    // Inline template includes (e.g. skeletons) — synchronous, before any fetch
+    _processTemplateIncludes(root);
+
+    // Determine active route path for phase 1 prioritization
+    const defaultRoutePath = _getDefaultRoutePath();
+
+    // Phase 1 (blocking): priority + non-route + default route templates
+    await _loadRemoteTemplatesPhase1(defaultRoutePath);
+
+    // Check for route-view outlets to activate router
+    if (document.querySelector("[route-view]")) {
+      setRouterInstance(_createRouter());
+    }
+
+    processTree(root); // ← first paint happens here
+
+    // Init router after tree is processed
+    if (_routerInstance) await _routerInstance.init();
+
+    _log("Initialized.");
+
+    // Phase 2 (non-blocking): background preload remaining route templates
+    _loadRemoteTemplatesPhase2();
+
+    // DevTools integration
+    if (_config.devtools && typeof window !== "undefined") {
+      window.__NOJS_DEVTOOLS__ = {
+        stores: _stores,
+        config: _config,
+        refs: _refs,
+        router: _routerInstance,
+        filters: Object.keys(_filters),
+        validators: Object.keys(_validators),
+        version: NoJS.version,
+      };
+      _log("DevTools enabled — access via window.__NOJS_DEVTOOLS__");
+    }
+  },
+
+  // Register custom directive
+  directive(name, handler) {
+    registerDirective(name, handler);
+  },
+
+  // Register custom filter
+  filter(name, fn) {
+    _filters[name] = fn;
+  },
+
+  // Register custom validator
+  validator(name, fn) {
+    _validators[name] = fn;
+  },
+
+  // i18n
+  i18n(opts) {
+    if (opts.locales) _i18n.locales = opts.locales;
+    if (opts.defaultLocale) _i18n.locale = opts.defaultLocale;
+    if (opts.fallbackLocale) _config.i18n.fallbackLocale = opts.fallbackLocale;
+    if (opts.detectBrowser) {
+      const browserLang =
+        typeof navigator !== "undefined" ? navigator.language : "en";
+      if (_i18n.locales[browserLang]) _i18n.locale = browserLang;
+    }
+  },
+
+  // Event bus
+  on(event, fn) {
+    if (!_eventBus[event]) _eventBus[event] = [];
+    _eventBus[event].push(fn);
+    return () => {
+      _eventBus[event] = _eventBus[event].filter((f) => f !== fn);
+    };
+  },
+
+  // Request interceptors
+  interceptor(type, fn) {
+    if (_interceptors[type]) _interceptors[type].push(fn);
+  },
+
+  // Access global stores
+  get store() {
+    return _stores;
+  },
+
+  // Access router
+  get router() {
+    return _routerInstance;
+  },
+
+  // Utilities (for custom directives)
+  createContext,
+  evaluate,
+  findContext,
+  processTree,
+  resolve,
+
+  // Version
+  version: "1.0.0",
+};
+
+export default NoJS;

package/src/registry.js

@@ -0,0 +1,60 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVE REGISTRY & DOM PROCESSING
+// ═══════════════════════════════════════════════════════════════════════
+
+const _directives = new Map();
+
+export function registerDirective(name, handler) {
+  _directives.set(name, {
+    priority: handler.priority ?? 50,
+    init: handler.init,
+  });
+}
+
+function _matchDirective(attrName) {
+  if (_directives.has(attrName))
+    return { directive: _directives.get(attrName), match: attrName };
+  // Pattern matches
+  const patterns = ["class-*", "on:*", "style-*", "bind-*"];
+  for (const p of patterns) {
+    const prefix = p.replace("*", "");
+    if (attrName.startsWith(prefix) && _directives.has(p)) {
+      return { directive: _directives.get(p), match: p };
+    }
+  }
+  return null;
+}
+
+export function processElement(el) {
+  if (el.__declared) return;
+  el.__declared = true;
+
+  const matched = [];
+  for (const attr of [...el.attributes]) {
+    const m = _matchDirective(attr.name);
+    if (m) {
+      matched.push({
+        name: attr.name,
+        value: attr.value,
+        priority: m.directive.priority,
+        init: m.directive.init,
+      });
+    }
+  }
+
+  matched.sort((a, b) => a.priority - b.priority);
+  for (const m of matched) {
+    m.init(el, m.name, m.value);
+  }
+}
+
+export function processTree(root) {
+  if (!root) return;
+  if (root.nodeType === 1 && !root.__declared) processElement(root);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node.tagName === "TEMPLATE" || node.tagName === "SCRIPT") continue;
+    if (!node.__declared) processElement(node);
+  }
+}