origam 2.34.0 → 2.35.1

package/CHANGELOG.md

@@ -18,6 +18,24 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.35.1] - 2026-10-19
+
+### Fixed — `OrigamCode` : un 2e bloc monté pendant un import de `shiki` en échec restait vide (#1189)
+
+Quand `shiki` n'est pas résolvable, deux `<origam-code>` montés dans le même tick : le premier s'affichait en texte brut, le second restait **vide** (zone défilante de hauteur 0) avec un rejet de promesse non capturé. `loadHighlighter()` ne renvoyait la promesse munie de son repli qu'au premier appelant ; un appelant concurrent recevait la promesse brute, qui rejetait, et `rebuild()` n'avait qu'un `try/finally`.
+
+- `loadHighlighter()` renvoie désormais la même promesse, déjà munie de son repli (`null` → code brut), à tous les appelants.
+- `rebuild()` capture en plus un éventuel rejet et peint le code en clair : aucun bloc ne reste vide.
+- Prouvé par `packages/tests/TU/components/Code/OrigamCode-concurrent-load-failure.spec.ts` (rouge sur le parent, vert après).
+
+## [2.35.0] - 2026-10-19
+
+### Added — `OrigamCode` : `lang` ouvert, `createOrigam({ code: { langs } })` (#1180)
+
+- `lang` n'est plus limité aux 14 grammaires de `SUPPORTED_LANGS` quand un `code.highlighter` est fourni : la valeur est transmise telle quelle au highlighter, qui sait seul ce qu'il peut servir. S'il échoue, le bloc retombe sur `plaintext` (le `try/catch` existant autour de `codeToHtml`), avec un avertissement dev-only, une fois par langage. Avant, `resolveLang()` repliait tout `lang` inconnu sur `plaintext` avant de consulter le highlighter, donc `dockerfile` ne pouvait jamais être servi.
+- Nouvelle option `createOrigam({ code: { langs } })` : liste passée à `createHighlighter` (défaut : `SUPPORTED_LANGS`). Avec le highlighter intégré, un `lang` présent dans `langs` est accepté.
+- Typage : la prop `lang` devient `TCodeLangOpen` (`TCodeLang | (string & {})`), l'autocomplétion des 14 valeurs est conservée. `TCodeLang` reste la liste fermée.
+
 ## [2.34.0] - 2026-10-19
 
 ### Added — `OrigamCommandPalette` : prop `filter` pour afficher des résultats classés en externe (#1184)

package/dist/src/components/Code/OrigamCode.vue

@@ -266,6 +266,13 @@ async function rebuild() {
     const html = await highlight(formattedCode.value, props.lang);
     if (token !== _renderToken) return;
     paintIntoDom(html);
+  } catch (err) {
+    console.warn("[origam] OrigamCode: highlighting failed \u2014 rendering plain code.", err);
+    if (token === _renderToken) {
+      const plain = document.createElement("div");
+      plain.textContent = formattedCode.value;
+      paintIntoDom(plain.innerHTML);
+    }
   } finally {
     if (token === _renderToken) isHighlighting.value = false;
   }

package/dist/src/composables/Code/code.composable.cjs

@@ -34,19 +34,19 @@ function lruSet(key, value) {
   }
   _cache.set(key, value);
 }
