LWC Utils and Design Patterns

This repo highlights the following production proven design patterns:

Design custom LWC into a service component architecture, i.e. making "utils".
Showcase a bi-directional event / payload brokering system between Aura and LWC.
Highlight the versatility of the Flexipage SPA.
Showcase an apples-to-apples comparison of "Aura vs LWC" with an LWC re-write of my Aura Service Components Sample App.

Install with SFDX

SFDX CLI and VSCode has matured enough for general usage so I will be moving my repo to SFDX format only.

For VSCode and SFDX setup see steps (1 and 2) from the official lwc-recipes repo. Once you have the SFDX CLI set up and Authed into a Dev Hub you can then:

Clone this repo to a desired directory.

git clone https://github.com/tsalb/lwc-utils

Open VSCode (with a Dev Hub already connected), and open the lwc-utils folder.
Use Command Palette to SFDX: Create a Default Scratch Org .
Use Command Palette to SFDX: Push Source to Default Scratch Org.
Use Command Palette to SFDX: Open Default Org.

Service Components Framework (Aura)

See the readme on the old repository.

Datatable Service (LWC @wire and imperative)

Two samples:

An @wire child template component fed by a reactive attribute that emits events on success/error.
An imperative callout using async await that uses promises in the returning tableResults.

Parent relationships (1 level up) are working okay. It's safer to use formulas still, for now.

LWC to Aura MessageBroker

Leverages a generic OPEN_CHANNEL LightningMessageChannel with DialogService for all LWC to access Aura only service modules, such as lightning:overlayLibrary.

This simple example uses DialogService to dynamically create a LWC (using $A.createComponent).

DialogService is also able to dynamically start flows, as shown in the next section.

Dynamic Flow Modal in LWC

Leverages both MessageBroker and DialogService to dynamically start flows from an LWC.

This simple example brokers a payload to lightning:flow (Aura only in Summer 19) to start a flow with a given flowName and inputVariables.

Dynamic Templating in LWC Wizard Body

To be built on in future updates, the flowWizardRouter LWC is able to dynamically render() a chosen template based on an @api attribute.

import { LightningElement, api, track } from 'lwc';
import { DateTime } from 'c/luxon';
// Known templates
import { default as dateParserMenu } from './templates/dateParserMenu.html';
import { default as defaultTemplate } from './templates/default.html';

export default class FlowWizardRouter extends LightningElement {
  @api templateName;

  render() {
    switch (this.templateName) {
      case 'dateParserMenu':
        return dateParserMenu;
      default:
        return defaultTemplate;
    }
  }
}