rlayers/docs/8975.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[8975],{8975(n,s,a){a.d(s,{default:()=>t});const t='<span class="token comment">/* eslint-disable @typescript-eslint/ban-ts-comment */</span>\n<span class="token keyword">import</span> <span class="token string">"bootstrap/dist/css/bootstrap.min.css"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token string">"./example.css"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token string">"./ghp.css"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token constant">JSX</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> HashRouter <span class="token keyword">as</span> Router<span class="token punctuation">,</span> Routes<span class="token punctuation">,</span> Route<span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">VERSION</span> <span class="token keyword">as</span> <span class="token constant">OL_VERSION</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> semver <span class="token keyword">from</span> <span class="token string">"semver"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> examples <span class="token operator">=</span> <span class="token punctuation">{</span>\n  simple<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Simple map"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Simple"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  controls<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Custom controls"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Controls"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  overlays<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Simple overlay"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Overlays"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  extent<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Constrained view"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Extent"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  image<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Static image"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Image"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  state<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"External state"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"ExternalState"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  animation<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Animated icon"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"AnimatedOverlay"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  webgl<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"WebGL layers"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"WebGL"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  overview<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Overview"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Overview"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  popups<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Popups"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Popups"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  features<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"GeoJSON"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Features"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  cluster<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Clustering"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Cluster"</span><span class="token punctuation">,</span> ol8<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  heatmap<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Heatmap"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Heatmap"</span><span class="token punctuation">,</span> ol8<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  layers<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Multiple layers"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Layers"</span><span class="token punctuation">,</span> ol8<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  pindrop<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Drop a pin"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"PinDrop"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  spinner<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Spinner"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Spinner"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  geodata<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Infographics"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"GeoData"</span><span class="token punctuation">,</span> ol8<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  interactions<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Move &amp; Select"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Interactions"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  add_delete<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Add &amp; Delete"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Add-Delete"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  draw<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Draw &amp; Modify"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Draw"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  geolocation<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Geolocation"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Geolocation"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  wmts<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"WMTS"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"WMTS"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  vectortiles<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Vector tiles"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"VectorTiles"</span><span class="token punctuation">,</span> ol8<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  mbtilesRaster<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Raster MBTiles"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"RasterMBTiles"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  mbtilesVector<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Vector MBTiles"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"VectorMBTiles"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  reproj<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Reprojection"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Reprojection"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  routing<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Navigation"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Routing"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  igc<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Performance"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"IGC"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  addon<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Extending rlayers"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"Addon"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  geotiff<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"GeoTIFF addon"</span><span class="token punctuation">,</span> file<span class="token operator">:</span> <span class="token string">"GeoTIFF"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token comment">// The examples use a code-loading technique that I have described in</span>\n<span class="token comment">// https://mmomtchev.medium.com/making-examples-displaying-code-along-its-output-with-webpack-a28dcf5439c6</span>\n\n<span class="token keyword">const</span> ReadmeBlock <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">lazy</span><span class="token punctuation">(</span>\n  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackPrefetch: true */</span> <span class="token string">"./ReadmeBlock"</span><span class="token punctuation">)</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> CodeBlock <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">lazy</span><span class="token punctuation">(</span>\n  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackPrefetch: true */</span> <span class="token string">"./CodeBlock"</span><span class="token punctuation">)</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> ex <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>examples<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>semver<span class="token punctuation">.</span><span class="token function">lt</span><span class="token punctuation">(</span><span class="token constant">OL_VERSION</span><span class="token punctuation">,</span> <span class="token string">"8.0.0"</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>ol8<span class="token punctuation">)</span> <span class="token keyword">continue</span><span class="token punctuation">;</span>\n\n  examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>comp <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">lazy</span><span class="token punctuation">(</span>\n    <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackPrefetch: true */</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>file<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.tsx</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>code <span class="token operator">=</span> <span class="token keyword">import</span><span class="token punctuation">(</span>\n    <span class="token comment">/* webpackPrefetch: true */</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!!html-loader?{"minimize":false}!./jsx-loader.ts!./</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>file<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.tsx</span><span class="token template-punctuation string">`</span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span> <span class="token operator">=></span> code<span class="token punctuation">.</span>default<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>text <span class="token operator">=</span> <span class="token keyword">import</span><span class="token punctuation">(</span>\n    <span class="token comment">/* webpackPrefetch: true */</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!!raw-loader!./</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>file<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.tsx</span><span class="token template-punctuation string">`</span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=></span> text<span class="token punctuation">.</span>default<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> LeftMenuItem <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element <span class="token operator">=></span> <span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-100 btn btn-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Router</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span><span class="token plain-text">rlayers </span><span class="token punctuation">{</span><span class="token constant">VERSION</span><span class="token punctuation">}</span><span class="token plain-text"> Examples</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>d-flex flex-row p-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>d-flex flex-column left-menu me-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LeftMenuItem</span></span> <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">""</span><span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Home"</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n          </span><span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>examples<span class="token punctuation">)</span>\n            <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>\n              <span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token operator">=></span> semver<span class="token punctuation">.</span><span class="token function">gte</span><span class="token punctuation">(</span><span class="token constant">OL_VERSION</span><span class="token punctuation">,</span> <span class="token string">"8.0.0"</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span>examples<span class="token punctuation">[</span>ex<span class="token punctuation">]</span><span class="token punctuation">.</span>ol8\n            <span class="token punctuation">)</span>\n            <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LeftMenuItem</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span> <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>examples<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>d-flex flex-column w-100 overflow-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fluid-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span>\n                <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span>\n                <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>\n                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ml-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">React.Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReadmeBlock</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">React.Suspense</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n                <span class="token punctuation">}</span></span>\n              <span class="token punctuation">/></span></span><span class="token plain-text">\n              </span><span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>examples<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span>\n                  <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span>\n                  <span class="token attr-name">path</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>e<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>\n                  <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>\n                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-12 col-xl-5 mb-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">React.Suspense</span></span>\n                          <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading component...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>\n                        <span class="token punctuation">></span></span><span class="token plain-text">\n                          </span><span class="token punctuation">{</span>React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>examples<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span>comp<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n                        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">React.Suspense</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n                      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-12 col-xl-7 codeblock<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">React.Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Parsing code...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CodeBlock</span></span>\n                            <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>examples<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>\n                            <span class="token attr-name">code</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>examples<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span></span>\n                            <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>examples<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token punctuation">}</span></span>\n                          <span class="token punctuation">/></span></span><span class="token plain-text">\n                        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">React.Suspense</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n                      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n                  <span class="token punctuation">}</span></span>\n                <span class="token punctuation">/></span></span>\n              <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Router</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>\n'}}]);