feature: add inlay hints and upgrade to 5.0

Author: ryangjchandler

app/Http/Controllers/Api/GenerateController.php

@@ -2,24 +2,36 @@
 
 namespace App\Http\Controllers\Api;
 
+use App\Traverser\CollectSignificantNodeLocations;
 use Illuminate\Http\Request;
 use PhpParser\Error;
-use PhpParser\ParserFactory;
+use PhpParser\Lexer\Emulative;
+use PhpParser\NodeTraverser;
+use PhpParser\Parser\Php8;
+use PhpParser\PhpVersion;
 
 class GenerateController
 {
     public function __invoke(Request $request)
     {
         $code = $request->input('code');
-        $parser = (new ParserFactory)->create(ParserFactory::ONLY_PHP7);
+        $lexer = new Emulative(PhpVersion::getNewestSupported());
+        $parser = new Php8($lexer, PhpVersion::getNewestSupported());
+
+        $ast = $parser->parse($code);
+
+        $traverser = new NodeTraverser($collector = new CollectSignificantNodeLocations());
+        $traverser->traverse($ast);
 
         try {
             return response()->json([
-                'ast' => $parser->parse($code),
+                'ast' => $ast,
+                'significantNodeLocations' => $collector->getSignificantNodeLocations(),
             ]);
         } catch (Error $e) {
             return response()->json([
                 'ast' => [],
+                'significantNodeLocations' => [],
                 'error' => $e->getMessage(),
             ]);
         }

app/Traverser/CollectSignificantNodeLocations.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Traverser;
+
+use PhpParser\Node;
+use PhpParser\Node\Identifier;
+use PhpParser\Node\Name;
+use PhpParser\NodeVisitorAbstract;
+
+final class CollectSignificantNodeLocations extends NodeVisitorAbstract
+{
+    private array $significantNodeLocations = [];
+
+    public function enterNode(Node $node)
+    {
+        if ($node instanceof Identifier | $node instanceof Name) {
+            return;
+        }
+
+        $this->significantNodeLocations[] = [
+            'type' => $node::class,
+            'startPosition' => $node->getStartFilePos(),
+            'endPosition' => $node->getEndFilePos(),
+        ];
+    }
+
+    public function getSignificantNodeLocations(): array
+    {
+        return $this->significantNodeLocations;
+    }
+}

resources/js/app.js

@@ -2,9 +2,12 @@ import axios from 'axios';
 import JSONFormatter from 'json-formatter-js';
 import * as monaco from 'monaco-editor'
 
+let inlayHintLocations = [];
+let editor
+
 document.addEventListener('DOMContentLoaded', () => {
     const element = document.getElementById('editor');
-    const editor = monaco.editor.create(element, {
+    editor = monaco.editor.create(element, {
         value: "<?php\n\n",
         language: 'php',
         theme: 'vs-dark',
@@ -27,6 +30,21 @@ document.addEventListener('DOMContentLoaded', () => {
 
         generate(code);
     })
+
+    monaco.languages.registerInlayHintsProvider('php', {
+        provideInlayHints(model, range, token) {
+            return {
+                hints: inlayHintLocations.map(({ type, startPosition, endPosition }) => {
+                    return {
+                        kind: monaco.languages.InlayHintKind.Type,
+                        position: model.getPositionAt(endPosition + 1),
+                        label: `: ${type}`,
+                    }
+                }),
+                dispose: () => {},
+            }
+        }
+    })
 })
 
 async function generate(code) {
@@ -40,7 +58,7 @@ async function generate(code) {
 
     axios.post('/api/generate', { code })
         .then(response => response.data)
-        .then(({ ast, error = undefined }) => {
+        .then(({ ast, significantNodeLocations, error = undefined }) => {
             output.innerHTML = "";
 
             if (error !== undefined) {
@@ -58,5 +76,9 @@ async function generate(code) {
             output.appendChild(formatter.render());
 
             loader.style.display = "none";
+
+            inlayHintLocations = significantNodeLocations;
+
+            editor.setValue(code);
         });
 }