@pixelersagency/okno-bridge 1.0.0-beta.1 → 1.0.0-beta.11

package/bin/okno.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+/**
+ * okno — outils du front pour un site Okno.
+ *
+ *   npx okno types [--url https://cms.example.com] [--out src/okno.d.ts]
+ *   npx okno pull  [--url https://cms.example.com] [--out .okno/content.json]
+ *
+ * L'adresse du CMS et le jeton se lisent aussi dans OKNO_URL et OKNO_TOKEN.
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { exportUrl, loadOknoContent } from '../src/content.js';
+
+const [ command, ...rest ] = process.argv.slice( 2 );
+const args = {};
+for ( let i = 0; i < rest.length; i++ ) {
+	if ( rest[ i ].startsWith( '--' ) ) {
+		const [ key, inline ] = rest[ i ].slice( 2 ).split( '=' );
+		args[ key ] = inline ?? rest[ ++i ];
+	}
+}
+
+const url = args.url || process.env.OKNO_URL;
+const token = args.token || process.env.OKNO_TOKEN || '';
+
+async function types() {
+	const endpoint = exportUrl( url ).replace( /\/export$/, '/types' );
+	const headers = token ? { 'X-Okno-Token': token } : {};
+	const response = await fetch( endpoint, { headers } );
+	if ( ! response.ok ) {
+		throw new Error( 'HTTP ' + response.status + ' on ' + endpoint );
+	}
+	const out = args.out || 'src/okno.d.ts';
+	await fs.mkdir( path.dirname( out ), { recursive: true } );
+	await fs.writeFile( out, await response.text() );
+	console.log( 'okno: types written to ' + out );
+}
+
+async function pull() {
+	const out = args.out || '.okno/content.json';
+	const { data, source } = await loadOknoContent( { url, token, snapshot: out, fallback: 'error' } );
+	console.log( 'okno: ' + data.items.length + ' items (' + source + ') in ' + out );
+}
+
+const commands = { types, pull };
+
+if ( ! commands[ command ] ) {
+	console.log( 'Usage: okno <types|pull> [--url https://cms.example.com] [--out file] [--token …]' );
+	process.exit( command ? 1 : 0 );
+}
+
+commands[ command ]().catch( ( error ) => {
+	console.error( 'okno: ' + error.message );
+	process.exit( 1 );
+} );

package/dist/okno-bridge.js

@@ -64,15 +64,6 @@
 	/** Attente de stabilisation du DOM avant re-collecte (rendus successifs de React). */
 	const SETTLE_MS = 120;
 
-	/** Noms lisibles des fournisseurs de contenu courants. */
-	const PROVIDERS = {
-		wordpress: 'WordPress',
-		menu: 'Menus WordPress',
-		acf: 'ACF',
-		woocommerce: 'WooCommerce',
-		jetengine: 'JetEngine',
-	};
-
 	/** Balises retirées de tout HTML injecté dans l'aperçu. */
 	const BANNED_TAGS = [ 'script', 'style', 'iframe', 'object', 'embed', 'link', 'meta', 'base', 'form' ];
 
@@ -88,7 +79,7 @@
 
 		const wpOrigin = options && options.wpOrigin;
 		if ( ! wpOrigin ) {
-			console.warn( '[okno] wpOrigin manquant : bridge inactif.' );
+			console.warn( '[okno] Missing wpOrigin: bridge inactive.' );
 			return;
 		}
 
@@ -126,7 +117,7 @@
 		const style = document.createElement( 'style' );
 		style.textContent =
 			'.' + CLOAK_CLASS + '{opacity:0 !important}' +
-			'.' + HOVER_CLASS + '{outline:2px solid #5b5bd6 !important;outline-offset:2px;cursor:pointer !important}' +
+			'.' + HOVER_CLASS + '{outline:2px solid #86c400 !important;outline-offset:2px;cursor:pointer !important}' +
 			'.' + MANAGED_CLASS + '{outline:2px dashed #b7791f !important;outline-offset:2px}';
 		document.head.appendChild( style );
 
@@ -143,7 +134,7 @@
 			cloakTimer = setTimeout( () => {
 				uncloak();
 				send( { type: 'cloakTimeout' } );
-				console.warn( '[okno] wp-admin n’a pas répondu : aperçu affiché sans hydratation.' );
+				console.warn( '[okno] wp-admin did not respond: preview shown without hydration.' );
 			}, cloakDelay );
 		}
 
