TECHNICAL_OVERVIEW.md

Technical Overview

Messages

Messages for users are shown via MessageBuilder.

It wraps vscode.window.show*Message methods. It unifies message usage and adds automatical logging for flows.

Stores

Store is an interface for caching and providing any data. It uses Result and Error to deliver results. See Data section for usages.

Pickers

Multiple choice pickers are shown via QuickPickProvider.

It wraps vscode.createQuickPick method. It unifies picker usage and adds automatical logging for flows.

It also eases the usage of remote data with pickers significantly via Store usage. Refresh data button is automatically added to the picker.

Logging

Logging is done only in user's local machine. User may choose to attach these logs while sending bug reports.

Log file is kept small and written to a file when user decides to do so.

Logger is responsible for logging. Many places in the code uses Logger such as MessageBuilder and QuickPickProvider.

Localization

Though this extension supports only English, all language variant texts (visible to user) are kept in localization file.

Extension.ts

Entry point of this extension is extension.ts file. activate method has the following order: Initializers, Commands, other subscriptions.

Subscriptions

Subscriptions has specific rules:

• Commands implement Command.

  Examples: CreateConfigCommand, AddComponentCommand

• Uri handlers reside in UriHandler.

• Code Lens creators reside in CodeLensProvider instances and implement CodeLensCreator.

  Examples: LoginCodeLensCreator, AddBarrelCodeLensCreator

• Hover creators reside in HoverProvider and implement ConfigHoverCreator.

  Examples: BarrelHoverCreator, ZeplinComponentHoverCreator

• Diagnostic creators reside in ConfigDiagnosticsProvider and implement DiagnosticCreator.

  Examples: BarrelDiagnosticCreator, ComponentDiagnosticCreator

Domain

☝️ Note: The term barrel is used as either project or styleguide throughout the project.

Configuration File

Configuration is represented by Config and configUtil is used for reading and manipulating configuration files.

Zeplin API

• Zeplin API requests are hold together in api, API calls are made in Data classes.

Data

• Remote data fetching and caching is done via BasicStores, implements Store. Jump to Stores section.

  Examples: BarrelStore, WorkspacesStore, BarrelDetailsStore

• Caching stores is done via StoreProviders.

  Examples: BarrelsStoreProvider, BarrelDetailsStoreProvider

• Composite data fetching is done via composing data of BasicStores.

  Examples: ConfigBarrelsStore, ZeplinComponentStore

Helpers

• UI Specific static helpers methods reside in files prefixed with "Ui" keyword.

  Examples: zeplinComponentUi, barrelUi

• Flow files are used for achieving specific tasks. Each flow checks if the action is possible with considering user actions and config file state. These files are prefixed with "Flow" keyword.

  Examples: barrelFlow, componentFlow

• Other static helpers methods reside in files prefixed with "Util" keyword.

  Examples: zeplinHoverUtil, zeplinComponentsUtil