Implement <svg> support

Author: efoken

apps/examples/package.json

@@ -18,6 +18,7 @@
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "react-native": "~0.76.1",
+    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
     "react-strict-dom": "*"
   },

package-lock.json

@@ -44,7 +44,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": ">=0.75.2"
+    "react-native": ">=0.75.2",
+    "react-native-svg": "^15.8.0"
   },
   "engines": {
     "node": ">=20.11.0"

packages/react-strict-dom/package.json

@@ -16,6 +16,7 @@ import type {
 } from '@stylexjs/stylex';
 
 import * as html from './html';
+import * as svg from './svg';
 import * as css from '@stylexjs/stylex';
 
 type StyleTheme<V, T> = Theme<V, T>;
@@ -25,4 +26,4 @@ type StylesWithout<T> = StyleXStylesWithout<T>;
 
 export type { StaticStyles, StyleTheme, StyleVars, Styles, StylesWithout };
 
-export { css, html };
+export { css, html, svg };

packages/react-strict-dom/src/dom/index.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { CompiledStyles } from '@stylexjs/stylex/lib/StyleXTypes';
+import type { ReactDOMStyleProps } from '../../types/renderer.web';
+import type { StrictSvgProps } from '../../../dist/types/StrictSvgProps';
+
+import * as React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { errorMsg } from '../../shared/logUtils';
+import { isSvgPropAllowed } from '../../shared/isSvgPropAllowed';
+
+// $FlowFixMe[unclear-type]
+function validateStrictProps(props: any) {
+  Object.keys(props).forEach((key) => {
+    const isValid = isSvgPropAllowed(key);
+    if (!isValid) {
+      errorMsg(`invalid prop "${key}"`);
+      delete props[key];
+    }
+  });
+}
+
+export function createStrictDOMSvgComponent<T, P: StrictSvgProps>(
+  TagName: string,
+  defaultStyle: StrictSvgProps['style']
+): component(ref?: React.RefSetter<T>, ...P) {
+  // NOTE: `debug-style` is not generated by `stylex.create`
+  // so it needs a type-cast
+  const debugStyle: CompiledStyles = {
+    $$css: true,
+    'debug::name': `svg-${TagName}` as $FlowFixMe
+  };
+
+  const component: React.AbstractComponent<P, T> = React.forwardRef(
+    function (props, forwardedRef) {
+      /**
+       * get host props
+       */
+      const { style, ...hostProps } = props;
+      validateStrictProps(hostProps);
+
+      if (props.role != null) {
+        // "presentation" synonym has wider browser support
+        // $FlowFixMe
+        hostProps.role = props.role === 'none' ? 'presentation' : props.role;
+      }
+
+      /**
+       * get host style props
+       */
+      // Waiting on a diff so we can remove this indirection.
+      const hostStyleProps: ReactDOMStyleProps = stylex.props([
+        debugStyle,
+        defaultStyle,
+        style
+      ]);
+
+      /**
+       * Construct tree
+       *
+       * Intentional flow error as we are asking for a more specific type
+       * than React itself.
+       */
+      const element = (
+        <TagName
+          {...hostProps}
+          {...hostStyleProps}
+          ref={forwardedRef as $FlowFixMe}
+        />
+      );
+      return element;
+    }
+  );
+
+  component.displayName = `svg.${TagName}`;
+  return component;
+}

packages/react-strict-dom/src/dom/modules/createStrictDOMSvgComponent.js

@@ -120,6 +120,7 @@ const span: StrictReactDOMPropsStyle = styles.inline;
 const strong: StrictReactDOMPropsStyle = [styles.inline, styles.strong];
 const sub: StrictReactDOMPropsStyle = styles.inline;
 const sup: StrictReactDOMPropsStyle = styles.inline;
+const svg: StrictReactDOMPropsStyle = styles.img;
 const textarea: StrictReactDOMPropsStyle = [
   styles.inlineblock,
   styles.textarea
@@ -174,6 +175,7 @@ export const defaultStyles = {
   strong: strong as typeof strong,
   sub: sub as typeof sub,
   sup: sup as typeof sup,
+  svg: svg as typeof svg,
   textarea: textarea as typeof textarea,
   u: u as typeof u,
   ul: ul as typeof ul