Beautify code snippet string in LWC

Question

Hi Im removing html tags from a richtext input in order to make it a raw string, the string will be a code snippet. However I could not achieve it through using the standalone.js of prettier library. since it throws an error indicating that a babel-parser.js is needed or something like that, and when I upload that as a static resource too, the LWC just throws "undefined" as error for that babel-parser.js loadscript process.

So I dont know if there is a way to call a public API or something in the internet that returns the string correctly code formatted. Also why Does salesforce fail to load some specific .js files from static resources to LWC.

It happened me with ChartJS and now its happening with Prettier.

This is what I've tried so far:

Apex Controller =>

public with sharing class CustomChatterFeedController { 

    @AuraEnabled
    public static String plainText(String text){
        return text.stripHtmlTags();
    }

}

LWC .js =>

import { LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadScript } from "lightning/platformResourceLoader";
import bundle from '@salesforce/resourceUrl/bundle';
import plainText from "@salesforce/apex/CustomChatterFeedController.plainText";

export default class CodeFormatter extends LightningElement {
    myLibInitialized = false;
    textValue = '';

    async renderedCallback() {
        if (this.myLibInitialized) {
            return;
        }
        this.myLibInitialized = true;

        try {
            await Promise.all([
                loadScript(this, bundle + '/standalone.js'),
                loadScript(this, bundle + '/plugins/babel.js'),
            ]);
            console.log('success!');
        } catch (error) {
            console.log(error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: "Error loading prettier",
                    message: error,
                    variant: "error",
                }),
            );
        }
    }

    handleTextChange(evt) {
        this.textValue = evt.target.value;
    }

    async formatCode(evt) {
        const text = this.refs.textBox.value;
        const cleanedText = await plainText({ text }); // al the String comes in one line
        console.log('cleanedText');
        console.log(cleanedText);
        const formattedCode = await prettier.format(cleanedText, { parser: 'babel' });
        console.log(formattedCode);
    }
}

and keeps throwing errors like this: [Couldn't resolve parser "babel". Plugins must be explicitly added to the standalone bundle.]. Which I know its caused because this standalone.min.js file does not contain the parser bundles.

So Im kind of giving up with this kind of solution, and wanted to ask, is there a way to make this through a public API from prettier or other formatter, that I can call from salesforce?

All of this is because I need to mimic the chatter </> button functionality.

Edit: This is How I have structured the zip that I use as a static resource:

the zip name is "bundle" and its is standalone.js along with a folder which contains the babel.js.

My code is the same above (plus the loadscript for the babel.js). The standAlone.js loads fine, but the babel throws Error: undefined

Answer 1

By default, Prettier expects to find the parser in a particular file location. It's not enough to just upload the file and hope for the best.

It appears that you should create a ZIP (Compressed Folder) that has the following structure:

• standalone.min.js
• plugins/
  • babel.js

Failing that, you may want to use something like webpack, rollup, or browserify to compile Prettier into a bundle you can then upload as a Static Resource, and load it that way.