Implement <svg> support

apps/expo-app/package.json

@@ -18,6 +18,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-native": "0.83.6",
+    "react-native-svg": "15.8.0",
     "react-native-web": "^0.21.0",
     "react-strict-dom": "0.0.55"
   },

flow-typed/npm/react-native-svg_vx.x.x.js

@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+
+declare module 'react-native-svg' {
+  declare module.exports: any;
+}

flow-typed/react-strict-dom.js

@@ -18,3 +18,54 @@ declare type ReactStrictDOMDataProps = {
 // internationalization type which is a string at runtime…
 // but Flow doesn't know that.
 declare type Stringish = string;
+
+declare type SVGCircleElement = {};
+declare type SVGClipPathElement = {};
+declare type SVGDefsElement = {};
+declare type SVGEllipseElement = {};
+declare type SVGFEBlendElement = {};
+declare type SVGFEColorMatrixElement = {};
+declare type SVGFEComponentTransferElement = {};
+declare type SVGFECompositeElement = {};
+declare type SVGFEConvolveMatrixElement = {};
+declare type SVGFEDiffuseLightingElement = {};
+declare type SVGFEDisplacementMapElement = {};
+declare type SVGFEDistantLightElement = {};
+declare type SVGFEDropShadowElement = {};
+declare type SVGFEFloodElement = {};
+declare type SVGFEFuncAElement = {};
+declare type SVGFEFuncBElement = {};
+declare type SVGFEFuncGElement = {};
+declare type SVGFEFuncRElement = {};
+declare type SVGFEGaussianBlurElement = {};
+declare type SVGFEImageElement = {};
+declare type SVGFEMergeElement = {};
+declare type SVGFEMergeNodeElement = {};
+declare type SVGFEMorphologyElement = {};
+declare type SVGFEOffsetElement = {};
+declare type SVGFEPointLightElement = {};
+declare type SVGFESpecularLightingElement = {};
+declare type SVGFESpotLightElement = {};
+declare type SVGFETileElement = {};
+declare type SVGFETurbulenceElement = {};
+declare type SVGFilterElement = {};
+declare type SVGForeignObjectElement = {};
+declare type SVGGElement = {};
+declare type SVGImageElement = {};
+declare type SVGLineElement = {};
+declare type SVGLinearGradientElement = {};
+declare type SVGMarkerElement = {};
+declare type SVGMaskElement = {};
+declare type SVGPathElement = {};
+declare type SVGPatternElement = {};
+declare type SVGPolygonElement = {};
+declare type SVGPolylineElement = {};
+declare type SVGRadialGradientElement = {};
+declare type SVGRectElement = {};
+declare type SVGStopElement = {};
+declare type SVGSVGElement = {};
+declare type SVGSymbolElement = {};
+declare type SVGTextElement = {};
+declare type SVGTextPathElement = {};
+declare type SVGTSpanElement = {};
+declare type SVGUseElement = {};

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

@@ -26,6 +26,9 @@ import {
   ProvideViewportScale,
   useViewportScale
 } from './modules/ContextViewportScale';
+import { useNativeProps } from './modules/useNativeProps';
+import { useStrictDOMElement } from './modules/useStrictDOMElement';
+import { isPropAllowed } from '../shared/isPropAllowed';
 
 type StyleTheme<V, T> = Theme<V, T>;
 type StyleVars<T> = VarGroup<T>;
@@ -64,5 +67,8 @@ export {
   contexts,
   css,
   html,
-  useViewportScale as useViewportScale_DO_NOT_USE
+  useViewportScale as useViewportScale_DO_NOT_USE,
+  useNativeProps as useNativeProps_DO_NOT_USE,
+  useStrictDOMElement as useStrictDOMElement_DO_NOT_USE,
+  isPropAllowed as isPropAllowed_DO_NOT_USE
 };

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

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

packages/react-strict-dom/tests/__mocks__/react-native-svg/index.js

@@ -0,0 +1,106 @@
+/**
+ * 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.
+ */
+
+export const Circle = 'Circle';
+
+export const ClipPath = 'ClipPath';
+
+export const Defs = 'Defs';
+
+export const Ellipse = 'Ellipse';
+
+export const FeBlend = 'FeBlend';
+
+export const FeColorMatrix = 'FeColorMatrix';
+
+export const FeComponentTransfer = 'FeComponentTransfer';
+
+export const FeComposite = 'FeComposite';
+
+export const FeConvolveMatrix = 'FeConvolveMatrix';
+
+export const FeDiffuseLighting = 'FeDiffuseLighting';
+
+export const FeDisplacementMap = 'FeDisplacementMap';
+
+export const FeDistantLight = 'FeDistantLight';
+
+export const FeDropShadow = 'FeDropShadow';
+
+export const FeFlood = 'FeFlood';
+
+export const FeFuncA = 'FeFuncA';
+
+export const FeFuncB = 'FeFuncB';
+
+export const FeFuncG = 'FeFuncG';
+
+export const FeFuncR = 'FeFuncR';
+
+export const FeGaussianBlur = 'FeGaussianBlur';
+
+export const FeImage = 'FeImage';
+
+export const FeMerge = 'FeMerge';
+
+export const FeMergeNode = 'FeMergeNode';
+
+export const FeMorphology = 'FeMorphology';
+
+export const FeOffset = 'FeOffset';
+
+export const FePointLight = 'FePointLight';
+
+export const FeSpecularLighting = 'FeSpecularLighting';
+
+export const FeSpotLight = 'FeSpotLight';
+
+export const FeTile = 'FeTile';
+
+export const FeTurbulence = 'FeTurbulence';
+
+export const Filter = 'Filter';
+
+export const ForeignObject = 'ForeignObject';
+
+export const G = 'G';
+
+export const Image = 'Image';
+
+export const Line = 'Line';
+
+export const LinearGradient = 'LinearGradient';
+
+export const Marker = 'Marker';
+
+export const Mask = 'Mask';
+
+export const Path = 'Path';
+
+export const Pattern = 'Pattern';
+
+export const Polygon = 'Polygon';
+
+export const Polyline = 'Polyline';
+
+export const RadialGradient = 'RadialGradient';
+
+export const Rect = 'Rect';
+
+export const Stop = 'Stop';
+
+export const Svg = 'Svg';
+
+export const Symbol = 'Symbol';
+
+export const Text = 'Text';
+
+export const TextPath = 'TextPath';
+
+export const TSpan = 'TSpan';
+
+export const Use = 'Use';

packages/react-strict-svg/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.