SVG to JSX fixes

Author: devongovett

crates/core/Cargo.toml

@@ -9,6 +9,6 @@ bitflags = { version = "2.7.0", features = ["serde"] }
 browserslist-rs = "0.18.1"
 json-sourcemap = "0.2.0"
 node-semver = "2.2.0"
-serde = { version = "1.0.123", features = ["derive"] }
+serde = { version = "1.0.123", features = ["derive", "rc"] }
 serde_bytes = "0.11.5"
 serde-value = "0.7.0"

crates/html/src/jsx.rs

@@ -23,7 +23,6 @@ fn to_jsx<'arena>(dom: &'arena Node<'arena>) -> JSXElementChild {
         attrs: attrs
           .borrow()
           .iter()
-          .filter(|attr| matches!(attr.name.ns, ns!()))
           .map(|attr| {
             JSXAttrOrSpread::JSXAttr(JSXAttr {
               name: JSXAttrName::Ident(IdentName::new(
@@ -470,18 +469,18 @@ fn jsx_attr_name<'a>(name: &'a ExpandedName) -> &'a str {
     expanded_name!("", "x") => "x",
     expanded_name!("", "xchannelselector") => "xChannelSelector",
     expanded_name!("", "x-height") => "xHeight",
-    expanded_name!("", "xlink:actuate") => "xlinkActuate",
-    expanded_name!("", "xlink:arcrole") => "xlinkArcrole",
-    expanded_name!("", "xlink:href") => "xlinkHref",
-    expanded_name!("", "xlink:role") => "xlinkRole",
-    expanded_name!("", "xlink:show") => "xlinkShow",
-    expanded_name!("", "xlink:title") => "xlinkTitle",
-    expanded_name!("", "xlink:type") => "xlinkType",
-    expanded_name!("", "xml:base") => "xmlBase",
-    expanded_name!("", "xml:lang") => "xmlLang",
-    expanded_name!("", "xmlns") => "xmlns",
-    expanded_name!("", "xml:space") => "xmlSpace",
-    expanded_name!("", "xmlns:xlink") => "xmlnsXlink",
+    expanded_name!(xlink "actuate") => "xlinkActuate",
+    expanded_name!(xlink "arcrole") => "xlinkArcrole",
+    expanded_name!(xlink "href") => "xlinkHref",
+    expanded_name!(xlink "role") => "xlinkRole",
+    expanded_name!(xlink "show") => "xlinkShow",
+    expanded_name!(xlink "title") => "xlinkTitle",
+    expanded_name!(xlink "type") => "xlinkType",
+    expanded_name!(xml "base") => "xmlBase",
+    expanded_name!(xml "lang") => "xmlLang",
+    expanded_name!(xmlns "xmlns") => "xmlns",
+    expanded_name!(xml "space") => "xmlSpace",
+    expanded_name!(xmlns "xlink") => "xmlnsXlink",
     expanded_name!("", "y1") => "y1",
     expanded_name!("", "y2") => "y2",
     expanded_name!("", "y") => "y",
@@ -708,6 +707,10 @@ impl<'de> Deserialize<'de> for ExpandProps {
 }
 
 pub fn to_component<'arena>(dom: &'arena Node<'arena>, options: JsxOptions) -> Program {
+  if let Some(svg) = dom.find(expanded_name!(svg "svg")) {
+    svg.remove_attribute(expanded_name!(xmlns "xmlns"));
+  }
+
   if options.dimensions {
     match &options.icon {
       Icon::None => {}
@@ -1200,6 +1203,25 @@ mod tests {
         ..Default::default()
       },
     );
+
+    test(
+      r#"
+    <?xml version="1.0" encoding="UTF-8"?>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <text xml:space="preserve"> foo </text>
+    </svg>
+    "#,
+      indoc! {r#"
+    export default function SvgComponent(props) {
+        return <svg viewBox="0 0 100 100" {...props}>
+          <text xmlSpace="preserve"> foo </text>
+        </svg>;
+    }
+    "#},
+      JsxOptions {
+        ..Default::default()
+      },
+    );
   }
 
   #[test]

packages/core/integration-tests/test/integration/svg-react-config/package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
     "preact": "*"
+  },
+  "alias": {
+    "preact/jsx-dev-runtime": "preact/jsx-runtime"
   }
 }

packages/core/integration-tests/test/svg-react.js

@@ -19,7 +19,7 @@ describe('svg-react', function () {
     let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
     assert(!file.includes('inkscape'));
     assert(file.includes('function SvgComponent'));
-    assert(file.includes('createElement("svg"'));
+    assert(file.includes('jsxDEV)("svg"'));
     assert(file.includes('id: "fbacef__circle"'));
   });
 
@@ -37,7 +37,7 @@ describe('svg-react', function () {
     let types = await outputFS.readFile(b.getBundles()[1].filePath, 'utf-8');
 
     assert(!file.includes('inkscape'));
-    assert(file.includes('createElement("svg"'));
+    assert(file.includes('jsxDEV)("svg"'));
     assert(types.includes('const Icon: SVGRComponent'));
   });
 
@@ -57,7 +57,8 @@ describe('svg-react', function () {
     assert(file.includes('function SvgComponent'));
     assert(file.includes('_react.forwardRef'));
     assert(file.includes('_react.memo'));
-    assert(file.includes('h("svg"'));
+    assert(file.includes('preact/jsx-dev-runtime'));
+    assert(file.includes('jsxDEV)("svg"'));
     assert(file.includes('width: "1em"'));
     assert(file.includes('role: "img"'));
     assert(file.includes('fill: props.fill'));

packages/transformers/js/src/JSTransformer.js

@@ -258,9 +258,7 @@ export default (new Transformer({
             });
         }
 
-        if (automaticJSXRuntime) {
-          jsxImportSource = reactLib;
-        }
+        jsxImportSource = reactLib;
       }
 
       isJSX = Boolean(compilerOptions?.jsx || pragma);
@@ -450,7 +448,9 @@ export default (new Transformer({
       type,
       jsx_pragma: config?.pragma,
       jsx_pragma_frag: config?.pragmaFrag,
-      automatic_jsx_runtime: Boolean(config?.automaticJSXRuntime),
+      automatic_jsx_runtime: Boolean(
+        config?.automaticJSXRuntime || asset.meta.jsxRuntime === 'automatic',
+      ),
       jsx_import_source: config?.jsxImportSource,
       is_development: options.mode === 'development',
       react_refresh: Boolean(config?.reactRefresh),

packages/transformers/svg-jsx/src/SvgJsxTransformer.js

@@ -95,6 +95,7 @@ Unsupported SVGR option "template".
 
     asset.type = 'jsx';
     asset.bundleBehavior = null;
+    asset.meta.jsxRuntime = 'automatic';
     asset.setBuffer(jsx);
 
     return [asset];