@lystech/sections 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -16,4 +16,4 @@ export { adaptateurI18next, appliquerAuxTextes } from './sourceTexte';
 export type { Dictionnaire, SourceTexte } from './sourceTexte';
 export { useSection, useSectionList } from './useSection';
 export type { BlocDeclare, ChampDeclare, SectionPubliee, TypeDeChamp, } from './types';
-export type { AncrageEdition, ResultatSection } from './useSection';
+export type { AncrageEdition, ChampEdition, ResultatSection } from './useSection';

package/dist/index.js

@@ -1,22 +1,22 @@
 import { s as W, a as D, b as u } from "./morceaux/constantes-BPZxUYge.js";
-import { C as lt } from "./morceaux/constantes-BPZxUYge.js";
-import { jsx as C, jsxs as J, Fragment as q } from "react/jsx-runtime";
-import { useState as p, useRef as x, useEffect as A, useCallback as b, useMemo as L, useContext as Z, createContext as G } from "react";
+import { C as dt } from "./morceaux/constantes-BPZxUYge.js";
+import { jsx as I, jsxs as J, Fragment as q } from "react/jsx-runtime";
+import { useState as p, useRef as x, useEffect as A, useCallback as C, useMemo as L, useContext as Z, createContext as G } from "react";
 import { appliquerAuxTextes as K } from "./morceaux/sourceTexte-BMPMpNg9.js";
