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..c078a00 100644 --- a/apps/examples/babel.config.js +++ b/apps/examples/babel.config.js @@ -11,6 +11,7 @@ function getPlatform(caller) { return caller && caller.platform; } +/* function getIsDev(caller) { if (caller?.isDev != null) return caller.isDev; // https://babeljs.io/docs/options#envname @@ -19,12 +20,13 @@ function getIsDev(caller) { process.env.NODE_ENV === 'development' ); } +*/ module.exports = function (api) { //api.cache(true); const platform = api.caller(getPlatform); - const isDev = api.caller(getIsDev); + // const isDev = api.caller(getIsDev); const presets = ['babel-preset-expo']; const plugins = []; @@ -32,7 +34,7 @@ module.exports = function (api) { if (platform === 'web') { presets.push([ reactStrictPreset, - { debug: true, dev: isDev, rootDir: __dirname } + { debug: true, dev: false, rootDir: __dirname } ]); } diff --git a/apps/examples/package.json b/apps/examples/package.json index ede85d0..338e98d 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", @@ -14,6 +14,7 @@ "expo": "^52.0.3", "expo-build-properties": "~0.13.1", "expo-status-bar": "~2.0.0", + "postcss-react-strict-dom": "0.0.2", "react": "~18.3.1", "react-dom": "~18.3.1", "react-native": "~0.76.1", diff --git a/apps/examples/postcss.config.js b/apps/examples/postcss.config.js new file mode 100644 index 0000000..0bf1561 --- /dev/null +++ b/apps/examples/postcss.config.js @@ -0,0 +1,15 @@ +/** + * 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: ['src/**/*.{js,jsx,mjs,ts,tsx}'] + }, + autoprefixer: {} + } +}; diff --git a/apps/examples/src/index.js b/apps/examples/src/app/index.js similarity index 87% rename from apps/examples/src/index.js rename to apps/examples/src/app/index.js index 994dee3..867af78 100644 --- a/apps/examples/src/index.js +++ b/apps/examples/src/app/index.js @@ -5,11 +5,10 @@ * LICENSE file in the root directory of this source tree. */ +import './stylex.css'; 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..565d9b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "expo": "^52.0.3", "expo-build-properties": "~0.13.1", "expo-status-bar": "~2.0.0", + "postcss-react-strict-dom": "0.0.2", "react": "~18.3.1", "react-dom": "~18.3.1", "react-native": "~0.76.1", @@ -25715,6 +25716,36 @@ "postcss": "^8.4.31" } }, + "node_modules/postcss-react-strict-dom": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/postcss-react-strict-dom/-/postcss-react-strict-dom-0.0.2.tgz", + "integrity": "sha512-vLSIG2bkZUXCtCJCzGZIgBI+uZVA8yofqS91UjTkilvYxKHm0CkNtN45vAFkp5d5d5KXsXpQWh1PkBAv0X19Jg==", + "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",