@recipe-book/react 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @recipe-book/react
 
+## 0.1.2
+
+### Patch Changes
+
+- `docsUrl`, and the link at the end of every error message, now end with a slash, such as `https://recipe-book.siraj.page/errors/unknown_unit/`, so they open the page without a redirect. ([#1377](https://github.com/SirajChokshi/recipe-book/pull/1377) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+- `RecipeBookError` now sets `cause` from its options in browsers whose built-in `Error` ignores them. ([#1217](https://github.com/SirajChokshi/recipe-book/pull/1217) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - In Chrome and Edge before 93, Firefox before 91, and Safari before 15, `error.cause` was `undefined`.
+
+- The TSDoc for core's conversion, format, and resolve functions now says which inputs pass through an error thrown by a getter or proxy. ([#1368](https://github.com/SirajChokshi/recipe-book/pull/1368) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - The input and options: `resolveIngredient`, `formatQuantity`, `formatQuantityToParts`, `formatIngredient`, `formatServings`, `formatYield`, and `formatTemperature`.
+  - The input: `scaleQuantity`, `convert`, `toSystem`, and `convertTemperature`.
+  - The options: `segmentStepText`, `formatDuration`, and `toJsonLd`.
+
+- Add `isRecipeValidationError`, which checks whether a caught value is a `RecipeValidationError` and narrows its type, so `issues` needs no cast. ([#1266](https://github.com/SirajChokshi/recipe-book/pull/1266) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - It checks the error's `name`, `code`, and `issues` rather than using `instanceof`, so it also recognizes errors from another installed copy of `@recipe-book/core`, as `isRecipeBookError` does.
+
+- Add `ParsedRecipe`, the same type as `Recipe` under another name. ([#924](https://github.com/SirajChokshi/recipe-book/pull/924) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - A file that imports `@recipe-book/react` as `Recipe` can import `ParsedRecipe` from `@recipe-book/react/core` instead of renaming the type with `import type { Recipe as ParsedRecipe }`.
+
+- Development warnings and React DevTools name each part as you write it, such as `Recipe.Step`, instead of the name the published build gave it, such as `ForwardRef(Step2)`. ([#1092](https://github.com/SirajChokshi/recipe-book/pull/1092) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - Component stacks in React 18 and 19 use the same names, such as `at Recipe.Step` instead of `at Step2`. The provider is `Recipe.RecipeBookProvider`.
+  - Warnings about an `asChild` child, such as one that can't take a ref or children without keys, name `Slot` instead of `ForwardRef(Slot2)`.
+  - Production builds leave the names out.
+
+- `parseRecipe` and `recipeSchema` now list `duplicate_id` warnings in input order when a repeated section id follows repeated item ids in earlier sections. ([#1221](https://github.com/SirajChokshi/recipe-book/pull/1221) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - Before, when no other issue came between them, the section's warning came before the items' warnings.
+
+- The TSDoc for `ResolvedRecipe.servings` and `yield` now says that at a scale within 1e-9 of 1, including one the `servings` option sets, they're the authored servings and yield. ([#1368](https://github.com/SirajChokshi/recipe-book/pull/1368) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+- In development, the summary `<Recipe.Root>` logs before its `parse` warnings now links the Issue codes table, which gives the fix for each warning's code. ([#954](https://github.com/SirajChokshi/recipe-book/pull/954) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - The summary now reads: `Recipe Book: "Buttermilk pancakes" has 1 warning. It still renders. https://recipe-book.siraj.page/errors/#issue-codes gives the fix for each warning's code.`
+  - Only the text changes, and only in development. If a test matches the old summary, update it.
+
+- On React 18, a part with `asChild` no longer makes React warn that function components cannot be given refs when its child is a function component and you pass the part no `ref`. ([#1329](https://github.com/SirajChokshi/recipe-book/pull/1329) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+- The arrow keys in `<Recipe.SystemToggle>` now follow the toggle's computed CSS `direction` instead of the nearest `dir` attribute, so Left Arrow and Right Arrow also swap under CSS `direction: rtl` and under `dir="auto"` on right-to-left text, no longer swap under CSS `direction: ltr` inside `dir="rtl"`, and no longer depend on the focused option's own `dir`. ([#1339](https://github.com/SirajChokshi/recipe-book/pull/1339) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+- `segmentStepText` no longer reads a "-" right after a number with no unit of its own, or with only a degree sign, as a minus sign. ([#919](https://github.com/SirajChokshi/recipe-book/pull/919) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - In `Bake at 350 -375°F.` and `Bake at 350° -375°F.`, it read the second end as a negative temperature, −375 °F. Such a range now stays text, as `350–375°F` does.
+  - After a unit, as in `350°F -375°F`, the "-" is still a minus sign.
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -49,7 +49,7 @@ export function Pancakes() {
 }
 ```
 
-Parse where you load the recipe, such as in a Server Component or at build time, so the parser stays out of the browser bundle. [Render a recipe on the server](https://recipe-book.siraj.page/guides/render-a-recipe-on-the-server/) shows how with Next.js and React Router. With Next.js, and with Vite when each page loads as its own chunk, such as a lazy route, a page that parses in the browser with `import { parseRecipe } from '@recipe-book/react/core'` doesn't put the parser on other pages. Otherwise, such as with esbuild's code splitting or with Vite without lazy routes, parse on the server on every page: one page that parses in the browser can put the parser on other pages. Calling `import('@recipe-book/react/core')` can also download it, as [Why parse on the server](https://recipe-book.siraj.page/guides/render-a-recipe-in-react/#why-parse-on-the-server) describes.
+Parse where you load the recipe, such as in a Server Component or at build time, so the parser stays out of the browser bundle. [Render a recipe on the server](https://recipe-book.siraj.page/guides/render-a-recipe-on-the-server/) shows how with the Next.js App Router and Pages Router, React Router, Astro, and your own server. With Next.js, and with Vite when each page loads as its own chunk, such as a lazy route, a page that parses in the browser with `import { parseRecipe } from '@recipe-book/react/core'` doesn't put the parser on other pages. Otherwise, such as with esbuild's code splitting or with Vite without lazy routes, parse on the server on every page: one page that parses in the browser can put the parser on other pages. Calling `import('@recipe-book/react/core')` can also download it, as [Why parse on the server](https://recipe-book.siraj.page/guides/render-a-recipe-in-react/#why-parse-on-the-server) describes.
 
 ## Documentation
 

package/dist/index.cjs

@@ -70,6 +70,13 @@ module.exports = __toCommonJS(index_exports);
 var import_core3 = require("@recipe-book/core");
 var import_react4 = require("react");
 
+// src/display-name.ts
+function setDisplayName(component, name) {
+  const target = component;
+  target.displayName = name;
+  Object.defineProperty(target.render ?? component, "name", { value: name });
+}
+
 // src/labels.ts
 var defaultLabels = {
   servings: "Servings",
@@ -391,6 +398,9 @@ function useRecipe() {
     "useRecipe() must be called inside <Recipe.Root>. To use recipe state without a Root, call useRecipeState()."
   );
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(RecipeBookProvider, "Recipe.RecipeBookProvider");
+}
 
 // src/parts/image.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -412,6 +422,9 @@ var Image = /* @__PURE__ */ (0, import_react.forwardRef)(function Image2({
     }
   );
 });
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Image, "Recipe.Image");
+}
 
 // src/parts/ingredients.tsx
 var import_react12 = require("react");
@@ -456,7 +469,7 @@ var Slot = /* @__PURE__ */ (0, import_react.forwardRef)(function Slot2({ childre
     }
   }
   const childRef = Object.getOwnPropertyDescriptor(child.props, "ref")?.value ?? child.ref;
-  merged.ref = (0, import_react7.useCallback)(
+  const mergedRef = (0, import_react7.useCallback)(
     (node) => {
       const refs = [ref, childRef];
       const cleanups = refs.map((each) => setRef(each, node));
@@ -474,6 +487,9 @@ var Slot = /* @__PURE__ */ (0, import_react.forwardRef)(function Slot2({ childre
     },
     [ref, childRef]
   );
+  if (ref != null) {
+    merged.ref = mergedRef;
+  }
   return (0, import_react.cloneElement)(child, merged);
 });
 function setRef(ref, node) {
@@ -502,6 +518,9 @@ function describeChildren(children) {
 function isEmpty(children) {
   return children == null || typeof children === "boolean";
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Slot, "Slot");
+}
 
 // src/use-format-ingredient.ts
 var import_core4 = require("@recipe-book/core");
@@ -636,9 +655,6 @@ function ingredientText(name, attribute, read) {
       text
     ] }) : (0, import_react.cloneElement)(child, void 0, child.props.children, text) });
   }
-  if (process.env.NODE_ENV !== "production") {
-    Object.defineProperty(IngredientText, "name", { value: name });
-  }
   return (0, import_react.forwardRef)(IngredientText);
 }
 var IngredientQuantity = /* @__PURE__ */ ingredientText(
@@ -690,6 +706,15 @@ var IngredientOptional = /* @__PURE__ */ ingredientText(
   // An empty label shows only the part's own children, such as an icon.
   ({ optional }, children) => optional === "" && isEmpty(children) ? void 0 : optional
 );
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Ingredients, "Recipe.Ingredients");
+  setDisplayName(IngredientList, "Recipe.IngredientList");
+  setDisplayName(Ingredient, "Recipe.Ingredient");
+  setDisplayName(IngredientQuantity, "Recipe.IngredientQuantity");
+  setDisplayName(IngredientName, "Recipe.IngredientName");
+  setDisplayName(IngredientNote, "Recipe.IngredientNote");
+  setDisplayName(IngredientOptional, "Recipe.IngredientOptional");
+}
 
 // src/parts/json-ld.tsx
 var import_schema_org = require("@recipe-book/core/schema-org");
@@ -742,6 +767,9 @@ function useWarningsReport(name, warnings) {
     reported.current = key;
   }, [name, warnings]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(JsonLd, "Recipe.JsonLd");
+}
 
 // src/parts/root.tsx
 var import_react16 = require("react");
@@ -803,7 +831,7 @@ function useParseReport(result) {
     if (result.success) {
       const count = result.warnings.length;
       console.warn(
-        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders, but a warning can mean a misspelled field.`,
+        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders. https://recipe-book.siraj.page/errors/#issue-codes gives the fix for each warning's code.`,
         result.warnings
       );
     } else {
@@ -811,6 +839,9 @@ function useParseReport(result) {
     }
   }, [result]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Root, "Recipe.Root");
+}
 
 // src/parts/servings.tsx
 var import_core5 = require("@recipe-book/core");
@@ -933,6 +964,10 @@ function optionText(choice, { servings, yield: makes }, base, labels, locale) {
   }
   return `${(0, import_core5.formatServings)({ amount: choice }, format)}\xD7`;
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(ServingsSelect, "Recipe.ServingsSelect");
+  setDisplayName(ServingsInput, "Recipe.ServingsInput");
+}
 
 // src/parts/step-text.tsx
 var import_core6 = require("@recipe-book/core");
@@ -991,9 +1026,15 @@ var StepName = /* @__PURE__ */ (0, import_react.forwardRef)(
       StepContext,
       "<Recipe.StepName> must be rendered inside <Recipe.Step>."
     );
-    return step.name === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("b", { ...props, "data-recipe-name": "", ref, children: step.name });
+    return step.name !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("b", { ...props, "data-recipe-name": "", ref, children: step.name });
   }
 );
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Steps, "Recipe.Steps");
+  setDisplayName(StepList, "Recipe.StepList");
+  setDisplayName(Step, "Recipe.Step");
+  setDisplayName(StepName, "Recipe.StepName");
+}
 
 // src/parts/step-text.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -1026,6 +1067,9 @@ function Temperature({ segment }) {
     }) + (fan && labels.fan ? ` ${labels.fan}` : "");
   }).filter(Boolean).join(" / ") });
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(StepText, "Recipe.StepText");
+}
 
 // src/parts/system-toggle.tsx
 var import_react22 = require("react");
