[Docs] Add integration guide and some intro updates#3365
Conversation
🗄️ Schema Change: No Changes ✅ |
|
Size Change: 0 B Total Size: 486 kB ℹ️ View Unchanged
|
🛠️ Item Splitting: No Changes ✅ |
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (91d7cc1) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3365If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3365If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3365 |
| <div style={{display: "flex", justifyContent: "center"}}> | ||
| <Renderer content="$\sum_{n} \frac {1} {n^s} = \prod_{p} \frac {1} {1 - \frac{1} {p^s}}$" /> | ||
| </div> |
There was a problem hiding this comment.
If we talk about math, we should probably demo it, right?
| - Read the renderer documentation | ||
| - Browse the available reusable components | ||
|
|
||
| ## Project History |
There was a problem hiding this comment.
Matthew asked me about this so I figured I'd gather the details and links together so I don't have to look them up every time. :)
4f1ec07 to
da90204
Compare
packages/perseus/src/renderer.tsx
Outdated
| //- PerseusRenderer | ||
| content: PerseusRenderer["content"]; | ||
| widgets: PerseusRenderer["widgets"]; | ||
| images: PerseusRenderer["images"]; | ||
| //- PerseusRenderer | ||
|
|
||
| apiOptions?: APIOptions; | ||
| userInput?: UserInputMap; | ||
|
|
||
| handleUserInput?: HandleUserInputCallback; | ||
| initializeUserInput?: InitializeUserInputCallback; | ||
| apiOptions?: APIOptions; | ||
|
|
||
| alwaysUpdate?: boolean; | ||
| findExternalWidgets: any; | ||
| images: PerseusRenderer["images"]; | ||
| findExternalWidgets: (criterion: FilterCriterion) => any; | ||
| keypadElement?: KeypadAPI | null; | ||
| onRender: (node?: any) => void; | ||
| problemNum?: number; | ||
| reviewMode?: boolean | null | undefined; | ||
| highlightEmptyWidgets?: boolean; | ||
|
|
||
| /** | ||
| * If set to "all", all rationales or solutions will be shown. If set to | ||
| * "selected", soltions will only be shown for selected choices. If set to |
There was a problem hiding this comment.
This ordering always bothered me. The PerseusRenderer type fields were sprinkled all over making it hard to see that this Renderer's main data was the PerseusRenderer type. I think we could improve this further by making the type type Props = Partial<React.ContextType<typeof DependenciesContext>> & PerseusRenderer & { ... other fields }
| // This lives here because it adds alot of noise to the MDX file if we inline | ||
| // it. |
There was a problem hiding this comment.
Plus we get nice type checking here whereas it didn't seem to work in the MDX file.
__docs__/getting-started.mdx
Outdated
|
|
||
| Perseus uses two dependency mechanisms: | ||
|
|
||
| - **`PerseusDependencies`** (legacy) — passed via `setDependencies()` once at |
There was a problem hiding this comment.
This says that PerseusDependencies is "legacy". But is it really possible to use Perseus without PerseusDependencies? How does the TeX renderer get set up?
If it's really possible to use only PerseusDependenciesV2, should we even mention PerseusDependencies here?
If consumers have to use both PerseusDependencies and PerseusDependenciesV2, we probably shouldn't have the legacy/preferred labels in these docs.
There was a problem hiding this comment.
I think v1 dependencies are basically required and they're not included in the "minimal setup" example.
There was a problem hiding this comment.
Good point. I want them to be gone, but today they're still very much required. I'll update this wording!
__docs__/getting-started.mdx
Outdated
| ```tsx | ||
| import {parseAndMigratePerseusItem} from "@khanacademy/perseus-core"; | ||
|
|
||
| const item = parseAndMigratePerseusItem(rawJsonString); |
There was a problem hiding this comment.
This isn't quite right. parseAndMigratePerseusItem doesn't return an item, it returns a Result value containing either the parsed item or an error. It's up to consumers to handle the error.
import {isFailure, parseAndMigratePerseusItem} from "@khanacademy/perseus-core";
const parseResult = parseAndMigratePerseusItem(rawJsonString);
if (isFailure(parseResult)) {
console.error(parseResult.detail.message)
}
const item = parseResult.value;What makes this a bit complicated to document is that the frontend codebase has convenience wrappers for the parsers that handle errors by logging them. Pretty much all consumers in frontend should be using these wrappers.
There was a problem hiding this comment.
I'll update the sample. Thanks. I think I'll leave the idea of wrapper functions out of this for now. 🤔
Claude Code ReviewThis repository is configured for manual code reviews. Comment |
__docs__/getting-started.mdx
Outdated
| A minimal setup looks like this: | ||
|
|
||
| ```tsx | ||
| import { |
There was a problem hiding this comment.
I kind of wonder if we need to just bring back the "minimum viable example" with a couple of tests running against it (without the abstractions/misdirections of our Storybook scaffolding). Like if we had /demo or something with its own package.json and some integration tests, we could just point people to that folder as an example as to how to bootstrap Perseus. The tests would force us to keep it up-to-date as we change code.
There was a problem hiding this comment.
I'm not totally opposed to that. But surfacing a guide like this in Storybook at least gives us a web-accessible place to link to. Granted, having a demo project/package in our repo would also provide that.
I'd like to land this... and we could refactor it to a standalone project inside this repo in the future? I feel like Vite could help here...
__docs__/getting-started.mdx
Outdated
|
|
||
| ## Parsing Content | ||
|
|
||
| Perseus content is stored as a JSON string. Before rendering, parse and migrate |
There was a problem hiding this comment.
I don't think there's a requirement that PerseusItems are strings; parseAndMigratePerseusItem seems to be able to handle both a string and an object. Now sure how much this matters.
There was a problem hiding this comment.
Good catch. Thanks. I've updated the wording to focus on handling an object and noted that we can also parse the string if given one.
__docs__/getting-started.mdx
Outdated
| import {ArticleRenderer} from "@khanacademy/perseus"; | ||
|
|
||
| function Article({content}) { | ||
| return <ArticleRenderer json={content} />; |
There was a problem hiding this comment.
Is it worth mentioning that articles use PerseusArticle instead of PerseusItem?
There was a problem hiding this comment.
Added the type, which I think is enough.
__docs__/getting-started.mdx
Outdated
| Articles are never scored, but they can contain embedded "knowledge check" | ||
| widgets (`GradedGroup` / `GradedGroupSet`) that give learners in-line practice. | ||
|
|
||
| ## Registering Widgets |
There was a problem hiding this comment.
This section seems like it should be with dependencies close to the top.
| <div style={{display: "flex", justifyContent: "center"}}> | ||
| <Renderer {...graphExample} /> | ||
| </div> |
packages/perseus/src/renderer.tsx
Outdated
| }; | ||
|
|
||
| type Props = Partial<React.ContextType<typeof DependenciesContext>> & { | ||
| //- PerseusRenderer |
There was a problem hiding this comment.
I feel like these comments could be clearer. It took me a second to get what you were implying.
There was a problem hiding this comment.
I was able to just swap in PerseusRenderer here, which I think is clearest. 🤞
There was a problem hiding this comment.
Changed my mind. I removed the comments and just grouped the three props at the top. I think it's clearer than before this PR.
…Renderer` component
Co-authored-by: Ben Christel <benchristel@users.noreply.github.com>
Co-authored-by: Matthew <matthewcurtis@khanacademy.org>
Co-authored-by: Ben Christel <benchristel@users.noreply.github.com>
cc68717 to
87ac733
Compare
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/perseus-editor@30.0.0 ### Major Changes - [#3332](#3332) [`604b3a6c25`](604b3a6) Thanks [@benchristel](https://github.com/benchristel)! - The `options` parameter of the `serialize` method of `EditorPage` and `Editor` has been removed. - [#3386](#3386) [`7e76fbbc2f`](7e76fbb) Thanks [@benchristel](https://github.com/benchristel)! - The `serialize` methods of classes in `@khanacademy/perseus-editor` no longer use arrow function syntax. Callers should not unbind them from the class instance. Additionally, the `Editor` component no longer accepts a `replace` prop (used for hints), and its serialize method no longer returns `replace`. The `replace` prop was only used in `serialize`. Users of the `Editor` component should manage hints' `replace` setting themselves. ### Minor Changes - [#3395](#3395) [`97223334ea`](9722333) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of Editor support for Exponential Graph - [#3352](#3352) [`b681e00a4f`](b681e00) Thanks [@handeyeco](https://github.com/handeyeco)! - Add editor support for AbsoluteValue - [#3348](#3348) [`b1557c2a73`](b1557c2) Thanks [@handeyeco](https://github.com/handeyeco)! - Add schema for AbsoluteValue graph - [#3345](#3345) [`dde985f3b5`](dde985f) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent type definitions, this is the initial implementation for supporting Tangent graph in Interactive Graph - [#3358](#3358) [`8c503171b1`](8c50317) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph option in the Interactive Graph Editor - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - [#3396](#3396) [`35fa9133db`](35fa913) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add a linter warning for images with no size - [#3390](#3390) [`d22c50dc2a`](d22c50d) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Make the 125 character alt text warning less aggressive - [#3372](#3372) [`3cdb09813d`](3cdb098) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Upscale Graphies within Explore Image Modal - [#3391](#3391) [`2f285ee161`](2f285ee) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add character counter to alt text field - [#3374](#3374) [`cd73c99ba3`](cd73c99) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Remove incorrect usage of the feature flag setting in one of the test - Updated dependencies \[[`f18c0d9b6f`](f18c0d9), [`a022e751d6`](a022e75), [`35fa9133db`](35fa913), [`54db3fd4bd`](54db3fd), [`97223334ea`](9722333), [`027a5edbda`](027a5ed), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`3cdb09813d`](3cdb098), [`afcff9f96f`](afcff9f), [`75f184e5a7`](75f184e), [`4b2a7c85db`](4b2a7c8), [`5e1acd01f8`](5e1acd0), [`b681e00a4f`](b681e00), [`d99f1c0259`](d99f1c0), [`54eee35d65`](54eee35), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`56e7dbe9a2`](56e7dbe), [`85f9cd46fc`](85f9cd4), [`8c503171b1`](8c50317), [`3aca3dcdf4`](3aca3dc), [`9f29bc7161`](9f29bc7), [`7034844845`](7034844), [`8aa0a77886`](8aa0a77), [`003aca7612`](003aca7)]: - @khanacademy/perseus-linter@4.9.0 - @khanacademy/perseus-score@8.4.0 - @khanacademy/perseus-core@23.7.0 - @khanacademy/perseus@76.1.0 - @khanacademy/kmath@2.3.0 - @khanacademy/keypad-context@3.2.40 - @khanacademy/math-input@26.4.10 ## @khanacademy/kmath@2.3.0 ### Minor Changes - [#3351](#3351) [`005e13d784`](005e13d) Thanks [@handeyeco](https://github.com/handeyeco)! - Add scoring for AbsoluteValue - [#3347](#3347) [`d99f1c0259`](d99f1c0) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add the tangent math utilities to kmath for supporting Tangent graph in Interactive Graph - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 ## @khanacademy/perseus@76.1.0 ### Minor Changes - [#3350](#3350) [`75f184e5a7`](75f184e) Thanks [@handeyeco](https://github.com/handeyeco)! - Implement AbsoluteValue rendering - [#3354](#3354) [`4b2a7c85db`](4b2a7c8) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Created the tangent graph visual component, add Storybook coverage, SR strings, and equation string for supporting Tangent graph in Interactive Graph - [#3353](#3353) [`5e1acd01f8`](5e1acd0) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph state management and reducer for supporting Tangent graph in Interactive Graph - [#3352](#3352) [`b681e00a4f`](b681e00) Thanks [@handeyeco](https://github.com/handeyeco)! - Add editor support for AbsoluteValue - [#3348](#3348) [`b1557c2a73`](b1557c2) Thanks [@handeyeco](https://github.com/handeyeco)! - Add schema for AbsoluteValue graph - [#3345](#3345) [`dde985f3b5`](dde985f) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent type definitions, this is the initial implementation for supporting Tangent graph in Interactive Graph - [#3349](#3349) [`56e7dbe9a2`](56e7dbe) Thanks [@handeyeco](https://github.com/handeyeco)! - Add state management for AbsoluteValue - [#3377](#3377) [`85f9cd46fc`](85f9cd4) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of state management logic for new Exponential graph - [#3358](#3358) [`8c503171b1`](8c50317) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph option in the Interactive Graph Editor - [#3393](#3393) [`9f29bc7161`](9f29bc7) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Rendering logic for new Exponential Graph - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - [#3329](#3329) [`027a5edbda`](027a5ed) Thanks [@Myranae](https://github.com/Myranae)! - Fix image bug by batching setState calls in setupGraphie - [#3372](#3372) [`3cdb09813d`](3cdb098) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Upscale Graphies within Explore Image Modal - [#3365](#3365) [`afcff9f96f`](afcff9f) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Improve ordering of Props type for `Renderer` component - [#3367](#3367) [`54eee35d65`](54eee35) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Show image in explore modal even when size is undefined - [#3407](#3407) [`3aca3dcdf4`](3aca3dc) Thanks [@Myranae](https://github.com/Myranae)! - Improve a11y with graded group set - [#3385](#3385) [`003aca7612`](003aca7) Thanks [@Myranae](https://github.com/Myranae)! - Small fix to prevent pip duplication in Graded Group Sets - Updated dependencies \[[`f18c0d9b6f`](f18c0d9), [`a022e751d6`](a022e75), [`35fa9133db`](35fa913), [`54db3fd4bd`](54db3fd), [`97223334ea`](9722333), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`d99f1c0259`](d99f1c0), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`7034844845`](7034844), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-linter@4.9.0 - @khanacademy/perseus-score@8.4.0 - @khanacademy/perseus-core@23.7.0 - @khanacademy/kmath@2.3.0 - @khanacademy/keypad-context@3.2.40 - @khanacademy/math-input@26.4.10 ## @khanacademy/perseus-core@23.7.0 ### Minor Changes - [#3405](#3405) [`54db3fd4bd`](54db3fd) Thanks [@benchristel](https://github.com/benchristel)! - `@khanacademy/perseus-core` now exports a `removeOrphanedWidgetsFromPerseusItem` function, which removes unreferenced widgets from a `PerseusItem`'s question and hints. - [#3351](#3351) [`005e13d784`](005e13d) Thanks [@handeyeco](https://github.com/handeyeco)! - Add scoring for AbsoluteValue - [#3348](#3348) [`b1557c2a73`](b1557c2) Thanks [@handeyeco](https://github.com/handeyeco)! - Add schema for AbsoluteValue graph - [#3345](#3345) [`dde985f3b5`](dde985f) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent type definitions, this is the initial implementation for supporting Tangent graph in Interactive Graph - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - [#3357](#3357) [`ae0538d0a7`](ae0538d) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Improve code documentation for all data-schema and user-input types ## @khanacademy/perseus-linter@4.9.0 ### Minor Changes - [#3381](#3381) [`f18c0d9b6f`](f18c0d9) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - Adds new linters for parsed objects - [#3395](#3395) [`97223334ea`](9722333) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of Editor support for Exponential Graph ### Patch Changes - [#3396](#3396) [`35fa9133db`](35fa913) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add a linter warning for images with no size - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`d99f1c0259`](d99f1c0), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 - @khanacademy/kmath@2.3.0 ## @khanacademy/perseus-score@8.4.0 ### Minor Changes - [#3356](#3356) [`a022e751d6`](a022e75) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph scoring to support the Tangent graph in Interactive Graph - [#3351](#3351) [`005e13d784`](005e13d) Thanks [@handeyeco](https://github.com/handeyeco)! - Add scoring for AbsoluteValue - [#3394](#3394) [`7034844845`](7034844) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of new scoring logic for Exponential Graph ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`d99f1c0259`](d99f1c0), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 - @khanacademy/kmath@2.3.0 ## @khanacademy/keypad-context@3.2.40 ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 ## @khanacademy/math-input@26.4.10 ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 - @khanacademy/keypad-context@3.2.40
## Summary: This PR adds a small integration guide for teams looking to begin using Perseus. It also extends the intro to include a short history of Perseus. Issue: LEMS-3949 ## Test plan: Read, read, read. Maybe point an AI at the docs. 🤷 Author: jeremywiebe Reviewers: jeremywiebe, benchristel, handeyeco Required Reviewers: Approved By: handeyeco Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3365
Summary:
This PR adds a small integration guide for teams looking to begin using Perseus. It also extends the intro to include a short history of Perseus.
Issue: LEMS-3949
Test plan:
Read, read, read. Maybe point an AI at the docs. 🤷