Breaking: Remove Expo SDK 51 config, switch to app.config.ts #462

ProchaLu · 2024-11-18T13:17:25Z

Issue https://github.com/upleveled/courses/issues/3000

Follow up PR

https://github.com/upleveled/courses/pull/2925

Breaking change: the new config introduced in this PR is SDK 52 configuration for the New Architecture, so this should only be used with Expo SDK 52+

This PR updates the project configuration to align with changes introduced in Expo SDK 52. With SDK 52, the extra configuration steps required for SDK 51 are no longer needed. Running pnpm create expo-app@latest . now initializes the app.json file with:

expo.newArchEnabled = true
expo.experiments.typedRoutes = true

Additionally, we switch from app.json to app.config.ts to make the config more dynamic, add TS support, and make it easier to manage environment-specific settings.

codesandbox-ci · 2024-11-18T13:17:38Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

…eveled into remove-expo-parts

karlhorky · 2025-01-22T09:39:23Z

bin/expo-setup.js

+const config: ExpoConfig = ${JSON.stringify(appJson.expo, null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"(.*?)"/g, `'$1'`)
+    .replace(/([}\]])(\s*[}\]])/g, '$1,$2')
+    .replace(/}(\s+\])/g, '},$1')
+    .replace(/(?<!,)(\n\s*[}\]])/g, ',$1')};
+


switch to Prettier for this, don't write our own home-grown formatting code

Prettier is installed in bin/install.js, so you should be able to import + use this version:

eslint-config-upleveled/bin/install.js

Lines 157 to 163 in 0e66443

// The VS Code Prettier extension uses Prettier v2 internally,

// but Preflight uses the latest Prettier version, which causes

// crashes and formatting conflicts:

// https://github.com/prettier/prettier-vscode/pull/3069#issuecomment-1817589047

// https://github.com/prettier/prettier-vscode/issues/3298

// https://github.com/upleveled/preflight/issues/429

'prettier',

I can run the Prettier with await promisify(exec)('npx prettier --write app.config.ts');

This command runs local Prettier and formats the app.config.ts file.

722d8ce

let's use the Prettier API since we're already executing JS

To use Prettier, ESLint needs to be installed first. However, the current Command Line Cheatsheet places the ESLint installation as the final step (step 4). Since we require Prettier to format app.config.ts during the transition from app.json, this causes a problem.

Changing the order of steps in the cheatsheet is not an option.

Potential solutions without creating a CLI:

Stick with app.json and wait for Expo to address the issue and uses app.config.ts

Use a script with the replace method instead of Prettier to format app.config.ts

Provide the script for students to copy, run manually, and delete after execution (maybe bad)

Manually switching or reordering the setup steps introduces too much complexity and room for errors

The best solution right now seems to be using the replace method, avoiding unnecessary dependencies, avoid changing the Command Line Cheatsheet and reducing the risk of errors.

Reverted and used replace instead again.
aac3141

Update:

Also tested with a echo command to create the file, but students still have to remove the app.json file manually, or use a rm -rf command

echo -e "import { type ExpoConfig } from \"expo/config\";\n\nconst config: ExpoConfig = {\n name: '$(\jq -r '.expo.name' app.json)',\n slug: '$(\jq -r '.expo.slug' app.json)',\n version: '1.0.0',\n orientation: 'portrait',\n icon: './assets/images/icon.png',\n scheme: 'myapp',\n userInterfaceStyle: 'automatic',\n newArchEnabled: true,\n ios: {\n supportsTablet: true,\n },\n android: {\n adaptiveIcon: {\n foregroundImage: './assets/images/adaptive-icon.png',\n backgroundColor: '#ffffff',\n },\n },\n web: {\n bundler: 'metro',\n output: 'static',\n favicon: './assets/images/favicon.png',\n },\n plugins: [\n 'expo-router',\n [\n 'expo-splash-screen',\n {\n image: './assets/images/splash-icon.png',\n imageWidth: 200,\n resizeMode: 'contain',\n backgroundColor: '#ffffff',\n },\n ],\n ],\n experiments: {\n typedRoutes: true,\n },\n};\n\nexport default config;" > app.config.ts rm app.json

We came to the solution to add Prettier in the expo-setup script, and format the app.config.ts file with it. f8cdd74

karlhorky · 2025-01-22T09:43:31Z

bin/expo-setup.js

+const expoConfig =
+  `import { ExpoConfig } from "expo/config";
+
+const config: ExpoConfig = ${JSON.stringify(appJson.expo, null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"(.*?)"/g, `'$1'`)
+    .replace(/([}\]])(\s*[}\]])/g, '$1,$2')
+    .replace(/}(\s+\])/g, '},$1')
+    .replace(/(?<!,)(\n\s*[}\]])/g, ',$1')};
+
+export default config;
+`.trim() + '\n';
+
+await writeFile('app.config.ts', expoConfig, 'utf8');
+console.log('✅ Converted app.json to app.config.ts');


