Strict DOM example

apps/common-app/package.json

@@ -19,6 +19,7 @@
     "@react-navigation/native": "*",
     "@react-navigation/native-stack": "*",
     "@react-navigation/stack": "*",
+    "@stylexjs/babel-plugin": "*",
     "d3-shape": "*",
     "react": "*",
     "react-dom": "*",
@@ -29,7 +30,8 @@
     "react-native-safe-area-context": "*",
     "react-native-screens": "*",
     "react-native-svg": "*",
-    "react-native-web": "*"
+    "react-native-web": "*",
+    "react-strict-dom": "*"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
@@ -43,6 +45,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.3.18",
+    "@stylexjs/babel-plugin": "^0.7.0",
     "@tsconfig/react-native": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
     "d3-shape": "^3.2.0",
@@ -58,6 +61,7 @@
     "react-native-safe-area-context": "4.10.0-rc.1",
     "react-native-screens": "3.31.0-rc.1",
     "react-native-svg": "^15.2.0-rc.0",
+    "react-strict-dom": "^0.0.17",
     "typescript": "~5.3.0"
   }
 }

apps/common-app/src/examples/StrictDOMExample.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import { css, html } from 'react-strict-dom';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+const animated = {
+  html: {
+    div: Animated.createAnimatedComponent(html.div),
+  },
+};
+
+const styles = css.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: '100px',
+    height: '100px',
+    backgroundColor: 'blue',
+  },
+});
+
+export default function StrictDOMExample() {
+  const opacity = useSharedValue(1);
+  const width = useSharedValue(100);
+  const x = useSharedValue(0);
+  const y = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      width: width.value,
+      transform: [{ translateX: x.value }, { translateY: y.value }],
+    };
+  });
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      x.value = e.translationX;
+      y.value = e.translationY;
+    })
+    .onEnd(() => {
+      x.value = withSpring(0);
+      y.value = withSpring(0);
+    });
+
+  useEffect(() => {
+    opacity.value = withRepeat(withTiming(0.3, { duration: 800 }), -1, true);
+    width.value = withRepeat(withTiming(300, { duration: 800 }), -1, true);
+  }, []);
+
+  return (
+    <html.div style={styles.container}>
+      <html.div>React Strict DOM demo</html.div>
+      <GestureDetector gesture={panGesture}>
+        <animated.html.div style={[styles.box, animatedStyle]} />
+      </GestureDetector>
+    </html.div>
+  );
+}

apps/common-app/src/examples/index.ts

@@ -131,6 +131,7 @@ import ComposedHandlerInternalMergingExample from './ComposedHandlerInternalMerg
 import BorderRadiiExample from './SharedElementTransitions/BorderRadii';
 import FreezingShareablesExample from './ShareableFreezingExample';
 import TabNavigatorExample from './SharedElementTransitions/TabNavigatorExample';
+import StrictDOMExample from './StrictDOMExample';
 
 interface Example {
   icon?: string;
@@ -530,6 +531,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'BB',
     screen: BBExample,
   },
+  StrictDOMExample: {
+    icon: '👮‍♂️',
+    title: 'React Strict DOM',
+    screen: StrictDOMExample,
+  },
 
   // Old examples
 

apps/web-example/babel.config.js

@@ -1,12 +1,32 @@
+const stylexPlugin = require('@stylexjs/babel-plugin');
+const rsdPlugin = require('react-strict-dom/babel');
+
 module.exports = function (api) {
+  const plugins = [
+    rsdPlugin,
+    [
+      stylexPlugin,
+      {
+        importSources: [
+          '@stylexjs/stylex',
+          { from: 'react-strict-dom', as: 'css' },
+        ],
+        runtimeInjection: true,
+      },
+    ],
+  ];
+
   const disableBabelPlugin = process.env.DISABLE_BABEL_PLUGIN === '1';
   // https://babeljs.io/docs/en/config-files#apicache
   api.cache.invalidate(() => disableBabelPlugin);
   if (disableBabelPlugin) {
     console.log('Starting Web example without Babel plugin.');
+  } else {
+    plugins.push('react-native-reanimated/plugin');
   }
+
   return {
     presets: ['babel-preset-expo'],
-    plugins: disableBabelPlugin ? [] : ['react-native-reanimated/plugin'],
+    plugins,
   };
 };