[p5.js 2.0 RFC Proposal]: dom.js file separation

[SilasVM]

Increasing access

This proposal is to split the large dom.js file which is nearly 6,000 lines, into smaller files to make the functions within more manageable and usable.

Which types of changes would be made?

• [ ] Breaking change (Add-on libraries or sketches will work differently even if their code stays the same.)
• [ ] Systemic change (Many features or contributor workflows will be affected.)
• [X] Overdue change (Modifications will be made that have been desirable for a long time.)
• [ ] Unsure (The community can help to determine the type of change.)

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [X] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

What's the problem?

dom.js is nearly 6,000 lines of code and splitting it up can make the code within more manageable.

What's the solution?

This file is already organized into several categories. This proposal would see it split into 4+ files including the current dom.js file depending on how the community feels. The split would look as follows:

• dom.js:
  • Lines 21-107: P5.prototype.select
  • Lines 109-204: p5.prototype.selectAll
  • Lines 206-219: p5.prototype._getContainer
  • Lines 221-254: p5.prototype._wrapElement
  • Lines 256-328: p5.prototype._removeElements
  • Lines 478-489: p5.prototype.addElement
  • Lines 491-541: p5.prototype.createDiv
  • Lines 543-576: p5.prototype.createP
  • Lines 578-647: p5.prototype.createSpan
  • Lines 649-722: p5.prototype.createImg
  • Lines 724-785: p5.prototype.createA
  • Lines 405-476: input
  • Lines 787-922: p5.prototype.createslider
  • Lines 924-1006: p5.prototype.createButton
  • Lines 1008-1157: p5.prototype.createCheckbox
  • Lines 1159-1438: p5.prototype.createSelect
  • Lines 1440-1739: p5.prototype.createRadio
  • Lines 1741-1839: p5.prototype.createColorPicker
  • Lines 1841-1922: p5.prototype.createInput
  • Lines 1924-2048: p5.prototype.createFileInput
• File 2: p5.MediaElements.js (video/audio/camera functions)
  • Lines 2050-2095: function createMedia
  • Lines 2097-2191: p5.prototype.createVideo
  • Lines 2193-2239: p5.prototype.createAudio
  • Lines 2241-2275: cameraSetup
  • Lines 2277-2472: p5.prototype.createCapture
  • Lines 2475-2531: p5.prototype.createElement (Can also be placed with _validateParameters)
  • Lines 4077-5433: p5.MediaElementAdditions
• File Three: p5.Element.js
  • Lines 330-403: p5.element.prototype.changed
  • Lines 2533-4075: p5.element.prototype. functions
• File Four: p5.File.js
  • Lines 5436-5804 Includes:
  • File class

Please let me know what you all think. @Qianqianye and @limzykenneth please let me know what you think and if you have any suggestion. If I misunderstood either of you and went in the wrong direction let me know and I'll make the necessary corrections.

Pros (updated based on community comments)

• Readability: This proposal makes the source code more readable and manageable by grouping and separating functions in to smaller, relevant files.

Cons (updated based on community comments)

None so far.

Proposal status

Under review

[limzykenneth]

Thanks @SilasVM. A few points below:

• For file names, we try to stick with the convention we are using which is lowercase snake case, unless it is a file defining a class then it should be PascalCase or like p5.File.js.
• addElement should probably be left in dom.js assuming dom.js is the main file.
• createDiv createP etc can be left in dom.js I think.

You can start with a PR branch from dev-2.0 against dev-2.0 if the above all made sense. Do let me know if you have any other questions.

[SilasVM]

I appreciate the feedback @limzykenneth. I'll make the appropriate modifications to my proposal and open a pull request for this from the dev-2.0 branch.

[davepagurek]

@limzykenneth do you think there's anything more to do here or is this issue safe to close now?