@@ -165,24 +156,29 @@
 			return host ? host.getAttribute( 'data-wp-post' ) : '';
 		}
 
-		function sectionLabel( el, index ) {
+		// Libellé vide = libellé par défaut, composé et traduit côté éditeur
+		// (le bridge ne connaît pas la langue de wp-admin) ; voir sectionAuto().
+		function sectionLabel( el ) {
 			const explicit = el.getAttribute( 'data-okno-section' ) || el.getAttribute( 'aria-label' );
 			if ( explicit ) {
 				return explicit;
 			}
 			const tag = el.tagName.toLowerCase();
-			if ( 'header' === tag ) {
-				return 'En-tête';
-			}
-			if ( 'footer' === tag ) {
-				return 'Pied de page';
+			if ( 'header' === tag || 'footer' === tag ) {
+				return '';
 			}
 			const heading = el.querySelector( 'h1, h2, h3' );
 			if ( heading && heading.textContent.trim() ) {
 				const text = heading.textContent.trim().replace( /\s+/g, ' ' );
 				return text.length > 48 ? text.slice( 0, 45 ) + '…' : text;
 			}
-			return 'Section ' + ( index + 1 );
+			return '';
+		}
+
+		/** Nature du libellé par défaut : 'header', 'footer' ou 'section' (numérotée). */
+		function sectionAuto( el ) {
+			const tag = el.tagName.toLowerCase();
+			return 'header' === tag || 'footer' === tag ? tag : 'section';
 		}
 
 		function sectionLayout( el ) {
@@ -233,7 +229,8 @@
 					el.setAttribute( 'data-okno-sid', id );
 					nextSections.push( {
 						id,
-						label: sectionLabel( el, nextSections.length ),
+						label: sectionLabel( el ),
+						auto: sectionAuto( el ),
 						layout: sectionLayout( el ),
 						el,
 						fields: [],
@@ -274,7 +271,7 @@
 			return JSON.stringify( [
 				window.location.pathname,
 				[ ...fields.keys() ].sort(),
-				sections.map( ( s ) => [ s.label, s.layout && s.layout.path, s.layout && s.layout.index ] ),
+				sections.map( ( s ) => [ s.label, s.auto, s.layout && s.layout.path, s.layout && s.layout.index ] ),
 			] );
 		}
 
@@ -388,7 +385,7 @@
 				version: VERSION,
 				url: window.location.href,
 				posts,
-				sections: sections.map( ( s ) => ( { id: s.id, label: s.label, layout: s.layout, fields: s.fields } ) ),
+				sections: sections.map( ( s ) => ( { id: s.id, label: s.label, auto: s.auto, layout: s.layout, fields: s.fields } ) ),
 			} );
 		}
 
@@ -508,7 +505,7 @@
 					send( {
 						type: 'managedFocus',
 						provider,
-						label: managed.getAttribute( 'data-okno-managed-label' ) || 'Géré dans ' + ( PROVIDERS[ provider ] || provider || 'WordPress' ),
+						label: managed.getAttribute( 'data-okno-managed-label' ) || '',
 						editUrl: managed.getAttribute( 'data-okno-edit-url' ) || '',
 					} );
 					return;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelersagency/okno-bridge",
-	"version": "1.0.0-beta.1",
+	"version": "1.0.0-beta.11",
 	"description": "Pont postMessage de l'éditeur visuel Okno : rend n'importe quel site (React, Next.js, Remix, Vite, Nuxt, SvelteKit, Astro, HTML) éditable depuis WordPress. Zéro dépendance, inactif hors de l'éditeur.",
 	"keywords": [
 		"wordpress",
@@ -28,14 +28,19 @@
 		"./react": {
 			"import": "./src/react.js"
 		},
-		"./standalone": "./dist/okno-bridge.js"
+		"./standalone": "./dist/okno-bridge.js",
+		"./content": {
+			"import": "./src/content.js"
+		}
 	},
 	"scripts": {
-		"build": "node build.js"
+		"build": "node build.js",
+		"test": "node --test"
 	},
 	"files": [
 		"src",
 		"dist",
+		"bin",
 		"README.md"
 	],
 	"sideEffects": false,
@@ -52,5 +57,11 @@
 		"react": {
 			"optional": true
 		}
+	},
+	"bin": {
+		"okno": "./bin/okno.js"
+	},
+	"engines": {
+		"node": ">=18"
 	}
 }

