comty/packages/server/services/marketplace/utils/compileWidgetCode/index.js

import { transform } from "sucrase"
import UglifyJS from "uglify-js"

import resolveUrl from "@utils/resolveUrl"
import replaceImportsWithRemoteURL from "@utils/replaceImportsWithRemoteURL"

export default async (widgetCode, manifest, rootURL) => {
    if (!widgetCode) {
        throw new Error("Widget code not defined.")
    }

    if (!manifest) {
        throw new Error("Manifest not defined.")
    }

    if (!rootURL) {
        throw new Error("Root URL not defined.")
    }

    let renderComponentName = null
    let cssFiles = []

    // inject react with cdn
    widgetCode = `import React from "https://cdn.skypack.dev/react@17?dts" \n${widgetCode}`

    widgetCode = await replaceImportsWithRemoteURL(widgetCode, resolveUrl(rootURL, manifest.main))

    // remove css imports and append to manifest (Only its used in the entry file)
    widgetCode = widgetCode.replace(/import\s+["'](.*)\.css["']/g, (match, p1) => {
        cssFiles.push(resolveUrl(rootURL, `${p1}.css`))

        return ""
    })

    // transform jsx to js
    widgetCode = await transform(widgetCode, {
        transforms: ["jsx"],
        //jsxRuntime: "automatic",
        //production: true,
    }).code

    // search export default and get the name of the function/const/class
    const exportDefaultRegex = /export\s+default\s+(?:function|const|class)\s+([a-zA-Z0-9]+)/g

    const exportDefaultMatch = exportDefaultRegex.exec(widgetCode)

    if (exportDefaultMatch) {
        renderComponentName = exportDefaultMatch[1]
    }

    // remove export default keywords
    widgetCode = widgetCode.replace("export default", "")

    let manifestProcessed = {
        ...manifest,
    }

    manifestProcessed.cssFiles = cssFiles
    manifestProcessed.main = resolveUrl(rootURL, manifest.main)
    manifestProcessed.icon = resolveUrl(rootURL, manifest.icon)

    let result = `
        ${widgetCode}

        export default {
            manifest: ${JSON.stringify(manifestProcessed)},
            renderComponent: ${renderComponentName},
        }
    `

    // minify code
    result = UglifyJS.minify(result, {
        compress: true,
        mangle: true,
    }).code

    return result
}