adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 09:02:19 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: Keep comment #193

New Issue
Closed
opened 2026-10-05 02:32:44 +02:00 by adam · 6 comments
adam commented 2026-10-05 02:32:44 +02:00
Owner
Copy link
Copy source

Is your feature request related to a problem? Please describe.
I put comments for readability in the front matter. modified by this extension, all comments gone! 🎉

Describe the solution you'd like
use yaml or similar package to keep comments

**Is your feature request related to a problem? Please describe.** I **put comments** for readability in the front matter. modified by this extension, _**all comments gone!**_ :tada: **Describe the solution you'd like** use [yaml](https://www.npmjs.com/package/yaml) or similar package to [keep comments](https://eemeli.org/yaml/v1/#comments) <!-- github-sync-id:1126746765 -->
adam closed this issue 2026-10-05 02:32:44 +02:00
adam commented 2026-10-05 02:32:45 +02:00
Author
Owner
Copy link
Copy source

Thanks @mjy9088 this is indeed a known issue. Unfortunatly, this is related to the YAML parser. The sample you provided is still going to give the same issue. The YAML parser will keep only the comments that were added before the front matter section.

Screenshot 2022-02-08 at 09 54 39

I have just tested this by writing a parser based on the sample you gave me. My front matter looks as follows:

Screenshot 2022-02-08 at 09 56 44

The parser returns:

Screenshot 2022-02-08 at 09 56 44

Important

: Notice the comment and commentBefore, both are null.

Went a bet further, and checked what it parsed, and unfortunately, it also removes the comments:

Screenshot 2022-02-08 at 10 10 24

Info: This is the data map from all the front matter fields it parsed. I'm using 13. and get 13 back, but the three comments are just ignored.

If you know a way to handle this, feel free to suggest or contribute. I'm sure this issue can help others as well.

