Fractal refactor editor/core/text-editor.tsx #376
+6
−6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Converts text-editor.tsx into a folder with an index file to orchestrate all TextEditor related components living under the new folder named text-editor/
2 tasks
mehmetozguldev
added
type: improvement
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Converts text-editor.tsx into a folder with an index file to orchestrate
all TextEditor related components living under the new folder named
text-editor/
Pull Request
This is a proposal to simplify the big file
text-editor.tsx(1000+ lines) into smaller chunks.This is an idea I had some years ago meant to simplify big files. I call it "fractal refactor". I call it fractal refactor because it reminds me of fractals (or Matryoshka dolls).
When using a composable API like React Hooks or Vue Composition API (function calls) and you have a big file (1000+ lines), there are good chances you have related code you can move into a single file.
How can you achieve this without having a folder with countless files, and their names are colliding? Just create a folder with the name of your big file (remove the extension), move your big file inside this folder and rename it as
index.tsx. Now you can move the related code into their own files living inside this new folder. Theindex.tsxwill be the orchestra conductor that will import its sibling files and compose the big file.If one of the sibling files grows big in number of lines, you can repeat the process: create a new folder with its name, and move the sibling file inside and rename it as
index.tsx. That's why I call it "fractal refactor" (Matryoshka dolls)Description
I created a new folder:
src/components/editor/core/text-editor, renamed thesrc/components/editor/core/text-editor.tsxfile asindex.tsxand moved it inside the folder:src/components/editor/core/text-editor/index.tsx.I moved all the other files inside the folder
src/components/editor/core/into this new folder, because I figured out these files were used only bytext-editor.tsx, so they are tied to this component. (line-based-editor.tsx,editor-layers.tsxandkeyboard-shortcuts.ts)I think all commits can be squashed into one, but I decided to keep them for clarity (maybe if they are squashed it can be easier to understand 😄 )
Related Issues
None