V21.0.0

• Developer Improvement:

  • Fixed testing suite compatibility issues and added 30 new tests for new features
  • Added 273 JSDoc comment blocks throughout the codebase

• User Features:

  • Material UI Components:
    • Integrated 49 new, pre-styled Material UI components
    • Completely overhauled the code preview functionality to manage import statements, state, event handlers, and other essential
      variables and functions
    • Revamped iFrame implementation to allow users to interact seamlessly with state-dependent Material UI components
  • UI updates to enhance user experience:
    • Updated left panel to include Material UI tab
    • Made additional UI tweaks to accommodate additional components
    • Introduced UI elements that organized components for easier navigation
    • Added slider at the bottom right-hand corner to allow resizing of iframe

• Bugs Fixed:

  • Forgotten Password - Forgotten Password page now properly renders and enables a user to reset their password
  • Customization Panel - Fixed numerous rendering issues to establish consistent performance and UI layout
  • Tutorial Page - Fixed Link / Re-Route to Tutorial

V20.0.0

Developer Improvement:

• Migrated from Webpack to Vite, improving HMR times drastically
• Deployed app using Heroku instead of AWS decreasing time to deployment

User Features:

Collaboration Room:

• Implemented live video, audio, and text functionality using socket.IO
• Added authentication and error handling to joining existing rooms

UI updates to enhance user experience:

• In addition to drag to add, users are now able to click to add
• Updated left panel to include user information and settings
• Added scroll and zoom buttons to canvas. Scroll now automatically scrolls to bottom once enough elements are added
• Updated UI design to reflect a more modern look

Bugs Fixed:

• Canvas - All appropriate elements can now be nested - Nested Elements in the code preview now accurately reflect nested elements. They can also be dragged.
• Bottom Panel - Now opens by click instead of hover
• Users can now delete elements without first clicking it and then the X. This applies to the nested components as well.

V19.0.0

- Collaboration Rooms: Official launch of v1 collaboration rooms - allowing developers to work together on the same project smoothly. The Collaboration Room also has user mouse tracking for increased ease in collaboration.
- UI Updates: Designed with users in mind - the interface has been revamped for a sleeker, more user-friendly experience, now featuring intuitive icons.
- Typescript Conversion: Typescript coverage is now increased to ~95%.
- Cleanup: Removed unused code, fixed bugs, and made major performance improvements.
- And more: See the change log for more details on what was changed from the previous versions, as well as plans for upcoming features!

V18.0.0

• Collaboration Rooms: Implemented rooms that allow developers to collaborate together on a project.
• User List: Designed and built a user list that updates in real-time as clients join and exit.
• Typescript Conversion: Typescript coverage is now increased to ~90%.
• Cleanup: Removed unused code, fixed bugs, and refactored existing code to improve performance
• And more: See the change log for more details on what was changed from the previous versions, as well as plans for upcoming features!

Note: For comparing releases, v17 & v18 releases are pointing at the same version 3def788. Please compare v18 with v16 to see the difference between v17/v18 with v16

v17.0.0

• Improved Testing Coverage: Testing coverage now sits at ~60%.
• Typescript Conversion: Typescript coverage now sits at ~80%.
• UI Overhaul: Upgraded the UI of the application with a more modern style and better developer experience
• Marketplace Feature: Implemented a dedicated area for developers to share their projects,
• And more: See change log for more details on what was changed from the previous versions as well as plans for upcoming features!

v16.0.0

Improved Testing Coverage: Testing coverage has now doubled since version 15, and now sits at just over 50% coverage. Version 16 introduces end-to-end testing with Playwright and adds additional unit testing with React Testing Library.
Major Bug Fixes: Manage Project Features now work as expected. State Manager now deletes state from parent components. Context Manager Display Tab and CSS Editor now rendering as expected.
Typescript Conversion: Typescript coverage has improved from 30% to 80% with additional interfaces added for quality improvements.
Live CSS Demo Rendering: CSS Editor changes now rendered visually in the demo page on save.
Universal Exports on Web App: Export feature on web app now allows users to download the current project as a zip file with modularized component folder, html, and css file included. Export feature is now available to all users including guests.
UI Improvements: Fixed multiple contrast issues with white text displaying on white background. Adjusted context manager interface for improved UX. Fixed border styling within modals and error messages.
And more: See change log for more details on what was changed from the previous versions as well as plans for upcoming features!

