@endge/native-dom 0.1.1

package/dist/domain/types/native-dom-sfc-render.type.d.ts

@@ -0,0 +1,20 @@
+import { EndgeSFCRenderAdapterKey, UIRenderAdapter } from '@endge/core';
+/** Вход renderer-а одного уже вычисленного SFC primitive. */
+export interface SFCNativeDOMRenderElementInput {
+    document: Document;
+    children: readonly SFCNativeDOMChild[];
+    props: Record<string, unknown>;
+    attrs: Record<string, unknown>;
+}
+export type SFCNativeDOMChild = Node | string | number | boolean | null | undefined;
+/** Renderer одной visual primitive в Native DOM engine. */
+export type SFCNativeDOMRenderAdapterFunction = (input: SFCNativeDOMRenderElementInput) => HTMLElement;
+/** Полный набор visual primitive renderers Native DOM adapter-а. */
+export type SFCNativeDOMRenderAdapterRendererMap = Record<EndgeSFCRenderAdapterKey, SFCNativeDOMRenderAdapterFunction>;
+/** Типизированный SFC adapter для Native DOM render engine. */
+export interface SFCNativeDOMRenderAdapter extends UIRenderAdapter<SFCNativeDOMRenderAdapterFunction> {
+    protocol: 'endge-sfc';
+    protocolVersion: 1;
+    renderer: 'native-dom';
+    renderers: SFCNativeDOMRenderAdapterRendererMap;
+}

package/dist/main.d.ts

@@ -0,0 +1,4 @@
+export * from './domain/types/native-dom-sfc-render.type';
+export * from './model/render/sfc/native-dom-render-tools';
+export * from './model/render/sfc/native-dom-sfc-adapter';
+export * from './model/render/sfc/native-dom-visual-renderers';

package/dist/model/render/sfc/native-dom-render-tools.d.ts

@@ -0,0 +1,11 @@
+import { SFCNativeDOMChild, SFCNativeDOMRenderElementInput } from '../../../domain/types/native-dom-sfc-render.type';
+/** Создаёт DOM element и применяет общие attrs, children и placement. */
+export declare function createNativeDOMElement(input: SFCNativeDOMRenderElementInput, tag: keyof HTMLElementTagNameMap, className: string): HTMLElement;
+/** Добавляет children без HTML-string interpolation. */
+export declare function appendNativeDOMChildren(element: HTMLElement, children: readonly SFCNativeDOMChild[]): void;
+/** Применяет безопасный набор already-normalized DOM attrs. */
+export declare function applyNativeDOMAttrs(element: HTMLElement, attrs: Record<string, unknown>): void;
+/** Применяет renderer-neutral placement props к любому Grid child. */
+export declare function applyNativeDOMGridPlacement(element: HTMLElement, props: Record<string, unknown>): void;
+export declare function normalizeNativeDOMLength(value: unknown, numericUnit?: number): string;
+export declare function normalizeNativeDOMTracks(value: unknown, fallback?: number): string;

package/dist/model/render/sfc/native-dom-sfc-adapter.d.ts

@@ -0,0 +1,4 @@
+import { SFCNativeDOMRenderAdapter } from '../../../domain/types/native-dom-sfc-render.type';
+export declare const NATIVE_DOM_SFC_ADAPTER_ID = "native-dom";
+/** Стандартный SFC adapter без зависимости от Vue или другого UI framework. */
+export declare const NativeDOMSFCAdapter: SFCNativeDOMRenderAdapter;

package/dist/model/render/sfc/native-dom-visual-renderers.d.ts

@@ -0,0 +1,3 @@
+import { SFCNativeDOMRenderAdapterRendererMap } from '../../../domain/types/native-dom-sfc-render.type';
+/** Полный built-in visual vocabulary для Native DOM. */
+export declare const NativeDOMVisualRenderers: SFCNativeDOMRenderAdapterRendererMap;

package/dist/native-dom.js

