Logger new LWC (EG+AR)

force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml

@@ -29,6 +29,18 @@
                 <identifier>miscModal</identifier>
             </componentInstance>
         </itemInstances>
+        <itemInstances>
+            <componentInstance>
+                <componentName>miscI18n</componentName>
+                <identifier>c_miscI18n</identifier>
+            </componentInstance>
+        </itemInstances>
+        <itemInstances>
+            <componentInstance>
+                <componentName>miscLogger</componentName>
+                <identifier>c_misLogger</identifier>
+            </componentInstance>
+        </itemInstances>
         <name>region2</name>
         <type>Region</type>
     </flexiPageRegions>

force-app/main/default/lwc/miscI18n/__tests__/miscI18n.test.js

@@ -0,0 +1,75 @@
+import { createElement } from 'lwc';
+import MiscI18n from 'c/miscI18n';
+import USER_LOCALE from '@salesforce/i18n/locale';
+import USER_CURRENCY from '@salesforce/i18n/currency';
+
+describe('c-misc-i18n', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('component is initialized with correct variables', () => {
+        // Create initial element
+        const element = createElement('c-misc-i18n', {
+            is: MiscI18n
+        });
+        document.body.appendChild(element);
+
+        const userLocale = element.shadowRoot.querySelector('span.userLocale');
+        expect(userLocale).not.toBeNull();
+        expect(userLocale.textContent).toBe(USER_LOCALE);
+
+        const dateUserLocale = element.shadowRoot.querySelector(
+            'span.dateUserLocale'
+        );
+        expect(dateUserLocale).not.toBeNull();
+        expect(dateUserLocale.textContent).toBe(
+            new Intl.DateTimeFormat(USER_LOCALE).format(new Date())
+        );
+
+        const currencyUserLocale = element.shadowRoot.querySelector(
+            'span.currencyUserLocale'
+        );
+        expect(currencyUserLocale).not.toBeNull();
+        expect(currencyUserLocale.textContent).toBe(
+            new Intl.NumberFormat(USER_LOCALE, {
+                style: 'currency',
+                currency: USER_CURRENCY,
+                currencyDisplay: 'symbol'
+            }).format(100)
+        );
+
+        const dateJapanLocale = element.shadowRoot.querySelector(
+            'span.dateJapanLocale'
+        );
+        expect(dateJapanLocale).not.toBeNull();
+        expect(dateJapanLocale.textContent).toBe(
+            new Intl.DateTimeFormat('ja-JP').format(new Date())
+        );
+
+        const currencyJapanLocale = element.shadowRoot.querySelector(
+            'span.currencyJapanLocale'
+        );
+        expect(currencyJapanLocale).not.toBeNull();
+        expect(currencyJapanLocale.textContent).toBe(
+            new Intl.NumberFormat('ja-JP', {
+                style: 'currency',
+                currency: 'JPY',
+                currencyDisplay: 'symbol'
+            }).format(100)
+        );
+    });
+
+    it('is accessible', async () => {
+        const element = createElement('c-misc-i18n', {
+            is: MiscI18n
+        });
+
+        document.body.appendChild(element);
+
+        await expect(element).toBeAccessible();
+    });
+});

force-app/main/default/lwc/miscI18n/miscI18n.html

@@ -0,0 +1,38 @@
+<template>
+    <lightning-card title="MiscI18n" icon-name="custom:custom19">
+        <div class="slds-var-m-around_medium">
+            <p>
+                User's locale:
+                <span class="userLocale"><b>{userLocale}</b></span>
+            </p>
+            <p>
+                Today's date formatted with {userLocale}:
+                <span class="dateUserLocale">
+                    <b>{dateUserLocale}</b>
+                </span>
+            </p>
+            <p>
+                100 {userCurrency} formatted with {userLocale}:
+                <span class="currencyUserLocale">
+                    <b>{currencyUserLocale}</b>
+                </span>
+            </p>
+            <p>
+                Today's date formatted with {japanLocale}:
+                <span class="dateJapanLocale">
+                    <b>{dateJapanLocale}</b>
+                </span>
+            </p>
+            <p>
+                100 {japanCurrency} formatted with {japanLocale}:
+                <span class="currencyJapanLocale">
+                    <b>{currencyJapanLocale}</b>
+                </span>
+            </p>
+        </div>
+        <c-view-source source="lwc/miscI18n" slot="footer">
+            Use the standard JS Intl class to format dates and numbers with
+            different locales and currencies.
+        </c-view-source>
+    </lightning-card>
+</template>

