ng2react (AngularJS to React)

An experimental extension for converting AngularJS to React, leveraging OpenAI's GPT API.

Early Alpha Release

Features

• Convert AngularJS Components: The plugin allows users to easily convert AngularJS components to React components by sending the components to the ng2react core library, which uses TypeScript for parsing AngularJS components and the OpenAI API to generate the React version of the component.

Requirements

• OpenAI API Key: The plugin requires an OpenAI API key to be set in the ng2react.apiKey setting. You can get an API key by signing up for the OpenAI API.

Extension Settings

1. ng2react.enabled

   • Type: String
   • Default: "auto"
   • Options: "yes", "no", "auto"
   • Description: Enable ng2react. If 'auto' is selected, ng2react will only be enabled if an angularjs project is detected

2. ng2react.sandbox

   • Type: Boolean
   • Default: false
   • Description: Enable sandbox mode. This will disable all network requests and generate a dummy response. Useful for UI testing and debugging.

3. ng2react.openai.apiKey

   • Type: String
   • Scope: Application
   • Description: API key for openai

4. ng2react.openai.model

   • Type: String
   • Default: "gpt-4"
   • Options: "gpt-4", "gpt-3.5-turbo"
   • Description: OpenAI model to use. Currently only gpt modules are supported

5. ng2react.openai.orginisation

   • Type: String
   • Scope: Application
   • Description: Optional organization ID to use with openai

6. ng2react.openai.temperature

   • Type: Number
   • Default: 0.2
   • Range: 0 to 2
   • Description: Temperature to use with openai

7. ng2react.source.angularRoot

   • Type: String
   • Default: "src"
   • Description: Root of your angularjs source code, where all your angularjs components and templates are located

8. ng2react.source.reactRoot

   • Type: String
   • Default: "src"
   • Description: Root of your React source code, where generated React files will be saved

9. ng2react.source.testRoot

   • Type: String
   • Default: "src"
   • Description: Root of your React test code, where generated React test files will be saved

10. ng2react.source.testSuffix

    • Type: String
    • Default: ".test"
    • Options: ".test", ".spec"
    • Description: Suffix for generated test files (e.g. MyComponent.test.jsx)
    • Required: "ng2react.source.testRoot"

11. ng2react.customPrompt.enabled

    • Type: Boolean
    • Default: false
    • Description: Enable custom prompts. This will allow you to provide your own prompts for ng2react to use. Useful for testing and debugging.

12. ng2react.customPrompt.location

    • Type: String
    • Default: ".ng2react"
    • Description: Folder where custom prompts can be found. Prompts must be markdown files with the extension .ng2react

13. ng2react.targetLanguage

    • Type: String
    • Default: "auto"
    • Options: "typescript", "javascript", "auto"
    • Description: Language to use for generated React files

Known Issues

There are many known issues and limitations, including:

• AI Generated Code: The generated code is not guaranteed to be correct. It is generated by an AI model and may contain bugs.
• Limited Support: The extension currently only supports converting AngularJS components to React components. It does not support converting AngularJS services, directives, or other types of AngularJS code.

Release Notes

First MVP released!

1.0.3

• Added "Check Connection command

1.0.1

• Added custom prompt support
• Added test generation
• Added prompt review (after generation)
• Added ability to save response as Markdown or J/TSX
• Added ability to select target (JSX/TSX)
• Added Treeview to display all source and converted files
• Fixed numerous bugs

Wrapping React Components

A support library is availabe for wrapping React components in AngularJScomponents. This library may not have long-term support, but you are free to use, fork, or copy whatever you like from it.

Installation

npm install --save @ng2react/support

Usage

Convert your AngularJS component or directive to React

You may do this manually or with the help of the ng2react vscode extension

// React Component
import React, { useState } from 'react';
import { useService, NgTranslate } from '@ng2react/support';

const MyReactComponent = ({ title, myController }) => {
    const myService = useService('myService');
    const [state, setState] = useState(myService.getState());
    return (
        <>
            <h1>{title}</h1>
            <p>{state}</p>
            <p>
                <NgTranslate id={'TRANLATED_TEXT_ID'} substitutions={myController.getValue()} />
            </p>
        </>
    );
};

Wrap your React component

// AngularJS Component
import * as angular from 'angular';
import { angularize } from '@ng2react/support';
import { MyReactComponent } from './MyReactComponent.jsx';

const myApp = angular.module('myApp', []);
angularize(MyReactElement, {
    module: myApp,
    name: 'myAngularComponent',
    bindings: {
        title: '@',
    },
    require: {
        myController: '^myController',
    },
    replace: true,
});