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
- Next.js projects will generate the right code needed for exporting a Next.js application
10
+
- Link & Image elements have been added
11
+
- Link components are able to couple with a page to enable SSR
12
+
- Current canvas can be saved as a page to be coupled with a Next.js Link element
13
+
- Image element can accept special attribute that allow for it to optimize performance
14
+
- Added Redux and began migrating some state over for ease of development (debugging & readability)
15
+
- Fixed bug causing electron to crash when closing the window rather than going to file > exit
16
+
- Fixed bug causing app to crash when project was changed to either Next.js or Gatsby.js
17
+
- Fixed GitHub OAuth
18
+
- added Passport.js & Passport-Github libraries for strategies which takes care of all the credential exchanges and session information
19
+
- linked electron front end to talk to backend to exchange credentials
20
+
- Fixed code preview not displaying properly
21
+
- Fixed dark mode not syncing properly across pages
22
+
23
+
**Version 11.0.0 Stretch Features:**
24
+
25
+
- Move more state away from the react hook & context API and into the Redux store
26
+
- This will be very time consuming but will make implementing new features much easier
27
+
- Highly suggest you read Redux documentation on best practices before diving into this
28
+
- This will improve performance by reducing the amount of unneccessary re-render. The context API causes certain pieces of state to be needlessly coupled
29
+
- Debugging is much easier by the use of Redux dev tools which allow time travel debugging
30
+
- Code will be easier to read and thus data flow will be easier to visualize
31
+
- Tried to implement peer to peer communication via webRTC with redux swarmlog but was not successful. Look into websockets.
32
+
- Save project (state) onto local storage for guests
**ReacType** is a rapid prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
11
11
In other words, **you can draw prototypes and export React / TypeScript code!**
@@ -16,7 +16,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
16
16
17
17
-**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.
18
18
19
-
-**Windows users**: Install the application by running ReacType Setup 10.0.0.exe.
19
+
-**Windows users**: Install the application by running ReacType Setup 11.0.0.exe.
20
20
21
21
-**Linux users**: Run the application as a super user in order to read and write files.
22
22
@@ -35,7 +35,7 @@ How to use
35
35
-**Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.js projects have Link components to enable client-side navigation to other routes.
36
36
-**Component Tree**: Click on the Component Tree tab next to the Code Preview tab to view the component tree hierarchy.
37
37
-**Update Styling**: Select an element on the canvas to update its basic style attributes on the right panel. As you create new instances and add styling, watch as your code dynamically generates in the code preview in the bottom panel.
38
-
-**Using State in Elements**: As of 10.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
38
+
-**Using State in Elements**: As of 11.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
39
39
-**User Preference Features**: With the click of a button, toggle between light mode and dark mode, depending on your preference.
40
40
-**Export project**: Click the “Export Project’ button to export the project’s application files into a TypeScript file. The exported project is fully functional with Webpack, Express server, routing, etc., and will match what is mocked on the canvas.
41
41
-**Export project with Tests**: Click the "includes tests" checkbox while exporting to include pre-configured Webpack, Jest, and Typescript files along with tests for your project.
@@ -49,7 +49,7 @@ How to use
49
49
-**Like**: Like other people's templates by clicking on the thumbs up icon.
50
50
-**Comment**: Comment on other templates by typing in the input field and clicking the comment icon.
51
51
-**Download**: Save any public template by clicking the download icon to save a copy as your own.
52
-
-**Publish**: Publish any template to the Public Dashboard for other users to download, like, or comment on. Click again to unpublish projects.
52
+
-**Publish**: Publish any template to the Public Dashboard for other users to download, like, or comment on. Click again to unpublish projects.
53
53
-**Sort By**: Click the 'Sort By' button to choose different metrics to sort the Public Dashboard by.
54
54
-**Form Nesting**: Nesting within form tags is now fully functional
55
55
-**Added Undo and Redo functionality**
@@ -60,31 +60,36 @@ How to use
60
60
- Modernized and cleaner UI, including enhanced dark mode
61
61
- Tutorial has been updated to reflect other modifications
62
62
63
+
**New with version 11.0.0:**
63
64
64
-
**New with version 10.0.0:**
65
-
-**Live Code Preview**: See your code preview update in real time as you build. React hooks are enabled for application lifecycle management. Dynamically render functional components using a live code editor. User's can hook event listeners to components and see them render in real time.
65
+
-**Enhanced Next.js Functionality**: Create a Next.js application in Reactype! Take advantage of server side rendering and static site generation by using the new improved Next.js link and image components. Simply drag and drop a Link element onto the canvas which can be coupled with a page to support SSR or optimize performance by using Next.js' Image component to enable on-demand image resizing. After you're done, export your project as a Next.js application written in Typescript!
66
+
-**More Dark Mode**: Cleaned up the dark mode UI and added it to all areas of the application including the sign in and sign up page.
67
+
-**Various Performance Enhancements**: Improved performance by reducing unnecessary re-rendering due to needlessly coupled state hooks
68
+
-**And more:** See CHANGE_LOG.md for more details on what was changed from the previous version as well as plans for upcoming features!
0 commit comments