Howto overwrite the printers.html.print method in a prettier plugin - Stack Overflow

admin管理员组

文章数量:1123419

I'm trying to create a prettier plugin, that will ignore inline TYPO3 script code. When it's included within a start en end marker.

<!-- prettier-ignore-fluid-start -->
<!-- prettier-ignore-fluid-end -->

A simple example of what a piece of html with inline TYPO3 script could look like:

<li>
    <!-- prettier-ignore-fluid-start -->
    <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
    <span>{page.title}</span>
    </a>
    <!-- prettier-ignore-fluid-end -->
</li>

This causes errors currently. With same AI help, i've come to solution. Only i'm stuck at the print() function. Where I need to write the code back.

const plugin = {
  parsers: {
    html: {
      // Custom parse function for HTML
      parse(text, parsers, options) {
        console.log("Parsing HTML text:", text);
        // Use the parser-html from prettier
        return parserHtml.parsers.html.parse(text, options);
      },

      // Preprocess function to temporarily replace <f:for> tags and Fluid syntax
      preprocess(text) {
        console.log("Original text to preprocess:", text); // Debugging the input code

        // Replace Fluid expressions (e.g., {f:if(...)} or {page.link}) with placeholders
        let result = preprocessWithinMarkers(text);
        return result;
      },
      astFormat: 'html',
    },
  },
  printers: {
    html: {
      // ...prettier.printers.html,
      async print(path, options, print) {
        console.log("Print hook is called"); // Debugging print hook call

        // Convert the AST to a doc representation
        // I'm stuck here. As printAstToDoc() is not an available plugin api.
        const doc = printAstToDoc(path.node, options);

        // Step 1: Format the code using Prettier's format function (not print) for HTML
        const formattedCode = await prettier.format(doc, { ...options, parser: "html" });

        // After Prettier formats the code, restore Fluid expressions from the placeholders
        const result = restoreFluidExpressions(formattedCode);

        console.log("Text after restoring placeholders:", result); // Debugging result
        return result;
      }
      }
    }
  };

How would I be able to convert the ast.node to a string. So that prettier.format() can use it?

Any other solution direction is welcome!

本文标签： Howto overwrite the printershtmlprint method in a prettier pluginStack Overflow