ImageLoader: fix types and remove @ts-expect-error instances

[jeremywiebe]

Summary:

While chasing down a question from LearningEquality, I noticed some @ts-expect-error usages that made me wonder. After removing them I found it was quite easy to make the types correct.

This is also a common problem in our codebase following the port from Flow to TypeScript. We often set props to have the type SomeType | null | undefined. However, often we don't need to support it being null. In this case, removing the assignment of a default value (null) fixed the main issue.

Issue: "none"

Test plan:

yarn typecheck
yarn lint

[jeremywiebe]

This type error was exposed once I removed the @ts-expect-errors.

[jeremywiebe]

The main fix here is wrapping the function that returns a React element, otherwise it's a function that returns React.ReactElement | null | undefined. I changed the return type to React.ReactNode as that is what a render function returns.

[github-actions]

Size Change: -111 B (-0.01%)

Total Size: 852 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	413 kB	-111 B (-0.03%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.8 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	272 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.23 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[jeremywiebe]

This was not actually suppressing anything so I'm removing it.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/blue-moons-carry.md, packages/perseus/src/server-item-renderer.tsx, packages/perseus/src/components/image-loader.tsx, packages/perseus/src/components/svg-image.tsx, packages/perseus/src/components/__stories__/image-loader.stories.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (a8e5a43) and published it to npm. You
can install it using the tag PR1474.

Example:

yarn add @khanacademy/perseus@PR1474

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1474

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.47%. Comparing base (eb9f3f9) to head (a8e5a43).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1474      +/-   ##
==========================================
+ Coverage   70.22%   70.47%   +0.24%     
==========================================
  Files         509      512       +3     
  Lines      105444   105473      +29     
  Branches     7631    11409    +3778     
==========================================
+ Hits        74049    74329     +280     
+ Misses      31212    31144      -68     
+ Partials      183        0     -183     

Files	Coverage Δ
packages/perseus/src/components/image-loader.tsx	84.97% <100.00%> (+1.35%)	⬆️
packages/perseus/src/components/svg-image.tsx	65.05% <ø> (+3.45%)	⬆️
packages/perseus/src/server-item-renderer.tsx	83.60% <ø> (-0.04%)	⬇️

... and 141 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eb9f3f9...a8e5a43. Read the comment docs.

[mark-fitzgerald]

Thanks for cleaning these up.