Shopify metaobject swatches on product page

gistfile1.txt

    let ColorMatch = class ColorMatch {

        init() {
...
            
            const newColors = document.querySelector('[data-swatches-json]');
            if (newColors && newColors.innerHTML !== '') {
                const colors = JSON.parse(newColors.innerHTML);
                return Promise.resolve(this.matchColors(colors, this.settings.color));
            }
...
        }
        matchColors(colors, name) {
...
                        if(value.startsWith('//')){
                            img = value;
                        } else {
                            img = `${path}${encodeURIComponent(value)}`;
                        }

product-metaobject-swatches.liquid

<script data-swatches-json type="application/json">
{% if product.metafields.custom.trim_color %}
{
	"colors": [
    {% for color_item in product.metafields.custom.trim_color.value %}
        {% if color_item %}
            {
                {% if color_item.image %}
                    "{{ color_item.label | downcase }}" : "{{ color_item.image.value | image_url: width: 34 }}"
                {% else %}
                    "{{ color_item.label | downcase }}" : "{{ color_item.color }}"
                {% endif %}
            }{% unless forloop.last %},{% endunless %}
        {% endif %}
    {% endfor %}
	]
}
{% endif %}
</script>