Moving forward with Lona

I continue exploring and working on Lona as well as learning Swift and macOS development along the way. Let me walk you through the bug I was fixing earlier this week.

Bug 🐛

First of all, let me remind you how UI looks like in Lona:

As you can see on the screenshot above, we have File Navigator on the left, Component Editor in the middle (please note that “Add” menu on top; it’s part of the issue), and Property Inspector on the right.

The app had the following issue:
When a user added, deleted or moved component files to a different location, the “Add” menu, which includes some UI elements and list of components in the current workspace that can be added to the selected component, wouldn’t update the list of components.

“Add” menu in the Component Editor

In order to update the list of components, the user had to restart the app, which, obviously, was quite annoying.

Link to the issue description:

[Lona Studio] Update the "add" menu when new components are created · Issue #338 · airbnb/Lona

Fix 🔧

There is a file called LonaPlugins, which contains an enumeration LonaPluginActivationEvent that consists of some event types:

enum LonaPluginActivationEvent: String, Decodable {
    case onSaveComponent = "onSave:component"
    case onSaveColors = "onSave:colors"
    case onSaveTextStyles = "onSave:textStyles"
    case onReloadWorkspace = "onReload:workspace"
    case onChangeTheme = "onChange:theme"
}

I added a new case to this enum:

case onChangeFileSystemComponents = "onChange:fileSystem:components"

As you can guess, it will be triggered once a component was created, deleted or moved.

Next, I triggered this event type on each possible case (creation, deletion, or movement of the file) in the main View Controller WorkspaceViewController:

fileNavigator.onCreateFile = { path, options in
    LonaPlugins.current.trigger(eventType: .onChangeFileSystemComponents)       
}
fileNavigator.onDeleteFile = { path, options in
    LonaPlugins.current.trigger(eventType: .onChangeFileSystemComponents)
}
fileNavigator.performMoveFile = { prev, next in
     LonaPlugins.current.trigger(eventType: .onChangeFileSystemComponents)
}

In a nutshell, WorkspaceViewController has a variable fileNavigator that is an object of class FileNavigator, which handles all workspace’s files and has some closures that are executed on the events I’m interested in (onCreateFile, onDeleteFile, performMoveFile).

Finally, I had to subscribe to the onChangeFileSystemComponents event and add some behaviour that’s going to be performed when it’s triggered. I had to do it inside the component LayerListHeader, which is part of our “Add” menu.

// subscriptions array of closures
private var subscriptions: [() -> Void] = []
init() {
    super.init(frame: .zero)
    ...
    // subscribe to our event and update menu items when triggered
    subscriptions.append(LonaPlugins.current.register(eventType: .onChangeFileSystemComponents) { [unowned self] in
         self.updateMenuItems()
    })
}
private func updateMenuItems() {
    button.menu(forSegment: 0)?.items = ComponentMenu.menuItems()
}
deinit {
    subscriptions.forEach({ sub in sub() })
}

In the first version of my Pull Request, my subscription closure looked like this:

subscriptions.append(LonaPlugins.current.register(eventType: .onChangeFileSystemComponents) {
         self.updateMenuItems()
    })

(I didn’t have [unowned self] closure parameter), and a reviewer asked me to add it to ensure that it will be deallocated later. I’m still relatively new to Swift, and I’ve never seen and, of course, used unowned self, so it was a great opportunity to learn it. Here is one important thing about unowned I learned while reading docs, which applies to my use case above:

Define a capture in a closure as an unowned reference when the closure and the instance it captures will always refer to each other, and will always be deallocated at the same time.

Conversely, define a capture as a weak reference when the captured reference may become nil at some point in the future. (Swift documentation)

Results

Here are some GIFs that shows the final result of my patch 🤠

When the user adds (1), deletes (2), or moves (3) component file, the list of components within “Add” menu updates. (Click the GIF to enlarge it)

Link to my PR:

Fixes #338: Update "Add" menu on component change in fileNavigator by klymenkoo · Pull Request #348…

Enjoyed this post? Feel free to give this post a few claps so others can enjoy it 👏👏👏