@@ -1145,6 +1189,10 @@ function moveOnArrowKey(event) {
   if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
     return;
   }
+  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
+  if (group === null) {
+    return;
+  }
   const { key } = event;
   let step;
   if (key === "ArrowDown") {
@@ -1152,17 +1200,16 @@ function moveOnArrowKey(event) {
   } else if (key === "ArrowUp") {
     step = -1;
   } else if (key === "ArrowRight") {
-    step = isRtl(event.currentTarget) ? -1 : 1;
+    step = isRtl(group) ? -1 : 1;
   } else if (key === "ArrowLeft") {
-    step = isRtl(event.currentTarget) ? 1 : -1;
+    step = isRtl(group) ? 1 : -1;
   } else {
     return;
   }
-  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
   const options = Array.from(
-    group?.querySelectorAll(
+    group.querySelectorAll(
       "[data-recipe-system-option]:not([data-disabled])"
-    ) ?? []
+    )
   );
   const index = options.indexOf(event.currentTarget);
   if (index === -1) {
@@ -1174,7 +1221,11 @@ function moveOnArrowKey(event) {
   next?.click();
 }
 function isRtl(element) {
-  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+  return getComputedStyle(element).direction === "rtl";
+}
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(SystemToggle, "Recipe.SystemToggle");
+  setDisplayName(SystemOption, "Recipe.SystemOption");
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {