Skip to content

Resolve #3205989 "Hot module reload"

Tancredi D'Onofrio requested to merge issue/sfc-3205989:3205989-hot-module-reload into 8.x-1.x

Closes #3205989

This adds a new endpoint at /sfc/compile which expects a POST containing a JSON object of the format:

{ componentPath: filePath }

for example:

{
  "componentPath": "components/layout/page.sfc",
}

This filePath value would be provided by whatever is doing the POST and watching for file changes, in my case a Vite plugin. The idea is the build tool would be watching the components directory for changes and when a file is edited and saved, the tool will fire off the POST to /sfc/compile which will return a JSON encoded array describing which assets (if any) were updated and whether the <template> section was updated.

The build tool can then decide whether HMR or a full page reload is needed.

It would be very useful to know whether you feel this approach works and have any input on what the returned array format should look like. Likewise if I've named anything strangely.

There is no test coverage for the new endpoint and I might need a bit of help with that. But in theory it should be working.

To test I've set up Drupal with a simple SFC component (called test.sfc) and Postman to POST to the Drupal site on /sfc/compile, with the following JSON in the Body:

{
    "componentPath": "components/test.sfc"
}

This returns the following JSON:

{
    "css": false,
    "js": false,
    "template": true
}

The value of "template" is true in this situation even though I haven't updated the SFC file. The reason is that there is no way (other than writing out the template section as a file and comparing) of checking if the template section has changed so the assumption is that it has changed. This is also a fallback in the situation where the SFC file has no assets, therefore the template (or PHP code) has been updated, in which case a full reload is required to see the changes.

Merge request reports