The distribution of size of files (measured in lines of code).
Intro
- File size measurements show the distribution of size of files.
- Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
- It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
File Size Overall
- There are 89 files with 9,575 lines of code.
- 2 very long files (2,844 lines of code)
- 1 long files (736 lines of code)
- 9 medium size files (2,569 lines of codeclsfd_ftr_w_mp_ins)
- 9 small files (1,287 lines of code)
- 68 very small files (2,139 lines of code)
Legend:
1001+
501-1000
201-500
101-200
1-100
explore: zoomable circles | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
File Size per Logical Decomposition
primary
Longest Files (Top 50)
| File | # lines | # units |
|---|---|---|
 IconNames.ts in sample/fabric/src |
1637 | - |
emojiStrings.ts in packages/roosterjs-react-emoji-resources/lib/strings |
1207 | - |
emojiList.ts in packages/roosterjs-react-emoji/lib/utils |
736 | 2 |
 LeanRooster.tsx in packages/roosterjs-react-editor/lib/components |
415 | 24 |
EmojiPane.tsx in packages/roosterjs-react-emoji/lib/components |
343 | 17 |
EmojiPlugin.tsx in packages/roosterjs-react-emoji/lib/plugins |
336 | 23 |
OutOfBoxCommandBarButtons.tsx in packages/roosterjs-react-command-bar/lib/utils |
328 | 22 |
 dts.js in tools |
290 | 16 |
 RoosterCommandBar.scss in packages/roosterjs-react-command-bar/lib/components |
221 | - |
buttons.tsx in packages/roosterjs-react-ribbon/lib/components |
219 | - |
FocusOutShellSample.tsx in sample/script |
210 | 3 |
Ribbon.tsx in packages/roosterjs-react-ribbon/lib/components |
207 | 10 |
RoosterCommandBar.tsx in packages/roosterjs-react-command-bar/lib/components |
190 | 8 |
FontNamePicker.tsx in packages/roosterjs-react-pickers/lib/components |
177 | 1 |
RoosterCommandBarPlugin.Shortcuts.ts in packages/roosterjs-react-command-bar/lib/plugins |
171 | 1 |
RoosterCommandBarPlugin.ts in packages/roosterjs-react-command-bar/lib/plugins |
149 | 10 |
ImageManager.ts in packages/roosterjs-react-common/lib/utils |
137 | 7 |
LinkDialog.tsx in packages/roosterjs-react-command-bar/lib/components |
123 | 4 |
ColorPicker.tsx in packages/roosterjs-react-pickers/lib/components |
119 | - |
ConfirmDialog.tsx in packages/roosterjs-react-ribbon/lib/components |
116 | 3 |
FocusOutShell.tsx in packages/roosterjs-react-editor/lib/components |
105 | 3 |
ribbonButtonRenderer.tsx in sample/script |
95 | - |
UndoWithImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
90 | 8 |
emoji.scss in packages/roosterjs-react-emoji/lib/components |
83 | - |
fabric-icons.ts in sample/fabric/src |
74 | 1 |
collect-packages.js in tools |
73 | 4 |
OutOfBoxCommandBarButtons.ColorInfo.tsx in packages/roosterjs-react-command-bar/lib/utils |
64 | 1 |
Ribbon.scss in packages/roosterjs-react-ribbon/lib/components |
63 | - |
getIconOnRenderDelegate.tsx in packages/roosterjs-react-command-bar/lib/utils |
62 | 1 |
 fabric-icons.css in sample/fabric/css |
61 | - |
FontSizePicker.tsx in packages/roosterjs-react-pickers/lib/components |
60 | 1 |
PasteImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
59 | 6 |
 FocusOutShellSample.htm in sample |