since we're taking over converting to app.config.ts, we need to have a code comment in this code to point to an Expo issue or PR that create-expo-app / create-expo (mention both names in the issue / PR if you create it) should be the config format that is generated - active maintainers of create-expo-app can be tagged on this issue / PR (maybe Simek is active, not sure)

Created an issue in the Expo for generating app.config.ts as the default configuration format and updated the code comment to include the issue link.

d0dc9db

karlhorky · 2025-01-22T09:46:16Z

bin/expo-setup.js

-appJson.expo.plugins = [
-  [
-    'expo-build-properties',
-    {
-      ios: {
-        newArchEnabled: true,
-      },
-      android: {
-        newArchEnabled: true,
-      },
-    },
-  ],
-];


@ProchaLu is this equivalent with the new setting you mentioned comes by default:

This PR updates the project configuration to align with changes introduced in Expo SDK 52. With SDK 52, the extra configuration steps required for SDK 51 are no longer needed. Running pnpm create expo-app@latest . now initializes the app.json file with:

expo.newArchEnabled = true

A Boolean value that indicates whether the app should use the new architecture. Defaults to true.
https://docs.expo.dev/versions/latest/config/app/#newarchenabled

There is still the possibility to add the specific iOS / Android newArchEnabled settings, but we want to use the newArchEnabled = true in both.

ok, that doesn't mention that it's the same as expo-build-properties anywhere, but it's probably the same, so let's stick with that

if you can easily verify that the app is running in the New Architecture, that would be a helpful additional step

In the docs from "Enable the New Architecture in an existing project":
SDK 52:

To enable it on both Android and iOS, use the newArchEnabled at the root of the expo object in your app config. You can selectively enable it for a single platform by setting, for example, "android": { "newArchEnabled": true }.

SDK 51:

To enable it, you need to install the expo-build-properties plugin and set newArchEnabled on target platforms.

ok good, that's probably enough proof, thanks!

Co-authored-by: Karl Horky <[email protected]>

…eveled into remove-expo-parts

karlhorky · 2025-01-24T09:17:46Z

bin/expo-setup.js

 import isPlainObject from 'is-plain-obj';

+execSync('pnpm add --save-dev prettier', { stdio: 'inherit' });


let's stick with async APIs, instead of the *Sync functions

