feat(app-webpack): preserve JSON config file formatting when updating (…

…fix: quasarframework#16808)

ported from app-vite quasarframework#17754

app-vite/lib/app-extension/api-classes/InstallAPI.js

@@ -2,12 +2,12 @@ import fs from 'fs-extra'
 import path from 'node:path'
 import { merge } from 'webpack-merge'
 import semver from 'semver'
+import { parseJSON, stringifyJSON } from 'confbox'
 
 import { warn, fatal } from '../../utils/logger.js'
 import { getPackageJson } from '../../utils/get-package-json.js'
 import { getCallerPath } from '../../utils/get-caller-path.js'
 import { BaseAPI } from './BaseAPI.js'
-import { parseJSON, stringifyJSON } from 'confbox'
 
 /**
  * API for extension's /install.js script

app-vite/lib/modes/ssr/ssr-builder.js

@@ -1,6 +1,7 @@
 import { join } from 'node:path'
 import { writeFileSync } from 'node:fs'
 import { merge } from 'webpack-merge'
+import { stringifyJSON } from 'confbox'
 
 import { AppBuilder } from '../../app-builder.js'
 import { quasarSsrConfig } from './ssr-config.js'
@@ -9,7 +10,6 @@ import { getFixedDeps } from '../../utils/get-fixed-deps.js'
 import { getProdSsrTemplateFn, transformProdSsrPwaOfflineHtml } from '../../utils/html-template.js'
 
 import { injectPwaManifest, buildPwaServiceWorker } from '../pwa/utils.js'
-import { stringifyJSON } from 'confbox'
 
 export class QuasarModeBuilder extends AppBuilder {
   async build () {

app-vite/lib/utils/get-pkg.js

@@ -1,8 +1,8 @@
 import { readFileSync, statSync } from 'node:fs'
+import { parseJSON } from 'confbox'
 
 import { warning } from './logger.js'
 import { getPackageJson } from '../utils/get-package-json.js'
-import { parseJSON } from 'confbox'
 
 export function getPkg (appPaths) {
   const { appDir, cliDir } = appPaths

app-webpack/lib/app-extension/api-classes/InstallAPI.js

@@ -2,6 +2,7 @@ const fs = require('fs-extra')
 const path = require('node:path')
 const { merge } = require('webpack-merge')
 const semver = require('semver')
+const { stringifyJSON, parseJSON } = require('confbox')
 
 const { warn, fatal } = require('../../utils/logger.js')
 const { getPackageJson } = require('../../utils/get-package-json.js')
@@ -177,7 +178,7 @@ module.exports.InstallAPI = class InstallAPI extends BaseAPI {
 
     fs.writeFileSync(
       this.resolve.app('package.json'),
-      JSON.stringify(pkg, null, 2),
+      stringifyJSON(pkg),
       'utf-8'
     )
 
@@ -208,12 +209,15 @@ module.exports.InstallAPI = class InstallAPI extends BaseAPI {
       //  which usually means we are dealing with an extended JSON flavour,
       //  for example JSON with comments or JSON5.
       // Notable examples are TS 'tsconfig.json' or VSCode 'settings.json'
+      // TODO: use parseJSONC/stringifyJSONC from confbox
       try {
-        const data = merge({}, fs.existsSync(filePath) ? JSON.parse(fs.readFileSync(filePath, 'utf-8')) : {}, newData)
+        const existingData = fs.existsSync(filePath) ? parseJSON(fs.readFileSync(filePath, 'utf-8')) : {}
+        const data = merge({}, existingData, newData)
 
         fs.writeFileSync(
           this.resolve.app(file),
-          JSON.stringify(data, null, 2),
+          // if file exists, preserve indentation, otherwise use 2 spaces
+          stringifyJSON(data, { indent: Object.keys(existingData).length > 0 ? undefined : 2 }),
           'utf-8'
         )
       }

app-webpack/lib/app-extension/create-app-ext.js

@@ -1,5 +1,6 @@
 const { existsSync, readFileSync, writeFileSync } = require('node:fs')
 const { merge } = require('webpack-merge')
+const { parseJSON, stringifyJSON } = require('confbox')
 
 const { log, fatal } = require('../utils/logger.js')
 const { AppExtensionInstance } = require('./AppExtensionInstance.js')
@@ -10,7 +11,7 @@ function readJson (file) {
   }
 
   try {
-    return JSON.parse(
+    return parseJSON(
       readFileSync(file, 'utf-8')
     )
   }
@@ -24,7 +25,8 @@ function getAppExtJson ({ file, json, onListUpdate }) {
   function save () {
     writeFileSync(
       file,
-      JSON.stringify(json, null, 2),
+      // if file exists, preserve indentation, otherwise use 2 spaces
+      stringifyJSON(json, { indent: fileExists ? undefined : 2 }),
       'utf-8'
     )
   }

app-webpack/lib/modes/capacitor/config-file.js

@@ -1,6 +1,7 @@
 const fs = require('node:fs')
 const { basename, dirname, join } = require('node:path')
 const { globSync } = require('tinyglobby')
+const { stringifyJSON, parseJSON } = require('confbox')
 
 const { log, warn } = require('../../utils/logger.js')
 const { ensureConsistency } = require('./ensure-consistency.js')
@@ -74,8 +75,9 @@ module.exports.CapacitorConfigFile = class CapacitorConfigFile {
 
     this.#tamperedFiles = []
 
+    // TODO: support other formats: .js and .ts
     const capJsonPath = appPaths.resolve.capacitor('capacitor.config.json')
-    const capJson = JSON.parse(
+    const capJson = parseJSON(
       fs.readFileSync(capJsonPath, 'utf-8')
     )
 
@@ -85,7 +87,7 @@ module.exports.CapacitorConfigFile = class CapacitorConfigFile {
       path: capJsonPath,
       name: 'capacitor.config.json',
       content: this.#updateCapJson(quasarConf, capJson, capVersion, target),
-      originalContent: JSON.stringify(capJson, null, 2)
+      originalContent: stringifyJSON(capJson)
     })
 
     this.#save()
@@ -136,7 +138,7 @@ module.exports.CapacitorConfigFile = class CapacitorConfigFile {
       }
     }
 
-    return JSON.stringify(capJson, null, 2)
+    return stringifyJSON(capJson)
   }
 
   #updateCapPkg (quasarConf) {
@@ -146,7 +148,7 @@ module.exports.CapacitorConfigFile = class CapacitorConfigFile {
     } = this.#ctx
 
     const capPkgPath = appPaths.resolve.capacitor('package.json')
-    const capPkg = JSON.parse(
+    const capPkg = parseJSON(
       fs.readFileSync(capPkgPath, 'utf-8')
     )
 
@@ -157,7 +159,7 @@ module.exports.CapacitorConfigFile = class CapacitorConfigFile {
       author: appPkg.author
     })
 
-    fs.writeFileSync(capPkgPath, JSON.stringify(capPkg, null, 2), 'utf-8')
+    fs.writeFileSync(capPkgPath, stringifyJSON(capPkg), 'utf-8')
   }
 
   #updateSSL (quasarConf, target, capVersion) {

app-webpack/lib/modes/ssr/ssr-builder.js

@@ -1,4 +1,5 @@
 const { merge } = require('webpack-merge')
+const { stringifyJSON } = require('confbox')
 
 const { AppBuilder } = require('../../app-builder.js')
 const { quasarSsrConfig } = require('./ssr-config.js')
@@ -92,7 +93,7 @@ module.exports.QuasarModeBuilder = class QuasarModeBuilder extends AppBuilder {
       this.quasarConf.ssr.extendPackageJson(pkg)
     }
 
-    this.writeFile('package.json', JSON.stringify(pkg, null, 2))
+    this.writeFile('package.json', stringifyJSON(pkg, { indent: 2 }))
   }
 
   async #writeRenderTemplate () {

app-webpack/lib/utils/get-pkg.js

@@ -1,4 +1,5 @@
 const { readFileSync, statSync } = require('node:fs')
+const { parseJSON } = require('confbox')
 
 const { warning } = require('./logger.js')
 const { getPackageJson } = require('../utils/get-package-json.js')
@@ -16,7 +17,8 @@ module.exports.getPkg = function getPkg (appPaths) {
     if (mtime !== lastAppPkgModifiedTime) {
       lastAppPkgModifiedTime = mtime
       try {
-        appPkg = JSON.parse(
+        // This may get updated and written, so use parseJSON to preserve formatting
+        appPkg = parseJSON(
           readFileSync(appPkgPath, 'utf-8')
         )
       }

app-webpack/package.json

@@ -97,6 +97,7 @@
     "chokidar": "^4.0.0",
     "ci-info": "^4.0.0",
     "compression-webpack-plugin": "^11.1.0",
+    "confbox": "^0.1.8",
     "copy-webpack-plugin": "^12.0.2",
     "cross-spawn": "^7.0.6",
     "css-loader": "^7.1.2",