58 | - |
scss.js in tools |
53 | 3 |
EmojiNavBar.tsx in packages/roosterjs-react-emoji/lib/components |
51 | - |
ReactEditor.tsx in sample/script |
50 | 5 |
EmojiNavBar.scss in packages/roosterjs-react-emoji/lib/components |
49 | - |
pack.js in tools |
49 | - |
Picker.scss in packages/roosterjs-react-pickers/lib/components |
48 | - |
colorStrings.ts in packages/roosterjs-react-pickers/lib/strings |
48 | 1 |
RibbonPlugin.ts in packages/roosterjs-react-ribbon/lib/plugins |
48 | 9 |
EmojiStatusBar.tsx in packages/roosterjs-react-emoji/lib/components |
47 | 1 |
DoubleClickImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
46 | 5 |
sample.tsx in sample/script |
45 | - |
ribbonButtonStrings.ts in packages/roosterjs-react-ribbon/lib/strings |
44 | 1 |
normalize-packages.js in tools |
43 | 2 |
ContentChangedPlugin.ts in packages/roosterjs-react-common/lib/plugins |
41 | 5 |
RoosterCommandBarSchema.ts in packages/roosterjs-react-command-bar/lib/schema |
39 | - |
EmojiStatusBar.scss in packages/roosterjs-react-emoji/lib/components |
39 | - |
IgnorePasteImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
38 | 7 |
Files With Most Units (Top 20)
| File | # lines | # units |
|---|---|---|
LeanRooster.tsx in packages/roosterjs-react-editor/lib/components |
415 | 24 |
EmojiPlugin.tsx in packages/roosterjs-react-emoji/lib/plugins |
336 | 23 |
OutOfBoxCommandBarButtons.tsx in packages/roosterjs-react-command-bar/lib/utils |
328 | 22 |
EmojiPane.tsx in packages/roosterjs-react-emoji/lib/components |
343 | 17 |
dts.js in tools |
290 | 16 |
RoosterCommandBarPlugin.ts in packages/roosterjs-react-command-bar/lib/plugins |
149 | 10 |
Ribbon.tsx in packages/roosterjs-react-ribbon/lib/components |
207 | 10 |
RibbonPlugin.ts in packages/roosterjs-react-ribbon/lib/plugins |
48 | 9 |
RoosterCommandBar.tsx in packages/roosterjs-react-command-bar/lib/components |
190 | 8 |
UndoWithImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
90 | 8 |
IgnorePasteImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
38 | 7 |
ImageManager.ts in packages/roosterjs-react-common/lib/utils |
137 | 7 |
PasteImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
59 | 6 |
ContentChangedPlugin.ts in packages/roosterjs-react-common/lib/plugins |
41 | 5 |
DoubleClickImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
46 | 5 |
ReactEditor.tsx in sample/script |
50 | 5 |
LinkDialog.tsx in packages/roosterjs-react-command-bar/lib/components |
123 | 4 |
NonCompatFormatter.ts in packages/roosterjs-react-common/lib/utils |
33 | 4 |
collect-packages.js in tools |
73 | 4 |
ReactUtil.ts in packages/roosterjs-react-common/lib/utils |
37 | 3 |
Files With Long Lines (Top 20)
There are 24 files with lines longer than 120 characters. In total, there are 88 long lines.
| File | # lines | # units | # long lines |
|---|---|---|---|
EmojiPane.tsx in packages/roosterjs-react-emoji/lib/components |
343 | 17 | 16 |
RoosterCommandBar.tsx in packages/roosterjs-react-command-bar/lib/components |
190 | 8 | 10 |
OutOfBoxCommandBarButtons.tsx in packages/roosterjs-react-command-bar/lib/utils |
328 | 22 | 10 |
EmojiPlugin.tsx in packages/roosterjs-react-emoji/lib/plugins |
336 | 23 | 7 |
LeanRooster.tsx in packages/roosterjs-react-editor/lib/components |
415 | 24 | 6 |
dts.js in tools |
290 | 16 | 6 |
getIconOnRenderDelegate.tsx in packages/roosterjs-react-command-bar/lib/utils |
62 | 1 | 5 |
LinkDialog.tsx in packages/roosterjs-react-command-bar/lib/components |
123 | 4 | 3 |
RoosterCommandBarPlugin.ts in packages/roosterjs-react-command-bar/lib/plugins |
149 | 10 | 3 |
EmojiNavBar.tsx in packages/roosterjs-react-emoji/lib/components |
51 | - | 3 |
FocusOutShellSample.tsx in sample/script |
210 | 3 | 3 |
index.ts in packages/roosterjs-react-editor/lib |
5 | - | 2 |
EmojiIcon.tsx in packages/roosterjs-react-emoji/lib/components |
35 | - | 2 |
ReactEditor.tsx in sample/script |
50 | 5 | 2 |
index.ts in packages/roosterjs-react-command-bar/lib |
14 | - | 1 |
index.ts in packages/roosterjs-react-common/lib |
14 | - | 1 |
DoubleClickImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
46 | 5 | 1 |
PasteImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
59 | 6 | 1 |
UndoWithImagePlugin.ts in packages/roosterjs-react-common/lib/plugins |
90 | 8 | 1 |
Images.ts in packages/roosterjs-react-common/lib/resources |
3 | - | 1 |