vuejs / repl

Vue SFC REPL as a Vue 3 component
https://repl-vuejs.vercel.app
MIT License
908 stars 163 forks source link

feat: add file renaming #63

Closed skirtles-code closed 1 year ago

skirtles-code commented 1 year ago

I've added support for renaming files. A tab can be double clicked to edit the name.

The first file cannot be renamed via the UI. This check is using i > 0, the same as the delete X. Arguably it would be better to check the mainFile in the store explicitly, but I tried to stay consistent with the existing logic for the X.

The renameFile logic in the store does support renaming the mainFile, even though that can't be achieved via the UI. It also protects against a couple of error cases that the UI prevents. I thought they might be useful to anyone trying to use renameFile directly, rather than going through the UI.

The files are ordered based on the iteration order of an object. This needed to be taken into account in the renaming logic, to avoid the renamed file jumping to the end.

The SFC filename is included in the compiled output, so it needs to be compiled when the name changes.

The template for FileSelector.vue hasn't changed as much as the diff might suggest. A lot of those lines haven't changed apart from the extra indentation caused by the addition of the <template> tag.