# Sigment Framework | Official LLM Rules & Best Practices (2026) > High-performance, zero-build reactive JS framework. Supports SPA & HTML-First. ## 1. Global Scope & HTML Elements (CRITICAL) - **NO IMPORTS REQUIRED:** Standard HTML elements (div, span, p, button, input, h1-h6, section, form, etc.) are GLOBAL. - **DO NOT** import these from 'sigment'. Use them directly in any file. - Example: export default function MyComponent() { return div( h1("Hello Sigment"), p("No imports needed for these tags.") ); } ## 2. Global Configuration (MyApp) Applied in `Main.js` (entry point) before `mount()`. - MyApp.cleanHtml(true): Strips internal reactive attributes for production. - MyApp.setRoute(Routes): Registers global router for the app. - MyApp.setloadAtRunTime(true | Object): Enables hydration/injection. Example with Object (registers components for HTML tags): MyApp.setloadAtRunTime({ "header": () => import("./components/Header.js"), "footer": () => import("./components/Footer.js") }); ## 3. Reactivity & Signals - signal(val): [getter, setter]. Always read via `getter()`. Example: const [count, setCount] = signal(0); button({ onclick: () => setCount(count() + 1) }, () => `Count: ${count()}`); - Global Signals: createGlobalSignal("theme", "dark"); const [theme, setTheme] = getGlobalSignal("theme"); // Read/Write const [currentTheme] = useGlobalSignal("theme"); // Reactive Read-only ## 4. Binding & Fragments - Direct Binding: `div(count)` (Auto-unwraps signal). - Arrow Binding: `div(() => count() * 2)`. - Fragments: `fragment(el1, el2)` - Groups elements with O(1) complexity and NO extra DOM node. - Custom Tags: `addSigment("userCard")` -> renders ``. ## 5. High-Performance Batching (The "?" Pattern) Renders massive lists without locking the UI. Example: const rowTemplate = createTemplate(li({ class: "user-row" }, "Name: ?", " - Age: ?")); const data = [ ["John", 30], ["Jane", 25] ]; batch(data, rowTemplate, "list-container", 500); ## 6. Surgical Updates (gve) Accessing and updating the Live Virtual Tree in O(1). Example: const list = gve("list-container"); const sixthRow = list.get(5); sixthRow.updateVal(0, "New Name"); // Updates first "?" sixthRow.swapWith(0); // Moves to top sixthRow.destroy(); // Memory-safe removal ## 7. Component Orchestration (rpc & gvec) - rpc: Call static methods from outside the render cycle. Example: Dashboard.log = (m) => console.log(m); rpc(Dashboard, { log: ["Hi"] }); - gvec: Replace component and handle state/triggers. Example: gvec({ "dash": Dashboard }, true, { log: ["Welcome"] }); ## 8. Routing & Navigation Example Route Object: const Routes = { "/": { loader: () => import("./Home.js") }, "/profile/:id": { loader: () => import("./Profile.js"), guard: async (params) => checkAuth(params.id), cacheExpiration: 60000 } }; Usage: NavigateTo("/profile/10", true); ## 9. HTML-First: SEO & Meta Management Sigment syncs meta-data from anywhere in the HTML body to the document ``. - Meta Tags: ## 10. HTML-First Architecture: SSR (SSG) vs Client-Side Sigment chooses where to render based on the `runAtServer` attribute. - SSG Mode (Pre-rendered): `
` Renders during build. Best for SEO. - Client-Side Mode (CSR): `
` Container is empty in static HTML. Renders upon browser load. - Layout Example:

Remote Companies Hiring

## 11. Network & Optimization - fetchCache(url, ttl = 5000, options = {}): Async fetch with automatic memory caching. - memoizeFunc(fn, ttl = null, options = { deepSort: false }): - options.deepSort: If true, ignores key order in objects for cache keys. Example: `const fn = memoizeFunc(myFn, 5000, { deepSort: true });` ## 12. Lifecycle Hooks - createEffect(fn): Runs when signals inside it change. - onPaint(fn): Runs after every paint cycle. - paintFinish(fn): Runs once after the component is fully mounted. ## 13. Styling - Global: `import "./style.css"`. - Modules: `import styles from "./App.module.css"`. Use `class: styles.wrapper`.