Reduce page size (#1258)

* Efficient docstring handling

Gather docstrings at the server level and only forward docstrings needed for the specific page.

* Remove SiS version

* Redirect old SiS paths to latest SiS version

* Move docstring to import at top of slug page

* Don't pipe versions list

* Don't recompute latest version

* Rename static load to slug

* Don't pipe version list

* Delete suggest edit

* Fix version order

* Clean up version context

* Remove debug line

* Unversioned -> Versioned page fix

* Cleanup

* Renaming typo

* Review edits

* Use replace to prevent cluttering browser history

* Prevent page blip from reroute

Author: sfc-gh-dmatthews

components/blocks/autofunction.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useRef } from "react";
-import reverse from "lodash/reverse";
 import classNames from "classnames";
 import Table from "./table";
 import { H2, H3 } from "./headers";
@@ -14,32 +13,36 @@ import "prismjs/plugins/line-highlight/prism-line-highlight.css";
 import "prismjs/plugins/toolbar/prism-toolbar";
 import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard";
 import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace";
+import getConfig from "next/config";
+const { publicRuntimeConfig } = getConfig();
 
 import styles from "./autofunction.module.css";
-import { name } from "file-loader";
+import { looksLikeVersionAndPlatformString } from "../../context/VersionContext";
+
+const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION;
+const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION;
+const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST;
 
 const cleanHref = (name) => {
   return String(name).replace(/\./g, "").replace(/\s+/g, "-");
 };
 
 const Autofunction = ({
   version,
-  versions,
   streamlitFunction,
-  streamlit,
+  docstrings,
   slug,
   hideHeader,
   deprecated,
   deprecatedText,
   oldStreamlitFunction,
+  goToLatest,
 }) => {
   const blockRef = useRef();
   const router = useRouter();
-  const maxVersion = versions[versions.length - 1];
   const [isHighlighted, setIsHighlighted] = useState(false);
-  const [currentVersion, setCurrentVersion] = useState(
-    version ? version : versions[versions.length - 1],
-  );
+  const currentNumericVersion =
+    version == DEFAULT_VERSION ? LATEST_VERSION : version;
 
   useEffect(() => {
     highlightWithPrism();
@@ -97,15 +100,9 @@ const Autofunction = ({
     setIsHighlighted(true);
   };
 
-  const VersionSelector = ({
-    versionList,
-    currentVersion,
-    handleSelectVersion,
-  }) => {
-    const isSiS = currentVersion.startsWith("SiS") ? true : false;
-    const selectClass = isSiS
-      ? "version-select sis-version"
-      : currentVersion !== versionList[0]
+  const VersionSelector = ({ currentNumericVersion, handleSelectVersion }) => {
+    const selectClass =
+      currentNumericVersion != LATEST_VERSION
         ? "version-select old-version"
         : "version-select";
 
@@ -114,17 +111,13 @@ const Autofunction = ({
         <label>
           <span className="sr-only">Streamlit Version</span>
           <select
-            value={currentVersion}
+            value={currentNumericVersion}
             onChange={handleSelectVersion}
             className={styles.Select}
           >
-            {versionList.map((version, index) => (
+            {VERSIONS_LIST.map((version, index) => (
               <option value={version} key={version}>
-                {version == "SiS"
-                  ? "Streamlit in Snowflake"
-                  : version.startsWith("SiS.")
-                    ? version.replace("SiS.", "Streamlit in Snowflake ")
-                    : "Version " + version}
+                {"Version " + version}
               </option>
             ))}
           </select>
@@ -135,20 +128,17 @@ const Autofunction = ({
 
   const handleSelectVersion = (event) => {
     const functionObject =
-      streamlit[streamlitFunction] ?? streamlit[oldStreamlitFunction];
+      docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction];
     const slicedSlug = slug.slice();
 
-    if (event.target.value !== currentVersion) {
-      setCurrentVersion(event.target.value);
-      if (event.target.value !== maxVersion) {
-        let isnum = /^[\d\.]+$/.test(slicedSlug[0]);
-        let isSiS = /^SiS[\d\.]*$/.test(slicedSlug[0]);
-        if (isnum || isSiS) {
-          slicedSlug[0] = event.target.value;
-        } else {
-          slicedSlug.unshift(event.target.value);
-        }
-        slug.unshift(event.target.value);
+    if (event.target.value !== currentNumericVersion) {
+      if (looksLikeVersionAndPlatformString(slicedSlug[0])) {
+        slicedSlug.shift();
+      }
+      if (event.target.value !== LATEST_VERSION) {
+        slicedSlug.unshift(event.target.value);
+      } else {
+        goToLatest();
       }
     }
 
@@ -163,7 +153,6 @@ const Autofunction = ({
   const footers = [];
   const args = [];
   const returns = [];
-  const versionList = reverse(versions.slice());
   let functionObject;
   let functionDescription;
   let header;
@@ -174,9 +163,9 @@ const Autofunction = ({
   let methods = [];
   let properties = [];
 
-  if (streamlitFunction in streamlit || oldStreamlitFunction in streamlit) {
+  if (streamlitFunction in docstrings || oldStreamlitFunction in docstrings) {
     functionObject =
-      streamlit[streamlitFunction] ?? streamlit[oldStreamlitFunction];
+      docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction];
     isClass = functionObject.is_class;
     isAttributeDict = functionObject.is_attribute_dict ?? false;
     if (
@@ -208,20 +197,15 @@ const Autofunction = ({
             {streamlitFunction.replace("streamlit", "st")}
           </H2>
           <VersionSelector
-            versionList={versionList}
-            currentVersion={currentVersion}
+            currentNumericVersion={currentNumericVersion}
             handleSelectVersion={handleSelectVersion}
           />
         </div>
         <Warning>
-          {version && version.startsWith("SiS") ? (
-            <p>This method does not exist in Streamlit in Snowflake.</p>
-          ) : (
-            <p>
-              This method did not exist in version <code>{currentVersion}</code>{" "}
-              of Streamlit.
-            </p>
-          )}
+          <p>
+            This method did not exist in version{" "}
+            <code>{currentNumericVersion}</code> of Streamlit.
+          </p>
         </Warning>
       </div>
     );
@@ -276,8 +260,7 @@ const Autofunction = ({
         >
           {headerTitle}
           <VersionSelector
-            versionList={versionList}
-            currentVersion={currentVersion}
+            currentNumericVersion={currentNumericVersion}
             handleSelectVersion={handleSelectVersion}
           />
         </div>

components/navigation/navChild.js

@@ -2,18 +2,12 @@ import React, { useState } from "react";
 import Link from "next/link";
 import classNames from "classnames";
 
-import useVersion from "../../lib/useVersion.js";
-
 import styles from "./navChild.module.css";
+import { looksLikeVersionAndPlatformString } from "../../context/VersionContext";
 
 const NavChild = ({ slug, page, color, className }) => {
   const [manualState, setManualState] = useState(null);
-  const version = useVersion();
-
-  const isNum = /^[\d\.]+$/.test(slug[0]);
-  const isSiS = /^SiS[\d\.]*$/.test(slug[0]);
-
-  if (isNum || isSiS) {
+  if (looksLikeVersionAndPlatformString(slug[0])) {
     slug.shift();
   }
 
@@ -89,13 +83,6 @@ const NavChild = ({ slug, page, color, className }) => {
     icon = <i className={styles.CrossLinkedIcon}>link</i>;
   }
 
-  if (page.isVersioned && version && (isRelativePath || isAbsolutePath)) {
-    // We need to version this URL, check if the URL has a version for this version
-    const newSlug = url.split("/");
-    newSlug[0] = version;
-    url = `/${newSlug.join("/")}`;
-  }
-
   if (isDivider && page.name == "---") {
     navElement = (
       <div className={styles.LinkContainer}>

components/utilities/breadCrumbs.js

@@ -3,6 +3,7 @@ import { breadcrumbsForSlug } from "../../lib/utils.js";
 import Link from "next/link";
 
 import styles from "./breadCrumbs.module.css";
+import { looksLikeVersionAndPlatformString } from "../../context/VersionContext.js";
 
 const BreadCrumbs = ({ slug, menu }) => {
   const formatedTitle = (title) => {
@@ -43,9 +44,8 @@ const BreadCrumbs = ({ slug, menu }) => {
     title: "Home",
   });
 
-  const isnum = /^[\d\.]+$/.test(slug[0]);
-  const isSiS = /^SiS[\d\.]*$/.test(slug[0]);
-  if (isnum || isSiS) {
+  // TODO: This may be unnecessary
+  if (looksLikeVersionAndPlatformString(slug[0])) {
     paths = slug.slice(1).join("/");
     breadcrumbs.push({
       link: "#",

components/utilities/floatingNav.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { withRouter } from "next/router";
 
 import styles from "./floatingNav.module.css";
@@ -9,8 +9,8 @@ const useHeadingsData = (slug) => {
   useEffect(() => {
     const headingElements = Array.from(
       document.querySelectorAll(
-        "article.leaf-page h1, article.leaf-page h2, article.leaf-page h3, article.leaf-page h4, article.leaf-page h5, article.leaf-page h6"
-      )
+        "article.leaf-page h1, article.leaf-page h2, article.leaf-page h3, article.leaf-page h4, article.leaf-page h5, article.leaf-page h6",
+      ),
     );
 
     // If first heading is H1, remove since we don't want to show the main title on the TOC
@@ -69,8 +69,8 @@ const useIntersectionObserver = (slug) => {
           "article.leaf-page h4 a:first-of-type",
           "article.leaf-page h5 a:first-of-type",
           "article.leaf-page h6 a:first-of-type",
-        ].join(",")
-      )
+        ].join(","),
+      ),
     );
 
     // Function that will be called when the links enter/leave the screen.
@@ -147,7 +147,7 @@ const Headings = ({ headings, activeId }) => {
         heading.hierarchy = index;
       }
       return heading;
-    })
+    }),
   );
 
   return (