improve flavor logic

docs/assets/plugins/code-block/code-block.css

@@ -64,15 +64,12 @@
   display: none;
 }
 
-.code-block__source pre {
-  margin: 0;
+.code-block--expanded .code-block__source {
+  display: block;
 }
 
-.code-block--expanded.code-block--show-html .code-block__source--html,
-.code-block--expanded.code-block--show-react .code-block__source--react,
-/* When a code block is expanded but doesn't have a React example, force the HTML example to show */
-.code-block--expanded:not(.code-block--has-react) .code-block__source--html {
-  display: block;
+.code-block__source pre {
+  margin: 0;
 }
 
 .code-block__buttons {
@@ -220,3 +217,23 @@
   background-color: rgb(var(--sl-color-neutral-600));
   transform: scale(0.92);
 }
+
+/* We can apply data-flavor="html|react" to any element on the page to toggle it when the user's flavor changes */
+body.flavor-html [data-flavor]:not([data-flavor='html']) {
+  display: none;
+}
+
+body.flavor-react [data-flavor]:not([data-flavor='react']) {
+  display: none;
+}
+
+/*
+.code-block--expanded.code-block--show-html .code-block__source--html,
+.code-block--expanded.code-block--show-react .code-block__source--react,
+
+When a code block is expanded but doesn't have a React example, force the HTML example to show
+
+.code-block--expanded:not(.code-block--has-react) .code-block__source--html {
+  display: block;
+}
+*/

docs/assets/plugins/code-block/code-block.js

@@ -1,8 +1,11 @@
 (() => {
   const reactVersion = '17.0.2';
-  let flavor = localStorage.getItem('flavor') || 'html'; // "html" or "react"
+  let flavor = getFlavor();
   let count = 1;
 
+  // Sync flavor UI on page load
+  setFlavor(getFlavor());
+
   if (!window.$docsify) {
     throw new Error('Docsify must be loaded before installing this plugin.');
   }
@@ -45,6 +48,19 @@
     script.parentNode.replaceChild(newScript, script);
   }
 
+  function getFlavor() {
+    return localStorage.getItem('flavor') || 'html';
+  }
+
+  function setFlavor(newFlavor) {
+    flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
+    localStorage.setItem('flavor', flavor);
+
+    // Set the flavor class on the body
+    document.body.classList.toggle('flavor-html', flavor === 'html');
+    document.body.classList.toggle('flavor-react', flavor === 'react');
+  }
+
   function wrap(el, wrapper) {
     el.parentNode.insertBefore(wrapper, el);
     wrapper.appendChild(el);
@@ -114,7 +130,7 @@
           pre.setAttribute('aria-labelledby', toggleId);
 
           const codeBlock = `
-            <div class="code-block code-block--show-${flavor} ${hasReact ? 'code-block--has-react' : ''}">
+            <div class="code-block">
               <div class="code-block__preview">
                 ${code.textContent}
                 <div class="code-block__resizer">
@@ -122,14 +138,14 @@
                 </div>
               </div>
 
-              <div class="code-block__source code-block__source--html">
+              <div class="code-block__source code-block__source--html" ${hasReact ? 'data-flavor="html"' : ''}>
                 ${pre.outerHTML}
               </div>
 
               ${
                 hasReact
                   ? `
-                <div class="code-block__source code-block__source--react">
+                <div class="code-block__source code-block__source--react" data-flavor="react">
                   ${reactPre.outerHTML}
                 </div>
               `
@@ -220,18 +236,15 @@
     const codeBlock = button?.closest('.code-block');
 
     if (button?.classList.contains('code-block__button--html')) {
-      flavor = 'html';
+      setFlavor('html');
     } else if (button?.classList.contains('code-block__button--react')) {
-      flavor = 'react';
+      setFlavor('react');
     } else {
       return;
     }
 
-    localStorage.setItem('flavor', flavor);
-
+    // Update flavor buttons
     [...document.querySelectorAll('.code-block')].map(codeBlock => {
-      codeBlock.classList.toggle('code-block--show-html', flavor === 'html');
-      codeBlock.classList.toggle('code-block--show-react', flavor === 'react');
       codeBlock
         .querySelector('.code-block__button--html')
         ?.classList.toggle('code-block__button--selected', flavor === 'html');
@@ -306,7 +319,7 @@
           convertModuleLinks(reactExample) +
           '\n' +
           '\n' +
-          'ReactDOM.render(<App />, document.getElementById("root"));';
+          `ReactDOM.render(<App />, document.getElementById('root'));`;
       }
 
       // CSS templates

docs/assets/plugins/metadata/metadata.js

@@ -67,7 +67,8 @@
     table.innerHTML = `
       <thead>
         <tr>
-          <th>Name</th>
+          <th data-flavor="html">Name</th>
+          <th data-flavor="react">React Event</th>
           <th>Description</th>
           <th>Event Detail</th>
         </tr>
@@ -77,7 +78,8 @@
           .map(
             event => `
               <tr>
-                <td><code class="nowrap">${escapeHtml(event.name)}</code></td>
+                <td data-flavor="html"><code class="nowrap">${escapeHtml(event.name)}</code></td>
+                <td data-flavor="react"><code class="nowrap">${escapeHtml(event.reactName)}</code></td>
                 <td>${escapeHtml(event.description)}</td>
                 <td>${event.type?.text ? `<code>${escapeHtml(event.type?.text)}` : '-'}</td>
               </tr>
@@ -398,7 +400,7 @@
             ## Importing
 
             <sl-tab-group>
-            <sl-tab slot="nav" panel="cdn" active>CDN</sl-tab>
+            <sl-tab slot="nav" panel="cdn">CDN</sl-tab>
             <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
             <sl-tab slot="nav" panel="react">React</sl-tab>
 
@@ -443,8 +445,20 @@
 
         if (methods?.length) {
           result += `
-          ## Methods
-          ${createMethodsTable(methods)}
+            ## Methods
+
+            <p data-flavor="html">
+              Methods can be called by obtaining a reference to the element and calling
+              <code>el.methodName()</code>.
+            </p>
+
+
+            <p data-flavor="react">
+              Methods can be called by obtaining a <code>ref</code> to the element and calling
+              <code>ref.current.methodName()</code>.
+            </p>
+
+            ${createMethodsTable(methods)}
           `;
         }