style function that uses signals returns css object instead of string, this enables iframe style pointer-events to be set by style instead of class and not be overridden when signal updates

Author: aquaductape

packages/solid-repl/src/components/gridResizer.tsx

@@ -49,15 +49,14 @@ export const GridResizer: Component<{
   createEffect(() => {
     if (isDragging()) {
       // Fixes Firefox issue where dragging cursor fails to emit events to overlay, and instead to iframe, resulting in resizer bar not moving.
-      // use class instead of style because style attribute, when tracked, value is reset. Related to https://github.com/solidjs/solid/issues/1938
-      document.querySelectorAll('iframe').forEach((el) => el.classList.add('pointer-events-none'));
+      document.querySelectorAll('iframe').forEach((el) => (el.style.pointerEvents = 'none'));
 
       window.addEventListener('mousemove', onMouseMove);
       window.addEventListener('mouseup', onResizeEnd);
       window.addEventListener('touchmove', onTouchMove);
       window.addEventListener('touchend', onResizeEnd);
     } else {
-      document.querySelectorAll('iframe').forEach((el) => el.classList.remove('pointer-events-none'));
+      document.querySelectorAll('iframe').forEach((el) => (el.style.pointerEvents = ''));
 
       window.removeEventListener('mousemove', onMouseMove);
       window.removeEventListener('mouseup', onResizeEnd);

packages/solid-repl/src/components/preview.tsx

@@ -1,4 +1,4 @@
-import { Component, Show, createEffect, createMemo, createSignal, onCleanup, untrack } from 'solid-js';
+import { Component, JSX, Show, createEffect, createMemo, createSignal, onCleanup, untrack } from 'solid-js';
 import { useZoom } from '../hooks/useZoom';
 import { GridResizer } from './gridResizer';
 
@@ -262,12 +262,21 @@ export const Preview: Component<Props> = (props) => {
   window.addEventListener('message', messageListener);
   onCleanup(() => window.removeEventListener('message', messageListener));
 
-  const styleScale = () => {
-    if (zoomState.scale === 100 || !zoomState.scaleIframe) return '';
+  const styleScale = (): JSX.CSSProperties => {
+    if (zoomState.scale === 100 || !zoomState.scaleIframe) return {};
 
-    return `width: ${zoomState.scale}%; height: ${zoomState.scale}%; transform: scale(${
-      zoomState.zoom / 100
-    }); transform-origin: 0 0;`;
+    const sizePercentage = `${zoomState.scale}%`;
+    const width = sizePercentage;
+    const height = sizePercentage;
+    const transform = `scale(${zoomState.zoom / 100})`;
+    const transformOrigin = `0 0`;
+
+    return {
+      width,
+      height,
+      transform,
+      'transform-origin': transformOrigin,
+    };
   };
 
   const [iframeHeight, setIframeHeight] = createSignal<number>(0.625);