diff --git a/apps/examples/app.json b/apps/examples/app.json
index bfca8fc..36b31c2 100644
--- a/apps/examples/app.json
+++ b/apps/examples/app.json
@@ -13,15 +13,15 @@
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": ["**/*"],
- "ios": {
- "supportsTablet": true
- },
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
+ "ios": {
+ "supportsTablet": true
+ },
"web": {
"bundler": "metro",
"favicon": "./assets/favicon.png"
diff --git a/apps/examples/babel.config.js b/apps/examples/babel.config.js
index 9d0139c..4adc5d1 100644
--- a/apps/examples/babel.config.js
+++ b/apps/examples/babel.config.js
@@ -24,16 +24,13 @@ module.exports = function (api) {
//api.cache(true);
const platform = api.caller(getPlatform);
- const isDev = api.caller(getIsDev);
+ const dev = api.caller(getIsDev);
const presets = ['babel-preset-expo'];
const plugins = [];
if (platform === 'web') {
- presets.push([
- reactStrictPreset,
- { debug: true, dev: isDev, rootDir: __dirname }
- ]);
+ presets.push([reactStrictPreset, { debug: true, dev, rootDir: __dirname }]);
}
return {
diff --git a/apps/examples/package.json b/apps/examples/package.json
index ede85d0..6153a62 100644
--- a/apps/examples/package.json
+++ b/apps/examples/package.json
@@ -2,7 +2,7 @@
"private": true,
"name": "examples",
"version": "0.0.0",
- "main": "./src/index.js",
+ "main": "./src/app/index.js",
"scripts": {
"dev": "expo start --clear",
"dev:android": "expo start --android --clear",
@@ -11,13 +11,15 @@
},
"dependencies": {
"@expo/metro-runtime": "~4.0.0",
- "expo": "^52.0.3",
+ "expo": "^52.0.6",
"expo-build-properties": "~0.13.1",
"expo-status-bar": "~2.0.0",
+ "postcss-react-strict-dom": "^0.0.5",
"react": "~18.3.1",
"react-dom": "~18.3.1",
"react-native": "~0.76.1",
- "react-native-web": "~0.19.13"
+ "react-native-web": "~0.19.13",
+ "react-strict-dom": "*"
},
"devDependencies": {
"@babel/core": "^7.25.2"
diff --git a/apps/examples/postcss.config.js b/apps/examples/postcss.config.js
new file mode 100644
index 0000000..f4712c3
--- /dev/null
+++ b/apps/examples/postcss.config.js
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+module.exports = {
+ plugins: {
+ 'postcss-react-strict-dom': {
+ include: [
+ require.resolve('react-strict-dom'),
+ 'src/**/*.{js,jsx,mjs,ts,tsx}'
+ ]
+ },
+ autoprefixer: {}
+ }
+};
diff --git a/apps/examples/src/index.js b/apps/examples/src/app/index.js
similarity index 69%
rename from apps/examples/src/index.js
rename to apps/examples/src/app/index.js
index 994dee3..67bb033 100644
--- a/apps/examples/src/index.js
+++ b/apps/examples/src/app/index.js
@@ -5,11 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
-import { LogBox } from 'react-native';
+// Required to apply extracted on Expo Web
+import './stylex.css';
+// Required for Fast Refresh to work on Expo Web
+import '@expo/metro-runtime';
+import { LogBox } from 'react-native';
import { registerRootComponent } from 'expo';
-
-import App from './App';
+import App from '../components/App';
if (LogBox != null) {
LogBox.ignoreLogs([
diff --git a/apps/examples/src/app/stylex.css b/apps/examples/src/app/stylex.css
new file mode 100644
index 0000000..f110a12
--- /dev/null
+++ b/apps/examples/src/app/stylex.css
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+/**
+ * The @stylex directive is used by the react-strict-dom postcss plugin.
+ * It is automatically replaced with generated CSS during builds.
+ */
+
+ @stylex;
diff --git a/apps/examples/src/App.js b/apps/examples/src/components/App.js
similarity index 100%
rename from apps/examples/src/App.js
rename to apps/examples/src/components/App.js
diff --git a/apps/examples/src/tokens.stylex.js b/apps/examples/src/components/tokens.stylex.js
similarity index 100%
rename from apps/examples/src/tokens.stylex.js
rename to apps/examples/src/components/tokens.stylex.js
diff --git a/package-lock.json b/package-lock.json
index 9cfde0d..10b2f8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,13 +54,15 @@
"version": "0.0.0",
"dependencies": {
"@expo/metro-runtime": "~4.0.0",
- "expo": "^52.0.3",
+ "expo": "^52.0.6",
"expo-build-properties": "~0.13.1",
"expo-status-bar": "~2.0.0",
+ "postcss-react-strict-dom": "^0.0.5",
"react": "~18.3.1",
"react-dom": "~18.3.1",
"react-native": "~0.76.1",
- "react-native-web": "~0.19.13"
+ "react-native-web": "~0.19.13",
+ "react-strict-dom": "*"
},
"devDependencies": {
"@babel/core": "^7.25.2"
@@ -3971,15 +3973,15 @@
}
},
"node_modules/@expo/cli": {
- "version": "0.21.1",
- "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.21.1.tgz",
- "integrity": "sha512-PCWiE4Upf0ylvNwqPGrRnqov4SW7VCS2X0PrxhDv/n/3xnG2nPGQx0Whq/tLSCz7BpOuADK6PcTNRswuhpHNcA==",
+ "version": "0.21.3",
+ "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.21.3.tgz",
+ "integrity": "sha512-r7MUilXmvtJ3inxD1P+uefTmVrIV43QLZlG0YvHPGX2NGCZcFFXwZkSquqnfZ2gzOXdHs2cAbqLJsH37nDq14g==",
"license": "MIT",
"dependencies": {
"@0no-co/graphql.web": "^1.0.8",
"@babel/runtime": "^7.20.0",
"@expo/code-signing-certificates": "^0.0.5",
- "@expo/config": "~10.0.2",
+ "@expo/config": "~10.0.4",
"@expo/config-plugins": "~9.0.3",
"@expo/devcert": "^1.1.2",
"@expo/env": "~0.4.0",
@@ -3989,7 +3991,7 @@
"@expo/osascript": "^2.0.31",
"@expo/package-manager": "^1.5.0",
"@expo/plist": "^0.2.0",
- "@expo/prebuild-config": "^8.0.9",
+ "@expo/prebuild-config": "^8.0.15",
"@expo/rudder-sdk-node": "^1.1.1",
"@expo/spawn-async": "^1.7.2",
"@expo/xcpretty": "^4.3.0",
@@ -4034,7 +4036,7 @@
"resolve-from": "^5.0.0",
"resolve.exports": "^2.0.2",
"semver": "^7.6.0",
- "send": "^0.18.0",
+ "send": "^0.19.0",
"slugify": "^1.3.4",
"source-map-support": "~0.5.21",
"stacktrace-parser": "^0.1.10",
@@ -4274,9 +4276,9 @@
}
},
"node_modules/@expo/config": {
- "version": "10.0.3",
- "resolved": "https://registry.npmjs.org/@expo/config/-/config-10.0.3.tgz",
- "integrity": "sha512-BrFMqoQXDl8O6gZqF2EtGtA1p8u3Sp8z6B8aJppEo5qrtPaxlyShkHwuLhlpLisQdipZWP89+meOqxk7bUOU2Q==",
+ "version": "10.0.4",
+ "resolved": "https://registry.npmjs.org/@expo/config/-/config-10.0.4.tgz",
+ "integrity": "sha512-pkvdPqKTaP6+Qvc8aTmDLQ9Dfwp98P1GO37MFKwsF5XormfN/9/eN8HfIRoM6d3uSIVKCcWW3X2yAEbNmOyfXw==",
"license": "MIT",
"dependencies": {
"@babel/code-frame": "~7.10.4",
@@ -5036,16 +5038,16 @@
}
},
"node_modules/@expo/metro-config": {
- "version": "0.19.2",
- "resolved": "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.19.2.tgz",
- "integrity": "sha512-n9Q+ERhj0nUciKnDgiCWuys6cMLH2KI0Ppw0SLbkHiqLIK60Y2KiGuyKnj5Rna2x4m83hrGZmAEf/+PpvQd9lA==",
+ "version": "0.19.4",
+ "resolved": "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.19.4.tgz",
+ "integrity": "sha512-2SWwYN8MZvMIRawWEr+1RBYncitPwu2VMACRYig+wBycJ9fsPb6BMVmBYi+3MHDUlJHNy/Bqfw++jn1eqBFETQ==",
"license": "MIT",
"dependencies": {
"@babel/core": "^7.20.0",
"@babel/generator": "^7.20.5",
"@babel/parser": "^7.20.0",
"@babel/types": "^7.20.0",
- "@expo/config": "~10.0.0",
+ "@expo/config": "~10.0.4",
"@expo/env": "~0.4.0",
"@expo/json-file": "~9.0.0",
"@expo/spawn-async": "^1.7.2",
@@ -5396,12 +5398,12 @@
}
},
"node_modules/@expo/prebuild-config": {
- "version": "8.0.13",
- "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-8.0.13.tgz",
- "integrity": "sha512-QBfr2A0Qlqp5A9x6mjEasTv5we6AwbAzNZaYCvZAXivqlcqcNJOcVYpRZcZGKMdr5G6mMrqQZ3JaW8PnFglLbA==",
+ "version": "8.0.15",
+ "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-8.0.15.tgz",
+ "integrity": "sha512-vUx8N25l4PTYps5+v2f8aPguDIjQmyB5LVMvhxTc287T9u/YHZVTWP6YviBfF7ee2+LLBpItxH56gxkuL71NFw==",
"license": "MIT",
"dependencies": {
- "@expo/config": "~10.0.0",
+ "@expo/config": "~10.0.4",
"@expo/config-plugins": "~9.0.0",
"@expo/config-types": "^52.0.0",
"@expo/image-utils": "^0.6.0",
@@ -14060,26 +14062,26 @@
}
},
"node_modules/expo": {
- "version": "52.0.4",
- "resolved": "https://registry.npmjs.org/expo/-/expo-52.0.4.tgz",
- "integrity": "sha512-skG7/wd/kcTo3uhJFkCuWwn8Ymrz5DE5RO7vds69LL344lXLBdRegu38qC1Vb18ws+ZN3WgL1rxZ6GLtoVMtDA==",
+ "version": "52.0.6",
+ "resolved": "https://registry.npmjs.org/expo/-/expo-52.0.6.tgz",
+ "integrity": "sha512-Dci5Ezs+98KZ+onLl0pQ2y+t2cW3Kkhqv485nxZXPpSqcp+Y33ZZ6L+SUxY2zhnYx/cB5LNPnjDmrEdaCAP60A==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.20.0",
- "@expo/cli": "0.21.1",
- "@expo/config": "10.0.3",
+ "@expo/cli": "0.21.3",
+ "@expo/config": "~10.0.4",
"@expo/config-plugins": "9.0.9",
"@expo/fingerprint": "0.11.2",
- "@expo/metro-config": "0.19.2",
+ "@expo/metro-config": "0.19.4",
"@expo/vector-icons": "^14.0.0",
"babel-preset-expo": "~12.0.0",
"expo-asset": "~11.0.1",
- "expo-constants": "~17.0.2",
- "expo-file-system": "~18.0.2",
+ "expo-constants": "~17.0.3",
+ "expo-file-system": "~18.0.3",
"expo-font": "~13.0.1",
"expo-keep-awake": "~14.0.1",
- "expo-modules-autolinking": "2.0.1",
- "expo-modules-core": "2.0.1",
+ "expo-modules-autolinking": "2.0.2",
+ "expo-modules-core": "2.0.2",
"fbemitter": "^3.0.0",
"web-streams-polyfill": "^3.3.2",
"whatwg-url-without-unicode": "8.0.0-3"
@@ -14167,12 +14169,12 @@
}
},
"node_modules/expo-constants": {
- "version": "17.0.2",
- "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.2.tgz",
- "integrity": "sha512-Z4QrHuy2fDOP0xv9bNeX7dKaZ1GSBA5ExmtuSKX3hN1S1Gsllb/VxOYEaLUWk8xncQlbf2vEAHcMbHGo8U/3cA==",
+ "version": "17.0.3",
+ "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.3.tgz",
+ "integrity": "sha512-lnbcX2sAu8SucHXEXxSkhiEpqH+jGrf+TF+MO6sHWIESjwOUVVYlT8qYdjR9xbxWmqFtrI4KV44FkeJf2DaFjQ==",
"license": "MIT",
"dependencies": {
- "@expo/config": "~10.0.0",
+ "@expo/config": "~10.0.4",
"@expo/env": "~0.4.0"
},
"peerDependencies": {
@@ -14181,10 +14183,13 @@
}
},
"node_modules/expo-file-system": {
- "version": "18.0.2",
- "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.2.tgz",
- "integrity": "sha512-6Tt2LFk5zWZaDCwCQcFwICuoc/MJPr3BchDuFvBccQ+9bFN0vWqSvpUpcLGHXCKHFTZdDpc6zLuqH+5iAdcZiA==",
+ "version": "18.0.3",
+ "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.3.tgz",
+ "integrity": "sha512-HKe0dGW3FWYFi1F3THVnTRueTG7j0onmEpUJKRB4UbjeHD2723cn/EutcG216wvrJeebe8w3+00F8Z4xk+9Jrw==",
"license": "MIT",
+ "dependencies": {
+ "web-streams-polyfill": "^3.3.2"
+ },
"peerDependencies": {
"expo": "*",
"react-native": "*"
@@ -14214,9 +14219,9 @@
}
},
"node_modules/expo-modules-autolinking": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.1.tgz",
- "integrity": "sha512-Lfr9X9X/fhc5RL49oKOwaoXorgkLWFy9992xP0Oxb+UAZTVnAsNfs4N0gxcy3isXyx6qfJGXConhYelhRKHSPQ==",
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.2.tgz",
+ "integrity": "sha512-n3jC7VoJLfOLGk8NWhEAvM5zSjbLh1kMUSo76nJupx5/vASxDdzihppYebrKrNXPHq5mcw8Jr+r7YB+8xHx7QQ==",
"license": "MIT",
"dependencies": {
"@expo/spawn-async": "^1.7.2",
@@ -14394,9 +14399,9 @@
}
},
"node_modules/expo-modules-core": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-2.0.1.tgz",
- "integrity": "sha512-xpfjW0fsl+xiIKYILEA6wMN0f5Ia4Gzqpn+5iygLNzPYNmCnO9g2Wsea+ksl4BjiykAcRyZocrNCmrdW0xjwHA==",
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-2.0.2.tgz",
+ "integrity": "sha512-IZdxGXxZXFtmffJOM9LDfeOQeJUftgAZxnPkz62bnbAQc0yUrOSZ+XsX0RP92xq7qGtdcL551GuzxWWbBG5EGA==",
"license": "MIT",
"dependencies": {
"invariant": "^2.2.4"
@@ -25715,6 +25720,36 @@
"postcss": "^8.4.31"
}
},
+ "node_modules/postcss-react-strict-dom": {
+ "version": "0.0.5",
+ "resolved": "https://registry.npmjs.org/postcss-react-strict-dom/-/postcss-react-strict-dom-0.0.5.tgz",
+ "integrity": "sha512-j8t8G1Q6v7qRwJpkUPOOTJhLscYAtNIjB0+U0CAunTzSmTzX3M/KJbpG9ZYlaieRiOBH8pveBTEWXIvawKzWXA==",
+ "license": "MIT",
+ "dependencies": {
+ "fast-glob": "^3.3.2",
+ "glob-parent": "^6.0.2",
+ "is-glob": "^4.0.3"
+ },
+ "engines": {
+ "node": ">=18.0.0"
+ },
+ "peerDependencies": {
+ "postcss": "*",
+ "react-strict-dom": "*"
+ }
+ },
+ "node_modules/postcss-react-strict-dom/node_modules/glob-parent": {
+ "version": "6.0.2",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+ "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+ "license": "ISC",
+ "dependencies": {
+ "is-glob": "^4.0.3"
+ },
+ "engines": {
+ "node": ">=10.13.0"
+ }
+ },
"node_modules/postcss-reduce-idents": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-6.0.3.tgz",
@@ -27972,15 +28007,15 @@
}
},
"node_modules/send": {
- "version": "0.18.0",
- "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
- "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+ "version": "0.19.1",
+ "resolved": "https://registry.npmjs.org/send/-/send-0.19.1.tgz",
+ "integrity": "sha512-p4rRk4f23ynFEfcD9LA0xRYngj+IyGiEYyqqOak8kaN0TvNmuxC2dcVeBn62GpCeR2CpWqyHCNScTP91QbAVFg==",
"license": "MIT",
"dependencies": {
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "1.2.0",
- "encodeurl": "~1.0.2",
+ "encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"fresh": "0.5.2",
@@ -28010,6 +28045,15 @@
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"license": "MIT"
},
+ "node_modules/send/node_modules/encodeurl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+ "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/send/node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -29925,9 +29969,9 @@
}
},
"node_modules/undici": {
- "version": "6.20.1",
- "resolved": "https://registry.npmjs.org/undici/-/undici-6.20.1.tgz",
- "integrity": "sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==",
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz",
+ "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==",
"license": "MIT",
"engines": {
"node": ">=18.17"
diff --git a/packages/react-strict-dom/babel/index.js b/packages/react-strict-dom/babel/index.js
index bcbdca7..d13f189 100644
--- a/packages/react-strict-dom/babel/index.js
+++ b/packages/react-strict-dom/babel/index.js
@@ -236,7 +236,7 @@ function reactStrictPreset(_, options = {}) {
{
dev: opts.dev,
importSources: [{ from: 'react-strict-dom', as: 'css' }],
- runtimeInjection: opts.dev, // temporary until Expo/Metro can support built-time
+ runtimeInjection: false,
styleResolution: 'property-specificity',
unstable_moduleResolution: {
type: 'commonJS',
diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json
index b4cc299..60a5f18 100644
--- a/packages/react-strict-dom/package.json
+++ b/packages/react-strict-dom/package.json
@@ -12,10 +12,6 @@
"./package.json": "./package.json"
},
"sideEffects": false,
- "files": [
- "*",
- "!**/__tests__"
- ],
"scripts": {
"build": "rollup --config ./tools/rollup.config.mjs",
"clean": "del-cli \"./build/*\" \"./dist/*\"",
diff --git a/packages/react-strict-dom/src/dom/runtime.js b/packages/react-strict-dom/src/dom/runtime.js
index 689bceb..7a45537 100644
--- a/packages/react-strict-dom/src/dom/runtime.js
+++ b/packages/react-strict-dom/src/dom/runtime.js
@@ -42,7 +42,7 @@ const styles = stylex.create({
borderWidth: 1
},
codePre: {
- fontFamily: 'monospace, monospace',
+ fontFamily: 'monospace, "monospace"',
fontSize: '1em',
overflow: 'auto'
},
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom
index 7ac3f9d..7fc3262 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom
@@ -1176,7 +1176,7 @@ exports[`html "button" supports inline event handlers 1`] = `
exports[`html "code" ignores and warns about unsupported attributes 1`] = `