Skip to content

Instantly share code, notes, and snippets.

@d3v1an7

d3v1an7/prettier-plugin-js-frontmatter.js

Last active December 16, 2024 23:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d3v1an7/672ce15344d4181ea776fd9bd0e9d96a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d3v1an7/672ce15344d4181ea776fd9bd0e9d96a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. d3v1an7 revised this gist Dec 16, 2024. 2 changed files with 23 additions and 13 deletions.
    26 changes: 22 additions & 4 deletions prettier-plugin-js-frontmatter.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    import prettier from 'prettier';
    import { parsers as tailwindPluginParser } from 'prettier-plugin-tailwindcss';
    import babelParser from 'prettier/plugins/babel';
    import htmlParser from 'prettier/plugins/html';
    const frontmatterRegex = /^---js\n([\s\S]*?)\n---\n/;

    function parse(text, options) {
    @@ -40,17 +40,28 @@ async function print(path, options, print) {
    const formattedContent = await prettier.format(node.content, {
    ...options,
    parser: 'html',
    plugins: [htmlParser],
    plugins: [
    {
    parsers: {
    html: tailwindPluginParser.html,
    },
    },
    ],
    });
    return `---js\n${formattedFrontmatterWithoutReturn}\n---\n\n${formattedContent}`;
    }
    // No js frontmatter detected, just format as HTML.
    const formattedContent = await prettier.format(node.text, {
    ...options,
    parser: 'html',
    plugins: [htmlParser],
    plugins: [
    {
    parsers: {
    html: tailwindPluginParser.html,
    },
    },
    ],
    });

    return formattedContent;
    }

    @@ -69,4 +80,11 @@ export default {
    },
    },
    options: {},
    languages: [
    {
    name: 'WebC',
    parsers: ['js-frontmatter'],
    extensions: ['.webc'],
    },
    ],
    };
    10 changes: 1 addition & 9 deletions prettier.config.example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,4 @@
    /** @type {import('prettier').Config} */
    export default {
    plugins: ['./prettier-plugin-js-frontmatter.js'],
    overrides: [
    {
    files: '*.webc',
    options: {
    parser: 'js-frontmatter',
    },
    },
    ],
    plugins: ['./prettier-plugin-js-frontmatter.js', 'prettier-plugin-tailwindcss'],
    };
  2. d3v1an7 created this gist Jul 30, 2024.
    72 changes: 72 additions & 0 deletions prettier-plugin-js-frontmatter.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    import prettier from 'prettier';
    import babelParser from 'prettier/plugins/babel';
    import htmlParser from 'prettier/plugins/html';
    const frontmatterRegex = /^---js\n([\s\S]*?)\n---\n/;

    function parse(text, options) {
    const match = text.match(frontmatterRegex);
    if (match) {
    const frontmatter = match[1];
    const content = text.slice(match[0].length);
    return {
    type: 'frontmatterDocument',
    frontmatter,
    content,
    };
    }
    return {
    type: 'root',
    text: text,
    };
    }

    async function print(path, options, print) {
    const node = path.getValue();
    if (node.type === 'frontmatterDocument') {
    // Ensure babel can interpret the frontmatter by wrapping it as an expression.
    const prependedFrontmatter = `(${node.frontmatter})`;
    const formattedFrontmatterWithReturn = await prettier.format(
    prependedFrontmatter,
    {
    ...options,
    parser: 'babel',
    plugins: [babelParser],
    },
    );
    // Switch formatted code back to object literal by removing `(` and `);\n`.
    const formattedFrontmatterWithoutReturn =
    formattedFrontmatterWithReturn.slice(1, -3);
    // Format remaining context as HTML
    const formattedContent = await prettier.format(node.content, {
    ...options,
    parser: 'html',
    plugins: [htmlParser],
    });
    return `---js\n${formattedFrontmatterWithoutReturn}\n---\n\n${formattedContent}`;
    }
    // No js frontmatter detected, just format as HTML.
    const formattedContent = await prettier.format(node.text, {
    ...options,
    parser: 'html',
    plugins: [htmlParser],
    });

    return formattedContent;
    }

    export default {
    parsers: {
    'js-frontmatter': {
    parse,
    astFormat: 'js-frontmatter',
    locStart: () => 0,
    locEnd: () => 0,
    },
    },
    printers: {
    'js-frontmatter': {
    print,
    },
    },
    options: {},
    };
    12 changes: 12 additions & 0 deletions prettier.config.example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    /** @type {import('prettier').Config} */
    export default {
    plugins: ['./prettier-plugin-js-frontmatter.js'],
    overrides: [
    {
    files: '*.webc',
    options: {
    parser: 'js-frontmatter',
    },
    },
    ],
    };