diff --git a/docs/latest/extensions/index.md b/docs/latest/extensions/index.md index cbd919699..7831cd54a 100644 --- a/docs/latest/extensions/index.md +++ b/docs/latest/extensions/index.md @@ -13,7 +13,9 @@ ## Overview We use extensions to help us isolate and package groups of related features. -Extensions provide functionality, ui components, and new behaviors. +Extensions provide functionality, ui components, and new behaviors. Ideally, +they're built in a way that allows them to extend entirely different +implementations of the `@ohif/viewer` project.
@@ -46,9 +48,8 @@ Practical examples of extensions include: ### Extension Skeleton -An extension is a plain JavaScript object has an `id` property, and one or more -"getModuleFunctions" and/or lifecycle hooks. You can read more about -[lifecycle hooks](#lifecycle-hooks) and [modules](#modules) further down. +An extension is a plain JavaScript object that has an `id` property, and one or +more [modules](#modules) and/or [lifecycle hooks](#lifecycle-hooks). ```js // prettier-ignore @@ -78,6 +79,12 @@ You can leverage one or both strategies. Which one(s) you choose depend on your application's requirements. Each [module](#modules) defined by the extension becomes available to the core application via the `ExtensionManager`. +#### Registering at Runtime + +The `@ohif/viewer` uses a [configuration file](#) at startup. The schema for +that file includes an `Extensions` key that supports an array of extensions to +register. + ```js // prettier-ignore const config = { @@ -91,19 +98,13 @@ const config = { } ``` -#### Registering at Runtime - -The `@ohif/viewer` uses a [configuration file](#) at startup. The schema for -that file includes an `Extensions` key that supports an array of extensions to -register. - #### Registering at Build Time The `@ohif/viewer` works best when built as a "Progressive Web Application" (PWA). If you know the extensions your application will need, you can specify them at "build time" to leverage advantages afforded to us by modern tooling: -- Code Splitting +- Code Splitting (dynamic imports) - Tree Shaking - Dependency deduplication @@ -141,6 +142,8 @@ differently. | [Toolbar](./modules/toolbar.md) | Adds buttons or custom components to the toolbar | Toolbar button, nested buttons, custom | | [Viewport](./modules/viewport.md) | Adds a component responsible for rendering a "DisplaySet" | ``, `` | +
Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.
+ ### Contexts The `@ohif/viewer` tracks "active contexts" that extensions can use to scope @@ -153,9 +156,37 @@ An extension module can use these to say "Only show this Toolbar Button if the active viewport is a Cornerstone viewport." This helps us use the appropriate UI and behaviors depending on the current contexts. +For example, if we have hotkey that "rotates the active viewport", each Viewport +module that supports this behavior can add a command with the same name, scoped +to the appropriate context. When the `command` is fired, the "active contexts" +are used to determine the appropriate implementation of the rotate behavior. + ## Consuming Extensions -... +We consume extensions, via the `ExtensionManager`, in our `@ohif/viewer` +project. + +```js +const extensionManager = new ExtensionManager({ + commandsManager, + servicesManager, +}); + +// prettier-ignore +extensionManager.registerExtensions([ /** **/ ]); +``` + +The `@ohif/viewer` project handles data fetching, basic routing, wires up UI +services, and is the home to the more bespoke application logic that doesn't +make as much sense to make reusable. + +Long-term, replacing the `@ohif/viewer` application and consuming extensions +(and the `ExtensionManager`) in your own project is the ideal path for +applications requiring a high degree of customization that can't be achieved +with current theming, configuration, extension, and services support. + +If you're not sure how to achieve your goals with the extensibility available +today, create a GitHub issue! ## Maintained Extensions