fix(starter): fix up vscode settings merge 🐼 (#7858)

* fix(starter): fix up vscode settings merge 🚀

* chore: change changeset 🍟

* chore: add json5.parse

* chore: use @croct/json5-parser

* chore: fix up linter

* chore: fix up linter

* test: improve test to cover the new implementation

Author: gioboa

.changeset/heavy-windows-mate.md

@@ -0,0 +1,5 @@
+---
+'create-qwik': patch
+---
+
+FIX: fix up vscode settings merge. Use JSON5 to parse settings.json to prevent parsing errors.

packages/qwik/package.json

@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",
+    "@croct/json5-parser": "0.1.1",
     "domino": "2.1.6",
     "ignore": "5.3.1",
     "image-size": "1.1.1",

packages/qwik/src/cli/add/update-files.ts

@@ -1,3 +1,4 @@
+import { JsonParser, JsonObjectNode } from '@croct/json5-parser';
 import fs from 'node:fs';
 import { extname, join } from 'node:path';
 import type { FsUpdates, UpdateAppOptions } from '../types';
@@ -28,8 +29,8 @@ export async function mergeIntegrationDir(
 
         if (destName === 'package.json') {
           await mergePackageJsons(fileUpdates, srcChildPath, destRootPath);
-        } else if (destName === 'settings.json') {
-          await mergeJsons(fileUpdates, srcChildPath, finalDestPath);
+        } else if (destDir.endsWith('.vscode') && destName === 'settings.json') {
+          await mergeVSCodeSettings(fileUpdates, srcChildPath, finalDestPath);
         } else if (destName === 'README.md') {
           await mergeReadmes(fileUpdates, srcChildPath, finalDestPath);
         } else if (
@@ -110,16 +111,19 @@ async function mergePackageJsons(fileUpdates: FsUpdates, srcPath: string, destPa
   }
 }
 
-async function mergeJsons(fileUpdates: FsUpdates, srcPath: string, destPath: string) {
+async function mergeVSCodeSettings(fileUpdates: FsUpdates, srcPath: string, destPath: string) {
   const srcContent = await fs.promises.readFile(srcPath, 'utf-8');
   try {
-    const srcPkgJson = JSON.parse(srcContent);
-    const destPkgJson = JSON.parse(await fs.promises.readFile(destPath, 'utf-8'));
-    Object.assign(srcPkgJson, destPkgJson);
+    const srcPkgJson = JsonParser.parse(srcContent, JsonObjectNode);
+    const destPkgJson = JsonParser.parse(
+      await fs.promises.readFile(destPath, 'utf-8'),
+      JsonObjectNode
+    );
+    destPkgJson.update({ ...destPkgJson.toJSON(), ...srcPkgJson.toJSON() });
 
     fileUpdates.files.push({
       path: destPath,
-      content: JSON.stringify(srcPkgJson, null, 2) + '\n',
+      content: destPkgJson.toString() + '\n',
       type: 'modify',
     });
   } catch (e) {

packages/qwik/src/cli/add/update-files.unit.ts

@@ -1,3 +1,4 @@
+import { JsonObjectNode, JsonParser } from '@croct/json5-parser';
 import { fs } from 'memfs';
 import { join } from 'path';
 import { describe, expect, test, vi } from 'vitest';
@@ -39,6 +40,16 @@ function createFakeFiles(dir: string) {
   fs.writeFileSync(join(dir, 'fake.ts'), 'fake file');
   fs.writeFileSync(join(dir, 'package.json'), '{"name": "fake"}');
   fs.writeFileSync(join(dir, 'src', 'global.css'), 'p{color: red}');
+  fs.mkdirSync(join(dir, '.vscode'), { recursive: true });
+  const settings = JsonParser.parse<JsonObjectNode>(
+    `{
+          // Comment
+          "name": "John Doe",
+          "age": 42,
+      }`,
+    JsonObjectNode
+  );
+  fs.writeFileSync(join(dir, '.vscode', 'settings.json'), settings.toString());
 }
 
 describe('mergeIntegrationDir', () => {
@@ -51,6 +62,7 @@ describe('mergeIntegrationDir', () => {
     const expectedResults = [
       'destDir/subDestDir/fake.ts',
       'destDir/subDestDir/package.json',
+      'destDir/subDestDir/.vscode/settings.json',
       'destDir/subDestDir/src/global.css',
     ];
 
@@ -64,6 +76,18 @@ describe('mergeIntegrationDir', () => {
     const monorepoSubDir = join(fakeDestDir, 'apps', 'subpackage', 'src');
     fs.mkdirSync(monorepoSubDir, { recursive: true });
     fs.writeFileSync(join(monorepoSubDir, 'global.css'), '/* CSS */');
+    const settings = JsonParser.parse<JsonObjectNode>(
+      `{ 
+          // Comment Foo
+          "css.lint.unknownAtRules": "ignore"
+      }`,
+      JsonObjectNode
+    );
+    fs.mkdirSync(join(fakeDestDir, 'apps', 'subpackage', '.vscode'));
+    fs.writeFileSync(
+      join(fakeDestDir, 'apps', 'subpackage', '.vscode', 'settings.json'),
+      settings.toString()
+    );
 
     // Add a file that should stay in the root
     fs.writeFileSync(join(fakeSrcDir, 'should-stay-in-root.ts'), 'fake file');
@@ -84,6 +108,7 @@ describe('mergeIntegrationDir', () => {
       `destDir/subDestDir/should-stay-in-root.ts`,
       `destDir/subDestDir/package.json`,
       `destDir/subDestDir/should-stay/should-also-stay.ts`,
+      'destDir/subDestDir/apps/subpackage/.vscode/settings.json',
       `destDir/subDestDir/apps/subpackage/src/global.css`,
     ];