@@ -0,0 +1,128 @@
+import { ENDGE_SFC_RENDER_ADAPTER_PROTOCOL_VERSION as g, ENDGE_SFC_RENDER_ADAPTER_PROTOCOL as m } from "@endge/core";
+function s(e, r, t) {
+  const o = e.document.createElement(r);
+  return u(o, e.attrs), o.classList.add(t), y(o, e.props), d(o, e.children), o;
+}
+function d(e, r) {
+  for (const t of r) {
+    if (t == null || t === !1) continue;
+    const o = typeof t == "object" && "nodeType" in t;
+    e.append(o ? t : String(t));
+  }
+}
+function u(e, r) {
+  for (const [t, o] of Object.entries(r))
+    if (!(o == null || o === !1 || t === "key")) {
+      if (t === "class") {
+        f(o).forEach((l) => e.classList.add(l));
+        continue;
+      }
+      if (t === "style" && o && typeof o == "object") {
+        Object.assign(e.style, o);
+        continue;
+      }
+      t.startsWith("on") || e.setAttribute(t, o === !0 ? "" : String(o));
+    }
+}
+function y(e, r) {
+  const t = c(r.colStart, r.colSpan), o = c(r.rowStart, r.rowSpan);
+  t && (e.style.gridColumn = t), o && (e.style.gridRow = o);
+}
+function n(e, r = 1) {
+  if (e == null || e === !1) return "";
+  if (typeof e == "number") return `${e * r}px`;
+  const t = String(e).trim();
+  return /^-?\d+(\.\d+)?$/.test(t) ? `${Number(t) * r}px` : t;
+}
+function i(e, r) {
+  if (e == null || e === !1 || String(e).trim() === "")
+    return r ? `repeat(${r}, minmax(0, 1fr))` : "";
+  const t = String(e).trim();
+  return /^\d+$/.test(t) && Number(t) > 0 ? `repeat(${Number(t)}, minmax(0, 1fr))` : t;
+}
+function c(e, r) {
+  const t = p(e), o = p(r);
+  return t != null && o != null ? `${t} / span ${o}` : t != null ? String(t) : o != null ? `span ${o}` : "";
+}
+function p(e) {
+  if (e == null || e === !1 || e === "") return null;
+  const r = Number(e);
+  return Number.isInteger(r) && r > 0 ? r : null;
+}
+function f(e) {
+  return Array.isArray(e) ? e.flatMap(f) : e && typeof e == "object" ? Object.entries(e).filter(([, r]) => !!r).map(([r]) => r) : String(e ?? "").trim().split(/\s+/).filter(Boolean);
+}
+const b = {
+  Text: (e) => s(e, "span", "endge-sfc-text"),
+  DateTime: (e) => {
+    const r = s(e, "time", "endge-sfc-datetime");
+    return e.props.value != null && e.children.length === 0 && (r.textContent = String(e.props.value)), r;
+  },
+  Number: (e) => {
+    const r = s(e, "span", "endge-sfc-number");
+    return e.props.value != null && e.children.length === 0 && (r.textContent = String(e.props.value)), r;
+  },
+  Icon: (e) => {
+    const r = s(e, "span", "endge-sfc-icon");
+    return r.setAttribute("aria-hidden", e.props.label == null ? "true" : "false"), e.props.label != null && r.setAttribute("aria-label", String(e.props.label)), e.props.name != null && e.children.length === 0 && (r.textContent = String(e.props.name)), r;
+  },
+  Badge: (e) => s(e, "span", "endge-sfc-badge"),
+  Dot: (e) => {
+    const r = s(e, "span", "endge-sfc-dot"), t = n(e.props.size, 1) || "8px";
+    return r.style.display = "inline-block", r.style.width = t, r.style.height = t, r.style.borderRadius = "9999px", r;
+  },
+  Box: (e) => s(e, "div", "endge-sfc-box"),
+  Flex: (e) => {
+    const r = s(e, "div", "endge-sfc-flex"), t = e.props.col === !0 || e.props.direction === "column";
+    return r.style.display = "flex", r.style.flexDirection = t ? "column" : "row", r.style.gap = n(e.props.gap, 4), e.props.align != null && (r.style.alignItems = String(e.props.align)), e.props.justify != null && (r.style.justifyContent = String(e.props.justify)), (e.props.wrap === !0 || e.props.wrap === "wrap") && (r.style.flexWrap = "wrap"), r;
+  },
+  Grid: (e) => {
+    const r = s(e, "div", "endge-sfc-grid");
+    return r.style.display = "grid", r.style.gridTemplateColumns = i(e.props.columns, 12), r.style.gridTemplateRows = i(e.props.rows), r.style.gridAutoRows = n(e.props.autoRows), e.props.autoFlow != null && (r.style.gridAutoFlow = String(e.props.autoFlow)), r.style.gap = n(e.props.gap, 4), r.style.columnGap = n(e.props.columnGap, 4), r.style.rowGap = n(e.props.rowGap, 4), e.props.align != null && (r.style.alignItems = String(e.props.align)), e.props.justify != null && (r.style.justifyItems = String(e.props.justify)), r;
+  },
+  Divider: (e) => s(e, "hr", "endge-sfc-divider"),
+  Input: (e) => {
+    const r = s({ ...e, children: [] }, "input", "endge-sfc-input");
+    return e.props.type != null && (r.type = String(e.props.type).toLowerCase()), e.props.value != null && (r.value = String(e.props.value)), e.props.placeholder != null && (r.placeholder = String(e.props.placeholder)), e.props.disabled === !0 && (r.disabled = !0), r;
+  },
+  Textarea: (e) => {
+    const r = s({ ...e, children: [] }, "textarea", "endge-sfc-textarea");
+    return e.props.value != null && (r.value = String(e.props.value)), e.props.placeholder != null && (r.placeholder = String(e.props.placeholder)), e.props.rows != null && (r.rows = Math.max(1, Number(e.props.rows) || 1)), e.props.disabled === !0 && (r.disabled = !0), r;
+  },
+  Checkbox: (e) => {
+    const r = s({ ...e, children: [] }, "label", "endge-sfc-checkbox"), t = e.document.createElement("input");
+    return t.type = "checkbox", t.checked = e.props.checked === !0, t.disabled = e.props.disabled === !0, r.append(t), e.props.label != null && r.append(String(e.props.label)), d(r, e.children), r;
+  },
+  Select: (e) => {
+    const r = s({ ...e, children: [] }, "select", "endge-sfc-select");
+    r.multiple = e.props.multiple === !0, r.disabled = e.props.disabled === !0;
+    const t = Array.isArray(e.props.options) ? e.props.options : [];
+    for (const o of t) {
+      const l = e.document.createElement("option");
+      if (o && typeof o == "object") {
+        const a = o;
+        l.value = String(a.value ?? ""), l.textContent = String(a.label ?? a.value ?? "");
+      } else
+        l.value = String(o ?? ""), l.textContent = String(o ?? "");
+      r.append(l);
+    }
+    return r;
+  }
+}, S = "native-dom", x = {
+  id: S,
+  protocol: m,
+  protocolVersion: g,
+  renderer: "native-dom",
+  renderers: b
+};
+export {
+  S as NATIVE_DOM_SFC_ADAPTER_ID,
+  x as NativeDOMSFCAdapter,
+  b as NativeDOMVisualRenderers,
+  d as appendNativeDOMChildren,
+  u as applyNativeDOMAttrs,
+  y as applyNativeDOMGridPlacement,
+  s as createNativeDOMElement,
+  n as normalizeNativeDOMLength,
+  i as normalizeNativeDOMTracks
+};

package/dist/test/native-dom-sfc-adapter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@endge/native-dom",
+  "version": "0.1.1",
+  "private": false,
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/native-dom.js",
+  "module": "./dist/native-dom.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/native-dom.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@endge/core": "^1.2.7"
+  },
+  "devDependencies": {
+    "@endge/core": "link:../@endge-core",
+    "jsdom": "^26.1.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.5.4",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^2.1.9"
+  },
+  "scripts": {
+    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "build": "vite build",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}