From 38b8c29872023c09393bd39c9974838282425cd5 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 4 Dec 2023 14:30:13 -0500 Subject: [PATCH 1/3] fix(playground): tabs stackblitz example loads in Safari --- src/components/global/Playground/index.tsx | 19 +++++++++++++++---- .../v6/tabs/router/angular/app_module_ts.md | 2 +- .../v7/tabs/router/angular/app_module_ts.md | 2 +- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 4010db3b372..99136559081 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -546,10 +546,21 @@ export default function Playground({ if (hasUsageTargetOptions) { editorOptions.files = Object.keys(codeSnippets[usageTarget]) - .map((fileName) => ({ - [fileName]: hostRef.current!.querySelector(`#${getCodeSnippetId(usageTarget, fileName)} code`) - .outerText, - })) + .map((fileName) => { + /** + * Safari has an issue where accessing the `outerText` on a non-visible + * DOM element results in a string with only whitespace. To work around this, + * we create a clone of the element, not attached to the DOM, and parse + * the outerText from that. + */ + const el = document.createElement('div'); + el.innerHTML = hostRef.current!.querySelector( + `#${getCodeSnippetId(usageTarget, fileName)} code` + ).innerHTML; + return { + [fileName]: el.outerText, + }; + }) .reduce((acc, curr) => ({ ...acc, ...curr }), {}); editorOptions.dependencies = (code[usageTarget] as UsageTargetOptions).dependencies; } diff --git a/static/usage/v6/tabs/router/angular/app_module_ts.md b/static/usage/v6/tabs/router/angular/app_module_ts.md index b2d3db7f33d..e36b8c6316e 100644 --- a/static/usage/v6/tabs/router/angular/app_module_ts.md +++ b/static/usage/v6/tabs/router/angular/app_module_ts.md @@ -11,7 +11,7 @@ import { ExampleComponent } from './example.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ - imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()], + imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})], declarations: [AppComponent, ExampleComponent], bootstrap: [AppComponent], }) diff --git a/static/usage/v7/tabs/router/angular/app_module_ts.md b/static/usage/v7/tabs/router/angular/app_module_ts.md index b2d3db7f33d..e36b8c6316e 100644 --- a/static/usage/v7/tabs/router/angular/app_module_ts.md +++ b/static/usage/v7/tabs/router/angular/app_module_ts.md @@ -11,7 +11,7 @@ import { ExampleComponent } from './example.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ - imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()], + imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})], declarations: [AppComponent, ExampleComponent], bootstrap: [AppComponent], }) From 32be08a01bd35049f2337a04f090e1992bf629ce Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 4 Dec 2023 14:40:06 -0500 Subject: [PATCH 2/3] fix: better detection for resolution --- src/components/global/Playground/index.tsx | 31 +++++++++++++++------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 99136559081..acaefb1509b 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -547,18 +547,29 @@ export default function Playground({ if (hasUsageTargetOptions) { editorOptions.files = Object.keys(codeSnippets[usageTarget]) .map((fileName) => { - /** - * Safari has an issue where accessing the `outerText` on a non-visible - * DOM element results in a string with only whitespace. To work around this, - * we create a clone of the element, not attached to the DOM, and parse - * the outerText from that. - */ - const el = document.createElement('div'); - el.innerHTML = hostRef.current!.querySelector( + const codeBlock = hostRef.current!.querySelector( `#${getCodeSnippetId(usageTarget, fileName)} code` - ).innerHTML; + ); + let code = codeBlock.outerText; + + if (code.trim().length === 0) { + /** + * Safari has an issue where accessing the `outerText` on a non-visible + * DOM element results in a string with only whitespace. To work around this, + * we create a clone of the element, not attached to the DOM, and parse + * the outerText from that. + * + * Only in Safari does this persist whitespace & line breaks, so we + * explicitly check for when the code is empty to use this workaround. + */ + const el = document.createElement('div'); + el.innerHTML = hostRef.current!.querySelector( + `#${getCodeSnippetId(usageTarget, fileName)} code` + ).innerHTML; + code = el.outerText; + } return { - [fileName]: el.outerText, + [fileName]: code, }; }) .reduce((acc, curr) => ({ ...acc, ...curr }), {}); From c85689e021a47f2ed399486fabeb41c7447ba716 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 4 Dec 2023 14:47:11 -0500 Subject: [PATCH 3/3] refactor: use codeBlock ref --- src/components/global/Playground/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index acaefb1509b..1ef1dba4489 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -563,9 +563,7 @@ export default function Playground({ * explicitly check for when the code is empty to use this workaround. */ const el = document.createElement('div'); - el.innerHTML = hostRef.current!.querySelector( - `#${getCodeSnippetId(usageTarget, fileName)} code` - ).innerHTML; + el.innerHTML = codeBlock.innerHTML; code = el.outerText; } return {