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.

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:

1. Clone this repo to a desired directory.

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

2. Open VSCode (with a Dev Hub already connected), and open the lwc-utils folder.

3. Use Command Palette to SFDX: Create a Default Scratch Org .

4. Use Command Palette to SFDX: Push Source to Default Scratch Org.

5. Use Command Palette to SFDX: Open Default Org.

See the readme on the old repository.

Two samples:

1. An @wire child template component fed by a reactive attribute that emits events on success/error.
2. 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.

Leverages the lwc-recipe pubsub to provide an API for all LWC to access Aura only service modules, such as lightning:overlayLibrary.

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

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

Leverages both MessageBroker and MessageService 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.

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;
    }
  }
}