because this is unusual (using pnpm to install via exec, dynamic import below) let's add a comment above this why it's better (mention colocation and maybe ease of deleting the code later when it's not needed anymore, add a link to the Expo tracking issue/PR)

used promisify(exec) now to install Prettier f8cdd74

added a comment c23acfc and updated the comment
3ee4cbc

Co-authored-by: Karl Horky <[email protected]>

karlhorky

LGTM, thanks!

Remove Expo app.json configuration

c39362d

ProchaLu added 3 commits January 9, 2025 12:04

Add Expo Router settings

08e5933

Merge branch 'main' of https://github.com/upleveled/eslint-config-upl…

1f5114f

…eveled into remove-expo-parts

Add RSC config to app.json

5285bc0

ProchaLu changed the title ~~Remove outdated Expo app.json config for SDK 52~~ Winter 2025: Remove outdated Expo app.json config for SDK 52 Jan 9, 2025

ProchaLu changed the title ~~Winter 2025: Remove outdated Expo app.json config for SDK 52~~ Winter25: Update Expo setup script for SDK 52 Jan 9, 2025

ProchaLu added 9 commits January 10, 2025 11:47

Merge branch 'main' of https://github.com/upleveled/eslint-config-upl…

046310f

…eveled into remove-expo-parts

Add rsc, expo-splash and eslint-disable

e517f2e

Add RSC to install log

4eba886

Remove RSC

c1dab94

Remove RSC in comments

1ef7305

Convert app.json to app.config.ts

a263039

Fix lint error, trailing /

b51e448

Merge branch 'main' of https://github.com/upleveled/eslint-config-upl…

c305cdd

…eveled into remove-expo-parts

Use variable instead of path

ab38f32

karlhorky reviewed Jan 22, 2025

View reviewed changes

ProchaLu and others added 9 commits January 22, 2025 11:19

Format file with Prettier

722d8ce

Update app.config comment with issue link

d0dc9db

Update bin/expo-setup.js

135ab51

Co-authored-by: Karl Horky <[email protected]>

Update bin/expo-setup.js

42491bb

Co-authored-by: Karl Horky <[email protected]>

Run expo-setup with eslint install

dad5d73

Remove script exec

abc0e43

Revert to use replace instead of Prettier

aac3141

Add Prettier to expo-setup script

d3caa1d

Merge branch 'main' of https://github.com/upleveled/eslint-config-upl…

f9a3a41

…eveled into remove-expo-parts

karlhorky reviewed Jan 24, 2025

View reviewed changes

Refactor expo-setup script to use promisified exec for adding Prettier

f8cdd74

ProchaLu and others added 6 commits January 24, 2025 10:47

Add Prettier comment

c23acfc

Add empty line

758ed1f

Update comment

3ee4cbc

Refactor inline variables

de6c878

Update bin/expo-setup.js

78bb7ef

Co-authored-by: Karl Horky <[email protected]>

Move import to code usage

ca81b51

upleveled deleted a comment from ProchaLu Jan 24, 2025

karlhorky added 2 commits January 24, 2025 11:57

Update bin/expo-setup.js

67a1833

Update bin/expo-setup.js

decbd22

ProchaLu changed the title ~~Winter25: Update Expo setup script for SDK 52~~ Winter25: Expo setup script for SDK 52, switch to app.config.ts Jan 24, 2025

ProchaLu changed the title ~~Winter25: Expo setup script for SDK 52, switch to app.config.ts~~ Winter25: Remove SDK51 config, switch to app.config.ts Jan 24, 2025

ProchaLu changed the title ~~Winter25: Remove SDK51 config, switch to app.config.ts~~ Winter25: Remove SDK51 config, switch to app.config.ts with script Jan 24, 2025

Remove .trim

a6a2863

karlhorky changed the title ~~Winter25: Remove SDK51 config, switch to app.config.ts with script~~ Breaking: Remove Expo SDK 51 config, switch to app.config.ts Jan 24, 2025

karlhorky approved these changes Jan 24, 2025

View reviewed changes

karlhorky merged commit 40571e2 into main Jan 24, 2025
4 checks passed

karlhorky deleted the remove-expo-parts branch January 24, 2025 16:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breaking: Remove Expo SDK 51 config, switch to app.config.ts #462

Breaking: Remove Expo SDK 51 config, switch to app.config.ts #462

ProchaLu commented Nov 18, 2024 •

edited by karlhorky

Loading

codesandbox-ci bot commented Nov 18, 2024 •

edited

Loading

karlhorky Jan 22, 2025 •

edited

Loading

ProchaLu Jan 22, 2025 •

edited

Loading

karlhorky Jan 22, 2025 •

edited

Loading

ProchaLu Jan 23, 2025 •

edited

Loading

ProchaLu Jan 24, 2025

karlhorky Jan 22, 2025

ProchaLu Jan 22, 2025

karlhorky Jan 22, 2025

ProchaLu Jan 22, 2025

karlhorky Jan 22, 2025 •

edited

Loading

ProchaLu Jan 22, 2025

karlhorky Jan 22, 2025

karlhorky Jan 24, 2025 •

edited

Loading

ProchaLu Jan 24, 2025 •

edited

Loading

karlhorky left a comment

	// The VS Code Prettier extension uses Prettier v2 internally,
	// but Preflight uses the latest Prettier version, which causes
	// crashes and formatting conflicts:
	// https://github.com/prettier/prettier-vscode/pull/3069#issuecomment-1817589047
	// https://github.com/prettier/prettier-vscode/issues/3298
	// https://github.com/upleveled/preflight/issues/429
	'prettier',

		import isPlainObject from 'is-plain-obj';

		execSync('pnpm add --save-dev prettier', { stdio: 'inherit' });

Breaking: Remove Expo SDK 51 config, switch to app.config.ts #462

Breaking: Remove Expo SDK 51 config, switch to app.config.ts #462

Conversation

ProchaLu commented Nov 18, 2024 • edited by karlhorky Loading

codesandbox-ci bot commented Nov 18, 2024 • edited Loading

karlhorky Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

ProchaLu Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

karlhorky Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

ProchaLu Jan 23, 2025 • edited Loading

Choose a reason for hiding this comment

ProchaLu Jan 24, 2025

Choose a reason for hiding this comment

karlhorky Jan 22, 2025

Choose a reason for hiding this comment

ProchaLu Jan 22, 2025

Choose a reason for hiding this comment

karlhorky Jan 22, 2025

Choose a reason for hiding this comment

ProchaLu Jan 22, 2025

Choose a reason for hiding this comment

karlhorky Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

ProchaLu Jan 22, 2025

Choose a reason for hiding this comment

karlhorky Jan 22, 2025

Choose a reason for hiding this comment

karlhorky Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

ProchaLu Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

karlhorky left a comment

Choose a reason for hiding this comment

ProchaLu commented Nov 18, 2024 •

edited by karlhorky

Loading

codesandbox-ci bot commented Nov 18, 2024 •

edited

Loading

karlhorky Jan 22, 2025 •

edited

Loading

ProchaLu Jan 22, 2025 •

edited

Loading

karlhorky Jan 22, 2025 •

edited

Loading

ProchaLu Jan 23, 2025 •

edited

Loading

karlhorky Jan 22, 2025 •

edited

Loading

karlhorky Jan 24, 2025 •

edited

Loading

ProchaLu Jan 24, 2025 •

edited

Loading