@valbuild/react 0.119.0 → 0.120.3

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @valbuild/react
 
+## 0.120.3
+
+### Patch Changes
+
+- Updated dependencies [[`9b96184`](https://github.com/valbuild/val/commit/9b96184cf6ad6d52a714867fb1527eeec6c776f4), [`1a2484a`](https://github.com/valbuild/val/commit/1a2484a309679bd5e963d626466c2828f74d49f8), [`71becc7`](https://github.com/valbuild/val/commit/71becc7e543432e4a57e36d54aaf803e9a447ffd)]:
+  - @valbuild/ui@0.120.3
+
+## 0.120.0
+
+### Minor Changes
+
+- [#589](https://github.com/valbuild/val/pull/589) [`c2d3c0e`](https://github.com/valbuild/val/commit/c2d3c0e6c2010c0a94c725d9dbaa618998773e8a) Thanks [@freekh](https://github.com/freekh)! - **Breaking:** `s.richtext()` options are flat.
+
+  The `style`, `block` and `inline` groups are gone — every option is a key of its
+  own. The names are unchanged, so updating a schema is only a matter of removing
+  the wrappers:
+
+  ```ts
+  // before
+  s.richtext({
+    style: { bold: true, italic: true },
+    block: { h1: true, ul: true },
+    inline: { a: true, img: s.image() },
+  });
+
+  // after
+  s.richtext({
+    bold: true,
+    italic: true,
+    h1: true,
+    ul: true,
+    a: true,
+    img: s.image(),
+  });
+  ```
+
+  The groups never carried any meaning the option names did not already have, and
+  they cost something real: an option name and its `ValRichText` theme key were
+  spelled differently (`block.h1` vs `theme.h1`), so the type that keeps a theme
+  exhaustive had to restate all thirteen options by hand. It is now a mapped type
+  over the options themselves — which also fixes an inconsistency in it: enabling
+  links with a schema (`a: s.route()`) rather than `a: true` now requires an `a`
+  key in the theme, the way `img` always has.
+
+  `ValRichText` themes were already flat and are unchanged. The serialized schema
+  that the server sends the Studio is flat too, so a project must not mix
+  `@valbuild/*` versions across this release.
+
+### Patch Changes
+
+- Updated dependencies [[`c2d3c0e`](https://github.com/valbuild/val/commit/c2d3c0e6c2010c0a94c725d9dbaa618998773e8a)]:
+  - @valbuild/core@0.120.0
+  - @valbuild/shared@0.120.0
+  - @valbuild/ui@0.120.0
+
 ## 0.119.0
 
 ### Patch Changes

package/dist/declarations/src/internal/ValRichText.d.ts

@@ -1,11 +1,23 @@
 import { RichTextNode as RichTextSourceNode, AllRichTextOptions, RichTextOptions, SelectorSource, Schema } from "@valbuild/core";
 import { CSSProperties, type JSX, ReactNode } from "react";
 import { RichText, StegaOfRichTextSource } from "../stega/index.js";
+/**
+ * The tags that are in every richtext, whatever the options say: no option
+ * turns them on, so a theme never has to mention them.
+ */
 type DefaultThemes = Partial<{
     br: string | null;
     p: string | null;
     span: string | null;
 }>;
+/**
+ * The class name of every tag or style that an option turns on. The keys are
+ * the option names themselves, which is what makes a theme exhaustive by
+ * construction: enable `italic` in the schema and `italic` becomes a required
+ * key here.
+ *
+ * `li` is the one key without an option of its own - it comes with `ul`/`ol`.
+ */
 type OptionalFields = {
     h1: string | null;
     h2: string | null;
@@ -22,7 +34,18 @@ type OptionalFields = {
     bold: string | null;
     italic: string | null;
 };
-type ThemeOptions<O extends RichTextOptions = AllRichTextOptions> = DefaultThemes & Pick<OptionalFields, (NonNullable<O["inline"]>["img"] extends true | Schema<SelectorSource> ? "img" : never) | (NonNullable<O["inline"]>["a"] extends true ? "a" : never) | (NonNullable<O["block"]>["ul"] extends true ? "ul" | "li" : never) | (NonNullable<O["block"]>["ol"] extends true ? "ol" | "li" : never) | (NonNullable<O["style"]>["lineThrough"] extends true ? "lineThrough" : never) | (NonNullable<O["style"]>["bold"] extends true ? "bold" : never) | (NonNullable<O["style"]>["italic"] extends true ? "italic" : never) | (NonNullable<O["block"]>["h1"] extends true ? "h1" : never) | (NonNullable<O["block"]>["h2"] extends true ? "h2" : never) | (NonNullable<O["block"]>["h3"] extends true ? "h3" : never) | (NonNullable<O["block"]>["h4"] extends true ? "h4" : never) | (NonNullable<O["block"]>["h5"] extends true ? "h5" : never) | (NonNullable<O["block"]>["h6"] extends true ? "h6" : never)>;
+/** `a` and `img` are on when they carry a schema, not only when they are `true`. */
+type IsEnabled<T> = T extends true ? true : T extends Schema<SelectorSource> ? true : false;
+/** Every option name `O` turns on, plus `li` when it has a list. */
+type EnabledThemeKeys<O extends RichTextOptions> = {
+    [K in keyof OptionalFields & keyof RichTextOptions]: IsEnabled<O[K]> extends true ? K : never;
+}[keyof OptionalFields & keyof RichTextOptions] | (IsEnabled<O["ul"]> extends true ? "li" : IsEnabled<O["ol"]> extends true ? "li" : never);
+/**
+ * The `theme` a `ValRichText` accepts for a given set of richtext options: a
+ * class name for every tag or style those options turn on, and nothing more.
+ * Every key is required, so forgetting one is a type error naming it.
+ */
+export type ThemeOptions<O extends RichTextOptions = AllRichTextOptions> = DefaultThemes & Pick<OptionalFields, EnabledThemeKeys<O>>;
 type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>>;
 /**
  * Render RichText using JSX
@@ -49,12 +72,8 @@ type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>
  *   <ValRichText
  *     content={content.myRichText}
  *     theme={{
- *        block: {
- *          h1: 'text-4xl font-bold',
- *        },
- *        inline: {
- *          img: 'rounded',
- *        }
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {

package/dist/{raw-c3e48d09.worker.esm.js → raw-0c1fab1c.worker.esm.js}

@@ -214,7 +214,7 @@ function resolveLiteralUnionSchema(source, schema) {
 /**
  * The image schema of a richtext's inline images.
  *
- * `inline.img` serializes as `true` when the author did not pass a schema, so
+ * `img` serializes as `true` when the author did not pass a schema, so
  * there is nothing to hand down; a bare `{type: "image"}` is enough, since all
  * the media branch needs is to know that it is looking at media.
  */
@@ -223,7 +223,7 @@ function inlineImageSchemaOf(schema) {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) !== "richtext") {
     return undefined;
   }
-  var img = (_schema$options = schema.options) === null || _schema$options === void 0 || (_schema$options = _schema$options.inline) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
+  var img = (_schema$options = schema.options) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
   if (!img) {
     return undefined;
   }

package/dist/{raw-97c845bb.cjs.dev.js → raw-44cf5d7f.cjs.dev.js}

@@ -216,7 +216,7 @@ function resolveLiteralUnionSchema(source, schema) {
 /**
  * The image schema of a richtext's inline images.
  *
- * `inline.img` serializes as `true` when the author did not pass a schema, so
+ * `img` serializes as `true` when the author did not pass a schema, so
  * there is nothing to hand down; a bare `{type: "image"}` is enough, since all
  * the media branch needs is to know that it is looking at media.
  */
@@ -225,7 +225,7 @@ function inlineImageSchemaOf(schema) {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) !== "richtext") {
     return undefined;
   }
-  var img = (_schema$options = schema.options) === null || _schema$options === void 0 || (_schema$options = _schema$options.inline) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
+  var img = (_schema$options = schema.options) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
   if (!img) {
     return undefined;
   }

package/dist/{raw-d07598da.browser.esm.js → raw-76ccee5c.browser.esm.js}

@@ -214,7 +214,7 @@ function resolveLiteralUnionSchema(source, schema) {
 /**
  * The image schema of a richtext's inline images.
  *
- * `inline.img` serializes as `true` when the author did not pass a schema, so
+ * `img` serializes as `true` when the author did not pass a schema, so
  * there is nothing to hand down; a bare `{type: "image"}` is enough, since all
  * the media branch needs is to know that it is looking at media.
  */
@@ -223,7 +223,7 @@ function inlineImageSchemaOf(schema) {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) !== "richtext") {
     return undefined;
   }
-  var img = (_schema$options = schema.options) === null || _schema$options === void 0 || (_schema$options = _schema$options.inline) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
+  var img = (_schema$options = schema.options) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
   if (!img) {
     return undefined;
   }

package/dist/{raw-e467df42.esm.js → raw-8453ef90.esm.js}

@@ -214,7 +214,7 @@ function resolveLiteralUnionSchema(source, schema) {
 /**
  * The image schema of a richtext's inline images.
  *
- * `inline.img` serializes as `true` when the author did not pass a schema, so
+ * `img` serializes as `true` when the author did not pass a schema, so
  * there is nothing to hand down; a bare `{type: "image"}` is enough, since all
  * the media branch needs is to know that it is looking at media.
  */
@@ -223,7 +223,7 @@ function inlineImageSchemaOf(schema) {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) !== "richtext") {
     return undefined;
   }
-  var img = (_schema$options = schema.options) === null || _schema$options === void 0 || (_schema$options = _schema$options.inline) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
+  var img = (_schema$options = schema.options) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
   if (!img) {
     return undefined;
   }

package/dist/{raw-cb20d03c.cjs.prod.js → raw-c75f7272.cjs.prod.js}

@@ -216,7 +216,7 @@ function resolveLiteralUnionSchema(source, schema) {
 /**
  * The image schema of a richtext's inline images.
  *
- * `inline.img` serializes as `true` when the author did not pass a schema, so
+ * `img` serializes as `true` when the author did not pass a schema, so
  * there is nothing to hand down; a bare `{type: "image"}` is enough, since all
  * the media branch needs is to know that it is looking at media.
  */
@@ -225,7 +225,7 @@ function inlineImageSchemaOf(schema) {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) !== "richtext") {
     return undefined;
   }
-  var img = (_schema$options = schema.options) === null || _schema$options === void 0 || (_schema$options = _schema$options.inline) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
+  var img = (_schema$options = schema.options) === null || _schema$options === void 0 ? void 0 : _schema$options.img;
   if (!img) {
     return undefined;
   }

package/internal/dist/valbuild-react-internal.browser.esm.js

@@ -1,4 +1,4 @@
-import { d as _objectSpread2, r as raw, c as attrs, e as _toConsumableArray } from '../../dist/raw-d07598da.browser.esm.js';
+import { d as _objectSpread2, r as raw, c as attrs, e as _toConsumableArray } from '../../dist/raw-76ccee5c.browser.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import '../../dist/slicedToArray-9cce0d9f.browser.esm.js';
@@ -53,12 +53,8 @@ var _excluded = ["className", "style", "theme", "transform"];
  *   <ValRichText
  *     content={content.myRichText}
  *     theme={{
- *        block: {
- *          h1: 'text-4xl font-bold',
- *        },
- *        inline: {
- *          img: 'rounded',
- *        }
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {

package/internal/dist/valbuild-react-internal.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var raw = require('../../dist/raw-97c845bb.cjs.dev.js');
+var raw = require('../../dist/raw-44cf5d7f.cjs.dev.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 require('../../dist/slicedToArray-e9e8e991.cjs.dev.js');
@@ -61,12 +61,8 @@ var _excluded = ["className", "style", "theme", "transform"];
  *   <ValRichText
  *     content={content.myRichText}
  *     theme={{
- *        block: {
- *          h1: 'text-4xl font-bold',
- *        },
- *        inline: {
- *          img: 'rounded',
- *        }
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {

package/internal/dist/valbuild-react-internal.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var raw = require('../../dist/raw-cb20d03c.cjs.prod.js');
+var raw = require('../../dist/raw-c75f7272.cjs.prod.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 require('../../dist/slicedToArray-86004d59.cjs.prod.js');
@@ -61,12 +61,8 @@ var _excluded = ["className", "style", "theme", "transform"];
  *   <ValRichText
  *     content={content.myRichText}
  *     theme={{
- *        block: {
- *          h1: 'text-4xl font-bold',
- *        },
- *        inline: {
- *          img: 'rounded',
- *        }
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {

package/internal/dist/valbuild-react-internal.esm.js

@@ -1,4 +1,4 @@
-import { d as _objectSpread2, r as raw, c as attrs, e as _toConsumableArray } from '../../dist/raw-e467df42.esm.js';
+import { d as _objectSpread2, r as raw, c as attrs, e as _toConsumableArray } from '../../dist/raw-8453ef90.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import '../../dist/slicedToArray-0c0a3b4a.esm.js';
@@ -53,12 +53,8 @@ var _excluded = ["className", "style", "theme", "transform"];
  *   <ValRichText
  *     content={content.myRichText}
  *     theme={{
- *        block: {
- *          h1: 'text-4xl font-bold',
- *        },
- *        inline: {
- *          img: 'rounded',
- *        }
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {

package/internal/dist/valbuild-react-internal.worker.esm.js

@@ -1,4 +1,4 @@
-import { d as _objectSpread2, r as raw, c as attrs, e as _toConsumableArray } from '../../dist/raw-c3e48d09.worker.esm.js';
+import { d as _objectSpread2, r as raw, c as attrs, e as _toConsumableArray } from '../../dist/raw-0c1fab1c.worker.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import '../../dist/slicedToArray-7d0170b6.worker.esm.js';
@@ -53,12 +53,8 @@ var _excluded = ["className", "style", "theme", "transform"];
  *   <ValRichText
  *     content={content.myRichText}
  *     theme={{
- *        block: {
- *          h1: 'text-4xl font-bold',
- *        },
- *        inline: {
- *          img: 'rounded',
- *        }
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.119.0",
+  "version": "0.120.3",
   "private": false,
   "description": "Val - React internal helpers",
   "repository": {
@@ -11,9 +11,9 @@
   "dependencies": {
     "@vercel/stega": "^1.1.0",
     "base64-arraybuffer": "^1.0.2",
-    "@valbuild/core": "0.117.0",
-    "@valbuild/ui": "0.119.0",
-    "@valbuild/shared": "0.118.0"
+    "@valbuild/ui": "0.120.3",
+    "@valbuild/core": "0.120.0",
+    "@valbuild/shared": "0.120.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",

package/stega/dist/valbuild-react-stega.browser.esm.js

@@ -1,6 +1,6 @@
 import { a as _typeof, _ as _slicedToArray } from '../../dist/slicedToArray-9cce0d9f.browser.esm.js';
-import { s as stegaDecodeStrings, _ as _createForOfIteratorHelper } from '../../dist/raw-d07598da.browser.esm.js';
-export { c as attrs, g as getModuleIds, r as raw, b as stegaClean, s as stegaDecodeStrings, a as stegaEncode } from '../../dist/raw-d07598da.browser.esm.js';
+import { s as stegaDecodeStrings, _ as _createForOfIteratorHelper } from '../../dist/raw-76ccee5c.browser.esm.js';
+export { c as attrs, g as getModuleIds, r as raw, b as stegaClean, s as stegaDecodeStrings, a as stegaEncode } from '../../dist/raw-76ccee5c.browser.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
 import React from 'react';

package/stega/dist/valbuild-react-stega.cjs.dev.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-e9e8e991.cjs.dev.js');
-var raw = require('../../dist/raw-97c845bb.cjs.dev.js');
+var raw = require('../../dist/raw-44cf5d7f.cjs.dev.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
 var React = require('react');

package/stega/dist/valbuild-react-stega.cjs.prod.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-86004d59.cjs.prod.js');
-var raw = require('../../dist/raw-cb20d03c.cjs.prod.js');
+var raw = require('../../dist/raw-c75f7272.cjs.prod.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
 var React = require('react');

package/stega/dist/valbuild-react-stega.esm.js

@@ -1,6 +1,6 @@
 import { a as _typeof, _ as _slicedToArray } from '../../dist/slicedToArray-0c0a3b4a.esm.js';
-import { s as stegaDecodeStrings, _ as _createForOfIteratorHelper } from '../../dist/raw-e467df42.esm.js';
-export { c as attrs, g as getModuleIds, r as raw, b as stegaClean, s as stegaDecodeStrings, a as stegaEncode } from '../../dist/raw-e467df42.esm.js';
+import { s as stegaDecodeStrings, _ as _createForOfIteratorHelper } from '../../dist/raw-8453ef90.esm.js';
+export { c as attrs, g as getModuleIds, r as raw, b as stegaClean, s as stegaDecodeStrings, a as stegaEncode } from '../../dist/raw-8453ef90.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
 import React from 'react';

package/stega/dist/valbuild-react-stega.worker.esm.js

@@ -1,6 +1,6 @@
 import { a as _typeof, _ as _slicedToArray } from '../../dist/slicedToArray-7d0170b6.worker.esm.js';
-import { s as stegaDecodeStrings, _ as _createForOfIteratorHelper } from '../../dist/raw-c3e48d09.worker.esm.js';
-export { c as attrs, g as getModuleIds, r as raw, b as stegaClean, s as stegaDecodeStrings, a as stegaEncode } from '../../dist/raw-c3e48d09.worker.esm.js';
+import { s as stegaDecodeStrings, _ as _createForOfIteratorHelper } from '../../dist/raw-0c1fab1c.worker.esm.js';
+export { c as attrs, g as getModuleIds, r as raw, b as stegaClean, s as stegaDecodeStrings, a as stegaEncode } from '../../dist/raw-0c1fab1c.worker.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
 import React from 'react';