README

Convert legacy PHP view templates to Twig or Blade syntax, and convert legacy JavaScript files to Stimulus controllers, Vue 3 SFCs, or modern vanilla JS.

Installation

composer require kerrialn/view-converter

Requirements

• PHP >= 7.4
• Node.js >= 16 (required for stimulus:convert, jquery:convert, and vue:convert)

Commands

convert — PHP templates → Twig or Blade

Convert a directory

php bin/view-converter convert ./views

You will be prompted to choose the output format:

Which format would you like to convert TO?
  [twig ] Twig (*.twig)
  [blade] Blade (*.blade.php)

Convert a single file

php bin/view-converter convert ./views/dashboard.php

Specify the format directly

php bin/view-converter convert ./views --format=twig
php bin/view-converter convert ./views --format=blade

Options

stimulus:convert — Legacy JS → Stimulus controller

Parses a vanilla JavaScript file using an AST parser (Node.js + acorn) and generates a Stimulus controller scaffold. Optionally scans your HTML/Twig/Blade templates and reports exactly which data- attributes to add to each element.

Basic usage

php bin/view-converter stimulus:convert ./js/dropdown.js

With template scanning

php bin/view-converter stimulus:convert ./js/dropdown.js --html-dir=./views

Preview without writing a file

php bin/view-converter stimulus:convert ./js/dropdown.js --dry-run

Options

What gets detected

Given a legacy JS file, the converter identifies:

Example output

Input: dropdown.js

(function () {
    var dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(function (dropdown) {
        var toggle = dropdown.querySelector('.dropdown-toggle');
        toggle.addEventListener('click', function (event) {
            event.preventDefault();
            // ...
        });
    });
})();

Generated: dropdown-controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["toggle", "menu", "item", "selected"]

  static values = {
    selectedValue: String,
  }

  connect() {
    // TODO: add any setup that runs when the controller connects to the DOM
  }

  handleToggleClick(event) {
    event.preventDefault();
    // ...
  }

  disconnect() {
    // TODO: remove any document-level listeners that were added in connect()
  }
}

Template scan report (when --html-dir is used):

views/nav.html
  Line 11  Add data-controller="dropdown"
  Line 12  Add data-dropdown-target="toggle"
  Line 12  Add data-action="click->dropdown#handleToggleClick"
  Line 15  Add data-dropdown-target="menu"

Note: Node.js dependencies are installed automatically on first run inside the package's node/ directory — no manual setup required.

jquery:convert — Legacy jQuery JS → vanilla JS

Rewrites a jQuery-heavy script to modern vanilla JS using an AST parser. Handles the most common jQuery patterns automatically and leaves a TODO comment for anything that needs manual attention.

Basic usage

php bin/view-converter jquery:convert ./js/modal.js

Preview without writing a file

php bin/view-converter jquery:convert ./js/modal.js --dry-run

Convert a whole directory

php bin/view-converter jquery:convert ./js --output=./js/vanilla

Options

What gets converted

Output files use a .vanilla.js suffix.

vue:convert — Vanilla JS + HTML template → Vue 3 SFC

Transforms a vanilla JS file (and an optional HTML/PHP/Twig template) into a Vue 3 Single File Component skeleton. Can optionally run the jQuery converter first as part of the pipeline.

Basic usage

php bin/view-converter vue:convert ./js/modal.js

With an HTML/PHP template

php bin/view-converter vue:convert ./js/modal.js --html=./views/modal.php

From jQuery in one step

php bin/view-converter vue:convert ./js/modal.js --from-jquery --html=./views/modal.php

Preview without writing a file

php bin/view-converter vue:convert ./js/modal.js --html=./views/modal.php --dry-run

Options

What gets converted

JavaScript:

PHP/Twig template syntax (when --html points to a .php or .twig file):

Multi-element v-if / v-for blocks (needing a <template> wrapper) and counter-based for loops are flagged with a comment for manual migration.

Output files use a .vue extension.

What gets converted (PHP → Twig)

Uses a full AST parser to accurately convert PHP template logic.

What gets converted (PHP → Blade)

Uses pattern-based conversion to produce Laravel Blade syntax.

License

MIT