-import { adaptateurI18next as ft } from "./morceaux/sourceTexte-BMPMpNg9.js";
+import { adaptateurI18next as ht } from "./morceaux/sourceTexte-BMPMpNg9.js";
 const M = G(null), Q = "https://api.lystech.ca/api";
 function V() {
   if (typeof window > "u") return null;
-  const t = (r) => {
+  const t = (e) => {
     try {
-      window.localStorage.setItem(u, r);
+      window.localStorage.setItem(u, e);
     } catch {
       try {
-        window.sessionStorage.setItem(u, r);
+        window.sessionStorage.setItem(u, e);
       } catch {
       }
     }
-    return r;
+    return e;
   };
   try {
     if (window.localStorage.getItem(D)) {
@@ -27,9 +27,9 @@ function V() {
       }
       return null;
     }
-    const r = window.location.hash.replace(/^#/, "");
-    if (r.includes(u + "=")) {
-      const c = new URLSearchParams(r), o = c.get(u);
+    const e = window.location.hash.replace(/^#/, "");
+    if (e.includes(u + "=")) {
+      const c = new URLSearchParams(e), o = c.get(u);
       if (o) {
         c.delete(u);
         const a = c.toString();
@@ -40,16 +40,16 @@ function V() {
         ), t(o);
       }
     }
-    const e = new URL(window.location.href), n = e.searchParams.get(u);
-    return n ? (e.searchParams.delete(u), window.history.replaceState({}, "", e.toString()), t(n)) : window.localStorage.getItem(u) ?? window.sessionStorage.getItem(u);
+    const r = new URL(window.location.href), n = r.searchParams.get(u);
+    return n ? (r.searchParams.delete(u), window.history.replaceState({}, "", r.toString()), t(n)) : window.localStorage.getItem(u) ?? window.sessionStorage.getItem(u);
   } catch {
     return null;
   }
 }
-function ot({
+function ct({
   site: t,
-  page: r,
-  langue: e = "fr",
+  page: e,
+  langue: r = "fr",
   apiBaseUrl: n = Q,
   sectionsInitiales: c,
   sourceTexte: o,
@@ -60,13 +60,13 @@ function ot({
     c ?? []
   ), [w, g] = p(
     c?.length ? "pret" : "chargement"
-  ), [j, y] = p(0), [S, T] = p({}), [P, $] = p(!1), U = x(null);
+  ), [j, y] = p(0), [S, k] = p({}), [P, N] = p(!1), U = x(null);
   A(() => {
-    if (!t || !r) return;
+    if (!t || !e) return;
     U.current?.abort();
     const s = new AbortController();
     U.current = s, g("chargement");
-    const l = n + "/site-sections/public/" + encodeURIComponent(t) + "/" + encodeURIComponent([r, ...a ?? []].join(","));
+    const l = n + "/site-sections/public/" + encodeURIComponent(t) + "/" + encodeURIComponent([e, ...a ?? []].join(","));
     return fetch(l, { signal: s.signal }).then(
       (i) => i.ok ? i.json() : Promise.reject(new Error(String(i.status)))
     ).then((i) => {
@@ -74,29 +74,29 @@ function ot({
     }).catch((i) => {
       s.signal.aborted || i?.name === "AbortError" || g("erreur");
     }), () => s.abort();
-  }, [t, r, n, j, (a ?? []).join(",")]);
-  const R = b(() => y((s) => s + 1), []), z = x({}), k = b((s, l) => {
-    z.current[s] = l;
+  }, [t, e, n, j, (a ?? []).join(",")]);
+  const R = C(() => y((s) => s + 1), []), $ = x({}), z = C((s, l) => {
+    $.current[s] = l;
   }, []);
   A(() => {
     !o || !d.length || K(d, o);
   }, [d, o]);
-  const _ = b(
-    (s, l) => T((i) => ({ ...i, [s]: l })),
+  const _ = C(
+    (s, l) => k((i) => ({ ...i, [s]: l })),
     []
   ), f = x({
     site: t,
-    page: r,
-    langue: e,
+    page: e,
+    langue: r,
     poserApercu: () => {
     },
     recharger: () => {
     }
   });
-  f.current.site = t, f.current.page = r, f.current.langue = e, f.current.poserApercu = _, f.current.sourceTexte = o, f.current.replis = z.current, f.current.recharger = R, A(() => {
-    f.current.surChangementDePage?.(r);
-  }, [r]);
-  const v = x(null), F = b(
+  f.current.site = t, f.current.page = e, f.current.langue = r, f.current.poserApercu = _, f.current.sourceTexte = o, f.current.replis = $.current, f.current.recharger = R, A(() => {
+    f.current.surChangementDePage?.(e);
+  }, [e]);
+  const v = x(null), F = C(
     async (s, l = {}) => {
       const i = v.current;
       if (!i) throw new Error("Aucune connexion d'édition active.");
@@ -116,7 +116,7 @@ function ot({
     if (!s) return;
     let l = !0, i;
     return import("@lystech/sections/editeur").then((h) => {
-      l && (v.current = s, $(!0), i = h.monterEditeur({
+      l && (v.current = s, N(!0), i = h.monterEditeur({
         jeton: s,
         site: t,
         apiBaseUrl: n,
@@ -128,11 +128,11 @@ function ot({
       l = !1, v.current = null, i?.();
     };
   }, [t, n]);
-  const N = L(
+  const T = L(
     () => ({
       site: t,
-      page: r,
-      langue: e,
+      page: e,
+      langue: r,
       apiBaseUrl: n,
       sections: d,
       etat: w,
@@ -140,13 +140,13 @@ function ot({
       apercu: S,
       poserApercu: _,
       modeEdition: P,
-      declarerRepli: k,
+      declarerRepli: z,
       appelEdition: F
     }),
     [
       t,
-      r,
       e,
+      r,
       n,
       d,
       w,
@@ -154,25 +154,25 @@ function ot({
       S,
       _,
       P,
-      k,
+      z,
       F
     ]
   );
-  return /* @__PURE__ */ C(M.Provider, { value: N, children: m });
+  return /* @__PURE__ */ I(M.Provider, { value: T, children: m });
 }
 function O() {
   return Z(M);
 }
 const X = "https://api.lystech.ca/api";
-function ct({
+function st({
   site: t,
-  apiBaseUrl: r,
-  className: e,
+  apiBaseUrl: e,
+  className: r,
   mention: n = "Réalisé avec Lystech",
   connexion: c = "Connexion",
   methodes: o
 }) {
-  const a = O(), m = t ?? a?.site ?? "", d = r ?? a?.apiBaseUrl ?? X, [E, w] = p(!1);
+  const a = O(), m = t ?? a?.site ?? "", d = e ?? a?.apiBaseUrl ?? X, [E, w] = p(!1);
   if (!m) return null;
   const g = async () => {
     if (!E) {
@@ -210,7 +210,7 @@ function ct({
   return /* @__PURE__ */ J(
     "div",
     {
-      className: e,
+      className: r,
       style: {
         display: "flex",
         flexWrap: "wrap",
@@ -221,7 +221,7 @@ function ct({
         lineHeight: 1.5
       },
       children: [
-        n !== null && /* @__PURE__ */ C(
+        n !== null && /* @__PURE__ */ I(
           "a",
           {
             href: "https://lystech.ca",
@@ -232,94 +232,98 @@ function ct({
           }
         ),
         !a?.modeEdition && /* @__PURE__ */ J(q, { children: [
-          n !== null && /* @__PURE__ */ C("span", { "aria-hidden": "true", children: "·" }),
-          /* @__PURE__ */ C("button", { type: "button", style: j, onClick: g, children: E ? "…" : c })
+          n !== null && /* @__PURE__ */ I("span", { "aria-hidden": "true", children: "·" }),
+          /* @__PURE__ */ I("button", { type: "button", style: j, onClick: g, children: E ? "…" : c })
         ] })
       ]
     }
   );
 }
 function Y(t) {
-  return !!t && typeof t == "object" && !Array.isArray(t) && Object.keys(t).every((r) => /^[a-z]{2}(-[A-Za-z]{2})?$/.test(r));
+  return !!t && typeof t == "object" && !Array.isArray(t) && Object.keys(t).every((e) => /^[a-z]{2}(-[A-Za-z]{2})?$/.test(e));
 }
-function I(t, r) {
-  if (Array.isArray(t)) return t.map((e) => I(e, r));
+function b(t, e) {
+  if (Array.isArray(t)) return t.map((r) => b(r, e));
   if (Y(t)) {
-    const e = t, n = r.slice(0, 2);
-    return e[r] ?? e[n] ?? Object.values(e).find((o) => o != null) ?? "";
+    const r = t, n = e.slice(0, 2);
+    return r[e] ?? r[n] ?? Object.values(r).find((o) => o != null) ?? "";
   }
   if (t && typeof t == "object") {
-    const e = {};
+    const r = {};
     for (const [n, c] of Object.entries(t))
-      e[n] = I(c, r);
-    return e;
+      r[n] = b(c, e);
+    return r;
   }
   return t;
 }
-function B(t, r) {
-  if (!r || typeof r != "object" || Array.isArray(r))
+function B(t, e) {
+  if (!e || typeof e != "object" || Array.isArray(e))
     return t;
-  const e = { ...t };
-  for (const [n, c] of Object.entries(r))
-    c != null && (e[n] = c);
-  return e;
+  const r = { ...t };
+  for (const [n, c] of Object.entries(e))
+    c != null && (r[n] = c);
+  return r;
+}
+function tt(t) {
+  return (e) => ({ "data-lystech-champ": `${t}:${e}` });
 }
-function st(t, r) {
-  const e = O(), n = e?.apercu?.[t], c = e?.declarerRepli;
+function it(t, e) {
+  const r = O(), n = r?.apercu?.[t], c = r?.declarerRepli;
   return A(() => {
-    c?.(t, r.defaut);
-  }, [c, t, r.defaut]), L(() => {
-    const o = e?.sections.find(
+    c?.(t, e.defaut);
+  }, [c, t, e.defaut]), L(() => {
+    const o = r?.sections.find(
       (d) => d.blockType === t
-    ), a = n ?? o?.data ?? null, m = a ? I(a, e?.langue ?? "fr") : null;
+    ), a = n ?? o?.data ?? null, m = a ? b(a, r?.langue ?? "fr") : null;
     return {
-      contenu: B(r.defaut, m),
+      contenu: B(e.defaut, m),
       publie: !!o?.data,
       UID: o?.UID ?? null,
-      chargement: e?.etat === "chargement",
-      ancrage: { "data-lystech-section": t }
+      chargement: r?.etat === "chargement",
+      ancrage: { "data-lystech-section": t },
+      champ: tt(t)
     };
   }, [
-    e?.sections,
-    e?.langue,
-    e?.etat,
+    r?.sections,
+    r?.langue,
+    r?.etat,
     n,
     t,
-    r.defaut
+    e.defaut
   ]);
 }
-function it(t, r) {
-  const e = O();
+function at(t, e) {
+  const r = O();
   return L(() => {
-    const n = { "data-lystech-section": t }, c = (e?.sections ?? []).filter(
+    const n = { "data-lystech-section": t }, c = (r?.sections ?? []).filter(
       (o) => o.blockType === t
     );
     return c.length === 0 ? {
-      items: (r?.defaut ?? []).map((o, a) => ({
+      items: (e?.defaut ?? []).map((o, a) => ({
         ...o,
         __uid: `defaut-${a}`
       })),
       publie: !1,
-      chargement: e?.etat === "chargement",
+      chargement: r?.etat === "chargement",
       ancrage: n
     } : {
       items: c.map((o) => ({
-        ...I(o.data ?? {}, e?.langue ?? "fr"),
+        ...b(o.data ?? {}, r?.langue ?? "fr"),
         __uid: o.UID
       })),
       publie: !0,
-      chargement: e?.etat === "chargement",
+      chargement: r?.etat === "chargement",
       ancrage: n
     };
-  }, [e?.sections, e?.langue, e?.etat, t, r?.defaut]);
+  }, [r?.sections, r?.langue, r?.etat, t, e?.defaut]);
 }
 export {
-  lt as CLASSE_HORS_EDITION,
-  ot as SectionsProvider,
-  ct as SignatureLystech,
-  ft as adaptateurI18next,
+  dt as CLASSE_HORS_EDITION,
+  ct as SectionsProvider,
+  st as SignatureLystech,
+  ht as adaptateurI18next,
   K as appliquerAuxTextes,
-  st as useSection,
-  it as useSectionList,
+  it as useSection,
+  at as useSectionList,
   O as useSectionsContext
 };

package/dist/useSection.d.ts

@@ -16,6 +16,25 @@
 export type AncrageEdition = {
     "data-lystech-section": string;
 };
+/**
+ * LES ATTRIBUTS À POSER SUR L'ÉLÉMENT QUI AFFICHE UN CHAMP — un prix, un
+ * numéro, une adresse.
+ *
+ * Un texte traduit se retrouve tout seul dans la page : l'éditeur connaît
+ * le dictionnaire du site. Un NOMBRE, lui, se fond dans un format (« 85 $ »,
+ * « $85 ») : rien ne permet de deviner que ce 85 est le prix de la séance.
+ * Le site le dit en étalant ces attributs sur l'élément qui ne contient QUE
+ * la valeur :
+ *
+ *     const { contenu, champ } = useSection("tarifs", { defaut });
+ *     return <p><span {...champ("seance")}>{contenu.seance}</span> $</p>;
+ *
+ * En mode édition, un clic dessus permet de corriger la valeur sur place.
+ * Pour un visiteur, c'est un attribut `data-` inerte.
+ */
+export type ChampEdition = {
+    "data-lystech-champ": string;
+};
 export type ResultatSection<T> = {
     /** Le contenu à afficher : aperçu, sinon publié, sinon défaut. */
     contenu: T;
@@ -26,6 +45,8 @@ export type ResultatSection<T> = {
     chargement: boolean;
     /** À étaler sur le conteneur pour que l'éditeur puisse le situer. */
     ancrage: AncrageEdition;
+    /** À étaler sur l'élément qui affiche UN champ, pour le corriger sur place. */
+    champ: (nom: keyof T & string) => ChampEdition;
 };
 /**
  * Le contenu d'un type de bloc sur la page courante.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lystech/sections",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Contenu de site editable par le client — lecture legere, edition chargee a la demande.",
   "type": "module",
   "main": "./dist/index.js",