You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-18Lines changed: 9 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,45 +10,36 @@ We are a community of, and in solidarity with, people from every gender identity
10
10
11
11
Learn more about [our community](https://p5js.org/community/) and read our [Community Statement and Code of Conduct](./.github/CODE_OF_CONDUCT.md). You can directly support our work with p5.js by [donating to the Processing Foundation](https://processingfoundation.org/support).
12
12
13
-
Stay in touch with Processing Foundation across other platforms:
13
+
Stay in touch with Processing Foundation across other platforms:
Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
23
+
Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
24
24
25
-
For more information on usage guidelines for the p5.js Editor, check out the [p5.js Editor Terms of Use](https://editor.p5js.org/terms-of-use). To gain better insight into how we handle user data and data privacy, refer to the [p5.js Editor Privacy Policy](https://editor.p5js.org/privacy-policy).
25
+
For more information on usage guidelines for the p5.js Editor, check out the [p5.js Editor Terms of Use](https://editor.p5js.org/terms-of-use). To gain better insight into how we handle user data and data privacy, refer to the [p5.js Editor Privacy Policy](https://editor.p5js.org/privacy-policy).
26
26
27
27
## Contributing 📖 🐛 🎨
28
28
29
-
The p5.js Editor is a collaborative project created by many individuals, mostly volunteers, and you are invited to help. All types of involvement are welcome. To get started with contributing to the p5.js Editor, we recommend exploring the following resources in order:
29
+
The p5.js Editor is a collaborative project created by many individuals, mostly volunteers, and you are invited to help. All types of involvement are welcome. To get started with contributing to the p5.js Editor, we recommend exploring the following resources in order:
30
30
31
31
1.[p5.js Community Statement and Code of Conduct](https://editor.p5js.org/code-of-conduct) - Read our Community Statement and Code of Conduct to understand the values that guide our community and how to participate respectfully and constructively.
32
32
33
33
2.[Contributor Docs](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/README.md) - For a deeper look at how to get involved with the p5.js Editor, check out our Contributor Docs for more in-depth details about contributing to different areas of the project, including code, bug fixes, documentation, discussion, and more.
34
34
35
35
3.[All Contributors list on the p5.js repository](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) - Explore the All Contributors list to see the wide range of contributions by our amazing community!
36
36
37
-
> **TypeScript Migration:**
38
-
> As of July 2025, we are working on migrating the repo to TypeScript as part of the **[p5.js Web Editor pr05 Grant](https://github.com/processing/pr05-grant/wiki/2025-pr05-Program-Page)**.
39
-
> This migration will occur in two phases:
40
-
> 1.**Grant Work (July – October 31, 2025)** – Setting up TypeScript configuration, tooling, and starting partial migration. Contributions will be **closed** during this period.
41
-
> 2.**Open Contribution (After October 31, 2025)** – TypeScript migration tasks will **open** to all contributors, with guidelines and tutorials available.
37
+
> **TypeScript Migration:** We have initiated migrating the repo to Typescript as part of the **[p5.js Web Editor pr05 Grant](https://github.com/processing/pr05-grant/wiki/2025-pr05-Program-Page)**, and the repo is now open to migration contributions.
42
38
>
43
-
> For full details, see [TypeScript Migration Plan](./contributor_docs/typescript-migration.md).
39
+
> Please see [Typescript Migration](./contributor_docs/typescript_migration.md) for migration guidelines. Please see [2025 pr05 Typescript Migration Project](./contributor_docs/pr05_2025_typescript_migration/index.md) for details and technical decisions for the migration project.
44
40
45
41
## Acknowledgements 🙏
46
42
47
-
Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others.
43
+
Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others.
Hosting and technical support has come from: <br /> <br /> <ahref="https://releasehub.com/"target="_blank"><imgwidth="100"src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a> <br /> <ahref="https://www.browserstack.com/"target="_blank"><imgwidth="100"src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>
This is the project appendix for the **2025 pr05 Grant: Incremental Typescript Migration of the p5.js Web Editor**.
4
+
5
+
## Table of Contents
6
+
7
+
## Project Outline:
8
+
9
+
### Project Background:
10
+
11
+
<details>
12
+
<summary>View details</summary>
13
+
14
+
- Grant period of 200h over July 1st - October 31, 2025
15
+
- 116k lines of code within the repo, with about 30% test coverage
16
+
- Many older technologies, tied to Node 16 (bumped to Node 18 in August)
17
+
18
+
</details>
19
+
20
+
### Proposed Approach:
21
+
22
+
> To set up the repo so that beginning contributors can pick up migration work as a "Good first issue"
23
+
24
+
<details>
25
+
<summary>Set up all config to be both TS & JS compatible</summary>
26
+
27
+
- Not possible to migrate entire repo within 200h
28
+
- Migration must also be file-by-file, so all config needs to be flexible to work with legacy JS code
29
+
- Key technologies:
30
+
- Node
31
+
- React
32
+
- Express
33
+
- MongoDB
34
+
- Jest
35
+
- Babel
36
+
- Webpack
37
+
- ESLint
38
+
39
+
</details>
40
+
41
+
<details>
42
+
<summary>Set up typechecking tooling & automation
43
+
</summary>
44
+
45
+
- Global typecheck command for both the `/server` and `/client` folders
46
+
- Isolated typecheck command for each the `/server` and `/client` folders
47
+
- Automated typecheck on pre-commit hook
48
+
- Automated typecheck on CICD tests
49
+
50
+
</details>
51
+
52
+
<details>
53
+
<summary>
54
+
Migrate an instance of each "kind" of file a developer might encounter to provide example code to follow
55
+
</summary>
56
+
57
+
- Client:
58
+
- React file
59
+
- Plain TS file (eg. `/utils`)
60
+
- Server:
61
+
- Mongoose Model --> `User`
62
+
- Mongoose Controller --> `User.Controller`
63
+
- Express Routes
64
+
- Plain TS file (eg. `/utils`)
65
+
- Examples of writing tests for the above
66
+
- Example of extending namespaced types through `.d.ts` files
67
+
68
+
</details>
69
+
70
+
### Project Timeline:
71
+
72
+
<imgsrc='Project_Timeline.png'/>
73
+
74
+
## Outcome:
75
+
76
+
- Root TS config that points to separate TS and
77
+
78
+
## Key Decisions:
79
+
80
+
- Typescript is used for typechecking only, not compiling
81
+
82
+
- Define "source-of-truth" types in the `./server/types` folder
83
+
84
+
- Pull any types that are relevant to share with the `./client` into the `./common/types` folder
85
+
86
+
- Prefer `named` exports over `default` exports
87
+
88
+
- JSDocs for API endpoints & client components that hit API endpoints
89
+
90
+
- Will eventually migrate to OpenAPI/Swagger documentation
91
+
- Enables devs to hover and see details more easily
92
+
93
+
- Prefer `interface` over `type`
94
+
95
+
-`/server` types are in `/types` folder
96
+
-`/client` types are co-located for now -- pending change
97
+
98
+
- Components have their own types so they get messy
99
+
100
+
- If using code-assistance, make sure to write unit tests that cover all happy/unhappy paths to secure against regression. Please see [testing](../testing.md) for more details on general guidelines, or the example code index below.
101
+
102
+
- Make a best effort at being as precise as possible with context clues, but when in doubt, selecting a broader type (eg. `string` instead of an `enum`) is valid and we can update to be stricter as the migration continues.
103
+
104
+
## Configuration Summary:
105
+
106
+
## Migration Tutorial:
107
+
108
+
## Examples Index:
109
+
110
+
## Next Step Issues:
111
+
112
+
- Migration for the rest of the repo
113
+
114
+
- Prioritise `/server` if possible
115
+
- Testing is mandatory for `/server` migration
116
+
- For `/client` files, if the component does not hit the `/server` api, it is ready for migration.
117
+
- If it does it is recommended to wait for the relevant `/server` system to be migrated first (eg. Projects, Collections)
-[Intro to the Incremental Typescript Migration for the p5.js Web Editor](https://medium.com/@clairepeng94/intro-to-the-incremental-typescript-migration-for-the-p5-js-web-editor-2ffbc305c6a9)
This repository is undergoing a TypeScript migration as part of the **2025 pr05 Grant: Incremental Typescript Migration of the p5.js Web Editor**, running **July – October 31, 2025**. Details on the [pr05 grant](https://github.com/processing/pr05-grant/wiki/2025-pr05-Program-Page) and [migration project](https://github.com/processing/pr05-grant/wiki/2025-pr05-Project-List#incremental-typescript-migration-for-the-p5js-editor).
3
+
This repository is undergoing a Typescript migration, initiated through the **2025 pr05 Grant: Incremental Typescript Migration of the p5.js Web Editor**, running **July – October 31, 2025**.
4
4
5
-
## Phase 1: Grant Work (July – October 31, 2025)
5
+
For further details on the initial migration project, please see the [project appendix](./pr05_2025_typescript_migration.md)
6
6
7
-
During this period, the grant team will:
7
+
Below are some guidelines on completing the migration.
8
8
9
-
- Configure and enable TypeScript across the project (`tsconfig`, linting, type checking, etc).
10
-
- Set up linting, testing, and other related developer tooling for TS.
11
-
- Begin migrating selected JavaScript files to TypeScript.
12
-
- Prepare documentation and workflow so migration tasks can become **good first issues** for new contributors.
9
+
## Migration Approach:
13
10
14
-
> **Note:** While this initial setup and partial migration is in progress, contributions to the migration itself will **not** be open to the public.
15
-
16
-
## Phase 2: Open Contribution (After October 31, 2025)
17
-
18
-
When the grant period ends:
19
-
20
-
- The migration effort will open up to all contributors.
21
-
- This section will include **guidelines, tutorials, and examples** for migrating files from JavaScript to TypeScript in this project.
22
-
- Migration tasks will be clearly labeled in the issue tracker (e.g., `good first issue`, `typescript migration`).
0 commit comments