live-server injects code in HTML source view inside SVG tags

[ailin10]

I am using Pattern Lab Node v3.0.1 on Linux, with Node v10, using a Gulp Edition. I am aware of the recent fix in live-server that apparently fixes it, but sadly it doesn't quite work for me.

Expected Behavior

When starting the server, patternlab should show a flawless HTML source on the Pattern Info tab.

Actual Behavior

Some strange script gets injected inside of my svg tags

    <div class="product-gallery__viewer js-product-gallery-viewer">
    </div>
    <div class="product-gallery__thumbnails mobile-hide js-product-gallery-thumbnails">
    </div>
    <div class="product-gallery__controls tablet-up-hide js-product-gallery-controls">
        <button class="gallery-control gallery-control--prev btn--reset center-vertical">
            <svg class="gallery-control__ic gallery-control__ic--prev" id="i-arrow-left-light-lrg" viewBox="0 0 100 100">
                <path d="M25.819 48.02L67.756 6.082a3.7 3.7 0 0 1 5.217 0 3.7 3.7 0 0 1 0 5.217L31.036 53.237a3.7 3.7 0 0 1-5.217 0 3.7 3.7 0 0 1 0-5.217z" class="st0"></path>
                <path d="M30.958 47.943l43.147 40.693a3.7 3.7 0 0 1 .153 5.215 3.7 3.7 0 0 1-5.215.153L25.895 53.311a3.7 3.7 0 0 1-.153-5.215 3.701 3.701 0 0 1 5.216-.153z" class="st0"></path>
            <!-- Code injected by live-server -->
<script type="text/javascript">
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function() {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function(msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			console.log('Live reload enabled.');
		})();
	}
	// ]]>
</script>
</svg>
        </button>
    </div>
</div>

Steps to reproduce

• Serve PL with a component containing an SVG
• Click on "Show Pattern info"
• Check HTML tab => broken output

[stale]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[sghoweri]

@ailin10 just double-checking: which version of PL Node are you currently running?

[ailin10]

@sghoweri 3.0.1

[cbirdsong]

I'm seeing this behavior after upgrading to Pattern Lab from 3.0.3 to 3.0.4. Checking my previous deploys, it is definitely new. I also just updated uikit-workshop (1.0.4 to 1.0.7) and engine-twig-php (3.0.3 to 3.0.5), if that's relevant.

[mfranzke]

I am using Pattern Lab Node v5.10.1 on Mac OS, with Node v13.12.0, using @pattern-lab/edition-node Edition. The problem doesn’t occur any more on this setup. Could you please retest ?

[cbirdsong]

I'm not seeing it anymore using the following:

• MacOS
• Node v12.16.1
• Pattern Lab v5.10.1 (@pattern-lab/engine-twig-php)

[mfranzke]

@ailin10 could you please retest ?

[JosefBredereck]

I saw that on the most recent version also 😞

[JosefBredereck]

The issue was released with v5.13.0 🎉