Refactoring package to work with the latest React version #88
Conversation
…in favor of `vite`
…tch dependency & refactored imports
There was a problem hiding this comment.
Pull Request Overview
This PR modernizes the equation editor package to support React 18/19 by refactoring core components and updating the build system. The changes replace the legacy class-based EquationEditor with a functional component implementation while maintaining backward compatibility.
- Refactored EquationEditor from ClassComponent to FunctionComponent with hooks
- Added comprehensive TypeScript definitions for MathQuill library
- Updated build system from react-scripts to Vite and upgraded Rollup configuration
Reviewed Changes
Copilot reviewed 19 out of 24 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types.ts | Added comprehensive TypeScript definitions for MathQuill v1 and v3 APIs |
| src/mathquill.ts | Created module for importing MathQuill build with TypeScript ignore |
| src/jquery.ts | Extracted jQuery setup into separate module |
| src/index.tsx | Refactored EquationEditor from class to functional component with hooks |
| rollup.config.js | Updated build configuration with modern plugins and TypeScript support |
| package.json | Upgraded dependencies to support React 18/19 and modern tooling |
| demo/* | Migrated demo app from react-scripts to Vite with updated dependencies |
src/mathquill.ts
Outdated
| @@ -0,0 +1,5 @@ | |||
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | |||
There was a problem hiding this comment.
The @typescript-eslint/ban-ts-ignore rule is deprecated. Use @typescript-eslint/ban-ts-comment instead.
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | |
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment |
src/jquery.ts
Outdated
| // Import JQuery, required for the functioning of the equation editor | ||
| import jQuery from "jquery"; | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore |
There was a problem hiding this comment.
The @typescript-eslint/ban-ts-ignore rule is deprecated. Use @typescript-eslint/ban-ts-comment instead.
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | |
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment |
src/index.tsx
Outdated
| } | ||
| } | ||
|
|
||
| function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T { |
There was a problem hiding this comment.
[nitpick] Using 'any' type reduces type safety. Consider using a more specific type or 'unknown' if the type is truly dynamic.
| function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T { | |
| function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T { |
|
@V0XNIHILI, I have also removed the default Is this ok or it would be better to keep the default styles? |
|
Hey @hophiphip, thanks a ton for the extensive PR, it looks great! It's been a while since I used TS/React, hence the co-pilot review. Can you confirm that the project runs just as before (ie the Github pages deployment demo should still work)? Then I will merge with main and push to npm! |
|
I have tested demo application in DEV and PROD build, and it was working without any issues. However, I am not 100% sure about GitHub pages. I did not apply any significant changes to the project configuration and kept application and library scripts in
|
|
ok..i have tested whether node 12.x will work with current setup..and it failed 
I will look into a possible way of fixing this issue without changing workflow config |
|
Ok, I failed to find an adequate way of supporting an older NodeJS version. The issue is in this line: NodeJS 12.x is EOL: and project dependencies do not support older NodeJS version. As much as it pains me to say, but for GitHub pages to work properly it is necessary to increment Node JS version: |
|
Changes to the config for GitHub workflow to work properly: |
2 participants
Hi, this PR contains some refactoring that makes package compatible with React 18/19.
Changes:
react-scripts(outdated) indemoapp in favor ofvite/vitest;demoapp code to make it work with the newReactandvite;TypeScriptdefinitions forMathQuill;rollupconfig to properly bundle type definitions;EquationEditorcomponent fromClassComponenttoFunctionComponent;EquationEditorcomponent props to support more customization (left previous props for backward compatibility).UPDATE(1)
require("mathquill/build/mathquill")withimportin abb8f26 as it might break user production build.