iOS Devtools is fully functional with Flipper by KVSRoyal · Pull Request #5 · player-ui/devtools

KVSRoyal · 2025-11-24T23:15:18Z

What Changed

Get the iOS Devtools to open and connect to flipper, delivering expected logs and evaluating expressions.

Also:

Add an ios demo so there's a demo that lives in this same repo.
Remove the folders with code we're not actually using, since it's messing up the tests.

Why

We want mobile Devtools to make life easier for users of player.

Definition of Done

Unit tests
Mock features
Documentation -- could use more docs still on usage

KVSRoyal · 2025-12-10T20:55:10Z

devtools/plugin/core/src/reducer.ts

        draft.messages.push(message);
      });
    case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
+      console.log("[REDUCER] PLAYER_DEVTOOLS_PLUGIN_INTERACTION received:", transaction);


Note to self: remove in next commit

KVSRoyal · 2025-12-10T20:55:34Z

devtools/plugins/basic/core/src/plugin.ts

-                    player.logger.error(this.name, "Error setting the following log: ", this.logs);
+                    // Silently fail


Note to self: undo in next commit

KVSRoyal · 2025-12-10T20:56:13Z

devtools/plugins/basic/core/src/plugin.ts

-                this.logger?.deref()?.error(this.name, "Error parsing new flow", e);
+                console.error("Error parsing new flow", e);


Note to self: change back

sugarmanz · 2025-12-15T18:06:57Z

devtools/plugin/ios/Sources/DevtoolsFlipperPlugin.swift

+    public func removeListener(_ listener: @escaping MessageListener) {
+        print("DEBUG [iOS DevtoolsFlipperPlugin]: removeListener() called")
+        /* TODO: we can't compare listeners directly on ios.
+         Implement workaround. E.g. register listeners by ID? */
+    }


What should we do here?

I would like to change the add/remove listener to work with subscribe/unsubscribe pattern instead, where adding the listener returns the way to remove it, like we discussed offline. E.g.

let unsubscribe = addListener(listener)

I think that would work across all the platforms, though I'm hesitant to touch the other platform code for that in this PR.

Is removing the listener need for the MVP? If so, I can change things in this PR. If not, I'd like to break out the change into a separate ticket where I can focus on that one change across all platforms.

Is removing the listener need for the MVP?

Kinda depends on what happens — if it doesn't break anything, then it's probably not needed. It doesn't look like we have a good way to invoke this anyways, as long as we aren't invoking stale listeners and crashing the app.

I think that would work across all the platforms, though I'm hesitant to touch the other platform code for that in this PR.

That said, this is just the Flipper plugin connection for iOS — as there isn't platform agnostic code here, you should be able to change the API to match what iOS needs w/o having to worry about other platforms. Android would be applicable from a consistency standpoint, but would still be in parity either way.

sugarmanz · 2025-12-15T18:14:09Z

devtools/plugins/basic/swiftui/Sources/BasicDevtoolsPlugin.swift

+            let options = MessengerOptions(
+                id: playerID,
+                jsContext: jsContext,
+                context: .player,
+                logger: PlayerLogger(logger: player.logger),
+                sendMessage: flipperPlugin.sendMessage(_:),
+                addListener: flipperPlugin.addListener(_:),
+                removeListener: flipperPlugin.removeListener(_:),
+                messageCallback: try store.dispatch(event:)
+            )
+            let messenger = try Messenger(options: options)
+            self.messenger = messenger
+            _ = registerMessenger(messenger: messenger)


This should come from the base implementation to remove the overhead from folks creating their own devtools plugins.

Done. Was having a hard time doing this initially but figured it out. 👍🏽

sugarmanz · 2025-12-15T18:17:19Z

devtools/plugins/basic/swiftui/Sources/BasicDevtoolsPlugin.swift

+        //        player.hooks?.state.tap { state in
+        //            // TODO: what is happening here on android?
+        //            let temp: BaseFlowState = .init(status: .completed)
+        //        }


Here we're hooking into teardown logic to deregister Player instance from the FlipperClient. We should also be sending a disconnect event to the actual client to let them know the Player instance is gone.

I'll see if I can figure out how to do something similar on iOS. 🤔

It's my understanding so far that ReleasedState on android means "the player is going away and being garbage collected" (docs that I'm referencing). iOS doesn't have a counterpart for that, afaict. We only have notStarted, inProgress, completed, and error (link). Are you aware of any ways ios has matched this android pattern in the past? I'm currently exploring deinit.

Yikes, apparently deinits in Swift aren't actually called when the app terminates. That's fun for me 😆 .

For the React implementation, they hook into component unmount:

devtools/devtools/plugin/react/src/plugin.tsx

Lines 51 to 54 in 52cd2b0

return () => {

unsubscribe();

messenger.destroy();

}

On Android, we're effectively hooking into viewmodel teardown via released state. I'm not sure you'd have a hook exposed unless one existed for iOS, but there should be a way to hook into unmount I'd expect.

sugarmanz · 2025-12-15T18:20:10Z

devtools/types/ios/Sources/MessengerOptions.swift

+        print("[MessengerOptions] Converting to JSValue")
+        print("[MessengerOptions] context:", context)
+        print("[MessengerOptions] context.rawValue:", context.rawValue)


Should these be removed?

sugarmanz · 2025-12-15T18:22:17Z

devtools/utils/ios/Sources/JSExtensions.swift