-async function loadHighlighter(loader) {
+async function loadHighlighter(loader, langs) {
   if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
-  _highlighterPromise = (async () => {
+  const raw = (async () => {
     const shiki = loader ? await loader() : await Promise.resolve().then(() => require("shiki"));
     const highlighter = await shiki.createHighlighter({
       themes: [_code.CODE_LIGHT_THEME, _code.CODE_DARK_THEME],
-      langs: [..._code.SUPPORTED_LANGS]
+      langs: [...(langs ?? _code.SUPPORTED_LANGS)]
     });
     _highlighterReady = true;
     return highlighter;
   })();
-  return _highlighterPromise.catch(err => {
+  _highlighterPromise = raw.catch(err => {
     _highlighterUnavailable = true;
     _highlighterPromise = null;
     if (!_unavailableWarned) {
@@ -55,23 +55,28 @@ async function loadHighlighter(loader) {
     }
     return null;
   });
+  return _highlighterPromise;
 }
-function resolveLang(lang) {
+function resolveLang(lang, hasCustomHighlighter, extraLangs) {
+  if (hasCustomHighlighter) return lang;
   if (_code.SUPPORTED_LANGS.includes(lang)) return lang;
+  if (extraLangs?.includes(lang)) return lang;
   if (!_unsupportedLangWarned.has(lang)) {
     _unsupportedLangWarned.add(lang);
-    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${_code.SUPPORTED_LANGS.join(", ")}.`);
+    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${[..._code.SUPPORTED_LANGS, ...(extraLangs ?? [])].join(", ")}. Add it with createOrigam({ code: { langs } }) or supply a code.highlighter.`);
   }
   return _enums.CODE_LANG.PLAINTEXT;
 }
 function useCode() {
-  const highlighterLoader = (0, _vue.inject)(_code.ORIGAM_CODE_KEY)?.highlighter;
+  const codeOptions = (0, _vue.inject)(_code.ORIGAM_CODE_KEY);
+  const highlighterLoader = codeOptions?.highlighter;
+  const customLangs = codeOptions?.langs;
   async function highlight(code, lang) {
-    const resolvedLang = resolveLang(lang);
+    const resolvedLang = resolveLang(lang, highlighterLoader !== void 0, customLangs);
     const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
-    const highlighter = await loadHighlighter(highlighterLoader);
+    const highlighter = await loadHighlighter(highlighterLoader, customLangs);
     if (!highlighter) {
       const plain = escapeHtml(code);
       lruSet(key, plain);
@@ -89,7 +94,10 @@ function useCode() {
     try {
       html = highlighter.codeToHtml(code, opts);
     } catch (err) {
-      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      if (process.env?.DEV && !_unsupportedLangWarned.has(resolvedLang)) {
+        _unsupportedLangWarned.add(resolvedLang);
+        console.warn(`[origam] OrigamCode: shiki could not tokenise lang="${resolvedLang}", falling back to plaintext.`, err);
+      }
       html = highlighter.codeToHtml(code, {
         ...opts,
         lang: _enums.CODE_LANG.PLAINTEXT
@@ -99,7 +107,7 @@ function useCode() {
     return html;
   }
   async function prime() {
-    await loadHighlighter(highlighterLoader);
+    await loadHighlighter(highlighterLoader, customLangs);
   }
   function isReady() {
     return _highlighterReady;

package/dist/src/composables/Code/code.composable.js

@@ -27,22 +27,22 @@ function lruSet(key, value) {
   }
   _cache.set(key, value);
 }
-async function loadHighlighter(loader) {
+async function loadHighlighter(loader, langs) {
   if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
-  _highlighterPromise = (async () => {
+  const raw = (async () => {
     const shiki = loader ? await loader() : await import(
       /* @vite-ignore */
       "shiki"
     );
     const highlighter = await shiki.createHighlighter({
       themes: [LIGHT_THEME, DARK_THEME],
-      langs: [...SUPPORTED_LANGS]
+      langs: [...langs ?? SUPPORTED_LANGS]
     });
     _highlighterReady = true;
     return highlighter;
   })();
-  return _highlighterPromise.catch((err) => {
+  _highlighterPromise = raw.catch((err) => {
     _highlighterUnavailable = true;
     _highlighterPromise = null;
     if (!_unavailableWarned) {
@@ -54,25 +54,30 @@ async function loadHighlighter(loader) {
     }
     return null;
   });
+  return _highlighterPromise;
 }
-function resolveLang(lang) {
+function resolveLang(lang, hasCustomHighlighter, extraLangs) {
+  if (hasCustomHighlighter) return lang;
   if (SUPPORTED_LANGS.includes(lang)) return lang;
+  if (extraLangs?.includes(lang)) return lang;
   if (!_unsupportedLangWarned.has(lang)) {
     _unsupportedLangWarned.add(lang);
     console.warn(
-      `[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${CODE_LANG.PLAINTEXT}". Supported: ${SUPPORTED_LANGS.join(", ")}.`
+      `[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${CODE_LANG.PLAINTEXT}". Supported: ${[...SUPPORTED_LANGS, ...extraLangs ?? []].join(", ")}. Add it with createOrigam({ code: { langs } }) or supply a code.highlighter.`
     );
   }
   return CODE_LANG.PLAINTEXT;
 }
 export function useCode() {
-  const highlighterLoader = inject(ORIGAM_CODE_KEY)?.highlighter;
+  const codeOptions = inject(ORIGAM_CODE_KEY);
+  const highlighterLoader = codeOptions?.highlighter;
+  const customLangs = codeOptions?.langs;
   async function highlight(code, lang) {
-    const resolvedLang = resolveLang(lang);
+    const resolvedLang = resolveLang(lang, highlighterLoader !== void 0, customLangs);
     const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
-    const highlighter = await loadHighlighter(highlighterLoader);
+    const highlighter = await loadHighlighter(highlighterLoader, customLangs);
     if (!highlighter) {
       const plain = escapeHtml(code);
       lruSet(key, plain);
@@ -87,14 +92,17 @@ export function useCode() {
     try {
       html = highlighter.codeToHtml(code, opts);
     } catch (err) {
-      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      if (import.meta.env?.DEV && !_unsupportedLangWarned.has(resolvedLang)) {
+        _unsupportedLangWarned.add(resolvedLang);
+        console.warn(`[origam] OrigamCode: shiki could not tokenise lang="${resolvedLang}", falling back to plaintext.`, err);
+      }
       html = highlighter.codeToHtml(code, { ...opts, lang: CODE_LANG.PLAINTEXT });
     }
     lruSet(key, html);
     return html;
   }
   async function prime() {
-    await loadHighlighter(highlighterLoader);
+    await loadHighlighter(highlighterLoader, customLangs);
   }
   function isReady() {
     return _highlighterReady;

package/dist/src/interfaces/Code/code.interface.d.ts

@@ -7,7 +7,7 @@ import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
-import type { TCodeLang, TShikiHighlighterLoader } from '../../types/Code/code.type';
+import type { TCodeLangOpen, TShikiHighlighterLoader } from '../../types/Code/code.type';
 /**
  * Props for `<OrigamCode>` — a shiki-powered code block with line numbers,
  * line highlighting, copy button and theme awareness.
@@ -26,11 +26,15 @@ export interface ICodeProps extends ICommonsComponentProps, ITagProps, IBorderPr
      */
     code?: string;
     /**
-     * Language grammar to apply. One of the values in `SUPPORTED_LANGS`.
-     * Unknown values fall back to `plaintext` (with a one-shot console
-     * warning).
+     * Language grammar to apply. Autocompletes the 14 values of
+     * `SUPPORTED_LANGS` but accepts any string (#1180). Without a custom
+     * `code.highlighter`, a value outside `SUPPORTED_LANGS` and outside
+     * `createOrigam({ code: { langs } })` falls back to `plaintext` (one-shot
+     * console warning). With a custom `code.highlighter`, the value is handed
+     * to it as-is; if it cannot tokenise it, the block falls back to
+     * `plaintext` (dev-only warning).
      */
-    lang?: TCodeLang;
+    lang?: TCodeLangOpen;
     /**
      * Show a left gutter with line numbers. Pure CSS — uses a CSS counter
      * incremented per `.origam-code__row`, no JS layout work.
@@ -90,7 +94,7 @@ export interface ICodeProps extends ICommonsComponentProps, ITagProps, IBorderPr
  *
  * @description
  * App-level config for `<OrigamCode>`, passed via `createOrigam({ code })`.
- * Today it carries a single knob — `highlighter` — but it is its own
+ * Today it carries two knobs — `highlighter` and `langs` — and it is its own
  * interface (rather than a bare function on `IOrigamOptions`) so a future
  * `OrigamCode`-wide setting (e.g. a default theme pair) has somewhere to
  * land without another breaking shape change.
@@ -116,6 +120,23 @@ export interface ICodeProps extends ICommonsComponentProps, ITagProps, IBorderPr
  ********************************************************/
 export interface ICodeOptions {
     highlighter?: TShikiHighlighterLoader;
+    /*********************************************************
+     * langs
+     *
+     * @description
+     * Grammars handed to `createHighlighter({ langs })`. Default:
+     * `SUPPORTED_LANGS` (the 14 bundled ones). Replaces the default list when
+     * set — include `plaintext` if you rely on it.
+     *
+     * @description
+     * With the built-in highlighter, a `lang` listed here is accepted instead
+     * of being folded onto `plaintext`; with a custom `highlighter`, `lang` is
+     * never filtered, and this only controls what is loaded up front.
+     *
+     * @description
+     * Like `highlighter`, read once (first `<OrigamCode>` to mount wins).
+     ********************************************************/
+    langs?: ReadonlyArray<string>;
 }
 /** Emits fired by `<OrigamCode>` — copy-to-clipboard confirmation. */
 export interface ICodeEmits {
@@ -127,7 +148,7 @@ export interface ICodeSlots {
      *  consumer can rebuild the default filename/lang badge + copy button. */
     header?: (data: {
         filename: string | undefined;
-        langName: TCodeLang | undefined;
+        langName: TCodeLangOpen | undefined;
         copy: () => Promise<void>;
         copied: boolean;
     }) => any;
@@ -146,7 +167,7 @@ export interface IUseCodeReturn {
      * underlying shiki highlighter has loaded the requested language /
      * theme (lazy; ~200 ms cold, instant on subsequent calls).
      */
-    highlight(code: string, lang: TCodeLang): Promise<string>;
+    highlight(code: string, lang: TCodeLangOpen): Promise<string>;
     /**
      * Force the highlighter to load. Useful for stories / tests that want
      * to warm the cache before mounting consumers.

package/dist/src/types/Code/code.type.d.ts

@@ -1,7 +1,21 @@
 import { CODE_LANG, CODE_THEME } from '../../enums/Code/code.enum';
 import OrigamCode from '../../components/Code/OrigamCode.vue';
+import type { TAnyString } from '../Commons/commons.type';
 export type TOrigamCode = InstanceType<typeof OrigamCode>;
 export type TCodeLang = `${CODE_LANG}`;
+/*********************************************************
+ * TCodeLangOpen
+ *
+ * @description
+ * Open form of `TCodeLang` accepted by the `lang` prop (#1180): the 14 bundled
+ * grammars keep their autocompletion, any other string is allowed because a
+ * `createOrigam({ code: { highlighter, langs } })` highlighter can serve it.
+ *
+ * @description
+ * `TAnyString` (Commons) stops the union from collapsing to plain `string`,
+ * and avoids the empty-object intersection Sonar flags (#771).
+ ********************************************************/
+export type TCodeLangOpen = TCodeLang | TAnyString;
 export type TCodeTheme = `${CODE_THEME}`;
 /**
  * The slice of shiki's highlighter API that `useCode()` actually calls.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.34.0",
+  "version": "2.35.1",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [