Nodejs find/replace--when VSCode find/replace won't quite do the trick. 4/18/2021
VSCode's find replace is nice for common scenarios, but when I needed to migrate an app with ~300-400 components from ractive.js to svelte, I needed more control.
One of the more interesting conversions was migrating a some global dependencies to be explicitly imported. Ractive allows you to have globally-available components, so you didn't have to explicitly require them. Svelte needed me to explicitly import them, so I needed to:
- find usages of globally registered ractive components
- add an import in the script tag of the resulting .svelte file.
That task would not be possible with VSCode's find/replace, since I'm not replacing what I'm finding.
I've found myself in similar situations since then, so I keep this script around as a good starting point for advanced find/replace tasks.
const { resolve } = require('path')
const { readdir, readFile, writeFile } = require('fs').promises
const filesToInclude = 'src'
main()
function find(content) {
return content.includes('<what you are searching for>')
}
function replace(fileName, content) {
/* go wild. add new files, make multiple replacements,
parse as AST if regex won't cut it (xml/html for instance), etc.*/
return content.replace(/original_thing/g, 'new_thing')
}
function fileNameFilter(file) {
return file.endsWith('.svelte') || file.endsWith('.js')
}
async function main() {
const filesToIncludeDir = resolve(__dirname, '..', filesToInclude)
const files = await getFiles(filesToIncludeDir)
const filesToSearch = files.filter(fileNameFilter)
console.log(`Searching ${filesToSearch.length} file(s)...`)
let modifiedCount = 0
await Promise.all(filesToSearch.map(async file => {
let content = (await readFile(file)).toString()
if (find(content)) {
console.log(file)
content = replace(file, content)
await writeFile(file, content)
modifiedCount++
}
}))
console.log(`${modifiedCount} files were modified.`)
}
async function getFiles(dir) {
const dirents = await readdir(dir, { withFileTypes: true })
const files = await Promise.all(dirents.map((dirent) => {
const res = resolve(dir, dirent.name)
return dirent.isDirectory() ? getFiles(res) : res
}))
return Array.prototype.concat(...files)
}
You can setup VSCode to run a nodejs file in debug mode by adding this configuration to your launch.json file:
...
{
"type": "node",
"request": "launch",
"name": "NodeJs Current File",
"program": "${file}",
"outFiles": [],
"skipFiles": [
"<node_internals>/**"
]
}
...
Then if you select that configuration in the "Run and Debug" dropdown, you can hit F5 on any js file to run it with nodejs and debug it with VSCode.
If you're curious, the code that I used to do much of the conversion work is here: ractive-to-svelte. Regex worked well enough for all the file modifications I needed to make, so I didn't end up needing to dig into ractive's internals to get some kind of abstract syntax tree.
Enjoy!