First phase of react-native-ide to radon IDE renaming - renaming non-…

…visible bits first (#538) This is the first step for our renaming process. It renames most react-native-ide occurences that doesn't affect users or are not visible. 1) We're republishing react-native-ide under radon-ide package name (next step would be to fallback from react-native-ide to radon-ide) 2) We are adding new configuration scheme "radon-ide" but for now keeping it as a copy. We want to accept new and old schemes going forwards and deprecate the old one after renaming is complete. 3) We're keeping all user-facing name as-is for the time being. Will want to update docs first for the transition to complete – those changes will come as a follow up. 4) Code changes are mostly made to be backwards compatible and when possible we are supporting old names (i.e. for NPM package or for the config scheme) Final tricky part is caches file location. Since it contains android emulator configs that in turn contain absolute path names we may need to consider dropping caches entirely with the update (haven't decided on this one yet). ## Test plan 1. Full test over expo-router app. It also uses custom config along with preview functionality
software-mansion · Sep 13, 2024 · f126d51 · f126d51
1 parent a3d964e
commit f126d51
Show file tree

Hide file tree

Showing 21 changed files with 165 additions and 37 deletions.
diff --git a/packages/radon-ide/index.d.ts b/packages/radon-ide/index.d.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+// This function is a placeholder for the preview function.
+// It is provided as empty method so that packages that use
+// preview functionality can build and execute outside of the
+// context of VSCode's React Native extension.
+// When run inside VSCode, the extension will replace the
+// implementation of this method in order to support the preview
+// feature properly.
+export declare function preview(componentInstance: ReturnType<typeof React.createElement>): void;
diff --git a/packages/radon-ide/index.js b/packages/radon-ide/index.js
@@ -0,0 +1,9 @@
+export function preview(componentInstance) {
+  // This function is a placeholder for the preview function.
+  // It is provided as empty method so that packages that use
+  // preview functionality can build and execute outside of the
+  // context of VSCode's React Native extension.
+  // When run inside VSCode, the extension will replace the
+  // implementation of this method in order to support the preview
+  // feature properly.
+}
diff --git a/packages/radon-ide/package.json b/packages/radon-ide/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "radon-ide",
+  "version": "0.0.1",
+  "description": "Helper functions for Radon IDE project",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "author": "Software Mansion <[email protected]>",
+  "license": "MIT"
+}
diff --git a/packages/vscode-extension/lib/android/buildProgressEvaluation.initscript.gradle b/packages/vscode-extension/lib/android/buildProgressEvaluation.initscript.gradle
@@ -1,4 +1,4 @@
-// This is a functionality that is used by BuildAndroidProgressProcessor 
+// This is a functionality that is used by BuildAndroidProgressProcessor
 gradle.taskGraph.whenReady { graph ->
-    println "React-Native-IDE:TaskGraphSize: ${graph.allTasks.size()}"
+    println "RadonIDE:TaskGraphSize: ${graph.allTasks.size()}"
 }
diff --git a/packages/vscode-extension/lib/babel_transformer.js b/packages/vscode-extension/lib/babel_transformer.js
@@ -68,7 +68,10 @@ function transformWrapper({ filename, src, ...rest }) {
     } else if (version.startsWith("3.")) {
       src = `${src};require("__RNIDE_lib__/expo_router_plugin.js");`;
     }