v15.0.0

Developer Improvements

• Redux Toolkit: 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.
• Major Dependency Updates: New developers can easily npm install without having to use an older version of node or using --legacy-peer-deps. Updated to modern versions to take advantage of newer features.

User Features

• Websockets: Users can now join rooms to collaborate in realtime.
• Tailwind CSS Styling: In the customization panel users can now choose between inline CSS, and Tailwind as a styling framework. These choices are shown in the live code preview.
• Deployed Live Website: Instead of needing to download an application users may interact live by visiting our website.

Reactype v14.0.0

Added functionality & improvements:

• Event listeners:
  • Added ability to assign event listeners to elements in the bottom customization tab
  • Can name the function on the event or use the default name provided
  • Updates reflected in the code preview render
• Live code preview: Bottom tool tabs code preview box updates immediately and automatically to reflect the latest changes in state
• Converted the annotation button into a delete button on the canvas elements and reusable components
• Code preview render: The formatting for generated code has been corrected for improved readability

Major UI changes:

• Left panel:
  • Only display when mouse hovered over
  • When extended, floats in front of the canvas without affecting the main window formatting
• Bottom panel
  • Retractable feature added
  • Has internal scroll ability in the tabs
  • Resized functionality is stable
• Added indicator tabs to each signifying to the user their presence
• Canvas container (upper left):
  • Changed the formatting to a center column with readable size and label orientation
  • Standardized the size of components and rate of growth when nesting
• Tutorial:
  • Users can now reference tutorials in split-screen mode without the canvas being auto-cleared when going back and forth from the tutorial

Bug fixes:

• Reusable component: The drag-and-drop feature for reusable components is now functioning smoothly and without bugs

Note for Mac users: 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. If you are given a warning that Apple could not scan the app. Please follow these steps.

Reactype v13.0.0

New Functionality:

• Manage state locally: Users can now manage state dynamically within nested components using React Hooks within the state manager tab.
• 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.
• State/props flow: If state or props are deleted upstream, it will automatically update the state for its children components.
• 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.

Enhancements:

• Live code preview: Live rendering of code based on any changes in the state and dragging and nesting of components.
• Next.js & Gatsby compatibility: New state manager tab is now compatible with next.js and Gatsby.
• Tutorial: Tutorial is functional and has the latest guides to navigate through the newly added state management tab.

Deployment Updates:

• Electron app is now available for Windows users.
• Web based version of the app is available on Heroku.

Bug Fixes:

• User dashboard: The dashboard works now and shows private and shared projects with the ability for users to drop comments.
• Login/logout: Users can now signup/login/logout now on both development and production environments.
• Manage Projects: Github authenticated users are now able to create and save projects.
• Customization: Use State works as expected now within HTML elements.

Note for Mac users: 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. If you are given a warning that Apple could not scan the app. Please follow these steps.

Reactype v12.0.0

Add/Delete Context: Create contexts in the Context Manager tab along with the data you wish to add to said context. A table to the right will display your selected context and the data associated with it.

Assign Context to Components: Within the Context Manager tab, the Assign tab will allow you to select an existing context and the component you wish to assign it to. Click on the arrow in the middle to confirm your selection.

Context Tree: Within in Context Manager tab, the Display tab will illustrate the context tree hierarchy. Click on each context to have a detailed overview of that context.

Context Code Preview: Once contexts have been assigned to the desired components, click ‘Export’ to incorporate context into your existing codebase so you can save it a complete React application.