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: CHANGE_LOG.md
+35Lines changed: 35 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -3,9 +3,38 @@
3
3
<h1align="center">ReacType Change Log</h1>
4
4
</p>
5
5
6
+
**Version 15.0.0 Changes**
7
+
8
+
Changes:<br>
9
+
10
+
- Developer Improvements:
11
+
- Redux Toolkit:
12
+
- Migrated state from a combination of useReducer/useContext and Redux to only using Redux Toolkit. This is the recommended modern approach to handling large state management in this sort of application. Enhances the developer experience by enabling the use of the Redux Devtools to debug, and see state/actions in real-time.
13
+
- Dependency Updates
14
+
- New developers can easily npm install without having to use an older version of node or using --legacy-peer-deps
15
+
- Updated to modern versions to take advantage of newer features
16
+
- User Features:
17
+
- Websockets:
18
+
- Users can now join rooms to collaborate in realtime
19
+
- Tailwind CSS:
20
+
- In the customization panel users can now choose between inline CSS and Tailwind. These changes are reflected in the live code preview.
21
+
- OAuth:
22
+
- Users may now log in using OAuth which enhances security, and makes sign in a breeze.
23
+
- Deployed Website:
24
+
- Containerized and deployed a working version of the application. Instead of having to download an application users may now interact live.
25
+
26
+
Recommendations for Future Enhancements:<br>
27
+
28
+
- Continue working on State Management. There are some changes that can be made to make the application cleaner. Right now the appStateSlice is a large file which houses a lot of the reducer functions. We believe there is a way to further modularize this to make it simpler to read, and iterate upon in the future.
29
+
- Convert to using Vite. While developing we ran into issues with webpack taking a long time to reflect changes. Vite is lightweight and enhances the developer experience.
30
+
- Expand Testing Coverage. Making a large move of state management made a lot of the testing innefective since it was based upon old ways.
31
+
- Refactor away from MUI. MUI is very opinionated and while creating components with it is easy it leaves a lot to be desired.
32
+
- Residual Bugs. While migrating state there are a few lingering bugs within the application. This process should be easier now with Redux Devtools availability, but we did not have time to go through every action and conduct thorough testing.
33
+
6
34
**Version 14.0.0 Changes**
7
35
8
36
Changes:<br>
37
+
9
38
- Added functionality & improvements:
10
39
- Event listeners:
11
40
- Added ability to assign event listeners to elements in the bottom customization tab
@@ -32,6 +61,7 @@ Changes:<br>
32
61
- Reusable component: The drag-and-drop feature for reusable components is now functioning smoothly and without bugs
33
62
34
63
Recommendations for Future Enhancements:<br>
64
+
35
65
- Add function content in the current event listeners' function skeleton.
36
66
- The code output formatting in generateCode.ts is currently difficult to read, and could be improved for better readability.
37
67
- Currently, the project uses two sets of state management tools: useReducer/useContext and Redux. useReducer/useContext is used for handling the customization state, and Redux for managing the code preview, context manager, and dark mode reducer state. However, there seems to be some confusion around how to integrate these two tools effectively. For instance, both tools are used for managing the code preview state, and changing the useReducer/useContext state would replace the corresponding redux state. Need to clean up the logic and find a solution to solve this issue.
@@ -41,27 +71,32 @@ Recommendations for Future Enhancements:<br>
41
71
**Version 13.0.0 Changes**
42
72
43
73
New Functionality:<br>
74
+
44
75
- Manage state locally: Users can now manage state dynamically within nested components using React Hooks within the state manager tab.
45
76
- Add/delete props: For a selected component, users can see a list of available props from the parent, add props, and delete props in case they are not - required later on.
46
77
- State/props flow: If state or props are deleted upstream, it will automatically update the state for its children components.
47
78
- Visualize state/props flow: Within the display sub-tab of the state manager tab, users can visualize an interactive tree diagram depicting the state initialized in the current component and passed down props from the parent component.
48
79
49
80
Enhancements:<br>
81
+
50
82
- Live code preview: Live rendering of code based on any changes in the state and dragging and nesting of components.
51
83
- Next.js & Gatsby compatibility: New state manager tab is now compatible with next.js and Gatsby.
52
84
- Tutorial: Tutorial is functional and has the latest guides to navigate through the newly added state management tab.
53
85
54
86
Deployment Updates:<br>
87
+
55
88
- Electron app is now available for Windows users.
56
89
- Web based version of the app is available on Heroku.
57
90
58
91
Bug Fixes:<br>
92
+
59
93
- User dashboard: The dashboard works now and shows private and shared projects with the ability for users to drop comments.
60
94
- Login/logout: Users can now signup/login/logout now on both development and production environments.
61
95
- Manage Projects: Github authenticated users are now able to create and save projects.
62
96
- Customization: Use State works as expected now within HTML elements.
63
97
64
98
What’s next:<br>
99
+
65
100
- Adding on click functionality within components. Goal: Make a fully functional tic-tac-toe app.
66
101
- Incorporating material ui into the components so that exported app has visually appealing components.
67
102
- Enabling auto save functionality when dragging and dropping components, and amending component state.
**ReacType** is a rapid prototyping tool built on Electron that allows users _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and an interactive, _real-time component code preview_ that can be exported as a **React** app for developers employing React component architecture alongside the comprehensive type-checking of **TypeScript**. In other words, **you can draw prototypes and export React / TypeScript code!**
36
34
37
-
Visit [reactype.io](https://reactype.io/) to learn more about the product.
35
+
Visit [reactype.dev](https://reactype.dev) to learn more about the product.
38
36
39
37
Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.
40
38
@@ -45,31 +43,30 @@ If you want to read about using ReacType, the [User Manual](https://reactype-1.h
45
43
### Installing
46
44
47
45
-**MacOS**
48
-
Download the latest [release](https://github.com/open-source-labs/ReacType/releases) <br>
49
-
After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
50
-
If you are given a warning that Apple could not scan the app. Please follow these [steps](https://support.apple.com/en-ca/HT202491)
46
+
Download the latest [release](https://github.com/open-source-labs/ReacType/releases) <br>
47
+
After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
48
+
If you are given a warning that Apple could not scan the app. Please follow these [steps](https://support.apple.com/en-ca/HT202491)
51
49
52
50
-**Windows**
53
-
Download the latest [release](https://github.com/open-source-labs/ReacType/releases)
54
-
51
+
Download the latest [release](https://github.com/open-source-labs/ReacType/releases)
55
52
56
-
## Changes with version 14.0.0
53
+
## Changes with version 15.0.0
57
54
58
-
-**Added event listeners**: Users can now add event listeners to elements in the customization tab and view a list of added events. The list can be edited to remove events, and the live code preview will show the events being added and updated.
59
-
-**Delete buttons added**: Delete buttons have been added to canvas components and elements for easier removal. Users can now delete elements or components directly by focusing on them and mouse-clicking the delete button.
60
-
-**Live code preview and component tree update**: When users drag-and-drop components and elements, the live code preview and component tree are automatically updated to reflect the changes in real-time.
61
-
-**Major UI enhancement**: The user interface has undergone a major change, including a sliding effect for the left and bottom panels to maximize user visibility. The styling has been unified and the display of the canvas hierarchy has been made more prominent for improved clarity.
55
+
-**Consolidated State Management**: Reactype was using mutliple methods of State Management. We consolidated this all to the modern version of Redux Toolkit to enhance the developer experience and make it easier to debug.
56
+
-**Major Dependency Updates**: No more workarounds required to get new developers up and running in the project. A simple npm install works as intended.
57
+
-**Websockets**: Users can now join rooms to collaborate on a project together in realtime!
58
+
-**Fully Deployed Web Application**: To utilize these new features we have hosted the full application via AWS so users can easily use Reactype without a download.
62
59
-**And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions as well as plans for upcoming features!
63
60
64
-
## (_New_) File Structure
61
+
## File Structure courtesy of Reactype version 14.0.0
Please refer to the link: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w for more details.
71
69
72
-
73
70
## Run ReacType using CLI
74
71
75
72
-**Fork** and **Clone** Repository.
@@ -79,11 +76,6 @@ Please refer to the link: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6
79
76
```bash
80
77
npm install
81
78
```
82
-
- If there is a dependency issue during installation, try switching to Node version v16.0.0 and then install. If the dependency issue still persists, try using the `--legacy-peer-deps` flag instead.
83
-
84
-
```bash
85
-
npm install --legacy-peer-deps
86
-
```
87
79
88
80
- To run the production build
89
81
@@ -103,11 +95,12 @@ npm run test
103
95
npm run dev
104
96
```
105
97
98
+
- Note that a .env with DEV_PORT, and a NODE_ENV flag (=production or development) are needed.
106
99
- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
Here is the up to date [list](https://github.com/open-source-labs/ReacType/blob/master/contributors.md) of all co-developers of this product.
145
138
Please visit our [contribution documentation](https://github.com/open-source-labs/ReacType/blob/master/contribution_documentation.md) for more information on how you can contribute to ReacType!
146
139
147
-
148
140
## License
149
141
150
142
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.
0 commit comments