From a250d9b184e49e2b761d2aec478d05aa88f45911 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 4 Nov 2021 08:12:01 -0400
Subject: [PATCH] support react imports in examples; set base path

---
 docs/assets/plugins/code-block/code-block.js | 21 ++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js
index 1f2f889d29..34afb5e97e 100644
--- a/docs/assets/plugins/code-block/code-block.js
+++ b/docs/assets/plugins/code-block/code-block.js
@@ -1,5 +1,5 @@
 (() => {
-  const version = sessionStorage.getItem('sl-version');
+  const reactVersion = '17.0.2';
   let flavor = localStorage.getItem('flavor') || 'html'; // "html" or "react"
   let count = 1;
 
@@ -8,7 +8,14 @@
   }
 
   function convertModuleLinks(html) {
-    return html.replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${version}`);
+    const version = sessionStorage.getItem('sl-version');
+
+    html = html
+      .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${version}`)
+      .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`)
+      .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`);
+
+    return html;
   }
 
   function getAdjacentExample(name, pre) {
@@ -263,6 +270,7 @@
   // Open in CodePen
   document.addEventListener('click', event => {
     const button = event.target.closest('button');
+    const version = sessionStorage.getItem('sl-version');
 
     if (button?.classList.contains('code-block__button--codepen')) {
       const codeBlock = button.closest('.code-block');
@@ -292,8 +300,13 @@
       if (isReact) {
         htmlTemplate = '<div id="root"></div>';
         jsTemplate =
-          `import React, { useRef } from 'https://cdn.skypack.dev/react@17.0.2';\n` +
-          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.2';\n` +
+          `import React from 'https://cdn.skypack.dev/react@${reactVersion}';\n` +
+          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` +
+          `import { setBasePath } from 'https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/utilities/base-path';\n` +
+          '\n' +
+          `// Set the base path for Shoelace assets\n` +
+          `setBasePath('https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/')\n` +
+          '\n' +
           convertModuleLinks(reactExample) +
           '\n' +
           '\n' +