+/// Errors that can occur when trying to load a JS class that will be referenced by a Swift wrapper
+enum JSBaseError: Error {
+    case noSuchFile
+    case failedToParseScript
+    case failedToMakeContext
+    case noSuchJSModule
+    case noSuchJSClass
+    case couldNotInstantiateClass
+}


Is this enum something we should be supplying from core Player (or JS loading) lib to encapsulate possible JS errors?

I would like to supply it from a JS loading library that lives in the player-ui repo. I think these would also be helpful errors for us to propagate when loading JS files for JSBasePlugins, since errors are pretty opaque when something goes wrong.

I put it here for now to limit the number of repos I'd have to touch for the MVP of devtools. I'll make an issue? to move these and drop the link here.

player-ui/player#778

sugarmanz · 2025-12-15T18:23:55Z

.bazelrc

+# common --ios_simulator_device="iPhone 16 Pro"
+# common --ios_simulator_version="18.5"


Do we need these?

They shouldn't be commented out, no. If you mean the device/version flags, then yes, we do need them. They allow us to ensure a consistent test environment in CI/CD.

If they're just for CI, should we put them in the CI-specific Bazel config?

FWIW — I did need to comment them out to run the demo app locally.

Ah, yeah, they could affect your local if you don't run through Xcode and instead do bazel run. It will try to find the matching sim locally and if you don't have one, it'll be unhappy. Although I prefer that to having it pick the first simulator available on your machine, which might be an iPhone 4 running iOS 9 😆 . (I believe that's what Bazel does without something specified.)

I'll move it to the CI-specific place for now though. I think we can deal with the "my infinitely old simulator is not working" if it crops up.

KVSRoyal changed the base branch from main to mobile-devtools November 24, 2025 23:15

KVSRoyal force-pushed the ios-devtools branch from 2e0e62b to 891d990 Compare November 26, 2025 06:10

KVSRoyal added 16 commits December 3, 2025 23:34

Clean up

5895ffe

Use actor/Task for thread safety

b3186a7

Move shared layer out to explicit actor

11eb2d3

Refactor, fix tests

517ceb0

Clean up main code

8b82a3c

Clean up tests

2e40420

Drop sync interval wrapper

9aebfef

sendMessage calls back to the JS promise

2e483da

Defer signal, add throws test

58a3bdb

Add private to test package.json

0f10899

Use [String: Any] for messages instead of generics

07c5e47

Implement demo

a76fd1b

Update tests

cc368ea

Use locks for async interval manager

ddc40f5

Add ios/swiftui basic devtools plugin

597cda3

Basic plugin runs, extract polyfill plugin

558eaae

KVSRoyal force-pushed the ios-devtools branch from cf8f75b to 5178012 Compare December 4, 2025 06:35

KVSRoyal added 2 commits December 4, 2025 20:04

Add WorkaroundLogger so I can debug

e9f16c7

Add types/react for plugins to actually compile

c9cccb3

KVSRoyal force-pushed the ios-devtools branch from 5178012 to c9cccb3 Compare December 5, 2025 03:04

KVSRoyal and others added 8 commits December 5, 2025 22:52

Reintroduce mistakenly deleted Options, more logs

e789532

The store is no longer undefined

df6be99

More debug logs

3907bca

More debugging, apply polyfill early in JS plugin

bc1cf86

working registerMessenger

13d2b3d

Switch action example to action counter

348ec29

invokeMethodSafely works on instances now

0c87eb8

Expressions are now evaluated

bb0af59

KVSRoyal changed the title ~~Ios devtools~~ iOS Devtools is fully functional with Flipper Dec 10, 2025

Address TODOs, clean up

0839e34

KVSRoyal commented Dec 10, 2025

View reviewed changes

KVSRoyal requested a review from sugarmanz December 11, 2025 04:06

sugarmanz reviewed Dec 15, 2025

View reviewed changes

KVSRoyal added 3 commits December 16, 2025 11:57

Remove unused folders for now

52cd2b0

Separate into ios/swiftui, add more error logs

1363994

Address lint errors

ca87efe

KVSRoyal force-pushed the ios-devtools branch from 1e4db67 to ca87efe Compare December 17, 2025 18:09

KVSRoyal added 2 commits January 5, 2026 21:51

Add "new plugin" button to demo

1f9682f

Replace generation with constant plugin-flow.json

f5d581d

KVSRoyal force-pushed the ios-devtools branch from 81e62ef to f5d581d Compare January 6, 2026 04:52

KVSRoyal added 2 commits January 8, 2026 10:49

Android sendMessage returns a Promise

101dea8

Use non-slim docker so we get java

4fc2ec4

sugarmanz approved these changes Jan 8, 2026

View reviewed changes

KVSRoyal marked this pull request as ready for review January 9, 2026 03:54

KVSRoyal merged commit 857df78 into mobile-devtools Jan 9, 2026
7 checks passed

KVSRoyal deleted the ios-devtools branch January 9, 2026 03:54

		player.logger.error(this.name, "Error setting the following log: ", this.logs);
		// Silently fail

		this.logger?.deref()?.error(this.name, "Error parsing new flow", e);
		console.error("Error parsing new flow", e);

		# common --ios_simulator_device="iPhone 16 Pro"
		# common --ios_simulator_version="18.5"

Conversation

KVSRoyal commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Changed

Why

Definition of Done

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KVSRoyal Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KVSRoyal Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KVSRoyal commented Nov 24, 2025 •

edited

Loading

KVSRoyal Dec 16, 2025 •

edited

Loading

KVSRoyal Dec 16, 2025 •

edited

Loading