Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.

mediamonks/MMMPreview

MMMPreview

UIKit previews in your Xcode canvas. Leverages the SwiftUI preview window, but displaying your UIViews / UIViewControllers.

Having a preview of your UIView while developing is a real time saver, especially when strictly using programmatic UI (like all the cool kids do).

(This is a part of MMMTemple suite of iOS libraries we use at MediaMonks.)

Installation

SPM:

.package(url: "https://github.com/mediamonks/MMMPreview", .upToNextMajor(from: "0.1.0"))

Podfile:

source 'https://github.com/mediamonks/MMMSpecs.git'
source 'https://github.com/CocoaPods/Specs.git'
...
pod 'MMMPreview'

Preview

This is a regular old UIViewController being previewed using MMMPreview:

Usage

The library itself has a minimum deployment target of iOS 11 to be compatible with the majority of projects, however, it requires at least an iOS 13 simulator. For < iOS 13 projects, use the @available(iOS 13, *) tag where referincing MMMPreview.

Simple example

The easiest setup would be to just add the preview provider struct at the bottom of your UIView(controller) file.

UIViewController

#if canImport(MMMPreview)

import MMMPreview

@available(iOS 13, *) // Tag if your project is < iOS 13.
internal struct MyViewController_Previews: MMMControllerPreview, PreviewProvider {
	
	public static func makeViewControllers() -> MMMControllerPreviewParsable {
		
		// Setup your ViewController instance, e.g. with a ViewModel.
		let model = MyMockViewModel()
		let controller = MyViewController(viewModel: model)
		
		// We can either return a single UIViewController instance or an array of 
		// controllers.
		return controller
	}
}

#endif

UIView

#if canImport(MMMPreview)

import MMMPreview

@available(iOS 13, *) // Tag if your project is < iOS 13.
internal struct MyView_Previews: MMMViewPreview, PreviewProvider {

	public static func makeViews() -> MMMViewPreviewParsable {

		// Setup your View instance, e.g. with a ViewModel.
		let model = MyMockViewModel()
		let view = MyView(viewModel: model)
		
		// We can return either a single UIView instance, or an array of UIViews.
		return view
	}
}

#endif

More detailed example

By default the preview will use the current selected simulator; however, it's usually nice to check your views for multiple screen sizes. You can provide the MMMControllerPreview / MMMViewPreview with different MMMPreviewContexts, this can be done project-wide or per preview.

Project

#if canImport(MMMPreview)

import MMMPreview

@available(iOS 13, *)
extension MMMControllerPreview {
	
	public static var context: MMMPreviewContextParsable {
		// We can either return an array of or a single MMMPreviewContext instance.
		[
			MMMPreviewContext(
				displayName: "iPhone SE", // Will be shown as preview title, not necesary.
				// The simulator name should exactly match.
				layout: .simulator(name: "iPhone SE (1st generation)")
			),
			MMMPreviewContext(
				displayName: "iPhone 11", // Will be shown as preview title.
				layout: .simulator(name: "iPhone 11"),
				scheme: .dark // Dark / light mode.
			)
		]
	}
}

@available(iOS 13, *)
extension MMMViewPreview {
	
	public static var context: MMMPreviewContextParsable {
		MMMPreviewContext(
			// A custom width / height for your preview.
			layout: .custom(width: 320, height: 300)
		)
	}
}

#endif

Preview

#if canImport(MMMPreview)

import MMMPreview

@available(iOS 13, *) // Tag if your project is < iOS 13.
internal struct MyView_Previews: MMMViewPreview, PreviewProvider {

	public static func makeViews() -> MMMViewPreviewParsable {
		
		// We can also return multiple views, e.g. for when testing multiple states at once.
		return [
			MyView(viewModel: MyMockViewModel(state: .one)),
			MyView(viewModel: MyMockViewModel(state: .two)),
			MyView(viewModel: MyMockViewModel(state: .three))
		]
	}
	
	// This overrides the project-wide contexts.
	public static var contexts: [MMMPreviewContext] {
		[
			MMMPreviewContext(
				layout: .custom(width: 80, height: 140)
			)
		]
	}
}

#endif