### GitHub Repo Browser Interface (HTML/JavaScript) Source: https://context7.com/esri/arcgis-experience-builder-hosted-sample-widgets/llms.txt An interactive HTML and JavaScript application that uses the GitHub API to browse the contents of a repository. It displays directories and files, allowing users to navigate the structure and link to file contents. Dependencies include the browser's fetch API. ```html My GitHub Repo Browser

Repo Browser

``` -------------------------------- ### Dynamic Module Import Widget in React Source: https://context7.com/esri/arcgis-experience-builder-hosted-sample-widgets/llms.txt Demonstrates runtime dynamic module loading using JavaScript's native import(). This reduces initial bundle size and improves performance by loading functionality on demand. It expects a module with a function 'f1'. ```tsx /** @jsx jsx */ import { React, type AllWidgetProps, jsx } from 'jimu-core' export default function Widget (props: AllWidgetProps) { const [ma, setMa] = React.useState(null) const [err, setErr] = React.useState(null) React.useEffect(() => { import('./module-a').then(m => { setMa(m) }).catch(e => { setErr(e) }) }, []) return (
{ma &&
Module loaded, {ma.f1()}
} {err &&
Load dynamic module error. {err.message}
}
) } // module-a.ts export function f1 () { return 'In f1.' } ``` -------------------------------- ### CSS for GitHub Repo Browser Source: https://github.com/esri/arcgis-experience-builder-hosted-sample-widgets/blob/main/index.html Basic CSS styling for the GitHub Repo Browser widget. It defines styles for folder and file list items, including custom icons using pseudo-elements for folders and files. It also sets up basic list styling and padding for the navigation list. ```css .folder, .file { cursor: pointer; } .folder::before { content: "📁 "; } .file::before { content: "📄 "; } ul { list-style-type: none; padding-left: 20px; } ``` -------------------------------- ### Dynamic Shared Code Entry Widget in React Source: https://context7.com/esri/arcgis-experience-builder-hosted-sample-widgets/llms.txt Uses the jimu-core moduleLoader API to dynamically load shared code modules at runtime. This combines code sharing with lazy loading for optimal performance. It loads 'widgets/shared-code/entry1' and calls 'sampleFunction1'. ```tsx import { React, type AllWidgetProps, moduleLoader } from 'jimu-core' const Widget = (props: AllWidgetProps) => { const [module, setModule] = React.useState(null) React.useEffect(() => { moduleLoader.loadModule('widgets/shared-code/entry1', props.context.folderUrl).then((module) => { console.log('Module loaded:', module) setModule(module) }) }, []) return (

A widget loading a shared entry dynamically

The shared code: { module?.sampleFunction1() }

) } export default Widget ``` -------------------------------- ### Shared Code Entry Widget in React Source: https://context7.com/esri/arcgis-experience-builder-hosted-sample-widgets/llms.txt Demonstrates static shared code import patterns where multiple widgets can share common functionality. It imports and uses 'sampleFunction1' from a centralized entry point ('widgets/shared-code/entry1'). ```tsx import { React, type AllWidgetProps } from 'jimu-core' import { sampleFunction1 } from 'widgets/shared-code/entry1' const Widget = (props: AllWidgetProps<{ }>) => { return (

A widget using a shared entry

The shared code: { sampleFunction1() }

) } export default Widget // Shared code returns: 'sample function1' ``` -------------------------------- ### GitHub Repo Browser Widget (JavaScript) Source: https://github.com/esri/arcgis-experience-builder-hosted-sample-widgets/blob/main/index.html The core JavaScript code for the GitHub Repo Browser widget. It defines functions to fetch repository contents from the GitHub API, render these contents as a list of files and folders, handle directory navigation, update breadcrumbs, and manage the browser's URL to reflect the current path. It also includes event listeners for initial load and URL changes. ```javascript // GitHub username and repo name const username = 'ArcGIS'; const repo = 'arcgis-experience-builder-hosted-sample-widgets'; // Function to fetch contents of a directory async function fetchContents(path = '') { const url = `https://api.github.com/repos/${username}/${repo}/contents/${path}`; const response = await fetch(url); const data = await response.json(); return data; } // Function to render files and folders function renderContents(contents, path = '') { const fileList = document.getElementById('file-list'); fileList.innerHTML = ''; // Clear previous contents contents.forEach(item => { const listItem = document.createElement('li'); if (item.type === 'dir') { listItem.className = 'folder'; listItem.textContent = item.name; listItem.addEventListener('click', () => { updateBreadcrumb(path, item.name); loadDirectory(item.path); updateURL(item.path); }); } else if (item.type === 'file') { listItem.className = 'file'; const link = document.createElement('a'); link.href = `/${repo}/${item.path}`; link.textContent = item.name; listItem.appendChild(link); } fileList.appendChild(listItem); }); } // Function to load a directory async function loadDirectory(path = '') { const contents = await fetchContents(path); renderContents(contents, path); } // Function to update breadcrumb function updateBreadcrumb(basePath, folderName) { const breadcrumb = document.getElementById('breadcrumb'); const pathSegments = basePath ? basePath.split('/') : []; if (folderName) pathSegments.push(folderName); breadcrumb.textContent = '📁 ' + pathSegments.join(' / '); } // Function to update URL function updateURL(path) { const newURL = `${window.location.origin}/${repo}/${path}`; history.pushState({ path }, '', newURL); } // Function to handle initial load and URL changes function handleRoute() { const currentPath = window.location.pathname.replace(`/${repo}/`, ''); // Extract path from URL if (currentPath && currentPath !== '/') { loadDirectory(currentPath); updateBreadcrumb('', currentPath); } else { loadDirectory(); updateBreadcrumb(); } } // Initialize by handling the current route handleRoute(); // Listen for URL changes (back/forward navigation) window.onpopstate = () => { handleRoute(); }; ``` -------------------------------- ### Widget Registration Manifest Configuration Source: https://context7.com/esri/arcgis-experience-builder-hosted-sample-widgets/llms.txt Defines metadata for a custom hosted widget to be registered in ArcGIS Enterprise. This JSON file specifies the widget's name, version, author, and other configuration properties for Experience Builder. ```json { "name": "dynamic-import", "label": "Dynamic Import", "type": "widget", "version": "1.17.0", "exbVersion": "1.17.0", "author": "Esri R&D Center Beijing", "description": "", "copyright": "", "license": "http://www.apache.org/licenses/LICENSE-2.0", "properties": { "hasSettingPage": false, "hasConfig": false }, "translatedLocales": ["en"], "defaultSize": { "width": 800, "height": 500 } } // Register widget using manifest URL: // https://esri.github.io/arcgis-experience-builder-hosted-sample-widgets/1.17/widgets/dynamic-import/manifest.json ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.