@recipe-book/react 0.0.3 → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# @recipe-book/react
+
+## 0.1.1
+
+### Patch Changes
+
+- `<Recipe.Ingredient>` and the function `useFormatIngredient()` returns now throw a `RecipeBookError` with code `invalid_argument` for an item that isn't `{ ingredient, quantity? }`, such as `{}`, `null`, or an authored ingredient, instead of a bare `TypeError`. ([#925](https://github.com/SirajChokshi/recipe-book/pull/925) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - The error is the one `formatIngredient` from `@recipe-book/react/core` throws: its message says what it expects and what it received, and links to the error's page.
+
+- Passing `dangerouslySetInnerHTML` to a part that always renders content now fails typecheck instead of throwing when React renders it. ([#906](https://github.com/SirajChokshi/recipe-book/pull/906) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - That's every part except four. `<Recipe.Root>` and `<Recipe.JsonLd>` already failed typecheck with it. `<Recipe.Image>` and `<Recipe.ServingsInput>` still typecheck with it, as a plain `<img>` or `<input>` does, and React still throws when it renders them.
+  - A wrapper that spreads its element's props into a part typechecks as before.
+
+- Add `@recipe-book/react/core` and `@recipe-book/react/core/schema-org`, which re-export `@recipe-book/core` and `@recipe-book/core/schema-org`, so a React app installs one package. ([#888](https://github.com/SirajChokshi/recipe-book/pull/888) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - The re-exports are core's own values, not copies. While an app's `@recipe-book/core` is on the same version as `@recipe-book/react`, the two packages share one copy of core, so code can mix imports from both. With different versions, the app gets a second copy of core.
+  - Neither is a `'use client'` module, so in a Server Component `parseRecipe`, `toJsonLd`, and core's other functions run on the server, as they do from core.
+  - `@recipe-book/react` still re-exports nothing from core, and its parts and hooks stay client references.
+  - Errors that said to call `parseRecipe()` or `formatIngredient()` from `@recipe-book/core` now name `@recipe-book/react/core`.
+
+- `setServings`, `servings`, and `defaultServings` accept a number at either end of the servings window, such as 700000 for a recipe with 0.7 servings, as `resolveRecipe` now does. ([#911](https://github.com/SirajChokshi/recipe-book/pull/911) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+  - The development warning for a number outside the window rounds the bounds it names to six digits inside the window, so it never names a number that's rejected: for a recipe with ⅔ servings, it names 666666 rather than 666667.
+
+- `SystemOption` now sets `autoComplete="off"`, so when going back reloads the page, Firefox no longer re-enables an option that the server rendered disabled and the page enabled later, and its new `autoComplete` prop lets you pass your own value. ([#905](https://github.com/SirajChokshi/recipe-book/pull/905) by [@SirajChokshi](https://github.com/SirajChokshi))
+
+## 0.1.0
+
+- `<Recipe.Root>` holds a parsed recipe's servings and measurement system, controlled or not, and `useRecipe()` reads them. `useRecipeState()` does the same without a Root. With `parse={parseRecipe}`, a Root parses recipe input in the browser.
+- `<Recipe.RecipeBookProvider>` sets `locale`, `labels` and `defaultSystem` for every Root inside it.
+- Parts for the recipe's image, ingredients, steps, step text with converted temperatures, servings controls and a metric and US toggle. They set `data-recipe-*` attributes for styling. `<Recipe.Ingredient>` and its sub-parts, `<Recipe.Step>`, `<Recipe.SystemToggle>` and `<Recipe.SystemOption>` take `asChild` to render your own element.
+- `<Recipe.JsonLd>` writes the recipe as schema.org Recipe JSON-LD.
+- Supports React 18.2 and 19, including Server Components.
+- ESM and CommonJS builds, each with type declarations and source maps. Every part also has a `Recipe`-prefixed name, such as `RecipeSteps`. Requires Node 22 or later.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Siraj Chokshi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,23 +1,56 @@
 # @recipe-book/react
 
-Unstyled, accessible, compound React components for displaying recipes
+Unstyled React components for recipes. Scale servings, switch between metric and US units, and render ingredients and steps with your own markup and styles.
 
-## Core concepts
+## Install
 
-### Compound structure
+```sh
+npm i @recipe-book/react
+```
+
+Core's functions and types, such as `parseRecipe`, come from `@recipe-book/react/core`, so you don't install `@recipe-book/core` yourself. If your app also installs `@recipe-book/core`, keep it on the same version as `@recipe-book/react`, or the app gets a second copy of core.
+
+## Usage
+
+Parse recipe input with `parseRecipe` and pass the parsed recipe to `<Recipe.Root>`. The parts inside it render the recipe at the chosen servings and measurement system.
+
+```tsx
+import { parseRecipe } from '@recipe-book/react/core'
+import * as Recipe from '@recipe-book/react'
 
-Recipe components are designed to be used as building blocks for displaying recipes. They are unstyled, and can be composed together to create a custom recipe interface.
+const result = parseRecipe({
+  name: 'Buttermilk pancakes',
+  servings: 4,
+  ingredients: [
+    { name: 'all-purpose flour', quantity: '1 ½ cups', equivalents: ['190 g'] },
+    { name: 'buttermilk', quantity: '1 ¼ cups' },
+    { name: 'egg', plural: 'eggs', quantity: 2 },
+  ],
+  steps: [
+    'Whisk the flour, buttermilk, and eggs.',
+    'Cook ¼-cup portions on a buttered griddle, 2–3 minutes per side.',
+  ],
+})
 
-```jsx
-function MyRecipeComponent() {
-  <Recipe.Root>
-    <Recipe.Thumbnail />
-    <h3>Ingredients</h3>
-    <Recipe.Ingredients />
-    <h3>Instructions</h3>
-    <Recipe.Instructions renderer={(instruction) => <MyInstructionComponent {...instruction}>} />
-    <hr />
-    <RecipeNotes />
-  </Recipe.Root>
+export function Pancakes() {
+  if (!result.success) throw result.error
+
+  return (
+    <Recipe.Root recipe={result.data}>
+      <h1>{result.data.name}</h1>
+      <Recipe.ServingsSelect />
+      <Recipe.SystemToggle />
+      <h2>Ingredients</h2>
+      <Recipe.Ingredients />
+      <h2>Method</h2>
+      <Recipe.Steps />
+    </Recipe.Root>
+  )
 }
 ```
+
+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.
+
+## Documentation
+
+[recipe-book.siraj.page](https://recipe-book.siraj.page)

package/core/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/core.cjs",
+  "module": "../dist/core.js",
+  "types": "../dist/core.d.cts"
+}

package/core/schema-org/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/core/schema-org.cjs",
+  "module": "../../dist/core/schema-org.js",
+  "types": "../../dist/core/schema-org.d.cts"
+}

package/dist/core/schema-org.cjs

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/core/schema-org.ts
+var schema_org_exports = {};
+module.exports = __toCommonJS(schema_org_exports);
+__reExport(schema_org_exports, require("@recipe-book/core/schema-org"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("@recipe-book/core/schema-org")
+});
+//# sourceMappingURL=schema-org.cjs.map

package/dist/core/schema-org.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/schema-org.ts"],"sourcesContent":["export * from '@recipe-book/core/schema-org'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,yCAAd;","names":[]}

package/dist/core/schema-org.d.cts

@@ -0,0 +1 @@
+export * from '@recipe-book/core/schema-org';

package/dist/core/schema-org.d.ts

@@ -0,0 +1 @@
+export * from '@recipe-book/core/schema-org';

package/dist/core/schema-org.js

@@ -0,0 +1,3 @@
+// src/core/schema-org.ts
+export * from "@recipe-book/core/schema-org";
+//# sourceMappingURL=schema-org.js.map

package/dist/core/schema-org.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/schema-org.ts"],"sourcesContent":["export * from '@recipe-book/core/schema-org'\n"],"mappings":";AAAA,cAAc;","names":[]}

package/dist/core.cjs

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/core.ts
+var core_exports = {};
+module.exports = __toCommonJS(core_exports);
+__reExport(core_exports, require("@recipe-book/core"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("@recipe-book/core")
+});
+//# sourceMappingURL=core.cjs.map

package/dist/core.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core.ts"],"sourcesContent":["export * from '@recipe-book/core'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,8BAAd;","names":[]}

package/dist/core.d.cts

@@ -0,0 +1 @@
+export * from '@recipe-book/core';

package/dist/core.d.ts

@@ -0,0 +1 @@
+export * from '@recipe-book/core';

package/dist/core.js

@@ -0,0 +1,3 @@
+// src/core.ts
+export * from "@recipe-book/core";
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core.ts"],"sourcesContent":["export * from '@recipe-book/core'\n"],"mappings":";AAAA,cAAc;","names":[]}