-  } else if (isTransforming("node_modules/react-native-ide/index.js")) {
+  } else if (
+    isTransforming("node_modules/react-native-ide/index.js") || // using react-native-ide for compatibility with old NPM package name
+    isTransforming("node_modules/radon-ide/index.js")
+  ) {
     src = `${src};preview = require("__RNIDE_lib__/preview.js").preview;`;
   } else if (
     isTransforming(

diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json
@@ -171,14 +171,98 @@
     ],
     "debuggers": [
       {
-        "type": "com.swmansion.react-native-ide",
-        "label": "React Native IDE internal",
+        "type": "com.swmansion.react-native-debugger",
+        "label": "Radon IDE internal debugger for React Native",
         "hiddenWhen": "true",
         "languages": [
           "javascript",
           "typescript"
         ]
       },
+      {
+        "type": "radon-ide",
+        "label": "Radon IDE",
+        "languages": [
+          "javascript",
+          "typescript",
+          "javascriptreact",
+          "typescriptreact"
+        ],
+        "configurationAttributes": {
+          "launch": {
+            "required": [],
+            "properties": {
+              "appRoot": {
+                "type": "string",
+                "description": "Location of the React Native application root folder relative to the workspace. This is used for monorepo type setups when the workspace root is not the root of the React Native project. The IDE extension tries to locate the React Native application root automatically, but in case it failes to do so (i.e. there are multiple applications defined in the workspace), you can use this setting to override the location."
+              },
+              "isExpo": {
+                "type": "boolean",
+                "description": "IDE tries to detect whether project uses Expo or React Native community CLI. This is needed when starting the bundler. If your project uses Expo but IDE fails to automatically detect it, you can set this parameter to `true` to force the use of Expo CLI."
+              },
+              "env": {
+                "type": "object",
+                "description": "Environment variables to be passed to all build/run commands that the IDE is launching."
+              },
+              "metroConfigPath": {
+                "type": "string",
+                "description": "Location of Metro config relative to the workspace. This is used for using custom configs for e.g. development."
+              },
+              "ios": {
+                "description": "Provides a way to customize Xcode builds for iOS",
+                "type": "object",
+                "properties": {
+                  "scheme": {
+                    "type": "string",
+                    "description": "Scheme name (from xcode project) the IDE will use for iOS builds, defaults to xcworkspace base file name."
+                  },
+                  "configuration": {
+                    "type": "string",
+                    "description": "Build configuration name (from xcode project) the IDE will use for iOS builds, defaults to \"Debug\"."
+                  }
+                }
+              },
+              "android": {
+                "description": "Provides a way to customize Gradle builds for Android",
+                "type": "object",
+                "properties": {
+                  "buildType": {
+                    "type": "string",
+                    "description": "Android's build type used when building with Gradle, defaults to \"debug\"."
+                  },
+                  "productFlavor": {
+                    "type": "string",
+                    "description": "Android's build product flavor used when building with Gradle, by default no flavor is used."
+                  }
+                }
+              },
+              "preview": {
+                "description": "Custommize the behavior of device preview",
+                "type": "object",
+                "properties": {
+                  "waitForAppLaunch": {
+                    "type": "boolean",
+                    "description": "Defaults to `true`, this should only be set to `false` for brownfield setups when React Native components aren't rendered immediately after the app launches."
+                  }
+                }
+              }
+            }
+          }
+        },
+        "initialConfigurations": [
+          {
+            "type": "react-native-ide",
+            "request": "launch",
+            "name": "React Native IDE panel",
+            "ios": {
+              "configuration": "Debug"
+            },
+            "android": {
+              "buildType": "debug"
+            }
+          }
+        ]
+      },
       {
         "type": "react-native-ide",
         "label": "React Native IDE",
@@ -226,9 +310,13 @@
                 "description": "Provides a way to customize Gradle builds for Android",
                 "type": "object",
                 "properties": {
-                  "variant": {
+                  "buildType": {
+                    "type": "string",
+                    "description": "Android's build type used when building with Gradle, defaults to \"debug\"."
+                  },
+                  "productFlavor": {
                     "type": "string",
-                    "description": "Android's build variant used when building with Gradle, defaults to \"debug\"."
+                    "description": "Android's build product flavor used when building with Gradle, by default no flavor is used."
                   }
                 }
               },

diff --git a/packages/vscode-extension/scripts/build-sim-server.sh b/packages/vscode-extension/scripts/build-sim-server.sh
@@ -24,7 +24,7 @@ fi
 if [[ ! -f "$product_path" ]]; then
     echo "Simulator server binary not found: $product_path"
     echo ""
-    echo "Make sure to follow development setup instructions: https://github.com/software-mansion/react-native-ide"
+    echo "Make sure to follow development setup instructions: https://ide.swmansion.com/docs/development"
     echo "You can download the binary from the releases page on GitHub: https://github.com/software-mansion/react-native-ide/releases"
     exit 1
 fi

diff --git a/packages/vscode-extension/src/builders/BuildAndroidProgressProcessor.ts b/packages/vscode-extension/src/builders/BuildAndroidProgressProcessor.ts
@@ -14,7 +14,7 @@ export class BuildAndroidProgressProcessor implements BuildProgressProcessor {
   }
 
   processLine(line: string): void {
-    const taskGrapfSizeMatch = /React-Native-IDE:TaskGraphSize: (\d+)/m.exec(line);
+    const taskGrapfSizeMatch = /RadonIDE:TaskGraphSize: (\d+)/m.exec(line);
 
     if (taskGrapfSizeMatch) {
       this.tasksToComplete += Number(taskGrapfSizeMatch[1]);

diff --git a/packages/vscode-extension/src/debugging/DebugSession.ts b/packages/vscode-extension/src/debugging/DebugSession.ts
@@ -50,8 +50,8 @@ export class DebugSession implements Disposable {
     const debugStarted = await debug.startDebugging(
       undefined,
       {
-        type: "com.swmansion.react-native-ide",
-        name: "React Native IDE Debugger",
+        type: "com.swmansion.react-native-debugger",
+        name: "Radon IDE Debugger",
         request: "attach",
         websocketAddress: websocketAddress,
         absoluteProjectPath: getAppRootFolder(),

diff --git a/packages/vscode-extension/src/extension.ts b/packages/vscode-extension/src/extension.ts
@@ -82,7 +82,6 @@ export async function activate(context: ExtensionContext) {
       // we let the activation continue, as otherwise the diagnostics command would fail
     }
   }
-
   commands.executeCommand("setContext", "RNIDE.sidePanelIsClosed", false);
 
   async function showIDEPanel(fileName?: string, lineNumber?: number) {
@@ -190,23 +189,29 @@ export async function activate(context: ExtensionContext) {
   // When it does happen, we open the IDE panel and restart the app.
   context.subscriptions.push(
     debug.registerDebugAdapterDescriptorFactory(
-      "react-native-ide",
+      "react-native-ide", // we use previous type name here to support old launch configurations that were using "react-native-ide" type
+      new LaunchConfigDebugAdapterDescriptorFactory()
+    )
+  );
+  context.subscriptions.push(
+    debug.registerDebugAdapterDescriptorFactory(
+      "radon-ide",
       new LaunchConfigDebugAdapterDescriptorFactory()
     )
   );
 
   // Debug adapter used for debugging React Native apps
   context.subscriptions.push(
     debug.registerDebugConfigurationProvider(
-      "com.swmansion.react-native-ide",
+      "com.swmansion.react-native-debugger",
       new DebugConfigProvider(),
       DebugConfigurationProviderTriggerKind.Dynamic
     )
   );
 
   context.subscriptions.push(
     debug.registerDebugAdapterDescriptorFactory(
-      "com.swmansion.react-native-ide",
+      "com.swmansion.react-native-debugger",
       new DebugAdapterDescriptorFactory()
     )
   );

diff --git a/packages/vscode-extension/src/panels/LaunchConfigController.ts b/packages/vscode-extension/src/panels/LaunchConfigController.ts
@@ -25,7 +25,9 @@ export class LaunchConfigController implements Disposable, LaunchConfig {
 
       const configurations = launchConfiguration.get<Array<Record<string, any>>>("configurations")!;
 
-      const RNIDEConfiguration = configurations.find(({ type }) => type === "react-native-ide");
+      const RNIDEConfiguration = configurations.find(
+        ({ type }) => type === "react-native-ide" || type === "radon-ide" // for compatibility we want to support old configuration type name
+      );
 
       if (!RNIDEConfiguration) {
         return {};
@@ -66,7 +68,8 @@ export class LaunchConfigController implements Disposable, LaunchConfig {
     let RNIDEConfigurationExits = false;
 
     const newConfigurations = oldConfigurations?.map((configuration) => {
-      if (configuration.type !== "react-native-ide") {
+      if (configuration.type !== "react-native-ide" && configuration.type !== "radon-ide") {
+        // for compatibility we want to support old configuration type name
         return configuration;
       }
       RNIDEConfigurationExits = true;
@@ -75,7 +78,7 @@ export class LaunchConfigController implements Disposable, LaunchConfig {
 
     if (!RNIDEConfigurationExits) {
       newConfigurations?.push({
-        type: "react-native-ide",
+        type: "react-native-ide", // TODO: this should be renamed but will be visible to users
         request: "launch",
         name: "React Native IDE panel",
         ...newLaunchConfig,

diff --git a/packages/vscode-extension/src/panels/Tabpanel.ts b/packages/vscode-extension/src/panels/Tabpanel.ts
@@ -68,7 +68,7 @@ export class TabPanel implements Disposable {
       const emptyGroup = window.tabGroups.all.find((group) => group.tabs.length === 0);
 
       const panel = window.createWebviewPanel(
-        "react-native-ide-panel",
+        "radon-ide-panel",
         "React Native IDE",
         { viewColumn: emptyGroup?.viewColumn || ViewColumn.Beside },
         {

diff --git a/packages/vscode-extension/src/panels/webviewContentGenerator.ts b/packages/vscode-extension/src/panels/webviewContentGenerator.ts
@@ -44,7 +44,7 @@ export function generateWebviewContent(
         <base href="${baseUri}">
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="react-native-ide-version" content="${version}" />
+        <meta name="radon-ide-version" content="${version}" />
         <link rel="stylesheet" href="${codiconsCssUri}" />
         ${
           IS_DEV

diff --git a/packages/vscode-extension/src/providers/PreviewCodeLensProvider.ts b/packages/vscode-extension/src/providers/PreviewCodeLensProvider.ts
@@ -17,7 +17,8 @@ export class PreviewCodeLensProvider implements CodeLensProvider {
     // We detect whether a file is a storybook story based on filename.
     // If is ends with ".stories.js/ts/jsx/tsx", we treat it as a story file.
     const isStory = /\.stories\.(js|ts|jsx|tsx)$/.test(document.fileName);
-    if (!text.includes("react-native-ide") && !isStory) {
+    if (!text.includes("react-native-ide") && !text.includes("radon-ide") && !isStory) {
+      // we use previous NPM package name for compatibility
       return [];
     }
 

diff --git a/packages/vscode-extension/src/utilities/common.ts b/packages/vscode-extension/src/utilities/common.ts
@@ -58,6 +58,7 @@ export function getNativeABI() {
 }
 
 export function getAppCachesDir() {
+  // this one is tricky to rename as Android emulators keep absolute path in config files
   return join(os.homedir(), "Library", "Caches", "com.swmansion.react-native-ide");
 }
 

diff --git a/packages/vscode-extension/src/utilities/launchConfiguration.ts b/packages/vscode-extension/src/utilities/launchConfiguration.ts
@@ -3,8 +3,8 @@ import { LaunchConfigurationOptions } from "../common/LaunchConfig";
 
 export function getLaunchConfiguration(): LaunchConfigurationOptions {
   return (
-    workspace
-      .getConfiguration("launch")
-      ?.configurations?.find((config: any) => config.type === "react-native-ide") || {}
+    workspace.getConfiguration("launch")?.configurations?.find(
+      (config: any) => config.type === "react-native-ide" || config.type === "radon-ide" // we keep previous type name for compatibility with old configuration files
+    ) || {}
   );
 }
diff --git a/packages/vscode-extension/src/webview/views/PreviewView.tsx b/packages/vscode-extension/src/webview/views/PreviewView.tsx
@@ -45,7 +45,7 @@ function PreviewView() {
   useDiagnosticAlert(selectedDevice?.platform);
 
   const extensionVersion = document.querySelector<HTMLMetaElement>(
-    "meta[name='react-native-ide-version']"
+    "meta[name='radon-ide-version']"
   )?.content;
 
   useEffect(() => {

diff --git a/test-apps/expo-router/app/components/NiceButton.js b/test-apps/expo-router/app/components/NiceButton.js
@@ -1,5 +1,5 @@
 import { Button } from 'react-native';
-import { preview } from 'react-native-ide';
+import { preview } from 'radon-ide';
 
 export function NiceButton({ color, onPress }) {
   return <Button title="Write logs" color={color} onPress={onPress} />;

diff --git a/test-apps/expo-router/app/components/UglyButton.js b/test-apps/expo-router/app/components/UglyButton.js
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Button } from 'react-native';
-import { preview } from 'react-native-ide';
+import { preview } from 'radon-ide';
 
 export function UglyButton() {
   const [a, setA] = useState(0);

diff --git a/test-apps/expo-router/package-lock.json b/test-apps/expo-router/package-lock.json