@mostajs/jsonlogic-editor
v0.1.0
Published
Éditeur visuel de règles jsonLogic (PAP) pour l'access-control @mostajs — cœur headless typé (catalogue d'opérateurs, describe, validate, round-trip) + composant React no-build. Émet du jsonlogic consommable par abac/pbac ; preview live via @mostajs/rules
Downloads
138
Maintainers
Readme
@mostajs/jsonlogic-editor
Auteur : Dr Hamid MADANI [email protected] · Licence : AGPL-3.0-or-later Statut : ✅ 0.1.0 — cœur (8 tests) + composant React (rendu SSR prouvé).
Éditeur visuel de règles jsonLogic (le PAP de l'access-control @mostajs).
Émet du jsonLogic consommable tel quel par @mostajs/abac /
@mostajs/pbac. Deux couches :
- Cœur headless typé (
@mostajs/jsonlogic-editor, build TS) — catalogue d'opérateurs, fabriques/inspection de nœuds,describeJsonLogic(phrase lisible),validateJsonLogic(structure), et preview live (evaluateJsonLogicréexporté de@mostajs/rules). Testable sans navigateur. - Composant React no-build (
@mostajs/jsonlogic-editor/react) — ESMReact.createElement, zéro toolchain JSX ; éditeur récursif ET/OU + comparaisons.
Cœur (headless)
import { describeJsonLogic, validateJsonLogic, evaluateJsonLogic, compareNode, varNode } from "@mostajs/jsonlogic-editor";
const rule = { and: [
{ in: ["social", varNode("subject.roles")] },
compareNode("==", varNode("subject.sector"), varNode("resource.sector")),
]};
describeJsonLogic(rule); // ⇒ ("social" ∈ subject.roles ET subject.sector = resource.sector)
validateJsonLogic(rule).valid; // true
evaluateJsonLogic(rule, data); // true | false (preview)Composant React (no-build)
import { JsonLogicEditor, JLE_CSS } from "@mostajs/jsonlogic-editor/react";
<JsonLogicEditor value={rule} onChange={setRule}
attributes={["subject.role","resource.sector"]} sampleData={sample} />Contrôlé (value / onChange), émet du jsonLogic. attributes alimente
l'auto-complétion des attributs ; sampleData affiche l'évaluation live (PERMIT/DENY).
JLE_CSS = thème clair par défaut (injecter dans le <head>).
Démos
node examples/demo.mjs # cœur : build → describe → validate → eval
npx serve # puis ouvrir examples/editor.html (éditeur React live)