From 49f6505e5af868ee2e3f44180a3c06f566fdf49e Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Wed, 26 Jul 2023 12:51:09 -0500 Subject: [PATCH 01/15] add layout and styling --- src/components/global/Playground/index.tsx | 53 ++++++++++- .../global/Playground/playground.css | 93 ++++++++++++++++++- .../global/Playground/playground.types.ts | 5 + .../usage/v7/range/ion-change-event/index.md | 1 + 4 files changed, 149 insertions(+), 3 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 0681230b851..fa40d9c79a8 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import useBaseUrl from '@docusaurus/useBaseUrl'; import './playground.css'; import { EditorOptions, openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor } from './stackblitz.utils'; -import { Mode, UsageTarget } from './playground.types'; +import { ConsoleItem, Mode, UsageTarget } from './playground.types'; import useThemeContext from '@theme/hooks/useThemeContext'; import Tippy from '@tippyjs/react'; @@ -109,6 +109,7 @@ interface UsageTargetOptions { * @param src The absolute path to the playground demo. For example: `/usage/button/basic/demo.html` * @param size The height of the playground. Supports `xsmall`, `small`, `medium`, `large`, 'xlarge' or any string value. * @param devicePreview `true` if the playground example should render in a device frame (iOS/MD). + * @param showConsole `true` if the playground should render a console UI that reflects console logs, warnings, and errors. */ export default function Playground({ code, @@ -118,6 +119,7 @@ export default function Playground({ size = 'small', mode, devicePreview, + showConsole, includeIonContent = true, version, }: { @@ -133,6 +135,7 @@ export default function Playground({ mode?: 'ios' | 'md'; description?: string; devicePreview?: boolean; + showConsole?: boolean; includeIonContent: boolean; /** * The major version of Ionic to use in the generated Stackblitz examples. @@ -182,6 +185,36 @@ export default function Playground({ const [codeSnippets, setCodeSnippets] = useState({}); const [renderIframes, setRenderIframes] = useState(false); const [iframesLoaded, setIframesLoaded] = useState(false); + const [consoleItems, setConsoleItems] = useState([ + { + type: 'log', + message: 'this is a log' + }, + { + type: 'warning', + message: 'this is a warning' + }, + { + type: 'error', + message: 'this is an error' + }, + { + type: 'log', + message: 'log 1' + }, + { + type: 'log', + message: 'log 2' + }, + { + type: 'error', + message: 'error!' + }, + { + type: 'log', + message: 'really long log really long log really long log really long log really long log really long log really long log' + } + ]); /** * Rather than encode isDarkTheme into the frame source @@ -444,11 +477,26 @@ export default function Playground({ ); } + function renderConsole() { + return ( +
+ {consoleItems.map((consoleItem, i) => ( +
+ {consoleItem.type !== 'log' &&
+ {consoleItem.type === 'warning' ? '⚠' : '❌'} +
} + {consoleItem.message} +
+ ))} +
+ ) + } + const sortedUsageTargets = useMemo(() => Object.keys(UsageTarget).sort(), []); return (
-
+
{sortedUsageTargets.map((lang) => { @@ -633,6 +681,7 @@ export default function Playground({ ] : []}
+ {showConsole && renderConsole()}
{renderCodeSnippets()}
diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css index 46e77dc40c0..827d15a9e3b 100644 --- a/src/components/global/Playground/playground.css +++ b/src/components/global/Playground/playground.css @@ -14,6 +14,14 @@ --playground-tabs-background: var(--c-carbon-90); --playground-tab-btn-color: var(--c-carbon-20); --playground-tab-btn-border-color: transparent; + + --playground-console-item-separator-color: var(--c-carbon-80); + --playground-console-warning-background: #332B00; + --playground-console-warning-color: var(--c-yellow-80); + --playground-console-warning-separator-color: #665500; + --playground-console-error-background: #290000; + --playground-console-error-color: var(--c-red-40); + --playground-console-error-separator-color: #5C0000; } .playground { @@ -28,6 +36,13 @@ * @prop --playground-tabs-background: The background color of the tabs bar not including the active tab button. * @prop --playground-tab-btn-color: The text color of the tab buttons. * @prop --playground-tab-btn-border-color: The border color of the tab buttons. + * @prop --playground-console-item-separator-color The color of the separator/border between console UI items. + * @prop --playground-console-warning-background The background color of warning items in the console UI. + * @prop --playground-console-warning-color The text color of warning items in the console UI. + * @prop --playground-console-warning-separator-color The color of the top and bottom separator/border for warning items in the console UI. + * @prop --playground-console-error-background The background color of error items in the console UI. + * @prop --playground-console-error-color The text color of error items in the console UI. + * @prop --playground-console-error-separator-color The color of the top and bottom separator/border for error items in the console UI. */ --playground-btn-color: var(--c-indigo-90); --playground-btn-selected-color: var(--c-blue-90); @@ -36,11 +51,19 @@ --playground-btn-icon-color: var(--c-indigo-80); --playground-separator-color: var(--c-indigo-30); --playground-code-background: var(--c-indigo-10); - + --playground-tabs-background: var(--c-indigo-20); --playground-tab-btn-color: var(--c-carbon-100); --playground-tab-btn-border-color: var(--c-indigo-30); + --playground-console-item-separator-color: var(--c-indigo-20); + --playground-console-warning-background: var(--c-yellow-10); + --playground-console-warning-color: #5C3C00; + --playground-console-warning-separator-color: var(--c-yellow-30); + --playground-console-error-background: var(--c-red-10); + --playground-console-error-color: var(--c-red-90); + --playground-console-error-separator-color: var(--c-red-30); + overflow: hidden; margin-bottom: var(--ifm-leading); @@ -52,6 +75,11 @@ border-radius: var(--ifm-code-border-radius); } +.playground__container--has-console { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + /* Playground preview contains the demo example*/ .playground__preview { display: flex; @@ -213,6 +241,69 @@ } } +.playground__console { + background-color: var(--code-block-bg-c); + border: 1px solid var(--playground-separator-color); + border-top: 0; + border-bottom-left-radius: var(--ifm-code-border-radius); + border-bottom-right-radius: var(--ifm-code-border-radius); + overflow-y: auto; + + height: 120px; +} + +.playground__console-item { + border-top: 1px solid var(--separator-color); + padding: 3px 3px 3px 28px; + + position: relative; +} + +.playground__console-item:first-child { + border-top: none; +} + +.playground__console-item:last-child { + border-bottom: 1px solid var(--separator-color); +} + +.playground__console-item--log { + --separator-color: var(--playground-console-item-separator-color); +} + +.playground__console-item--warning { + --separator-color: var(--playground-console-warning-separator-color); + background-color: var(--playground-console-warning-background); + border-bottom: 1px solid var(--separator-color); + color: var(--playground-console-warning-color); +} + +.playground__console-item--error { + --separator-color: var(--playground-console-error-separator-color); + background-color: var(--playground-console-error-background); + border-bottom: 1px solid var(--separator-color); + color: var(--playground-console-error-color); +} + +/* warnings and errors have both borders colored, so hide the extra from the neighboring item */ +.playground__console-item--warning + .playground__console-item, +.playground__console-item--error + .playground__console-item { + border-top: none; +} + +.playground__console-icon { + position: absolute; + top: 3px; + left: 3px; +} + +.playground__console-item code { + background-color: transparent; + padding: 0; + padding-block-start: 0; /* prevents text getting cut off vertically */ + padding-block-end: 0; /* prevents border from item below getting covered up */ +} + /** Tabs **/ .playground .tabs-container { background: var(--playground-code-background); diff --git a/src/components/global/Playground/playground.types.ts b/src/components/global/Playground/playground.types.ts index 20d98474eec..32dffc04056 100644 --- a/src/components/global/Playground/playground.types.ts +++ b/src/components/global/Playground/playground.types.ts @@ -9,3 +9,8 @@ export enum Mode { iOS = 'ios', MD = 'md', } + +export interface ConsoleItem { + type: 'log' | 'warning' | 'error', + message: string +} \ No newline at end of file diff --git a/static/usage/v7/range/ion-change-event/index.md b/static/usage/v7/range/ion-change-event/index.md index c35324b9448..b61d73279f3 100644 --- a/static/usage/v7/range/ion-change-event/index.md +++ b/static/usage/v7/range/ion-change-event/index.md @@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md'; Date: Wed, 26 Jul 2023 13:45:33 -0500 Subject: [PATCH 02/15] capture actual console messages --- src/components/global/Playground/index.tsx | 45 +++++++------------ static/usage/common.js | 33 ++++++++++++++ .../usage/v7/range/ion-change-event/demo.html | 3 +- 3 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index fa40d9c79a8..85d1b32dfa7 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -185,36 +185,7 @@ export default function Playground({ const [codeSnippets, setCodeSnippets] = useState({}); const [renderIframes, setRenderIframes] = useState(false); const [iframesLoaded, setIframesLoaded] = useState(false); - const [consoleItems, setConsoleItems] = useState([ - { - type: 'log', - message: 'this is a log' - }, - { - type: 'warning', - message: 'this is a warning' - }, - { - type: 'error', - message: 'this is an error' - }, - { - type: 'log', - message: 'log 1' - }, - { - type: 'log', - message: 'log 2' - }, - { - type: 'error', - message: 'error!' - }, - { - type: 'log', - message: 'really long log really long log really long log really long log really long log really long log really long log' - } - ]); + const [consoleItems, setConsoleItems] = useState([]); /** * Rather than encode isDarkTheme into the frame source @@ -291,6 +262,20 @@ export default function Playground({ setFramesLoaded(); }, [renderIframes]); + useEffect(() => { + if (frameiOS.current) { + frameiOS.current.contentWindow.addEventListener('console', (ev: CustomEvent) => { + setConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]); + }); + } + + if (frameMD.current) { + frameMD.current.contentWindow.addEventListener('console', (ev: CustomEvent) => { + setConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]); + }); + } + }, [iframesLoaded]); + useEffect(() => { /** * Using a dynamic import here to avoid SSR errors when trying to extend `HTMLElement` diff --git a/static/usage/common.js b/static/usage/common.js index 6bcd8833a30..e70d8054b45 100644 --- a/static/usage/common.js +++ b/static/usage/common.js @@ -22,6 +22,39 @@ window.addEventListener('DOMContentLoaded', () => { } }); + /** + * Monkey-patch the console methods so we can dispatch + * events when they're called, allowing the data to be + * captured by the playground's console UI. + */ + const _log = console.log, + _warn = console.warn, + _error = console.error; + + const dispatchConsoleEvent = (type, message) => { + window.dispatchEvent(new CustomEvent('console', { + detail: { + type, + message + } + })); + } + + console.log = function() { + dispatchConsoleEvent('log', arguments[0]); + return _log.apply(console, arguments); + }; + + console.warn = function() { + dispatchConsoleEvent('warning', arguments[0]); + return _warn.apply(console, arguments); + }; + + console.error = function() { + dispatchConsoleEvent('error', arguments[0]); + return _error.apply(console, arguments); + }; + /** * The Playground needs to wait for the message listener * to be created before sending any messages, otherwise diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html index 0c5f17d2875..fe3b8f55038 100644 --- a/static/usage/v7/range/ion-change-event/demo.html +++ b/static/usage/v7/range/ion-change-event/demo.html @@ -32,7 +32,8 @@ const lastValue = document.querySelector('#lastValue'); range.addEventListener('ionChange', ({ detail }) => { - lastValue.innerHTML = detail.value; + // lastValue.innerHTML = detail.value; + console.log('ionChange emitted value: ' + detail.value); }); From b680800e8b6286c700ff707d5ed3ebf45093cbf4 Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Wed, 26 Jul 2023 14:15:47 -0500 Subject: [PATCH 03/15] convert range ionChange playground to use console --- .../angular/example_component_html.md | 1 - .../angular/example_component_ts.md | 5 +---- .../usage/v7/range/ion-change-event/demo.html | 3 --- .../v7/range/ion-change-event/javascript.md | 4 +--- .../usage/v7/range/ion-change-event/react.md | 18 +++++++----------- static/usage/v7/range/ion-change-event/vue.md | 12 +++--------- 6 files changed, 12 insertions(+), 31 deletions(-) diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_html.md b/static/usage/v7/range/ion-change-event/angular/example_component_html.md index 12a736de8dd..bbcbd120285 100644 --- a/static/usage/v7/range/ion-change-event/angular/example_component_html.md +++ b/static/usage/v7/range/ion-change-event/angular/example_component_html.md @@ -1,4 +1,3 @@ ```html -ionChange emitted value: {{ lastEmittedValue }} ``` diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md index b90eff62d29..377ccd2dc28 100644 --- a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md +++ b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md @@ -2,17 +2,14 @@ import { Component } from '@angular/core'; import { RangeCustomEvent } from '@ionic/angular'; -import { RangeValue } from '@ionic/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', }) export class ExampleComponent { - lastEmittedValue: RangeValue; - onIonChange(ev: Event) { - this.lastEmittedValue = (ev as RangeCustomEvent).detail.value; + console.log('ionChange emitted value:', (ev as RangeCustomEvent).detail.value); } } ``` diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html index fe3b8f55038..da5816af423 100644 --- a/static/usage/v7/range/ion-change-event/demo.html +++ b/static/usage/v7/range/ion-change-event/demo.html @@ -22,17 +22,14 @@
- ionChange emitted value:
diff --git a/static/usage/v7/range/ion-change-event/javascript.md b/static/usage/v7/range/ion-change-event/javascript.md index 4aebeb2defa..25507306a55 100644 --- a/static/usage/v7/range/ion-change-event/javascript.md +++ b/static/usage/v7/range/ion-change-event/javascript.md @@ -1,13 +1,11 @@ ```html -ionChange emitted value: ``` diff --git a/static/usage/v7/range/ion-change-event/react.md b/static/usage/v7/range/ion-change-event/react.md index d6c43bc7696..d49b2adb596 100644 --- a/static/usage/v7/range/ion-change-event/react.md +++ b/static/usage/v7/range/ion-change-event/react.md @@ -1,17 +1,13 @@ ```tsx -import React, { useState } from 'react'; -import { IonLabel, IonRange } from '@ionic/react'; -import { RangeValue } from '@ionic/core'; +import React from 'react'; +import { IonRange } from '@ionic/react'; + function Example() { - const [lastEmittedValue, setLastEmittedValue] = useState(); return ( - <> - setLastEmittedValue(detail.value)} - > - ionChange emitted value: {lastEmittedValue as number} - + console.log('ionChange emitted value: ' + detail.value)} + > ); } export default Example; diff --git a/static/usage/v7/range/ion-change-event/vue.md b/static/usage/v7/range/ion-change-event/vue.md index 306682ab7db..44a3fdcfa1f 100644 --- a/static/usage/v7/range/ion-change-event/vue.md +++ b/static/usage/v7/range/ion-change-event/vue.md @@ -1,23 +1,17 @@ ```html From 817fcb039afeb46e16fb080e181e31c77ac9f41f Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Wed, 26 Jul 2023 14:34:32 -0500 Subject: [PATCH 08/15] lint --- src/components/global/Playground/index.tsx | 8 +++---- .../global/Playground/playground.types.ts | 6 ++--- static/usage/common.js | 22 ++++++++++--------- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index a5ebdff9779..ac740322ebb 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -473,14 +473,14 @@ export default function Playground({
{(ionicMode === Mode.iOS ? iosConsoleItems : mdConsoleItems).map((consoleItem, i) => (
- {consoleItem.type !== 'log' &&
- {consoleItem.type === 'warning' ? '⚠' : '❌'} -
} + {consoleItem.type !== 'log' && ( +
{consoleItem.type === 'warning' ? '⚠' : '❌'}
+ )} {consoleItem.message}
))}
- ) + ); } const sortedUsageTargets = useMemo(() => Object.keys(UsageTarget).sort(), []); diff --git a/src/components/global/Playground/playground.types.ts b/src/components/global/Playground/playground.types.ts index 32dffc04056..c6a14b8e585 100644 --- a/src/components/global/Playground/playground.types.ts +++ b/src/components/global/Playground/playground.types.ts @@ -11,6 +11,6 @@ export enum Mode { } export interface ConsoleItem { - type: 'log' | 'warning' | 'error', - message: string -} \ No newline at end of file + type: 'log' | 'warning' | 'error'; + message: string; +} diff --git a/static/usage/common.js b/static/usage/common.js index b1bcfb83dc1..52694d7e7b2 100644 --- a/static/usage/common.js +++ b/static/usage/common.js @@ -32,25 +32,27 @@ window.addEventListener('DOMContentLoaded', () => { _error = console.error; const dispatchConsoleEvent = (type, arguments) => { - window.dispatchEvent(new CustomEvent('console', { - detail: { - type, - message: Object.values(arguments).join(' ') - } - })); - } + window.dispatchEvent( + new CustomEvent('console', { + detail: { + type, + message: Object.values(arguments).join(' '), + }, + }) + ); + }; - console.log = function() { + console.log = function () { dispatchConsoleEvent('log', arguments); return _log.apply(console, arguments); }; - console.warn = function() { + console.warn = function () { dispatchConsoleEvent('warning', arguments); return _warn.apply(console, arguments); }; - console.error = function() { + console.error = function () { dispatchConsoleEvent('error', arguments); return _error.apply(console, arguments); }; From 526256712e4768b9d98ee33104e308a939a0852f Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Wed, 26 Jul 2023 14:48:51 -0500 Subject: [PATCH 09/15] remove errant space --- src/components/global/Playground/playground.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css index 827d15a9e3b..76e37db6954 100644 --- a/src/components/global/Playground/playground.css +++ b/src/components/global/Playground/playground.css @@ -51,7 +51,7 @@ --playground-btn-icon-color: var(--c-indigo-80); --playground-separator-color: var(--c-indigo-30); --playground-code-background: var(--c-indigo-10); - + --playground-tabs-background: var(--c-indigo-20); --playground-tab-btn-color: var(--c-carbon-100); --playground-tab-btn-border-color: var(--c-indigo-30); From 93a36ba85470023a4e699044562eb9b087b02dde Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Thu, 27 Jul 2023 13:49:45 -0500 Subject: [PATCH 10/15] add console header --- src/components/global/Playground/index.tsx | 29 +++++++++++-------- .../global/Playground/playground.css | 12 +++++++- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index ac740322ebb..40875fde123 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -162,7 +162,7 @@ export default function Playground({ const codeRef = useRef(null); const frameiOS = useRef(null); const frameMD = useRef(null); - const consoleRef = useRef(null); + const consoleBodyRef = useRef(null); const defaultMode = typeof mode !== 'undefined' ? mode : Mode.iOS; @@ -269,14 +269,14 @@ export default function Playground({ if (frameiOS.current) { frameiOS.current.contentWindow.addEventListener('console', (ev: CustomEvent) => { setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]); - consoleRef.current.scrollTo(0, consoleRef.current.scrollHeight); + consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight); }); } if (frameMD.current) { frameMD.current.contentWindow.addEventListener('console', (ev: CustomEvent) => { setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]); - consoleRef.current.scrollTo(0, consoleRef.current.scrollHeight); + consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight); }); } } @@ -470,15 +470,20 @@ export default function Playground({ function renderConsole() { return ( -
- {(ionicMode === Mode.iOS ? iosConsoleItems : mdConsoleItems).map((consoleItem, i) => ( -
- {consoleItem.type !== 'log' && ( -
{consoleItem.type === 'warning' ? '⚠' : '❌'}
- )} - {consoleItem.message} -
- ))} +
+
+ Console +
+
+ {(ionicMode === Mode.iOS ? iosConsoleItems : mdConsoleItems).map((consoleItem, i) => ( +
+ {consoleItem.type !== 'log' && ( +
{consoleItem.type === 'warning' ? '⚠' : '❌'}
+ )} + {consoleItem.message} +
+ ))} +
); } diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css index 76e37db6954..2e424068652 100644 --- a/src/components/global/Playground/playground.css +++ b/src/components/global/Playground/playground.css @@ -247,6 +247,16 @@ border-top: 0; border-bottom-left-radius: var(--ifm-code-border-radius); border-bottom-right-radius: var(--ifm-code-border-radius); +} + +.playground__console-header { + background-color: var(--playground-separator-color); + font-weight: bold; + padding: 3px 3px 3px 28px; + text-transform: uppercase; +} + +.playground__console-body { overflow-y: auto; height: 120px; @@ -297,7 +307,7 @@ left: 3px; } -.playground__console-item code { +.playground__console code { background-color: transparent; padding: 0; padding-block-start: 0; /* prevents text getting cut off vertically */ From 915c312f5ebab266e3a92385ed652f210a19d64b Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Thu, 3 Aug 2023 09:59:09 -0500 Subject: [PATCH 11/15] reduce console font size; improve DRYness --- src/components/global/Playground/playground.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css index 2e424068652..0fd01eeaf2f 100644 --- a/src/components/global/Playground/playground.css +++ b/src/components/global/Playground/playground.css @@ -252,7 +252,6 @@ .playground__console-header { background-color: var(--playground-separator-color); font-weight: bold; - padding: 3px 3px 3px 28px; text-transform: uppercase; } @@ -264,11 +263,14 @@ .playground__console-item { border-top: 1px solid var(--separator-color); - padding: 3px 3px 3px 28px; position: relative; } +.playground__console-header, .playground__console-item { + padding: 3px 3px 3px 28px; +} + .playground__console-item:first-child { border-top: none; } @@ -309,6 +311,7 @@ .playground__console code { background-color: transparent; + font-size: 0.813rem; padding: 0; padding-block-start: 0; /* prevents text getting cut off vertically */ padding-block-end: 0; /* prevents border from item below getting covered up */ From 19315d53ef620e8ff5f90f05e6b8cfdc54ad8a34 Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Thu, 3 Aug 2023 10:15:26 -0500 Subject: [PATCH 12/15] add placeholder when console is empty --- src/components/global/Playground/index.tsx | 22 +++++++++++++------ .../global/Playground/playground.css | 4 ++++ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 40875fde123..377f37fc196 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -469,20 +469,28 @@ export default function Playground({ } function renderConsole() { + const consoleItems = ionicMode === Mode.iOS ? iosConsoleItems : mdConsoleItems; + return (
Console
- {(ionicMode === Mode.iOS ? iosConsoleItems : mdConsoleItems).map((consoleItem, i) => ( -
- {consoleItem.type !== 'log' && ( -
{consoleItem.type === 'warning' ? '⚠' : '❌'}
- )} - {consoleItem.message} + {consoleItems.length === 0 ? ( +
+ Console messages will appear here when logged from the example above.
- ))} + ) : ( + consoleItems.map((consoleItem, i) => ( +
+ {consoleItem.type !== 'log' && ( +
{consoleItem.type === 'warning' ? '⚠' : '❌'}
+ )} + {consoleItem.message} +
+ )) + )}
); diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css index 0fd01eeaf2f..79e33680792 100644 --- a/src/components/global/Playground/playground.css +++ b/src/components/global/Playground/playground.css @@ -279,6 +279,10 @@ border-bottom: 1px solid var(--separator-color); } +.playground__console-item--placeholder { + font-style: italic; +} + .playground__console-item--log { --separator-color: var(--playground-console-item-separator-color); } From fbc250e7f2f3d9771649df616fd38087651de8af Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Thu, 3 Aug 2023 12:39:10 -0500 Subject: [PATCH 13/15] empty console when demo is reset --- src/components/global/Playground/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 377f37fc196..54cd6526498 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -342,6 +342,9 @@ export default function Playground({ if (frameMD.current) { frameMD.current.contentWindow.location.reload(); } + + setiOSConsoleItems([]); + setMDConsoleItems([]); } function openEditor(event) { From b214ad12824aa731002fbe5b504c9557d9229303 Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Fri, 4 Aug 2023 13:49:17 -0500 Subject: [PATCH 14/15] re-attach console listeners when demo is reset --- src/components/global/Playground/index.tsx | 34 ++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 54cd6526498..77811a7fda0 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -188,6 +188,13 @@ export default function Playground({ const [iframesLoaded, setIframesLoaded] = useState(false); const [mdConsoleItems, setMDConsoleItems] = useState([]); const [iosConsoleItems, setiOSConsoleItems] = useState([]); + + /** + * We don't actually care about the count, but this lets us + * re-trigger useEffect hooks when the demo is reset and the + * iframes are refreshed. + */ + const [resetCount, setResetCount] = useState(0); /** * Rather than encode isDarkTheme into the frame source @@ -280,7 +287,7 @@ export default function Playground({ }); } } - }, [iframesLoaded]); + }, [iframesLoaded, resetCount]); // including resetCount re-runs this when iframes are reloaded useEffect(() => { /** @@ -335,7 +342,7 @@ export default function Playground({ /** * Reloads the iOS and MD iframe sources back to their original state. */ - function resetDemo() { + async function resetDemo() { if (frameiOS.current) { frameiOS.current.contentWindow.location.reload(); } @@ -345,6 +352,9 @@ export default function Playground({ setiOSConsoleItems([]); setMDConsoleItems([]); + + await Promise.all([waitForNextFrameLoadEvent(frameiOS.current), waitForNextFrameLoadEvent(frameMD.current)]); + setResetCount(oldCount => oldCount + 1); } function openEditor(event) { @@ -716,6 +726,26 @@ const waitForFrame = (frame: HTMLIFrameElement) => { }); }; +/** + * Returns a promise that resolves on the *next* load event of the + * given iframe. We intentionally don't check if it's already loaded + * because this is used when the demo is reset and the iframe is + * refreshed, so we don't want to return too early and catch the + * pre-reset version of the window. + */ +const waitForNextFrameLoadEvent = (frame: HTMLIFrameElement) => { + return new Promise((resolve) => { + const handleLoad = () => { + frame.removeEventListener('load', handleLoad); + resolve(); + }; + + if (frame) { + frame.addEventListener('load', handleLoad); + } + }); +}; + const isFrameReady = (frame: HTMLIFrameElement) => { if (!frame) { return false; From 733e0c88a6740bcb206e368403b74ba560954dec Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Fri, 4 Aug 2023 13:50:02 -0500 Subject: [PATCH 15/15] lint --- src/components/global/Playground/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 77811a7fda0..c7ab14d5a35 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -188,7 +188,7 @@ export default function Playground({ const [iframesLoaded, setIframesLoaded] = useState(false); const [mdConsoleItems, setMDConsoleItems] = useState([]); const [iosConsoleItems, setiOSConsoleItems] = useState([]); - + /** * We don't actually care about the count, but this lets us * re-trigger useEffect hooks when the demo is reset and the @@ -354,7 +354,7 @@ export default function Playground({ setMDConsoleItems([]); await Promise.all([waitForNextFrameLoadEvent(frameiOS.current), waitForNextFrameLoadEvent(frameMD.current)]); - setResetCount(oldCount => oldCount + 1); + setResetCount((oldCount) => oldCount + 1); } function openEditor(event) {