Moving SwiftUI Views and Models Into Separate Swift Packages | by Rob Sturgeon | Apr, 2022

Write modular code

Picture by Mediamodifier from Pixabay

Swift packages are an effective way to separate our code into modules that we are able to use throughout a number of tasks.

It is a easy information to utilizing them for SwiftUI, however any Swift code will be distributed this fashion.

Open Xcode and click on File > New > Package deal… or alternatively press Command, Management, Shift, and N. It’s helpful to create a brand new folder for this undertaking, which you are able to do with the New folder button while you’ve determined the place you wish to put your recordsdata. I known as my new folder PackagesExample, however the title doesn’t matter. Name your package deal MyViews and ensure it’s not added to any tasks or workspaces.

The Sources folder in your package deal could have separate folders for every goal.

Create two new folders with Swift recordsdata inside like this:

  • MyViews/Sources/MyViews/MyViews.swift
  • MyViews/Sources/HelloButton/HelloButton.swift

Open up HelloButton.swift and add this:

It is a easy button that takes an motion in its initialiser, simply as an everyday SwiftUI Button does. Observe that every little thing is asserted public, as a result of we would like to have the ability to reference these items outdoors of the package deal module.

Now we’re going to jot down MyViews, and it’s going to look very related:

You is likely to be questioning why I’ve added precisely the identical code in two locations.

The reason being to display that you simply actually have two choices with Swift packages.

It makes it attainable to import HelloButton solely, or to import MyViews and seek advice from it by MyViews.HelloButton.

Often, I’d resolve which method we wish to construction the package deal. Both I need one essential goal that has sorts like HelloButton inside it, or I wish to make a separate goal for every little thing. There are advantages to each approaches.

With one massive module I can import many issues directly, however possibly I don’t wish to have entry to every little thing with one import assertion.

We’ll have to specify all the targets and dependencies within the Package deal.swift file, which ought to have been created while you created your package deal.

Now we’re going to create a package deal for our view fashions, and we’re going to do the identical factor.

It will likely be attainable to import ContentViewModel solely or import MyModels and seek advice from it by MyModels.ContentViewModel.

Open Xcode and click on File > New > Package deal… or alternatively press Command, Management, Shift and N. Name your package deal MyModels and ensure it’s not added to any tasks or workspaces.

The Sources folder in your package deal could have separate folders for every goal.

Create two new folders with Swift recordsdata inside like this:

  • MyModels/Sources/MyModels/MyModels.swift
  • MyModels/Sources/ContentViewModel/ContentViewModel.swift

Open up ContentViewModel.swift and add this:

That is fairly easy code, with a operate that iterates a depend of what number of instances the HelloButton has been pressed.

MyModels.swift unsurprisingly appears to be like like this:

Once more we’ll have to specify all the targets and dependencies within the Package deal.swift file, which ought to have been created while you created your package deal.

So how are we going to make use of these packages? Create a brand new app undertaking in the identical root folder as the 2 packages known as no matter you need. I known as mine PackagesExample, the identical as my root folder, however the title doesn’t matter. Subsequent you’ll wish to add the packages you created by going to File > Add Packages… and clicking the Add native… button on the backside of the window.

Including the MyViews and MyModels packages received’t absolutely add them to your undertaking although.

I discovered that I used to be unable to import the package deal modules till I added them to the goal’s Frameworks, Libraries, and Embedded Content material on the overall tab:

Picture by Rob Sturgeon

Now we are able to lastly convey the UI collectively in ContentView.swift:

It is a easy VStack with a Textual content beneath every HelloButton that shows the variety of instances it has been tapped or clicked.

To make issues attention-grabbing I’ve created the buttons two methods, by passing a direct reference to the operate or by passing a trailing closure by which I name the operate.

Both method works for both button, as their code is equivalent.

I’ve included each ContentViewModel and MyModel.ContentViewModel, however in observe you’d in all probability have determined whether or not to have common or extra particular modules in your packages.

When you don’t wish to use distant repositories in your packages, you’ll be able to cease right here!

The simplest approach to make your native packages distant is to create GitHub repositories for them.

When you’re somebody who makes use of the GitHub CLI you in all probability already know the way to do that, however I’m going to make use of the GitHub Desktop app as a result of I vastly want GUIs.

When GitHub Desktop is put in and open, press command + O and browse to both of the MyViews or MyModels packages. You’ll in all probability get the message “this listing doesn’t seem like a Git repository. Would you prefer to create a repository right here as a substitute?”

Click on the hyperlink the place it says create a repository and alter the git ignore to Swift if you’d like, leaving all the opposite fields with their default values.

When you don’t get that message, go forward and add the repository.

As a part of creating the repository, GitHub Desktop has created an preliminary commit with the present state of the code. When you make any modifications after this level, you’ll have to commit them right here. When you’re pleased with the present state of the package deal, click on the Publish repository button on the suitable.

Now there ought to be a View on GitHub button close to the place the Publish repository button was. Click on this and also you’ll be taken to the GitHub web site.

Copy the URL and return to PackagesExample, or no matter you known as your app undertaking.

Proper-click or control-click on the package deal you simply uploaded within the File inspector and select Delete, however choose Take away Reference and never Transfer To Trash!

Now that the native model of your Swift package deal has been eliminated, go to File > Add Packages… and paste the URL you copied out of your package deal’s GitHub within the search field within the prime proper. If all goes properly you need to be capable to add the package deal, and the undertaking ought to nonetheless construct as a result of it has the suitable modules.

Repeat every little thing we’ve performed thus far with the opposite package deal so that you’ve two distant packages and no native packages in your undertaking.

It’s possible you’ll discover that recordsdata within the Package deal Dependencies checklist can’t be edited. That’s as a result of their variations at the moment are managed by the GitHub repositories, and this gives one of many essential benefits of packages.

With out having the ability to edit these packages, we are able to make sure that we don’t modify code that doesn’t belong to a specific undertaking.

However since these are our packages, we would like to have the ability to edit them often. Xcode can nonetheless open a package deal, however that received’t give us the total story as a result of our views and fashions are separate.

By far the best factor to do if I wish to edit a distant package deal is to go to File > Add Packages…, click on Add Native… and add them as I did once I initially made them.

In line with Apple, native packages at all times override distant packages. Which means the model of a module that exists domestically will at all times be used, no matter modifications to the distant repository.

Which means the distant repository won’t change to match what exists domestically both, so you’ll nonetheless have to commit and push your modifications with GitHub Desktop (or nevertheless you usually use supply management).

Choose Take away Reference in your native packages once more when you’re now not making modifications to them.

It will guarantee that you’re again to utilizing the model that exists remotely, permitting you to verify that what you dedicated was pushed efficiently.

More Posts