angularjs-to-react
Migrate an AngularJS codebase to a React codebase
Example
# Example Output React folder
# react-app/
# ├── public/ # Contains static assets like HTML files, icons, etc.
# │ ├── favicon.ico # App icon
# │ ├── index.html # Main HTML file
# │ └── manifest.json # Manifest file for PWA configuration
# ├── src/
# │ ├── components/ # Contains all React components.
# │ │ ├── Dashboard.tsx # Example component
# │ │ ├── UserProfile.tsx # Example component
# │ │ └── Header.tsx # Example component
# │ ├── services/ # Services for handling API calls and other shared logic.
# │ │ ├── userService.ts # Example service
# │ │ ├── apiService.ts # Handles general API interactions
# │ │ └── authService.ts # Authentication related services
# │ ├── hooks/ # Custom React hooks.
# │ │ ├── useFetch.ts # Hook for API fetching
# │ │ ├── useAuth.ts # Authentication hook
# │ │ └── useResponsive.ts # Responsive design hook
# │ ├── utils/ # Utility functions.
# │ │ ├── format.ts # Formatting utilities
# │ │ ├── validate.ts # Validation utilities
# │ │ └── constants/ # Constants used across the app
# │ │ ├── <constant-name>.ts
# │ │ ├── <constant-name>.ts
# │ │ └── <constant-name>.ts
# │ ├── store/ # Redux store, reducers, and actions if using Redux.
# │ │ ├── index.ts # Combines reducers and configures the store
# │ │ ├── rootReducer.ts # Root reducer combining all feature reducers
# │ │ ├── user/
# │ │ │ ├── userActions.ts # Actions for user-related functionality
# │ │ │ ├── userReducer.ts # Reducer for user-related data
# │ │ │ └── userTypes.ts # TypeScript types and interfaces for user
# │ │ ├── product/
# │ │ │ ├── productActions.ts # Actions for product-related functionality
# │ │ │ ├── productReducer.ts # Reducer for product-related data
# │ │ │ └── productTypes.ts # TypeScript types and interfaces for product
# │ │ └── settings/
# │ │ ├── settingsActions.ts # Actions for settings functionality
# │ │ ├── settingsReducer.ts # Reducer for settings data
# │ │ └── settingsTypes.ts # TypeScript types and interfaces for settings
# │ ├── assets/ # Static assets like images, stylesheets, etc.
# │ │ ├── images/ # Folder for images
# │ │ ├── styles/ # Folder for CSS or SCSS files
# │ │ └── fonts/ # Folder for custom fonts
# │ ├── routes/
# │ │ ├── PrivateRoute.tsx # Component for handling private routes
# │ │ └── Routes.tsx # All route definitions in one place
# │ ├── App.tsx # Root React component
# │ └── index.tsx # Entry point for React application, setup context providers, and Router
# ├── tsconfig.json # TypeScript configuration file
# ├── package.json # Project metadata and dependencies
# ├── .gitignore # Specifies intentionally untracked files to ignore
# └── README.md # Project overview and documentation
constants:
react_directory: 'react'
src_directory: '{{ react_directory }}/src'
router_directory: '{{ src_directory }}/routes'
components_directory: '{{ src_directory }}/components'
services_directory: '{{ src_directory }}/services'
utils_directory: '{{ src_directory }}/utils'
root_router_path: '{{ router_directory }}/Router.tsx'
context_depth: 3 # The depth of the context to retrieve for each file.
should_convert_to_react_prompt: |
Should this file be converted to React/Typescript? My preference is "No" if conversion isn't absolutely necessary.
## Criteria:
- If the file contains AngularJS related logic, answer "Yes".
- If the file contains `angular.module(...)`, `constants`, `factories`, `services`, or `directives`, or other code that would be converted to React from AngularJS, answer "Yes".
- Otherwise, answer "No".
transformation_notes: |
## Codebase Transformation Notes
### Generation Preferences
When generating code, follow these guidelines:
- Only include information from the portion you were told to convert.
- Do not create new configs, components, or example usages.
- Remove AngularJS-specific elements that cannot be converted to React.
- Leave empty functions as they are.
- If the current file path was provided above, you should ensure that the import paths are relative to this path.
### Angularjs to React Conversion Guidelines
- Angular `ng-` directives should be converted to the react-equivalent logic. Do not leave these in the template.
- Special built-in angularjs services and factories, typically defined as $<service-name>, should be converted to react-equivalent logic.
- AngularJS injectors are no longer needed in React.
### New Files
When defining new files based on unconverted files, assume the following naming strategies (useful for imports):
- AngularJS constants -> TypeScript constants in `{{ utils_directory }}/constants/<constant-name>.ts`.
- AngularJS services, factories, and providers -> React services in `{{ services_directory }}/<current-file-name>.ts`.
- AngularJS directives and filters -> React components in `{{ components_directory }}/<current-file-name>.tsx`.
- AngularJS controllers and template HTML files -> React components in `{{ components_directory }}/<current-file-name>.tsx`.
### Libraries
- Any Bootstrap can be converted/replaced with the react-bootstrap library.
- Use Axios for HTTP requests instead of AngularJS's $httpProvider.
ignore_file_paths:
- '**/assets/**'
- 'assets/**'
- 'gulpfile.js'
- 'LICENSE'
- '**/test/**'
- 'test/**'
- 'package.json'
- '.gitignore'
- 'tsconfig.json'
- 'README.md'
- '**/*.min.*'
- '**/*.map'
- '**/*.png'
- '**/*.svg'
- '**/*.ico'
- '**/*.jpg'
- '**/*.jpeg'
- '**/*.eot'
- '**/*.ttf'
- '**/*.otf'
- '**/*.woff'
- '**/*.woff2'
- '**/{{ react_directory }}'
- '**/{{ react_directory }}/**'
dependency_prompt: |
Acronym Key:
- SDIF: Symbol Defined In File
- SDE: Symbol Defined Externally
- MAP: Mapping
You should find all SDIFs, SDEs, and MAPs in the file. Below are some hints to help you determine usage, but also rely on your innate knowledge in case the usage is not explicitly stated below.
You only care about the high level connections between files like definitions for factories, controllers, services, configs, etc. and their dependencies (declared in the brackets after the name of the angular declaration type) as well as mappings of controllers to file paths. The only time you care about values declared in the template is if it is declared on the $rootScope or some other user defined global variable.
Rules:
- If a AngularJS directive is declared in the template, you care about the value the directive is set to, not the directive itself. For example if you have `ng-controller="ExampleCtrl as example"`, you should only care about `ExampleCtrl` and not `ng-controller`.
- If an Angularjs module is defined in this file, you should return the name of the module as one of the SDIF keys. If it is just used or added to with .controller, .factory, .service, etc, you should include it as a SDE key.
- You should ALWAYS ignore built-in special angularjs functions, variables, and boilerplate like `$http`, `$timeout`, `.module`, `.controller`, etc.
- You should still include $rootScope definitions because it tells us where the global variables are defined.
- NEVER include standard library variables like window.* or document.*, console.*, etc. when looking for SDIFs or SDEs.
- When including nested objects, you should AT MOST include 1 level deep. For example, if you have `PageValue.page.title` and `PageValue.page.content`, you should only include `PageValue.page` once as a SDIF or SDE key, even though more deeply nested sub-fields may be present.
- `directives` defined in js logic should be converted to kebab-case (e.g. `myDirective` -> `my-directive`), then added as a key in either SDIF or SDE.
## MAP Example:
```
var routes = {
"example": {
controller: 'ExampleCtrl',
templateUrl: 'example.html'
}
// ...
<div>
{{ routes }}
</div>
```
- In the above case, in "routes.example" the controller and template are mapped to each other where the template relies on the controller.
- Note that usages of variables, even if defined externally, would not be considered mappings. Mappings should only be used to allow us to map two files together and should NEVER include two symbol types.
- For now, mappings should ONLY be two paths or a symbol and a path. It should never be a symbol and a symbol.
## SDIF Example:
SDIFs are frequently defined in the controller, service, factory, constant, config, etc. Typically it would look something like `angular.module(...).controller(...);` where controller could be any of the valid angularjs types.
```
angular.module('app').controller('ExampleCtrl', ['$scope', '$http', function($scope, $http) {
$scope.example = 'example';
$rootScope.exampleGlobal.example = 'example';
}]);
```
In the above case, the controller is ExampleCtrl and it is a SDIF, likely to be used in other parts of the application. $scope is used to represent local variables in the controller and therefore shouldn't be included. However, `$rootScope.exampleGlobal.example` should be included as an SDE under the key `$rootScope.exampleGlobal`.
## SDE Example:
SDEs are frequently USED in a controller, service, factory, constant, config, etc.
```
angular.module('app').controller('AnotherCtrl', ['$scope', '$http', function($scope, $http) {
if ($scope.example) {
// ...
}
}]);
```
In the above case, $scope.example should not be included in either SDE or SDIF because it is local only to this file and the template. In this case though, AnotherCtrl would be returned as a SDIF, `module("app")` would also be included as an SDE".
steps:
- name: Create a new React app
tools:
- name: create_react_app
arguments:
path_to_directory: '{{ react_directory }}'
- name: Build a dependency graph of the codebase
tools:
- name: build_dependency_graph_with_ai
arguments:
dependency_prompt: '{{ dependency_prompt }}'
exclude_path_patterns: '{{ ignore_file_paths }}'
- name: Set Up Skeleton Files
tools:
# Set up a skeleton router file
- name: create_file
arguments:
path_to_file: '{{ root_router_path }}'
file_contents: |
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const AppRouter = () => {
return (
<Router>
<Switch>
{/* Add routes here */}
</Switch>
</Router>
);
}
export default AppRouter;
- name: Convert files in order
tools:
- name: get_files_in_conversion_order
returns: conversion_order_by_level
- name: for_each
items: '{{ conversion_order_by_level }}'
parallel: false
each_item:
item_name: level
tools:
- name: for_each
items: '{{ level }}'
each_item:
item_name: file_to_convert
tools:
- name: get_content_from_file
arguments:
path_to_file: '{{ file_to_convert }}'
returns: file_contents
- name: get_file_context
arguments:
path_to_file: '{{ file_to_convert }}'
depth: '{{ context_depth }}'
returns: file_context
# Check to see if file should be converted before sending it into the switch
- name: ask_question
arguments:
question_prompt: |
{{ should_convert_to_react_prompt }}
## {{ file_to_convert }}
```
{{ file_contents }}
```
returns: should_convert_to_react
- name: if_else
condition: '{{ should_convert_to_react }}'
if:
tools:
- name: switch
content: |
## {{ file_to_convert }}
```
{{ file_contents }}
```
cases:
# Update App.tsx
- condition_prompt: Is this the root entry point either logic or template for the AngularJS app that should be put into the App.tsx React file?
break: true
tools:
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code to convert to React ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract code from the AngularJS file that should be converted to React.
- Merge that code with the existing content in the file and write out the merged content.
- The only time you can fully replace code is if the code in App.tsx is clearly the dummy text that was generated by create-react-app.
- If the code already looks like it was converted from AngularJS, you should ensure all previous functionality remains along with the new logic that you will implement.
- Do not just concatenate converted parts together, you should rewrite so that the code is DRY without losing functionality.
- If there isn't any code in the file to convert that could become valid React, you should not make any edits to the file.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ src_directory }}/App.tsx'
edit_prompt: '{{ truncated_prompt }}'
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths:
- '{{ src_directory }}/App.tsx'
# Constant or value
- condition_prompt: Does this file contain an Angularjs constant or value definition?
tools:
- name: find_content_in_file_with_ai
arguments:
path_to_file: '{{ file_to_convert }}'
find_context_prompt: 'Find and return JUST the name of each constant or value defined in the file. If there are none, return an empty array.'
results_as_array: true
returns: constant_or_value_names
- name: for_each
items: '{{ constant_or_value_names }}'
returns_key: constant_file_path
each_item:
item_name: constant_or_value_name
tools:
- name: make_variable
arguments:
value: '{{ utils_directory }}/constants/{{ constant_or_value_name }}.ts'
returns: constant_file_path
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract `{{ constant_or_value_name }}` from the above AngularJS code and convert it to a TypeScript constant for React components.
- Only extract and convert `{{ constant_or_value_name }}` and it's relevant information to make it work in React on it's own. Ignore anything else.
- The resulting file will be created at {{ constant_file_path }}.
- You should always type the converted angularjs constant or value in TypeScript with the information given. Do not assume new fields, only create a type from the fields you know for certain exist.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ constant_file_path }}'
edit_prompt: '{{ truncated_prompt }}'
# Return from for loop
returns: file_paths
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths: '{{ file_paths }}'
# Filters
- condition_prompt: Does this file contain an Angularjs filter definition?
tools:
- name: find_content_in_file_with_ai
arguments:
path_to_file: '{{ file_to_convert }}'
find_context_prompt: 'Find and return JUST the name of each filter defined in the file. If there are none, return an empty array.'
results_as_array: true
returns: filter_names
- name: for_each
items: '{{ filter_names }}'
returns_key: filter_file_path
each_item:
item_name: filter_name
tools:
- name: make_variable
arguments:
value: '{{ utils_directory }}/{{ filter_name }}.ts'
returns: filter_file_path
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract `{{ filter_name }}` from the above AngularJS code and convert it to a TypeScript utility function for React components.
- Only extract and convert `{{ filter_name }}` and its relevant information to make it work in React on its own. Ignore anything else.
- The resulting file will be created at {{ filter_file_path }}.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ filter_file_path }}'
edit_prompt: '{{ truncated_prompt }}'
# Return from for loop
returns: file_paths
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths: '{{ file_paths }}'
# Services
- condition_prompt: Does this file contain an Angularjs service definition?
tools:
- name: find_content_in_file_with_ai
arguments:
path_to_file: '{{ file_to_convert }}'
find_context_prompt: 'Find and return JUST the name of each service defined in the file. If there are none, return an empty array.'
results_as_array: true
returns: service_names
- name: for_each
items: '{{ service_names }}'
returns_key: service_file_path
each_item:
item_name: service_name
tools:
- name: make_variable
arguments:
value: '{{ services_directory }}/{{ service_name }}.ts'
returns: service_file_path
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract `{{ service_name }}` from the above AngularJS code and convert it to a TypeScript service for React components.
- Only extract and convert `{{ service_name }}` and its relevant information to make it work in React on its own. Ignore anything else.
- The resulting file will be created at {{ service_file_path }}.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ service_file_path }}'
edit_prompt: '{{ truncated_prompt }}'
# Return from for loop
returns: file_paths
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths: '{{ file_paths }}'
# Configs
- condition_prompt: Does this file contain an Angularjs config definition?
tools:
- name: find_content_in_file_with_ai
arguments:
path_to_file: '{{ file_to_convert }}'
find_context_prompt: 'Find and return JUST the name of each config defined in the file. If there are none, return an empty array.'
results_as_array: true
returns: config_names
- name: for_each
items: '{{ config_names }}'
returns_key: config_file_path
each_item:
item_name: config_name
tools:
- name: make_variable
arguments:
value: '{{ router_directory }}/{{ config_name }}.ts'
returns: config_file_path
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract `{{ config_name }}` from the above AngularJS code and convert it to a TypeScript config for React components.
- Only extract and convert `{{ config_name }}` and its relevant information to make it work in React on its own. Ignore anything else.
- The resulting file will be created at {{ config_file_path }}.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ config_file_path }}'
edit_prompt: '{{ truncated_prompt }}'
# Return from for loop
returns: file_paths
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths: '{{ file_paths }}'
# Directives
- condition_prompt: Does this file contain an Angularjs directive definition?
tools:
- name: find_content_in_file_with_ai
arguments:
path_to_file: '{{ file_to_convert }}'
find_context_prompt: 'Find and return JUST the name of each directive defined in the file. If there are none, return an empty array.'
results_as_array: true
returns: directive_names
- name: for_each
items: '{{ directive_names }}'
returns_key: directive_file_path
each_item:
item_name: directive_name
tools:
- name: make_variable
arguments:
value: '{{ components_directory }}/{{ directive_name }}.tsx'
returns: directive_file_path
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract `{{ directive_name }}` from the above AngularJS code and convert it to a TypeScript component for React components.
- Only extract and convert `{{ directive_name }}` and its relevant information to make it work in React on its own. Ignore anything else.
- The resulting file will be created at {{ directive_file_path }}.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ directive_file_path }}'
edit_prompt: '{{ truncated_prompt }}'
# Return from for loop
returns: file_paths
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths: '{{ file_paths }}'
# Controllers
- condition_prompt: Does this file contain an Angularjs controller definition?
tools:
- name: find_content_in_file_with_ai
arguments:
path_to_file: '{{ file_to_convert }}'
find_context_prompt: 'Find and return JUST the name of each controller defined in the file. If there are none, return an empty array.'
results_as_array: true
returns: controller_names
- name: for_each
items: '{{ controller_names }}'
returns_key: controller_file_path
each_item:
item_name: controller_name
tools:
- name: make_variable
arguments:
value: '{{ components_directory }}/{{ controller_name }}.tsx'
returns: controller_file_path
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract `{{ controller_name }}` from the above AngularJS code and convert it to a TypeScript component for React components.
- Only extract and convert `{{ controller_name }}` and its relevant information to make it work in React on its own. Ignore anything else.
- The resulting file will be created at {{ controller_file_path }}.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ controller_file_path }}'
edit_prompt: '{{ truncated_prompt }}'
# Return from for loop
returns: file_paths
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths: '{{ file_paths }}'
# Routes
- condition_prompt: Does this file contain Angularjs routes definitions that should be included in the React Router?
tools:
- name: truncate_prompt
arguments:
contents:
- priority: 3
content: '{{ file_context }}'
- priority: 2
content: |
Angularjs Code to convert to React ({{ file_to_convert }}):
```
{{ file_contents }}
```
- priority: 1
content: |
# Instructions
- Extract the route definition from the above AngularJS code.
- The only code you care about in this file is the route definition and the variables that define it. Ignore all other code.
- Convert the extracted router-related code to use React Router.
- Merge the converted code with the existing content in {{ root_router_path }}.
- Ensure all previous functionality remains along with the new logic that you implement.
- Do not just concatenate converted parts together, you should rewrite so that the code is DRY without losing functionality. The result should be a valid React Router configuration file.
- If there isn't any code in the angularjs file that could be converted to valid React Router, you should not make any edits to the file - just return an empty string in that case.
- Do not implement anything other than the router. Other logic will be converted in different steps.
{{ transformation_notes }}
returns: truncated_prompt
- name: edit_file
arguments:
path_to_file: '{{ root_router_path }}'
edit_prompt: '{{ truncated_prompt }}'
- name: mark_files_converted_in_context
arguments:
done_converting: false
old_file_path: '{{ file_to_convert }}'
new_file_paths:
- '{{ root_router_path }}'
default:
tools:
# TODO: Implement this case
- name: echo_one
arguments:
echo_arg: 'Doing nothing with {{ file_to_convert }}'
else:
tools:
# TODO: Implement this case
- name: echo_one
arguments:
echo_arg: 'Skipping {{ file_to_convert }}'
# This file is done being converted since it has been fully processed by the switch statement (or skipped)
- name: mark_files_converted_in_context
arguments:
done_converting: true
old_file_path: '{{ file_to_convert }}'Last updated