@ably/ui 16.2.0-dev.b662786b → 16.2.0-dev.fccd868b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys})=>{const isFirstRender=useRef(true);const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return;let langName=langClass.substring(9);if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children]);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>{return languages.length===1&&languages[0]==="json"},[languages]);const[state,setState]=useState(()=>({activeSDKType:sdkTypes.size>0?sdkTypes.has("realtime")?"realtime":"rest":null,activeLanguage:null,selectedApiKey:apiKeys&&apiKeys.length>0?apiKeys[0]:"",ui:{isHovering:false}}));const{isCopied,copy}=useCopyToClipboard();const filteredLanguages=useMemo(()=>{if(!state.activeSDKType||!showSDKSelector){return languages}return languages.filter(lang=>lang.startsWith(`${state.activeSDKType}_`))},[state.activeSDKType,showSDKSelector,languages]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(state.activeSDKType){const prefixedLang=`${state.activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,state.activeSDKType,languages,filteredLanguages]);useEffect(()=>{setState(prevState=>({...prevState,activeLanguage:initialActiveLanguage}));if(onChange&&initialActiveLanguage&&!isFirstRender.current){onChange(initialActiveLanguage)}isFirstRender.current=false},[initialActiveLanguage,onChange]);const codeRef=useRef(null);const processedChildren=useMemo(()=>{if(!state.activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":state.activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return child;const langName=langClass.substring(9);const cleanLang=hasOnlyJsonSnippet?"json":originalLangMap.get(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:true})}return child})},[state.activeLanguage,childrenArray,originalLangMap,hasOnlyJsonSnippet]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!state.activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===state.activeLanguage})},[state.activeLanguage,childrenArray,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!state.activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===state.activeLanguage){return codeElement.textContent||""}}return null},[state.activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(state.selectedApiKey)){setState(prev=>({...prev,selectedApiKey:apiKeys[0]}))}},[apiKeys,state.selectedApiKey]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setState(prev=>({...prev,activeSDKType:type,activeLanguage:nextLang}));if(nextLang&&onChange)onChange(nextLang)},[languages,onChange]);const handleLanguageChange=useCallback(language=>{setState(prev=>({...prev,activeLanguage:language}));if(onChange){onChange(language)}},[onChange]);const handleMouseEnter=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:true}}))},[]);const handleMouseLeave=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:false}}))},[]);const handleApiKeyChange=useCallback(apiKey=>{setState(prev=>({...prev,selectedApiKey:apiKey}))},[]);const getDisplayLanguageInfo=useCallback(lang=>{if(!lang)return null;const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang)},[originalLangMap]);const activeLanguageInfo=useMemo(()=>getDisplayLanguageInfo(state.activeLanguage),[getDisplayLanguageInfo,state.activeLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).label},[originalLangMap]);const getLanguageIcon=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).icon},[originalLangMap]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=()=>{if(!state.activeLanguage){return null}if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null};if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg pt-12")},React.createElement("div",{className:"flex gap-12 justify-start"},React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:state.activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),React.createElement(TooltipButton,{tooltip:"REST SDK",active:state.activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:state.activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12",headerRow?"":"rounded-t-lg")},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onFocus:handleMouseEnter,onBlur:handleMouseLeave,tabIndex:0},renderContent(),state.ui.isHovering&&state.activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:state.selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
1
+ import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys})=>{const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return;let langName=langClass.substring(9);if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children]);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>{return languages.length===1&&languages[0]==="json"},[languages]);const[state,setState]=useState(()=>({activeSDKType:sdkTypes.size>0?sdkTypes.has("realtime")?"realtime":"rest":null,activeLanguage:null,selectedApiKey:apiKeys&&apiKeys.length>0?apiKeys[0]:"",ui:{isHovering:false}}));const{isCopied,copy}=useCopyToClipboard();const filteredLanguages=useMemo(()=>{if(!state.activeSDKType||!showSDKSelector){return languages}return languages.filter(lang=>lang.startsWith(`${state.activeSDKType}_`))},[state.activeSDKType,showSDKSelector,languages]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(state.activeSDKType){const prefixedLang=`${state.activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,state.activeSDKType,languages,filteredLanguages]);useEffect(()=>{setState(prevState=>({...prevState,activeLanguage:initialActiveLanguage}))},[initialActiveLanguage]);const codeRef=useRef(null);const processedChildren=useMemo(()=>{if(!state.activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":state.activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return child;const langName=langClass.substring(9);const cleanLang=hasOnlyJsonSnippet?"json":originalLangMap.get(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:true})}return child})},[state.activeLanguage,childrenArray,originalLangMap,hasOnlyJsonSnippet]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!state.activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===state.activeLanguage})},[state.activeLanguage,childrenArray,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!state.activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===state.activeLanguage){return codeElement.textContent||""}}return null},[state.activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(state.selectedApiKey)){setState(prev=>({...prev,selectedApiKey:apiKeys[0]}))}},[apiKeys,state.selectedApiKey]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setState(prev=>({...prev,activeSDKType:type,activeLanguage:nextLang}))},[languages]);const handleLanguageChange=useCallback(language=>{setState(prev=>({...prev,activeLanguage:language}));if(onChange){const cleanLang=originalLangMap.get(language)||language;onChange(cleanLang)}},[onChange,originalLangMap]);const handleMouseEnter=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:true}}))},[]);const handleMouseLeave=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:false}}))},[]);const handleApiKeyChange=useCallback(apiKey=>{setState(prev=>({...prev,selectedApiKey:apiKey}))},[]);const getDisplayLanguageInfo=useCallback(lang=>{if(!lang)return null;const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang)},[originalLangMap]);const activeLanguageInfo=useMemo(()=>getDisplayLanguageInfo(state.activeLanguage),[getDisplayLanguageInfo,state.activeLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).label},[originalLangMap]);const getLanguageIcon=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).icon},[originalLangMap]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=()=>{if(!state.activeLanguage){return null}if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null};if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:state.activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:state.activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:state.activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12",headerRow?"":"rounded-t-lg")},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onFocus:handleMouseEnter,onBlur:handleMouseLeave,tabIndex:0},renderContent(),state.ui.isHovering&&state.activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:state.selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
2
2
  //# sourceMappingURL=CodeSnippet.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\n// Interface for component state management\ninterface CodeSnippetState {\n activeSDKType: SDKType;\n activeLanguage: string | null;\n selectedApiKey: string;\n ui: {\n isHovering: boolean;\n };\n}\n\nexport interface CodeSnippetProps {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: string[];\n}\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n}) => {\n // Track initial render to prevent onChange from firing on mount\n const isFirstRender = useRef(true);\n\n // Extract languages and SDK types from children\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single shell command\n const isSingleShellCommand =\n childrenArray.length === 1 &&\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(\n \"language-shell\",\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return;\n\n // Extract language from className (format: \"language-javascript\", \"language-typescript\", etc.)\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n let langName = langClass.substring(9);\n\n // Look for SDK prefixes in the language name itself (e.g., \"language-realtime_javascript\")\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else {\n // Regular language without SDK prefix\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n };\n }, [children]);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(() => {\n return languages.length === 1 && languages[0] === \"json\";\n }, [languages]);\n\n // Consolidated state management\n const [state, setState] = useState<CodeSnippetState>(() => ({\n activeSDKType:\n sdkTypes.size > 0\n ? sdkTypes.has(\"realtime\")\n ? \"realtime\"\n : \"rest\"\n : null,\n activeLanguage: null, // Will be set after filteredLanguages are calculated\n selectedApiKey: apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n ui: {\n isHovering: false,\n },\n }));\n\n // Use the copyToClipboard hook\n const { isCopied, copy } = useCopyToClipboard();\n\n // Get languages filtered by active SDK type - optimized with primitive dependencies\n const filteredLanguages = useMemo(() => {\n if (!state.activeSDKType || !showSDKSelector) {\n return languages;\n }\n return languages.filter((lang) =>\n lang.startsWith(`${state.activeSDKType}_`),\n );\n }, [state.activeSDKType, showSDKSelector, languages]);\n\n // Determine the initial active language - simplified dependencies\n const initialActiveLanguage = useMemo((): string | null => {\n // If no lang prop specified, default to first available filtered language\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try to find the language with SDK type prefix if applicable\n if (state.activeSDKType) {\n const prefixedLang = `${state.activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try to find the language directly\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available in snippets\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available language\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, state.activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setState((prevState) => ({\n ...prevState,\n activeLanguage: initialActiveLanguage,\n }));\n\n // Call onChange if necessary, but not on the first render\n if (onChange && initialActiveLanguage && !isFirstRender.current) {\n onChange(initialActiveLanguage);\n }\n\n // Set isFirstRender to false after the first render\n isFirstRender.current = false;\n }, [initialActiveLanguage, onChange]);\n\n const codeRef = useRef<HTMLDivElement>(null);\n\n // Filter and process children for the active language - optimized with specific dependencies\n const processedChildren = useMemo(() => {\n if (!state.activeLanguage) return [];\n\n // Special case for JSON-only snippets\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : state.activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, only show JSON\n // Otherwise, match exactly with active language\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return child;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : originalLangMap.get(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // If child content is a string or can be converted to a string\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={String(codeContent)}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n showLines\n />\n );\n }\n\n // Otherwise, return the original content\n return child;\n });\n }, [\n state.activeLanguage,\n childrenArray,\n originalLangMap,\n hasOnlyJsonSnippet,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!state.activeLanguage) return false;\n\n // If we have only JSON snippet, consider it available for any language\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // Match exactly with active language\n return langName === state.activeLanguage;\n });\n }, [state.activeLanguage, childrenArray, hasOnlyJsonSnippet]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (\n !state.activeLanguage ||\n !hasSnippetForActiveLanguage ||\n !codeRef.current\n )\n return null;\n\n // Get the text content from the matching code element\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, look for JSON, otherwise match active language\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === state.activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [state.activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (\n apiKeys &&\n apiKeys.length > 0 &&\n !apiKeys.includes(state.selectedApiKey)\n ) {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKeys[0],\n }));\n }\n }, [apiKeys, state.selectedApiKey]);\n\n // Event handlers - memoized with empty dependencies as they only use setState\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick the first language that matches the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n\n setState((prev) => ({\n ...prev,\n activeSDKType: type,\n activeLanguage: nextLang,\n }));\n if (nextLang && onChange) onChange(nextLang);\n },\n [languages, onChange],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setState((prev) => ({\n ...prev,\n activeLanguage: language,\n }));\n\n // Always call onChange for explicit user changes\n if (onChange) {\n onChange(language);\n }\n },\n [onChange],\n );\n\n const handleMouseEnter = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: true },\n }));\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: false },\n }));\n }, []);\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKey,\n }));\n }, []);\n\n // Get language info for the active language - optimized to only depend on map and activeLanguage\n const getDisplayLanguageInfo = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang);\n },\n [originalLangMap],\n );\n\n const activeLanguageInfo = useMemo(\n () => getDisplayLanguageInfo(state.activeLanguage),\n [getDisplayLanguageInfo, state.activeLanguage],\n );\n\n // Memoize language related function to avoid recreation on every render\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).label;\n },\n [originalLangMap],\n );\n\n // Memoize icon function to avoid recreation on every render\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).icon;\n },\n [originalLangMap],\n );\n\n // Optimize no-snippet message by memoizing it\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n\n // Determine if we should show the full selector or simplified view\n const showFullSelector = filteredLanguages.length > 1;\n\n // Simplified content render logic\n const renderContent = () => {\n // No active language case\n if (!state.activeLanguage) {\n return null;\n }\n\n // Has snippet for active language (including JSON-only case)\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n // No snippet but language info available\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n };\n\n // Render special case for shell commands\n if (isSingleShellCommand) {\n const shellChild = childrenArray[0];\n if (\n isValidElement(shellChild) &&\n isValidElement(shellChild.props.children)\n ) {\n const codeElement = shellChild.props.children;\n const codeContent = codeElement.props.children;\n return (\n <ShellCommandView content={String(codeContent)} className={className} />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-6\">\n <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-[48px]\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n headerRow ? \"\" : \"rounded-t-lg pt-12\",\n )}\n >\n <div className=\"flex gap-12 justify-start\">\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={state.activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n\n <TooltipButton\n tooltip=\"REST SDK\"\n active={state.activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={state.activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-8\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleMouseEnter}\n onBlur={handleMouseLeave}\n tabIndex={0}\n >\n {renderContent()}\n\n {/* Copy button - simplified conditional */}\n {state.ui.isHovering &&\n state.activeLanguage &&\n hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={state.selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","isFirstRender","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","props","includes","forEach","child","preElement","codeElement","classNames","split","langClass","find","cls","startsWith","langName","substring","baseLanguage","add","set","push","showSDKSelector","size","hasOnlyJsonSnippet","state","setState","activeSDKType","has","activeLanguage","selectedApiKey","ui","isHovering","isCopied","copy","filteredLanguages","filter","initialActiveLanguage","prefixedLang","label","prevState","current","codeRef","processedChildren","targetLanguage","map","codeContent","cleanLang","get","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","allPreElements","querySelectorAll","Array","from","querySelector","textContent","prev","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleMouseEnter","handleMouseLeave","handleApiKeyChange","apiKey","getDisplayLanguageInfo","activeLanguageInfo","getLanguageDisplayName","getLanguageIcon","icon","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\n// Interface for component state management\ninterface CodeSnippetState {\n activeSDKType: SDKType;\n activeLanguage: string | null;\n selectedApiKey: string;\n ui: {\n isHovering: boolean;\n };\n}\n\nexport interface CodeSnippetProps {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: string[];\n}\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n}) => {\n // Extract languages and SDK types from children\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single shell command\n const isSingleShellCommand =\n childrenArray.length === 1 &&\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(\n \"language-shell\",\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return;\n\n // Extract language from className (format: \"language-javascript\", \"language-typescript\", etc.)\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n let langName = langClass.substring(9);\n\n // Look for SDK prefixes in the language name itself (e.g., \"language-realtime_javascript\")\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else {\n // Regular language without SDK prefix\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n };\n }, [children]);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(() => {\n return languages.length === 1 && languages[0] === \"json\";\n }, [languages]);\n\n // Consolidated state management\n const [state, setState] = useState<CodeSnippetState>(() => ({\n activeSDKType:\n sdkTypes.size > 0\n ? sdkTypes.has(\"realtime\")\n ? \"realtime\"\n : \"rest\"\n : null,\n activeLanguage: null, // Will be set after filteredLanguages are calculated\n selectedApiKey: apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n ui: {\n isHovering: false,\n },\n }));\n\n // Use the copyToClipboard hook\n const { isCopied, copy } = useCopyToClipboard();\n\n // Get languages filtered by active SDK type - optimized with primitive dependencies\n const filteredLanguages = useMemo(() => {\n if (!state.activeSDKType || !showSDKSelector) {\n return languages;\n }\n return languages.filter((lang) =>\n lang.startsWith(`${state.activeSDKType}_`),\n );\n }, [state.activeSDKType, showSDKSelector, languages]);\n\n // Determine the initial active language - simplified dependencies\n const initialActiveLanguage = useMemo((): string | null => {\n // If no lang prop specified, default to first available filtered language\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try to find the language with SDK type prefix if applicable\n if (state.activeSDKType) {\n const prefixedLang = `${state.activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try to find the language directly\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available in snippets\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available language\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, state.activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setState((prevState) => ({\n ...prevState,\n activeLanguage: initialActiveLanguage,\n }));\n }, [initialActiveLanguage]);\n\n const codeRef = useRef<HTMLDivElement>(null);\n\n // Filter and process children for the active language - optimized with specific dependencies\n const processedChildren = useMemo(() => {\n if (!state.activeLanguage) return [];\n\n // Special case for JSON-only snippets\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : state.activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, only show JSON\n // Otherwise, match exactly with active language\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return child;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : originalLangMap.get(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // If child content is a string or can be converted to a string\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={String(codeContent)}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n showLines\n />\n );\n }\n\n // Otherwise, return the original content\n return child;\n });\n }, [\n state.activeLanguage,\n childrenArray,\n originalLangMap,\n hasOnlyJsonSnippet,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!state.activeLanguage) return false;\n\n // If we have only JSON snippet, consider it available for any language\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // Match exactly with active language\n return langName === state.activeLanguage;\n });\n }, [state.activeLanguage, childrenArray, hasOnlyJsonSnippet]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (\n !state.activeLanguage ||\n !hasSnippetForActiveLanguage ||\n !codeRef.current\n )\n return null;\n\n // Get the text content from the matching code element\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, look for JSON, otherwise match active language\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === state.activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [state.activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (\n apiKeys &&\n apiKeys.length > 0 &&\n !apiKeys.includes(state.selectedApiKey)\n ) {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKeys[0],\n }));\n }\n }, [apiKeys, state.selectedApiKey]);\n\n // Event handlers - memoized with empty dependencies as they only use setState\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick the first language that matches the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n\n setState((prev) => ({\n ...prev,\n activeSDKType: type,\n activeLanguage: nextLang,\n }));\n\n // Don't call onChange when only the SDK type changes\n // The initialActiveLanguage useEffect will handle calling onChange\n // if needed when the active language changes as a result\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setState((prev) => ({\n ...prev,\n activeLanguage: language,\n }));\n\n // Always call onChange for explicit user changes\n // But pass the clean language name without SDK prefix\n if (onChange) {\n const cleanLang = originalLangMap.get(language) || language;\n onChange(cleanLang);\n }\n },\n [onChange, originalLangMap],\n );\n\n const handleMouseEnter = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: true },\n }));\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: false },\n }));\n }, []);\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKey,\n }));\n }, []);\n\n // Get language info for the active language - optimized to only depend on map and activeLanguage\n const getDisplayLanguageInfo = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang);\n },\n [originalLangMap],\n );\n\n const activeLanguageInfo = useMemo(\n () => getDisplayLanguageInfo(state.activeLanguage),\n [getDisplayLanguageInfo, state.activeLanguage],\n );\n\n // Memoize language related function to avoid recreation on every render\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).label;\n },\n [originalLangMap],\n );\n\n // Memoize icon function to avoid recreation on every render\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).icon;\n },\n [originalLangMap],\n );\n\n // Optimize no-snippet message by memoizing it\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n\n // Determine if we should show the full selector or simplified view\n const showFullSelector = filteredLanguages.length > 1;\n\n // Simplified content render logic\n const renderContent = () => {\n // No active language case\n if (!state.activeLanguage) {\n return null;\n }\n\n // Has snippet for active language (including JSON-only case)\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n // No snippet but language info available\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n };\n\n // Render special case for shell commands\n if (isSingleShellCommand) {\n const shellChild = childrenArray[0];\n if (\n isValidElement(shellChild) &&\n isValidElement(shellChild.props.children)\n ) {\n const codeElement = shellChild.props.children;\n const codeContent = codeElement.props.children;\n return (\n <ShellCommandView content={String(codeContent)} className={className} />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-6\">\n <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-[48px]\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-12 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={state.activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={state.activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={state.activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-8\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleMouseEnter}\n onBlur={handleMouseLeave}\n tabIndex={0}\n >\n {renderContent()}\n\n {/* Copy button - simplified conditional */}\n {state.ui.isHovering &&\n state.activeLanguage &&\n hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={state.selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","props","includes","forEach","child","preElement","codeElement","classNames","split","langClass","find","cls","startsWith","langName","substring","baseLanguage","add","set","push","showSDKSelector","size","hasOnlyJsonSnippet","state","setState","activeSDKType","has","activeLanguage","selectedApiKey","ui","isHovering","isCopied","copy","filteredLanguages","filter","initialActiveLanguage","prefixedLang","label","prevState","codeRef","processedChildren","targetLanguage","map","codeContent","cleanLang","get","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","prev","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleMouseEnter","handleMouseLeave","handleApiKeyChange","apiKey","getDisplayLanguageInfo","activeLanguageInfo","getLanguageDisplayName","getLanguageIcon","icon","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
1
+ {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GAuCa,MAvC0B,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "16.2.0-dev.b662786b",
3
+ "version": "16.2.0-dev.fccd868b",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",