package/src/content.js

@@ -0,0 +1,170 @@
+/**
+ * Client de l'API de contenu Okno, pour le build du front (Node 18+).
+ *
+ *   import { loadOknoContent, indexOknoContent } from '@pixelersagency/okno-bridge/content';
+ *
+ *   const { data } = await loadOknoContent( { url: 'https://cms.example.com' } );
+ *   const content  = indexOknoContent( data );
+ *   content.byPath( '/services/audit' );
+ *
+ * Une seule requête (/wp-json/okno/v1/export), avec reprises. Chaque réponse
+ * réussie est gardée dans un instantané local : si WordPress ne répond pas
+ * (base saturée, maintenance), le build continue avec le dernier contenu
+ * connu au lieu d'échouer, et le signale. Un contenu inchangé renvoie un 304 :
+ * rien n'est retéléchargé.
+ *
+ * Le contenu vit dans WordPress et nulle part ailleurs : pas de JSON local qui
+ * le double, l'instantané n'est qu'un cache.
+ */
+
+const DEFAULT_SNAPSHOT = '.okno/content.json';
+
+/**
+ * URL de l'export depuis l'adresse du CMS (ou l'URL complète de l'endpoint).
+ *
+ * @param {string} url
+ * @returns {string}
+ */
+export function exportUrl( url ) {
+	if ( ! url ) {
+		throw new Error( 'Okno: missing CMS url (option `url` or OKNO_URL).' );
+	}
+	const clean = String( url ).replace( /\/+$/, '' );
+	if ( clean.includes( '/wp-json/' ) || clean.includes( 'rest_route=' ) ) {
+		return clean;
+	}
+	return clean + '/wp-json/okno/v1/export';
+}
+
+/**
+ * Charge tout le contenu publié.
+ *
+ * @param {object}   [options]
+ * @param {string}   [options.url]      Adresse du CMS. Défaut : process.env.OKNO_URL.
+ * @param {string}   [options.token]    Jeton (accès restreint). Défaut : process.env.OKNO_TOKEN.
+ * @param {string|false} [options.snapshot] Fichier d'instantané, false pour s'en passer.
+ * @param {'snapshot'|'error'} [options.fallback] Si WordPress ne répond pas : instantané (défaut) ou échec.
+ * @param {number}   [options.retries]  Tentatives (défaut 3).
+ * @param {number}   [options.timeout]  Délai par tentative en ms (défaut 30 000).
+ * @param {Function} [options.fetch]    fetch à utiliser (tests).
+ * @param {{warn:Function}} [options.logger]
+ * @returns {Promise<{data: object, source: 'network'|'unchanged'|'snapshot', stale: boolean}>}
+ */
+export async function loadOknoContent( options = {} ) {
+	const env = typeof process !== 'undefined' ? process.env : {};
+	const url = exportUrl( options.url || env.OKNO_URL );
+	const token = options.token ?? env.OKNO_TOKEN ?? '';
+	const snapshotPath = options.snapshot === false ? null : options.snapshot || DEFAULT_SNAPSHOT;
+	const fallback = options.fallback || 'snapshot';
+	const retries = Math.max( 1, options.retries ?? 3 );
+	const timeout = options.timeout ?? 30000;
+	const doFetch = options.fetch || globalThis.fetch;
+	const logger = options.logger || console;
+
+	const snapshot = snapshotPath ? await readSnapshot( snapshotPath ) : null;
+
+	const headers = { Accept: 'application/json' };
+	if ( token ) {
+		headers[ 'X-Okno-Token' ] = token;
+	}
+	if ( snapshot && snapshot.version ) {
+		headers[ 'If-None-Match' ] = '"' + snapshot.version + '"';
+	}
+
+	let lastError = null;
+	for ( let attempt = 1; attempt <= retries; attempt++ ) {
+		try {
+			const response = await doFetch( url, {
+				headers,
+				signal: typeof AbortSignal !== 'undefined' && AbortSignal.timeout ? AbortSignal.timeout( timeout ) : undefined,
+			} );
+
+			if ( response.status === 304 && snapshot ) {
+				return { data: snapshot, source: 'unchanged', stale: false };
+			}
+			if ( response.status === 401 || response.status === 403 ) {
+				// Inutile d'insister : le jeton est faux ou absent.
+				throw Object.assign( new Error( 'Okno: access refused (' + response.status + '). Check OKNO_TOKEN.' ), { fatal: true } );
+			}
+			if ( ! response.ok ) {
+				throw new Error( 'Okno: HTTP ' + response.status + ' on ' + url );
+			}
+
+			const data = await response.json();
+			if ( ! data || ! Array.isArray( data.items ) ) {
+				throw new Error( 'Okno: unexpected response from ' + url + ' (is Okno 1.0.0-beta.6+ active?)' );
+			}
+			if ( snapshotPath ) {
+				await writeSnapshot( snapshotPath, data );
+			}
+			return { data, source: 'network', stale: false };
+		} catch ( error ) {
+			lastError = error;
+			if ( error.fatal ) {
+				break;
+			}
+			if ( attempt < retries ) {
+				await sleep( 1000 * 2 ** ( attempt - 1 ) );
+			}
+		}
+	}
+
+	if ( snapshot && fallback === 'snapshot' && ! lastError?.fatal ) {
+		logger.warn(
+			'[okno] WordPress did not answer (' + ( lastError && lastError.message ) + '). ' +
+				'Using the snapshot from ' + ( snapshot.generated || 'an earlier build' ) + '.'
+		);
+		return { data: snapshot, source: 'snapshot', stale: true };
+	}
+	throw lastError || new Error( 'Okno: no content.' );
+}
+
+/**
+ * Index de recherche sur un export.
+ *
+ * @param {{items: Array<object>}} data
+ */
+export function indexOknoContent( data ) {
+	const items = ( data && data.items ) || [];
+	const byId = new Map();
+	const byPath = new Map();
+	for ( const item of items ) {
+		byId.set( item.id, item );
+		byPath.set( normalizePath( item.path ), item );
+	}
+	return {
+		items,
+		byId: ( id ) => byId.get( Number( id ) ) || null,
+		byPath: ( path ) => byPath.get( normalizePath( path ) ) || null,
+		byType: ( type ) => items.filter( ( item ) => item.type === type ),
+		bySlug: ( type, slug ) => items.find( ( item ) => item.type === type && item.slug === slug ) || null,
+	};
+}
+
+function normalizePath( path ) {
+	const clean = '/' + String( path || '' ).split( /[?#]/ )[ 0 ].replace( /^\/+|\/+$/g, '' );
+	return clean === '/' ? '/' : clean;
+}
+
+async function readSnapshot( file ) {
+	const fs = await import( 'node:fs/promises' );
+	try {
+		return JSON.parse( await fs.readFile( file, 'utf8' ) );
+	} catch {
+		return null;
+	}
+}
+
+async function writeSnapshot( file, data ) {
+	const fs = await import( 'node:fs/promises' );
+	const path = await import( 'node:path' );
+	await fs.mkdir( path.dirname( file ), { recursive: true } );
+	// Écriture atomique : un build interrompu ne laisse pas d'instantané tronqué.
+	const tmp = file + '.' + process.pid + '.tmp';
+	await fs.writeFile( tmp, JSON.stringify( data ) );
+	await fs.rename( tmp, file );
+}
+
+function sleep( ms ) {
+	return new Promise( ( resolve ) => setTimeout( resolve, ms ) );
+}

package/src/index.js

@@ -47,15 +47,6 @@ const CLOAK_CLASS = 'okno-cloak';
 /** Attente de stabilisation du DOM avant re-collecte (rendus successifs de React). */
 const SETTLE_MS = 120;
 
-/** Noms lisibles des fournisseurs de contenu courants. */
-const PROVIDERS = {
-	wordpress: 'WordPress',
-	menu: 'Menus WordPress',
-	acf: 'ACF',
-	woocommerce: 'WooCommerce',
-	jetengine: 'JetEngine',
-};
-
 /** Balises retirées de tout HTML injecté dans l'aperçu. */
 const BANNED_TAGS = [ 'script', 'style', 'iframe', 'object', 'embed', 'link', 'meta', 'base', 'form' ];
 
@@ -71,7 +62,7 @@ export function initOknoBridge( options ) {
 
 	const wpOrigin = options && options.wpOrigin;
 	if ( ! wpOrigin ) {
-		console.warn( '[okno] wpOrigin manquant : bridge inactif.' );
+		console.warn( '[okno] Missing wpOrigin: bridge inactive.' );
 		return;
 	}
 
@@ -109,7 +100,7 @@ export function initOknoBridge( options ) {
 	const style = document.createElement( 'style' );
 	style.textContent =
 		'.' + CLOAK_CLASS + '{opacity:0 !important}' +
-		'.' + HOVER_CLASS + '{outline:2px solid #5b5bd6 !important;outline-offset:2px;cursor:pointer !important}' +
+		'.' + HOVER_CLASS + '{outline:2px solid #86c400 !important;outline-offset:2px;cursor:pointer !important}' +
 		'.' + MANAGED_CLASS + '{outline:2px dashed #b7791f !important;outline-offset:2px}';
 	document.head.appendChild( style );
 
@@ -126,7 +117,7 @@ export function initOknoBridge( options ) {
 		cloakTimer = setTimeout( () => {
 			uncloak();
 			send( { type: 'cloakTimeout' } );
-			console.warn( '[okno] wp-admin n’a pas répondu : aperçu affiché sans hydratation.' );
+			console.warn( '[okno] wp-admin did not respond: preview shown without hydration.' );
 		}, cloakDelay );
 	}
 
@@ -148,24 +139,29 @@ export function initOknoBridge( options ) {
 		return host ? host.getAttribute( 'data-wp-post' ) : '';
 	}
 
-	function sectionLabel( el, index ) {
+	// Libellé vide = libellé par défaut, composé et traduit côté éditeur
+	// (le bridge ne connaît pas la langue de wp-admin) ; voir sectionAuto().
+	function sectionLabel( el ) {
 		const explicit = el.getAttribute( 'data-okno-section' ) || el.getAttribute( 'aria-label' );
 		if ( explicit ) {
 			return explicit;
 		}
 		const tag = el.tagName.toLowerCase();
-		if ( 'header' === tag ) {
-			return 'En-tête';
-		}
-		if ( 'footer' === tag ) {
-			return 'Pied de page';
+		if ( 'header' === tag || 'footer' === tag ) {
+			return '';
 		}
 		const heading = el.querySelector( 'h1, h2, h3' );
 		if ( heading && heading.textContent.trim() ) {
 			const text = heading.textContent.trim().replace( /\s+/g, ' ' );
 			return text.length > 48 ? text.slice( 0, 45 ) + '…' : text;
 		}
-		return 'Section ' + ( index + 1 );
+		return '';
+	}
+
+	/** Nature du libellé par défaut : 'header', 'footer' ou 'section' (numérotée). */
+	function sectionAuto( el ) {
+		const tag = el.tagName.toLowerCase();
+		return 'header' === tag || 'footer' === tag ? tag : 'section';
 	}
 
 	function sectionLayout( el ) {
@@ -216,7 +212,8 @@ export function initOknoBridge( options ) {
 				el.setAttribute( 'data-okno-sid', id );
 				nextSections.push( {
 					id,
-					label: sectionLabel( el, nextSections.length ),
+					label: sectionLabel( el ),
+					auto: sectionAuto( el ),
 					layout: sectionLayout( el ),
 					el,
 					fields: [],
@@ -257,7 +254,7 @@ export function initOknoBridge( options ) {
 		return JSON.stringify( [
 			window.location.pathname,
 			[ ...fields.keys() ].sort(),
-			sections.map( ( s ) => [ s.label, s.layout && s.layout.path, s.layout && s.layout.index ] ),
+			sections.map( ( s ) => [ s.label, s.auto, s.layout && s.layout.path, s.layout && s.layout.index ] ),
 		] );
 	}
 
@@ -371,7 +368,7 @@ export function initOknoBridge( options ) {
 			version: VERSION,
 			url: window.location.href,
 			posts,
-			sections: sections.map( ( s ) => ( { id: s.id, label: s.label, layout: s.layout, fields: s.fields } ) ),
+			sections: sections.map( ( s ) => ( { id: s.id, label: s.label, auto: s.auto, layout: s.layout, fields: s.fields } ) ),
 		} );
 	}
 
@@ -491,7 +488,7 @@ export function initOknoBridge( options ) {
 				send( {
 					type: 'managedFocus',
 					provider,
-					label: managed.getAttribute( 'data-okno-managed-label' ) || 'Géré dans ' + ( PROVIDERS[ provider ] || provider || 'WordPress' ),
+					label: managed.getAttribute( 'data-okno-managed-label' ) || '',
 					editUrl: managed.getAttribute( 'data-okno-edit-url' ) || '',
 				} );
 				return;