Thanks @mjy9088 this is indeed a known issue. Unfortunatly, this is related to the YAML parser. The sample you provided is still going to give the same issue. The YAML parser will keep only the comments that were added before the front matter section. ![Screenshot 2022-02-08 at 09 54 39](https://user-images.githubusercontent.com/2900833/152952018-3c1d858e-b7be-4a5c-a6b7-37b112099f4e.png) I have just tested this by writing a parser based on the sample you gave me. My front matter looks as follows: ![Screenshot 2022-02-08 at 09 56 44](https://user-images.githubusercontent.com/2900833/152954742-7b8a0bdb-3ab6-410f-a3ee-7228320f2fb7.png) The parser returns: ![Screenshot 2022-02-08 at 09 56 44](https://user-images.githubusercontent.com/2900833/152954796-c3fac24f-a8ff-4786-a12d-c9c9556003ca.png) > **Important**: Notice the `comment` and `commentBefore`, both are `null`. Went a bet further, and checked what it parsed, and unfortunately, it also removes the comments: ![Screenshot 2022-02-08 at 10 10 24](https://user-images.githubusercontent.com/2900833/152955014-7589fa16-6e6f-4aff-97d9-852c807cf9b2.png) > **Info**: This is the data map from all the front matter fields it parsed. I'm using 13. and get 13 back, but the three comments are just ignored. If you know a way to handle this, feel free to suggest or contribute. I'm sure this issue can help others as well. <!-- github-comment-id:1032380358 -->
adam commented 2026-10-05 02:32:46 +02:00
Author
Owner
Copy link
Copy source

https://codesandbox.io/s/yaml-comment-test-jl08o

import YAML from "yaml";

const original = `
# This is YAML
---
title: YAML Test
slug: yaml-test
date: '2022-02-08T17:34:18.844Z'
lastmod: '2022-02-09T10:08:20.682Z'
tags:
  - 'lang:XML'
  # TODO: add more languages
  # this comment is ok also
  - Test
`;

const parsed = YAML.parseDocument(original);

const serialized = parsed.toString();

console.log(serialized);

output:

# This is YAML
---
title: YAML Test
slug: yaml-test
date: '2022-02-08T17:34:18.844Z'
lastmod: '2022-02-09T10:08:20.682Z'
tags:
  - 'lang:XML'
  # TODO: add more languages
  # this comment is ok also
  - Test

The parser looks fine.

Since I had previously used the comment-json module (almost same to using global JSON object), I expected that using the yaml module would also be straightforward.

...but now that I see it, using this module is not that simple 😢 it seems like a lot of changes are needed to use this module.

https://codesandbox.io/s/yaml-comment-test-jl08o ```javascript import YAML from "yaml"; const original = ` # This is YAML --- title: YAML Test slug: yaml-test date: '2022-02-08T17:34:18.844Z' lastmod: '2022-02-09T10:08:20.682Z' tags: - 'lang:XML' # TODO: add more languages # this comment is ok also - Test `; const parsed = YAML.parseDocument(original); const serialized = parsed.toString(); console.log(serialized); ``` output: ```text # This is YAML --- title: YAML Test slug: yaml-test date: '2022-02-08T17:34:18.844Z' lastmod: '2022-02-09T10:08:20.682Z' tags: - 'lang:XML' # TODO: add more languages # this comment is ok also - Test ``` The parser looks fine. * * * Since I had previously used the [comment-json](https://www.npmjs.com/package/comment-json) module (almost same to using global `JSON` object), I expected that using the yaml module would also be straightforward. ...but now that I see it, using this module is not that simple 😢 it seems like a lot of changes are needed to use this module. <!-- github-comment-id:1033741442 -->
adam commented 2026-10-05 02:32:47 +02:00
Author
Owner
Copy link
Copy source

This works, as you just parse it and go straight to a string again. The reason why it doesn't work that easy is that the front matter will get parsed to JSON, because of that the comments are removed.

Internally we use the parse method, and that does parsed.toJSON() on the parsed document and so it loses the comments.

This works, as you just parse it and go straight to a `string` again. The reason why it doesn't work that easy is that the front matter will get parsed to `JSON`, because of that the comments are removed. Internally we use the `parse` method, and that does `parsed.toJSON()` on the parsed document and so it loses the comments. <!-- github-comment-id:1033748215 -->
adam commented 2026-10-05 02:32:47 +02:00
Author
Owner
Copy link
Copy source

how about using yawn-yaml module to serialize?

const fs = require("fs");
const YAWN = require("yawn-yaml/cjs");
const yaml = require("js-yaml");

const originalText = fs.readFileSync("./original.yml").toString();
const yawn = new YAWN(originalText);
const content = yaml.load(originalText);

const test = "[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - "
const changedContent = {
  ...content,
  tags: [
    test + "add",
    ...content.tags.map((a, i) => i ? [test + "more", a] : a).flat(1),
    test + "tags"
  ]
};

yawn.json = changedContent;

console.log(yawn.yaml);

input:

# This is YAML
---
title: YAML Test
slug: yaml-test
date: '2022-02-08T17:34:18.844Z'
lastmod: '2022-02-09T10:08:20.682Z'
tags:
  - 'lang:XML'
  # TODO: Check this comment remains
  - Test

output:

# This is YAML
---
title: YAML Test
slug: yaml-test
date: '2022-02-08T17:34:18.844Z'
lastmod: '2022-02-09T10:08:20.682Z'
tags:
  - '[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - add'
  # TODO: Check this comment remains
  - 'lang:XML'
  - '[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - more'
  - Test
  - '[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - tags'
how about using `yawn-yaml` module to serialize? ```javascript const fs = require("fs"); const YAWN = require("yawn-yaml/cjs"); const yaml = require("js-yaml"); const originalText = fs.readFileSync("./original.yml").toString(); const yawn = new YAWN(originalText); const content = yaml.load(originalText); const test = "[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - " const changedContent = { ...content, tags: [ test + "add", ...content.tags.map((a, i) => i ? [test + "more", a] : a).flat(1), test + "tags" ] }; yawn.json = changedContent; console.log(yawn.yaml); ``` input: ```yaml # This is YAML --- title: YAML Test slug: yaml-test date: '2022-02-08T17:34:18.844Z' lastmod: '2022-02-09T10:08:20.682Z' tags: - 'lang:XML' # TODO: Check this comment remains - Test ``` output: ```yaml # This is YAML --- title: YAML Test slug: yaml-test date: '2022-02-08T17:34:18.844Z' lastmod: '2022-02-09T10:08:20.682Z' tags: - '[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - add' # TODO: Check this comment remains - 'lang:XML' - '[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - more' - Test - '[TEST] THIS CONTENT IS DYNAMICALLY ADDED! - tags' ``` <!-- github-comment-id:1033776457 -->
adam commented 2026-10-05 02:32:48 +02:00
Author
Owner
Copy link
Copy source

The reason why it doesn't work that easy is that the front matter will get parsed to JSON, because of that the comments are removed.

comment-json stores comments to symbol properties, so I thought yaml works similar way too... This is what I thought wrong. sorry

+ yawn-yaml doesn't works same way as comment-json, sometimes buggy. but it seems OK to add/modify existing value only

> The reason why it doesn't work that easy is that the front matter will get parsed to JSON, because of that the comments are removed. comment-json stores comments to symbol properties, so I thought yaml works similar way too... This is what I thought wrong. sorry \+ yawn-yaml doesn't works same way as comment-json, sometimes buggy. but it seems OK to add/modify existing value only <!-- github-comment-id:1033784058 -->
adam commented 2026-10-05 02:32:49 +02:00
Author
Owner
Copy link
Copy source

@mjy9088 I've been testing the dependency you mentioned. It turns out that when updating arrays or objects it still removes comments.

https://user-images.githubusercontent.com/2900833/154387146-56366055-1049-46fd-a204-ec221a5e3153.mov

@mjy9088 I've been testing the dependency you mentioned. It turns out that when updating arrays or objects it still removes comments. https://user-images.githubusercontent.com/2900833/154387146-56366055-1049-46fd-a204-ec221a5e3153.mov <!-- github-comment-id:1042480025 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#193