Skip to content

Commit

Permalink
Use RNIDE prefix instead of rnp for all global variables and custom c…
Browse files Browse the repository at this point in the history
…ommands (#40)

This PR renames global variables and commants we'd prefixed with "rnp"
to be prefixed with "RNIDE". This way they will clearly indicate what
projects they are associated with in case of some errors users may see.

We are also adding prefix for the navigation integration global method
`global.__RNIDE_register_navigation_plugin` as well as adding
`global.__RNIDE_enabled` variable to indicate when the app runs inside
of the IDE (to be used by external integrations)
  • Loading branch information
kmagiera authored Mar 27, 2024
1 parent c3d7ac7 commit 94e8c4e
Show file tree
Hide file tree
Showing 10 changed files with 49 additions and 46 deletions.
6 changes: 3 additions & 3 deletions packages/vscode-extension/lib/babel_transformer.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ disablePlugin("@babel/plugin-transform-react-jsx-development");
function transformWrapper({ filename, src, plugins, ...rest }) {
const { transform } = require(ORIGINAL_TRANSFORMER_PATH);
if (filename.endsWith("node_modules/react-native/Libraries/Core/InitializeCore.js")) {
src = `${src};require("__rnp_lib__/runtime.js");`;
src = `${src};require("__RNIDE_lib__/runtime.js");`;
} else if (filename.endsWith("node_modules/expo-router/entry.js")) {
// expo-router v2 integration
src = `${src};require("__rnp_lib__/expo_router_plugin.js");`;
src = `${src};require("__RNIDE_lib__/expo_router_plugin.js");`;
} else if (filename.endsWith("node_modules/react-native-ide/index.js")) {
src = `${src};preview = require("__rnp_lib__/preview.js").preview;`;
src = `${src};preview = require("__RNIDE_lib__/preview.js").preview;`;
}

const newPlugins = [
Expand Down
4 changes: 2 additions & 2 deletions packages/vscode-extension/lib/expo_router_plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,5 @@ function useRouterPluginMainHook({ onNavigationChange }) {
};
}

global.__register_navigation_plugin &&
global.__register_navigation_plugin("expo-router", { mainHook: useRouterPluginMainHook });
global.__RNIDE_register_navigation_plugin &&
global.__RNIDE_register_navigation_plugin("expo-router", { mainHook: useRouterPluginMainHook });
4 changes: 2 additions & 2 deletions packages/vscode-extension/lib/metro_helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ function adaptMetroConfig(config) {
// Currently used for runtime and wrapper functionalities
config.resolver.extraNodeModules = {
...config.resolver.extraNodeModules,
__rnp_lib__: extensionLib,
__RNIDE_lib__: extensionLib,
};

// This code is needed to properly resolve modules
Expand Down Expand Up @@ -92,7 +92,7 @@ function metroServerReadyHandler(originalOnReadyHandler) {
process.env.EXPO_PACKAGER_PROXY_URL =
process.env.EXPO_MANIFEST_PROXY_URL = `http://localhost:${port}`;
originalOnReadyHandler && originalOnReadyHandler(server, ...args);
process.stdout.write(JSON.stringify({ type: "rnp_initialize_done", port }));
process.stdout.write(JSON.stringify({ type: "RNIDE_initialize_done", port }));
process.stdout.write("\n");
};
}
Expand Down
4 changes: 2 additions & 2 deletions packages/vscode-extension/lib/preview.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
require("expo-router/entry");
const { AppRegistry, View } = require("react-native");

global.__rnp_previews ||= new Map();
global.__RNIDE_previews ||= new Map();

function stringifyProps(obj) {
const keyValuePairs = [];
Expand All @@ -26,7 +26,7 @@ export function preview(component) {
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>{component}</View>
);
}
global.__rnp_previews.set(name, {
global.__RNIDE_previews.set(name, {
appKey: name,
name: component.type.name,
props: stringifyProps(component.props),
Expand Down
13 changes: 8 additions & 5 deletions packages/vscode-extension/lib/runtime.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
const AppRegistry = require("react-native/Libraries/ReactNative/AppRegistry");
const parseErrorStack = require("react-native/Libraries/Core/Devtools/parseErrorStack");

function __rnpBreakOnError(error, isFatal) {
function __RNIDE_breakOnError(error, isFatal) {
// the below variables are accessed from the debugger and hence are necessary despite being unused in the code
const message = error.message;
const stack = parseErrorStack(error.stack);
debugger;
}

global.ErrorUtils.setGlobalHandler(__rnpBreakOnError);
global.ErrorUtils.setGlobalHandler(__RNIDE_breakOnError);

global.__fbDisableExceptionsManager = true;

Expand All @@ -30,10 +30,13 @@ console.warn = wrapConsole(console.warn);
console.error = wrapConsole(console.error);
console.info = wrapConsole(console.info);

global.__register_navigation_plugin = function (name, plugin) {
require("__rnp_lib__/wrapper.js").registerNavigationPlugin(name, plugin);
// This variable can be used by external integrations to detect if they are running in the IDE
global.__RNIDE_enabled = true;

global.__RNIDE_register_navigation_plugin = function (name, plugin) {
require("__RNIDE_lib__/wrapper.js").registerNavigationPlugin(name, plugin);
};

AppRegistry.setWrapperComponentProvider((appParameters) => {
return require("__rnp_lib__/wrapper.js").PreviewAppWrapper;
return require("__RNIDE_lib__/wrapper.js").PreviewAppWrapper;
});
24 changes: 12 additions & 12 deletions packages/vscode-extension/lib/wrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function PreviewAppWrapper({ children, ...rest }) {
const handleNavigationChange = useCallback((navigationDescriptor) => {
navigationHistory.set(navigationDescriptor.id, navigationDescriptor);
agent &&
agent._bridge.send("rnp_navigationChanged", {
agent._bridge.send("RNIDE_navigationChanged", {
displayName: navigationDescriptor.name,
id: navigationDescriptor.id,
});
Expand Down Expand Up @@ -69,7 +69,7 @@ export function PreviewAppWrapper({ children, ...rest }) {
});
}

agent._bridge.addListener("rnp_openPreview", (payload) => {
agent._bridge.addListener("RNIDE_openPreview", (payload) => {
openPreview(payload.previewId);
});

Expand All @@ -83,13 +83,13 @@ export function PreviewAppWrapper({ children, ...rest }) {
}
}

agent._bridge.addListener("rnp_openUrl", (payload) => {
agent._bridge.addListener("RNIDE_openUrl", (payload) => {
closePreview();
const url = payload.url;
Linking.openURL(url);
});

agent._bridge.addListener("rnp_openNavigation", (payload) => {
agent._bridge.addListener("RNIDE_openNavigation", (payload) => {
if (isPreviewUrl(payload.id)) {
openPreview(payload.id);
return;
Expand All @@ -99,7 +99,7 @@ export function PreviewAppWrapper({ children, ...rest }) {
navigationDescriptor && requestNavigationChange(navigationDescriptor);
});

agent._bridge.addListener("rnp_inspect", (payload) => {
agent._bridge.addListener("RNIDE_inspect", (payload) => {
const { width, height } = Dimensions.get("screen");
getInspectorDataForViewAtPoint(
mainContainerRef.current,
Expand All @@ -116,7 +116,7 @@ export function PreviewAppWrapper({ children, ...rest }) {
const hierarchy = viewData.hierarchy.map((item) => {
return { name: item.name, source: item.getInspectorData().source };
});
agent._bridge.send("rnp_inspectData", {
agent._bridge.send("RNIDE_inspectData", {
id: payload.id,
frame: scaledFrame,
hierarchy,
Expand All @@ -125,18 +125,18 @@ export function PreviewAppWrapper({ children, ...rest }) {
);
});

agent._bridge.addListener("rnp_editorFileChanged", (payload) => {
agent._bridge.addListener("RNIDE_editorFileChanged", (payload) => {
const newRoute = handleActiveFileChange(payload.filename, payload.followEnabled);
newRoute && push(newRoute);
});

LogBox.uninstall();
const LoadingView = require("react-native/Libraries/Utilities/LoadingView");
LoadingView.showMessage = (message) => {
agent._bridge.send("rnp_fastRefreshStarted");
agent._bridge.send("RNIDE_fastRefreshStarted");
};
LoadingView.hide = () => {
agent._bridge.send("rnp_fastRefreshComplete");
agent._bridge.send("RNIDE_fastRefreshComplete");
};

// console.reportErrorsAsExceptions = false;
Expand All @@ -162,15 +162,15 @@ export function PreviewAppWrapper({ children, ...rest }) {
const sceneName = SceneTracker.getActiveScene().name;
if (!appReadyEventSent.current) {
appReadyEventSent.current = true;
agent._bridge.send("rnp_appReady", {
agent._bridge.send("RNIDE_appReady", {
appKey: sceneName,
navigationPlugins: navigationPlugins.map((plugin) => plugin.name),
});
}
const isRunningPreview = isPreviewUrl(sceneName);
if (isRunningPreview) {
const preview = (global.__rnp_previews || new Map()).get(sceneName);
agent._bridge.send("rnp_navigationChanged", {
const preview = (global.__RNIDE_previews || new Map()).get(sceneName);
agent._bridge.send("RNIDE_navigationChanged", {
displayName: `preview:${preview.name}`, // TODO: make names unique if there are multiple previews of the same component
id: sceneName,
});
Expand Down
10 changes: 5 additions & 5 deletions packages/vscode-extension/src/debugging/DebugAdapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export class DebugAdapter extends DebugSession {
outputEvent = new OutputEvent(output + "\n", typeToCategory(message.params.type));
}
this.sendEvent(outputEvent);
this.sendEvent(new Event("rnp_consoleLog", { category: outputEvent.body.category }));
this.sendEvent(new Event("RNIDE_consoleLog", { category: outputEvent.body.category }));
}

private findOriginalPosition(
Expand Down Expand Up @@ -261,7 +261,7 @@ export class DebugAdapter extends DebugSession {
this.pausedDAPtoCDPObjectIdMap = new Map();
if (
message.params.reason === "other" &&
message.params.callFrames[0].functionName === "__rnpBreakOnError"
message.params.callFrames[0].functionName === "__RNIDE_breakOnError"
) {
// this is a workaround for an issue with hermes which does not provide a full stack trace
// when it pauses due to the uncaught exception. Instead, we trigger debugger pause from exception
Expand Down Expand Up @@ -311,7 +311,7 @@ export class DebugAdapter extends DebugSession {
);
this.pausedStackFrames = stackFrames;
this.sendEvent(new StoppedEvent("exception", this.threads[0].id, errorMessage));
this.sendEvent(new Event("rnp_paused", { reason: "exception", isFatal: isFatal }));
this.sendEvent(new Event("RNIDE_paused", { reason: "exception", isFatal: isFatal }));
} else {
this.pausedStackFrames = message.params.callFrames.map((cdpFrame: any, index: number) => {
const cdpLocation = cdpFrame.location;
Expand All @@ -333,7 +333,7 @@ export class DebugAdapter extends DebugSession {
(cdpFrame: any) => cdpFrame.scopeChain
);
this.sendEvent(new StoppedEvent("breakpoint", this.threads[0].id, "Yollo"));
this.sendEvent(new Event("rnp_paused"));
this.sendEvent(new Event("RNIDE_paused"));
}
}

Expand Down Expand Up @@ -563,7 +563,7 @@ export class DebugAdapter extends DebugSession {
): Promise<void> {
await this.sendCDPMessage("Debugger.resume", { terminateOnResume: false });
this.sendResponse(response);
this.sendEvent(new Event("rnp_continued"));
this.sendEvent(new Event("RNIDE_continued"));
}

protected async nextRequest(
Expand Down
12 changes: 6 additions & 6 deletions packages/vscode-extension/src/project/deviceSession.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export class DeviceSession implements Disposable {
async start(deviceSettings: DeviceSettings, progressCallback: ProgressCallback) {
const waitForAppReady = new Promise<void>((res) => {
const listener = (event: string, payload: any) => {
if (event === "rnp_appReady") {
if (event === "RNIDE_appReady") {
this.devtools?.removeListener(listener);
res();
}
Expand Down Expand Up @@ -112,25 +112,25 @@ export class DeviceSession implements Disposable {
public inspectElementAt(xRatio: number, yRatio: number, callback: (inspecData: any) => void) {
const id = this.inspectCallID++;
const listener = (event: string, payload: any) => {
if (event === "rnp_inspectData" && payload.id === id) {
if (event === "RNIDE_inspectData" && payload.id === id) {
this.devtools?.removeListener(listener);
callback(payload);
}
};
this.devtools?.addListener(listener);
this.devtools.send("rnp_inspect", { x: xRatio, y: yRatio, id });
this.devtools.send("RNIDE_inspect", { x: xRatio, y: yRatio, id });
}

public openNavigation(id: string) {
this.devtools.send("rnp_openNavigation", { id });
this.devtools.send("RNIDE_openNavigation", { id });
}

public startPreview(previewId: string) {
this.devtools.send("rnp_openPreview", { previewId });
this.devtools.send("RNIDE_openPreview", { previewId });
}

public onActiveFileChange(filename: string, followEnabled: boolean) {
this.devtools.send("rnp_editorFileChanged", { filename, followEnabled });
this.devtools.send("RNIDE_editorFileChanged", { filename, followEnabled });
}

public async changeDeviceSettings(settings: DeviceSettings) {
Expand Down
4 changes: 2 additions & 2 deletions packages/vscode-extension/src/project/metro.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ type MetroEvent =
totalFileCount: number;
}
| {
type: "rnp_initialize_done";
type: "RNIDE_initialize_done";
port: number;
}
| {
Expand Down Expand Up @@ -177,7 +177,7 @@ export class Metro implements Disposable {
}

switch (event.type) {
case "rnp_initialize_done":
case "RNIDE_initialize_done":
this._port = event.port;
Logger.info(`Metro started on port ${this._port}`);
resolve();
Expand Down
14 changes: 7 additions & 7 deletions packages/vscode-extension/src/project/project.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,23 +163,23 @@ export class Project implements Disposable, MetroDelegate, ProjectInterface {
}
this.devtools.addListener((event, payload) => {
switch (event) {
case "rnp_appReady":
case "RNIDE_appReady":
Logger.debug("App ready");
if (this.reloadingMetro) {
this.reloadingMetro = false;
this.updateProjectState({ status: "running" });
}
break;
case "rnp_navigationChanged":
case "RNIDE_navigationChanged":
this.eventEmitter.emit("navigationChanged", {
displayName: payload.displayName,
id: payload.id,
});
break;
case "rnp_fastRefreshStarted":
case "RNIDE_fastRefreshStarted":
this.updateProjectState({ status: "refreshing" });
break;
case "rnp_fastRefreshComplete":
case "RNIDE_fastRefreshComplete":
if (this.projectState.status === "starting") return;
if (this.projectState.status === "incrementalBundleError") return;
if (this.projectState.status === "runtimeError") return;
Expand All @@ -193,10 +193,10 @@ export class Project implements Disposable, MetroDelegate, ProjectInterface {
this.debugSessionListener?.dispose();
this.debugSessionListener = debug.onDidReceiveDebugSessionCustomEvent((event) => {
switch (event.event) {
case "rnp_consoleLog":
case "RNIDE_consoleLog":
this.eventEmitter.emit("log", event.body);
break;
case "rnp_paused":
case "RNIDE_paused":
if (event.body?.reason === "exception") {
// if we know that incrmental bundle error happened, we don't want to change the status
if (this.projectState.status === "incrementalBundleError") return;
Expand All @@ -206,7 +206,7 @@ export class Project implements Disposable, MetroDelegate, ProjectInterface {
}
commands.executeCommand("workbench.view.debug");
break;
case "rnp_continued":
case "RNIDE_continued":
this.updateProjectState({ status: "running" });
break;
}
Expand Down

0 comments on commit 94e8c4e

Please sign in to comment.