fix: await loadPage

dylandepass · Jan 31, 2023 · 66e8978 · 66e8978
1 parent 5963077
commit 66e8978
Show file tree

Hide file tree

Showing 5 changed files with 418 additions and 375 deletions.
diff --git a/.storybook/scripts.js b/.storybook/scripts.js
@@ -95,7 +95,7 @@ async function loadLazy(doc) {
   const element = hash ? main.querySelector(hash) : false;
   if (hash && element) element.scrollIntoView();
 
-  if(!window.STORYBOOK_ENV) {
+  if(!window.__STORYBOOK_PREVIEW__) {
     loadHeader(doc.querySelector('header'));
     loadFooter(doc.querySelector('footer'));
   }
@@ -124,6 +124,6 @@ export async function loadPage() {
   loadDelayed();
 }
 
-if(!window.STORYBOOK_ENV) {
+if(!window.__STORYBOOK_PREVIEW__) {
   loadPage();
 }
diff --git a/README.md b/README.md
@@ -145,15 +145,15 @@ Add a link to `styles.css`
         loadDelayed();
       }
 
-      if(!window.STORYBOOK_ENV) {
+      if(!window.__STORYBOOK_PREVIEW__) {
         loadPage();
       }
     ```
 
     Optionally, you may also want to wrap `loadHeader` and `loadFooter` in `loadLazy` in a check as well to prevent them from attemping to load in storybook.
 
     ```js
-      if(!window.STORYBOOK_ENV) {
+      if(!window.__STORYBOOK_PREVIEW__) {
         loadHeader(doc.querySelector('header'));
         loadFooter(doc.querySelector('footer'));
       }

diff --git a/src/template.ts b/src/template.ts
@@ -20,7 +20,7 @@
  * @param decorate The decorate method for the block used in the storybook
  * @returns A fully decorated element for rendering in storybook
  */
-function prepare(loadPage: any, args: any, parameters: any, main: any, content: HTMLElement | Element, decorate: any) {
+async function prepare(loadPage: any, args: any, parameters: any, main: any, content: HTMLElement | Element, decorate: any) {
   const { selector, index } = parameters;
   const { sectionClasses, blockClasses } = args;
   const section = document.createElement('div');
@@ -31,7 +31,7 @@ function prepare(loadPage: any, args: any, parameters: any, main: any, content:
 
   section.innerHTML = parameters.root ? node.parentNode.innerHTML : node.outerHTML;
 
-  loadPage();
+  await loadPage();
 
   if (sectionClasses) {
     if(Array.isArray(sectionClasses)) {
@@ -82,7 +82,7 @@ export function Template(Franklin: any, args: any, context: any, decorate: any)
   const { path, host } = parameters;
   if (args.content && args.updated) {
     // Wrap in promise so main in returned and overrides old version when decorator runs
-    Promise.resolve().then(() => {
+    Promise.resolve().then(async () => {
       const element = parser.parseFromString(args.content, 'text/html');
 
       try {
@@ -95,7 +95,7 @@ export function Template(Franklin: any, args: any, context: any, decorate: any)
   } else {
     const url = `${host}${path}`;
     fetch(url).then(res => {
-      res.text().then(htmlText => {
+      res.text().then(async (htmlText) => {
         const regex = new RegExp('./media', 'g');
         htmlText = htmlText.replace(regex, `${host}/media`);
         const element = parser.parseFromString(htmlText, 'text/html');

diff --git a/stories/cards.stories.js b/stories/cards.stories.js
@@ -3,15 +3,14 @@ import { Template } from '../src/template';
 import decorate from './cards.js';
 import style from './cards.css';
 
-export const Three = (args, context) => Template(loadPage, args, context, decorate);
-
-Three.storyName = 'Three Cards';
-
-Three.parameters = {
-  path: '/storybook/cards.plain.html',
-  selector: '.cards',
-  index: 0
-}
+export const Three = {
+  parameters: {
+    path: '/storybook/cards.plain.html',
+    selector: '.cards',
+    index: 0
+  },
+  render: (args, context) => Template(loadPage, args, context, decorate),
+};
 
 /**
  * Default Config