force-app/main/default/lwc/miscI18n/miscI18n.js

@@ -0,0 +1,36 @@
+import { LightningElement } from 'lwc';
+import USER_LOCALE from '@salesforce/i18n/locale';
+import USER_CURRENCY from '@salesforce/i18n/currency';
+
+export default class I18n extends LightningElement {
+    userLocale = USER_LOCALE;
+    userCurrency = USER_CURRENCY;
+    japanLocale = 'ja-JP';
+    japanCurrency = 'JPY';
+
+    get dateUserLocale() {
+        const date = new Date();
+        return new Intl.DateTimeFormat(USER_LOCALE).format(date);
+    }
+
+    get dateJapanLocale() {
+        const date = new Date();
+        return new Intl.DateTimeFormat(this.japanLocale).format(date);
+    }
+
+    get currencyUserLocale() {
+        return new Intl.NumberFormat(USER_LOCALE, {
+            style: 'currency',
+            currency: USER_CURRENCY,
+            currencyDisplay: 'symbol'
+        }).format(100);
+    }
+
+    get currencyJapanLocale() {
+        return new Intl.NumberFormat(this.japanLocale, {
+            style: 'currency',
+            currency: this.japanCurrency,
+            currencyDisplay: 'symbol'
+        }).format(100);
+    }
+}

force-app/main/default/lwc/miscI18n/miscI18n.js-meta.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+	<apiVersion>61.0</apiVersion>
+	<isExposed>true</isExposed>
+	<targets>
+		<target>lightning__RecordPage</target>
+		<target>lightning__AppPage</target>
+		<target>lightning__HomePage</target>
+	</targets>	
+</LightningComponentBundle>

force-app/main/default/lwc/miscLogger/__tests__/miscLogger.test.js

@@ -0,0 +1,29 @@
+import { createElement } from 'lwc';
+import MiscLogger from 'c/miscLogger';
+import { log } from 'lightning/logger';
+
+describe('c-misc-logger', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('When log to event monitoring is clicked, the lightning log function is called', () => {
+        // Create component
+        const element = createElement('c-misc-logger', {
+            is: MiscLogger
+        });
+        document.body.appendChild(element);
+
+        // Click button
+        const buttonEl = element.shadowRoot.querySelector(
+            'div.event-monitoring lightning-button'
+        );
+        buttonEl.click();
+
+        // Check log function has been called
+        expect(log).toHaveBeenCalled();
+    });
+});

force-app/main/default/lwc/miscLogger/miscLogger.html

@@ -0,0 +1,27 @@
+<template>
+    <lightning-card title="MiscLogger" icon-name="custom:custom63">
+        <div class="slds-var-m-around_medium">
+            <p class="slds-var-m-bottom_small">
+                <lightning-button
+                    label="Log a message to the console"
+                    onclick={logMessageConsole}
+                ></lightning-button>
+            </p>
+        </div>
+        <div class="slds-var-m-around_medium event-monitoring">
+            <p class="slds-var-m-bottom_small">
+                <lightning-button
+                    label="Log a message to the console and Event Monitoring"
+                    onclick={logMessageEventMonitoring}
+                ></lightning-button>
+            </p>
+        </div>
+
+        <c-view-source source="lwc/misclogger" slot="footer">
+            Log custom messages to Event Monitoring, adding observability to
+            your LWCs.
+            To use this feature, enable Lightning Logger Events from Setup, under 
+            Event Monitoring Settings.
+        </c-view-source>
+    </lightning-card>
+</template>

force-app/main/default/lwc/miscLogger/miscLogger.js

@@ -0,0 +1,15 @@
+import { LightningElement } from 'lwc';
+import { log } from 'lightning/logger';
+
+export default class MiscLogger extends LightningElement {
+    logMessageEventMonitoring() {
+        let msg = {
+            type: 'click',
+            action: 'Log'
+        };
+        log(msg);
+    }
+    logMessageConsole() {
+        console.log('This message is logged to the console');
+    }
+}

force-app/main/default/lwc/miscLogger/miscLogger.js-meta.xml

@@ -0,0 +1,9 @@
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+	<apiVersion>61.0</apiVersion>
+	<isExposed>true</isExposed>
+	<targets>
+        <target>lightning__AppPage</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__HomePage</target>
+    </targets>
+</LightningComponentBundle>