From 87c7a462442429be1cfc29d7f43153a3b4998d76 Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Wed, 29 Jan 2025 11:00:38 +0100 Subject: [PATCH 1/5] add sfc script to head --- editor/src/templates/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/editor/src/templates/index.html b/editor/src/templates/index.html index 46daee3cf355..215fd2a91397 100644 --- a/editor/src/templates/index.html +++ b/editor/src/templates/index.html @@ -28,6 +28,11 @@ <% } %> + + From e1eb2d13869fb20ba71ec9bdbd7088d4062d0536 Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Wed, 29 Jan 2025 15:15:06 +0100 Subject: [PATCH 2/5] add react-dom/server as built-in dep --- .../package-manager/built-in-dependencies-list.ts | 6 ++++++ editor/src/templates/index.html | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts b/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts index 48e7cdc0f4d5..c5df886dc8c2 100644 --- a/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts +++ b/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts @@ -5,6 +5,7 @@ import * as RemixServerRuntime from '@remix-run/server-runtime' import * as Hydrogen from '@shopify/hydrogen' import React from 'react' // this is imported like this so that the monkey patching will run import * as ReactDOM from 'react-dom' +import * as ReactDOMServer from 'react-dom/server' import * as ReactRouter from 'react-router' import * as ReactJsxRuntime from 'react/jsx-runtime' import * as UtopiaAPI from 'utopia-api' @@ -75,6 +76,11 @@ export function createBuiltInDependenciesList( builtInDependency('react/jsx-runtime', ReactJsxRuntime, editorPackageJSON.dependencies.react), builtInDependency('react', React, editorPackageJSON.dependencies.react), builtInDependency('react-dom', ReactDOM, editorPackageJSON.dependencies['react-dom']), + builtInDependency( + 'react-dom/server', + ReactDOMServer, + editorPackageJSON.dependencies['react-dom'], + ), builtInDependency( '@emotion/react', EmotionReact, diff --git a/editor/src/templates/index.html b/editor/src/templates/index.html index 215fd2a91397..edaa231e1fc1 100644 --- a/editor/src/templates/index.html +++ b/editor/src/templates/index.html @@ -30,7 +30,7 @@ From 9d65dd420b0176eca1b5995cefc6835b6dbf03ac Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Thu, 30 Jan 2025 14:30:51 +0100 Subject: [PATCH 3/5] reinstate non-html, lowercase elements --- .../ui-jsx-canvas-element-renderer-utils.tsx | 9 +++------ editor/src/utils/canvas-react-utils.ts | 18 +++++++++--------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx index 4dfc1ac72215..57991f6f6988 100644 --- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx +++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx @@ -812,12 +812,9 @@ function renderJSXElement( [UTOPIA_PATH_KEY]: optionalMap(EP.toString, elementPath), } - const looksLikeReactIntrinsicButNotHTML = elementIsIntrinsic && !elementIsBaseHTML - - const finalProps = - looksLikeReactIntrinsicButNotHTML || elementIsFragment - ? filterDataProps(propsIncludingElementPath) - : propsIncludingElementPath + const finalProps = elementIsFragment + ? filterDataProps(propsIncludingElementPath) + : propsIncludingElementPath if (!elementIsFragment && FinalElement == null) { throw canvasMissingJSXElementError(jsxFactoryFunctionName, code, jsx, filePath, highlightBounds) diff --git a/editor/src/utils/canvas-react-utils.ts b/editor/src/utils/canvas-react-utils.ts index bc58c1b79a99..299979244b56 100644 --- a/editor/src/utils/canvas-react-utils.ts +++ b/editor/src/utils/canvas-react-utils.ts @@ -71,15 +71,15 @@ export function makeCanvasElementPropsSafe(props: any): any { } function shouldIncludeDataUID(type: any): boolean { - if (typeof type === 'string') { - const elementIsIntrinsic = firstLetterIsLowerCase(type) - const elementIsBaseHTML = isIntrinsicHTMLElementString(type) - // Looks like an intrinsic element (div/span/etc), but isn't a recognised - // React intrinsic HTML element. - if (elementIsIntrinsic && !elementIsBaseHTML) { - return false - } - } + // if (typeof type === 'string') { + // const elementIsIntrinsic = firstLetterIsLowerCase(type) + // const elementIsBaseHTML = isIntrinsicHTMLElementString(type) + // // Looks like an intrinsic element (div/span/etc), but isn't a recognised + // // React intrinsic HTML element. + // if (elementIsIntrinsic && !elementIsBaseHTML) { + // return false + // } + // } return true } From 6ec1278562db5f194f40f554cbe7e2c42a34ec4c Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Thu, 30 Jan 2025 14:33:44 +0100 Subject: [PATCH 4/5] Revert "add react-dom/server as built-in dep" This reverts commit e1eb2d13869fb20ba71ec9bdbd7088d4062d0536. --- .../package-manager/built-in-dependencies-list.ts | 6 ------ editor/src/templates/index.html | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts b/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts index c5df886dc8c2..48e7cdc0f4d5 100644 --- a/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts +++ b/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts @@ -5,7 +5,6 @@ import * as RemixServerRuntime from '@remix-run/server-runtime' import * as Hydrogen from '@shopify/hydrogen' import React from 'react' // this is imported like this so that the monkey patching will run import * as ReactDOM from 'react-dom' -import * as ReactDOMServer from 'react-dom/server' import * as ReactRouter from 'react-router' import * as ReactJsxRuntime from 'react/jsx-runtime' import * as UtopiaAPI from 'utopia-api' @@ -76,11 +75,6 @@ export function createBuiltInDependenciesList( builtInDependency('react/jsx-runtime', ReactJsxRuntime, editorPackageJSON.dependencies.react), builtInDependency('react', React, editorPackageJSON.dependencies.react), builtInDependency('react-dom', ReactDOM, editorPackageJSON.dependencies['react-dom']), - builtInDependency( - 'react-dom/server', - ReactDOMServer, - editorPackageJSON.dependencies['react-dom'], - ), builtInDependency( '@emotion/react', EmotionReact, diff --git a/editor/src/templates/index.html b/editor/src/templates/index.html index edaa231e1fc1..215fd2a91397 100644 --- a/editor/src/templates/index.html +++ b/editor/src/templates/index.html @@ -30,7 +30,7 @@ From 78c52bb2464a32725d40488a459a681c6b78d421 Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Thu, 30 Jan 2025 14:34:36 +0100 Subject: [PATCH 5/5] Revert "Revert "add react-dom/server as built-in dep"" This reverts commit 6ec1278562db5f194f40f554cbe7e2c42a34ec4c. --- .../package-manager/built-in-dependencies-list.ts | 6 ++++++ editor/src/templates/index.html | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts b/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts index 48e7cdc0f4d5..c5df886dc8c2 100644 --- a/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts +++ b/editor/src/core/es-modules/package-manager/built-in-dependencies-list.ts @@ -5,6 +5,7 @@ import * as RemixServerRuntime from '@remix-run/server-runtime' import * as Hydrogen from '@shopify/hydrogen' import React from 'react' // this is imported like this so that the monkey patching will run import * as ReactDOM from 'react-dom' +import * as ReactDOMServer from 'react-dom/server' import * as ReactRouter from 'react-router' import * as ReactJsxRuntime from 'react/jsx-runtime' import * as UtopiaAPI from 'utopia-api' @@ -75,6 +76,11 @@ export function createBuiltInDependenciesList( builtInDependency('react/jsx-runtime', ReactJsxRuntime, editorPackageJSON.dependencies.react), builtInDependency('react', React, editorPackageJSON.dependencies.react), builtInDependency('react-dom', ReactDOM, editorPackageJSON.dependencies['react-dom']), + builtInDependency( + 'react-dom/server', + ReactDOMServer, + editorPackageJSON.dependencies['react-dom'], + ), builtInDependency( '@emotion/react', EmotionReact, diff --git a/editor/src/templates/index.html b/editor/src/templates/index.html index 215fd2a91397..edaa231e1fc1 100644 --- a/editor/src/templates/index.html +++ b/editor/src/templates/index.html @@ -30,7 +30,7 @@