How to Transition Your Project from PHP to JavaScript Using CustomGPT?

Our talented developer, Revaz, has recently created Eloquent Regex, a package designed to simplify building and executing Regex patterns in PHP applications. This package has made developers' lives much easier, and Revaz saw an opportunity to extend its benefits to the browser.

Inspired by this idea, he decided to rewrite the entire PHP project in JavaScript. And guess what? He used CustomGPT to handle the entire transition. 

Here, Revaz will provide a quick rundown of how he used CustomGPT to rewrite the PHP project into JavaScript, showing just how AI tools can boost your productivity and accuracy in code conversion projects.

Setting the Stage for Code Conversion with CustomGPT

I’ve had some experience creating general-purpose custom GPTs, but I’ve never tailored one for a specific task. I believed that if a GPT model had a deep understanding of the existing PHP project, it could simplify the conversion to JavaScript. Normally, GPT models struggle with code that lacks clear context or goals.

For example:

```php
<?php

namespace Maestroerror\EloquentRegex\Patterns;

use Maestroerror\EloquentRegex\Patterns\BasePattern;
use Maestroerror\EloquentRegex\Traits\Pattern;

class DatePattern extends BasePattern {

    use Pattern;

    protected string $pattern = "(\\d{2,4}([-\/.])\\d{2}([-\/.])\\d{2,4})";

    public static string $name = "date";

    public static array $args = [];
}

```

The code from the file presented above isn’t clear for LLM. It doesn’t show where or how it’s used or even what it’s supposed to do.

The plan was to teach the model all the little details about the project, hoping it would make rewriting the code more accurate and help determine the key components for the new implementation.

If you have never created a custom GPT before, you can learn more about it here.

Creating Custom GPT

The first step was uploading the EloquentRegex documentation and main files from the source code to custom GPT’s knowledge base. I drafted some instructions and started testing it.

After several iterations, I noticed that it didn’t understand the structure of the project, but I needed to make it as helpful as possible. For this purpose, I quickly created a file called STRUCTURE.md, which outlines the core components of the project.

Refining the instructions took some time, too; here is the final version:

“As the EloquentRegex JS Assistant, my primary role is to guide users through the process of translating the EloquentRegex PHP package into a JavaScript package. I have documentation and source files in knowledge to use while guiding users.

This process includes adapting PHP code to JavaScript, considering the syntax differences between PHP and JavaScript, and ensuring the new package is compatible with both CDN and NPM usage. 

My guidance will cover understanding the core functionalities of EloquentRegex based on my knowledge files. 

I'll provide advice on structuring the JavaScript package, implementing the builder pattern used in the original PHP version, and suggesting best practices for making the package usable and efficient within the JavaScript ecosystem. 

I will assist users by answering questions related to the conversion process and offering code snippets where appropriate. My goal is to make the transition from PHP to JavaScript as smooth and intuitive as possible, ensuring the resulting package maintains the simplicity and elegance of the original EloquentRegex package.”

Implementation Process

I started by defining a structure for a new JavaScript project and setting up the development environment with Babel, Prettier, and Jest.

We continued with replicating the main concepts from Eloquent regex:

The next significant step involved the Builder class and patterns. In this case, I improved the JavaScript version by avoiding the use of raw regex, which was prevalent in the PHP version where patterns were hardcoded.

In the JavaScript case, I decided to implement the builder initially, that allowed me to create custom regex patterns, which were then used to define other predefined patterns.

After the application was finished, I started creating automated tests. Initially, GPT had trouble generating effective test cases for the new app. To work around this, I wrote an example test and created a prompt using it in JavaScript. I integrated this with existing tests from EloquentRegex in PHP. I went through each PHP test file one by one, and GPT handled them all successfully.

The Results and Other Contributing Factors

There were several factors that contributed to the success of this rapid conversion. The availability of detailed documentation of the initial project (EloquentRegex) and my deep understanding of the project played significant roles.

Using AI tools like chatGPT can significantly improve productivity and accuracy in code conversion projects. Writing clear instructions and continuously training the AI model was crucial for achieving optimal results. For anyone considering a similar endeavor, here is your guide to achieving 4x productivity:

1. Thoroughly study the project.

2. Use an LLM to generate comprehensive project documentation.

3. Create custom GPT using documentation and relevant source files.

4. Use your new GPT to rewrite the project.

That’s all it takes! 🚀

P.S. From my experience, not having prior knowledge of the initial project's technologies in your stack isn't an issue  as long as you can read the code. However, it's crucial to be proficient in the programming language of the new project you're working on.