diff options
Diffstat (limited to 'synapse_topology/webui/code_style.md')
| -rw-r--r-- | synapse_topology/webui/code_style.md | 1130 |
1 files changed, 1130 insertions, 0 deletions
diff --git a/synapse_topology/webui/code_style.md b/synapse_topology/webui/code_style.md new file mode 100644 index 0000000000..b9ce2168dc --- /dev/null +++ b/synapse_topology/webui/code_style.md @@ -0,0 +1,1130 @@ + + + + + + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <link rel="dns-prefetch" href="https://github.githubassets.com"> + <link rel="dns-prefetch" href="https://avatars0.githubusercontent.com"> + <link rel="dns-prefetch" href="https://avatars1.githubusercontent.com"> + <link rel="dns-prefetch" href="https://avatars2.githubusercontent.com"> + <link rel="dns-prefetch" href="https://avatars3.githubusercontent.com"> + <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> + <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> + + + + <link crossorigin="anonymous" media="all" integrity="sha512-UDS3MR1FfvqHmqZAs2MWSDCWPwLemVRLqCwld4/zfwH0vhv7I6RYmDnMnNAVQKP1YYvqnccOCH4iOhFaUUyrjw==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-2e9090135c22aad5f56c2f72dcba7880.css" /> + <link crossorigin="anonymous" media="all" integrity="sha512-c0wYv9vreyKS48XiGmf3sC5aV6Mj9KgwbV6/ND+MRm+YgTD2Ztxg5AfwZgpebFsTkY3jZ6RejCMHqBrA1Mw/3Q==" rel="stylesheet" href="https://github.githubassets.com/assets/site-7ec1b281aca208f5a7db992786526492.css" /> + <link crossorigin="anonymous" media="all" integrity="sha512-bnWNt5aCIAqrRCDcaMXqFcKDZP8Zy31S4RFvaf7/yuSe6emQ1GfFHXAJUo+1ok5aO7AQGNB+jtqky1GUsUo5lQ==" rel="stylesheet" href="https://github.githubassets.com/assets/github-989ddaf006bcf7252e11cff4475d58fc.css" /> + + + + + + <meta name="viewport" content="width=device-width"> + + <title>matrix-react-sdk/code_style.md at develop · matrix-org/matrix-react-sdk · GitHub</title> + <meta name="description" content="Matrix SDK for React Javascript. Contribute to matrix-org/matrix-react-sdk development by creating an account on GitHub."> + <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> + <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> + <meta property="fb:app_id" content="1401488693436528"> + + <meta name="twitter:image:src" content="https://avatars3.githubusercontent.com/u/8418310?s=400&v=4" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary" /><meta name="twitter:title" content="matrix-org/matrix-react-sdk" /><meta name="twitter:description" content="Matrix SDK for React Javascript. Contribute to matrix-org/matrix-react-sdk development by creating an account on GitHub." /> + <meta property="og:image" content="https://avatars3.githubusercontent.com/u/8418310?s=400&v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="matrix-org/matrix-react-sdk" /><meta property="og:url" content="https://github.com/matrix-org/matrix-react-sdk" /><meta property="og:description" content="Matrix SDK for React Javascript. Contribute to matrix-org/matrix-react-sdk development by creating an account on GitHub." /> + + <link rel="assets" href="https://github.githubassets.com/"> + + <meta name="pjax-timeout" content="1000"> + + <meta name="request-id" content="DFC0:3755:696525:BB13FF:5D554340" data-pjax-transient> + + + + + <meta name="selected-link" value="repo_source" data-pjax-transient> + + <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU"> + <meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA"> + <meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc"> + + <meta name="octolytics-host" content="collector.githubapp.com" /><meta name="octolytics-app-id" content="github" /><meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" /><meta name="octolytics-dimension-request_id" content="DFC0:3755:696525:BB13FF:5D554340" /><meta name="octolytics-dimension-region_edge" content="iad" /><meta name="octolytics-dimension-region_render" content="iad" /> +<meta name="analytics-location" content="/<user-name>/<repo-name>/blob/show" data-pjax-transient="true" /> + + + + <meta name="google-analytics" content="UA-3769691-2"> + + +<meta class="js-ga-set" name="dimension1" content="Logged Out"> + + + + + + <meta name="hostname" content="github.com"> + <meta name="user-login" content=""> + + <meta name="expected-hostname" content="github.com"> + <meta name="js-proxy-site-detection-payload" content="ZDM0M2RmOGY4OWY1NDUwZWUzZmFlOTc0MDMyMmM5NjhlOTdmMjQwOWIyY2E2YWZhMWEzNDA5YWYxZjNjMGZlNnx7InJlbW90ZV9hZGRyZXNzIjoiODAuMjUwLjEwMS4yMzQiLCJyZXF1ZXN0X2lkIjoiREZDMDozNzU1OjY5NjUyNTpCQjEzRkY6NUQ1NTQzNDAiLCJ0aW1lc3RhbXAiOjE1NjU4Njg4NjUsImhvc3QiOiJnaXRodWIuY29tIn0="> + + <meta name="enabled-features" content="ACTIONS_V2_ON_MARKETPLACE,MARKETPLACE_FEATURED_BLOG_POSTS,MARKETPLACE_INVOICED_BILLING,MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,MARKETPLACE_PENDING_INSTALLATIONS"> + + <meta name="html-safe-nonce" content="b01bc00cb326bd4643124d13f97e57eb6e1324cd"> + + <meta http-equiv="x-pjax-version" content="02bc133fcf9d311170183f4e54fce404"> + + + <link href="https://github.com/matrix-org/matrix-react-sdk/commits/develop.atom" rel="alternate" title="Recent Commits to matrix-react-sdk:develop" type="application/atom+xml"> + + <meta name="go-import" content="github.com/matrix-org/matrix-react-sdk git https://github.com/matrix-org/matrix-react-sdk.git"> + + <meta name="octolytics-dimension-user_id" content="8418310" /><meta name="octolytics-dimension-user_login" content="matrix-org" /><meta name="octolytics-dimension-repository_id" content="37144575" /><meta name="octolytics-dimension-repository_nwo" content="matrix-org/matrix-react-sdk" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="37144575" /><meta name="octolytics-dimension-repository_network_root_nwo" content="matrix-org/matrix-react-sdk" /><meta name="octolytics-dimension-repository_explore_github_marketplace_ci_cta_shown" content="false" /> + + + <link rel="canonical" href="https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md" data-pjax-transient> + + + <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> + + <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> + + <link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000"> + <link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://github.githubassets.com/favicon.ico"> + +<meta name="theme-color" content="#1e2327"> + + + + + + <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> + + </head> + + <body class="logged-out env-production page-responsive page-blob"> + + + <div class="position-relative js-header-wrapper "> + <a href="#start-of-content" tabindex="1" class="px-2 py-4 bg-blue text-white show-on-focus js-skip-to-content">Skip to content</a> + <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div> + + + + + + + <header class="Header-old header-logged-out js-details-container Details position-relative f4 py-2" role="banner"> + <div class="container-lg d-lg-flex flex-items-center p-responsive"> + <div class="d-flex flex-justify-between flex-items-center"> + <a class="mr-4" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark"> + <svg height="32" class="octicon octicon-mark-github text-white" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg> + </a> + + <div class="d-lg-none css-truncate css-truncate-target width-fit p-2"> + + <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg> + <a class="Header-link" href="/matrix-org">matrix-org</a> + / + <a class="Header-link" href="/matrix-org/matrix-react-sdk">matrix-react-sdk</a> + + + </div> + + <div class="d-flex flex-items-center"> + <a href="/join?source=header-repo" + class="d-inline-block d-lg-none f5 text-white no-underline border border-gray-dark rounded-2 px-2 py-1 mr-3 mr-sm-5" + data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header","repository_id":null,"auth_type":"SIGN_UP","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="070c64fc6caaa0b0fb319837744365a4e609ffa99ac843ebb790f2c2aa5715b8" + data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up"> + Sign up + </a> + + <button class="btn-link d-lg-none mt-1 js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false"> + <svg height="24" class="octicon octicon-three-bars text-white" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg> + </button> + </div> + </div> + + <div class="HeaderMenu HeaderMenu--logged-out position-fixed top-0 right-0 bottom-0 height-fit position-lg-relative d-lg-flex flex-justify-between flex-items-center flex-auto"> + <div class="d-flex d-lg-none flex-justify-end border-bottom bg-gray-light p-3"> + <button class="btn-link js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false"> + <svg height="24" class="octicon octicon-x text-gray" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg> + </button> + </div> + + <nav class="mt-0 px-3 px-lg-0 mb-5 mb-lg-0" aria-label="Global"> + <ul class="d-lg-flex list-style-none"> + <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center "> + <details class="HeaderMenu-details details-overlay details-reset width-full"> + <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block"> + Why GitHub? + <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative"> + <path d="M1,1l6.2,6L13,1"></path> + </svg> + </summary> + <div class="dropdown-menu flex-auto rounded-1 bg-white px-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4"> + <a href="/features" class="py-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Features">Features <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a> + <ul class="list-style-none f5 pb-3"> + <li class="edge-item-fix"><a href="/features/code-review/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Code review">Code review</a></li> + <li class="edge-item-fix"><a href="/features/project-management/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Project management">Project management</a></li> + <li class="edge-item-fix"><a href="/features/integrations" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Integrations">Integrations</a></li> + <li class="edge-item-fix"><a href="/features/actions" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Actions">Actions</a> + <li class="edge-item-fix"><a href="/features/package-registry" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Package Registry">Package registry</a> + <li class="edge-item-fix"><a href="/features#team-management" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Team management">Team management</a></li> + <li class="edge-item-fix"><a href="/features#social-coding" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Social coding">Social coding</a></li> + <li class="edge-item-fix"><a href="/features#documentation" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Documentation">Documentation</a></li> + <li class="edge-item-fix"><a href="/features#code-hosting" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Code hosting">Code hosting</a></li> + </ul> + + <ul class="list-style-none mb-0 border-lg-top pt-lg-3"> + <li class="edge-item-fix"><a href="/customer-stories" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Customer stories">Customer stories <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a></li> + <li class="edge-item-fix"><a href="/security" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Security">Security <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a></li> + </ul> + </div> + </details> + </li> + <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3"> + <a href="/enterprise" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Enterprise">Enterprise</a> + </li> + + <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center "> + <details class="HeaderMenu-details details-overlay details-reset width-full"> + <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block"> + Explore + <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative"> + <path d="M1,1l6.2,6L13,1"></path> + </svg> + </summary> + + <div class="dropdown-menu flex-auto rounded-1 bg-white px-0 pt-2 pb-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4"> + <ul class="list-style-none mb-3"> + <li class="edge-item-fix"><a href="/explore" class="py-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Explore">Explore GitHub <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a></li> + </ul> + + <h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Learn & contribute</h4> + <ul class="list-style-none mb-3"> + <li class="edge-item-fix"><a href="/topics" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Topics">Topics</a></li> + <li class="edge-item-fix"><a href="/collections" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Collections">Collections</a></li> + <li class="edge-item-fix"><a href="/trending" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Trending">Trending</a></li> + <li class="edge-item-fix"><a href="https://lab.github.com/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Learning lab">Learning Lab</a></li> + <li class="edge-item-fix"><a href="https://opensource.guide" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Open source guides">Open source guides</a></li> + </ul> + + <h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Connect with others</h4> + <ul class="list-style-none mb-0"> + <li class="edge-item-fix"><a href="https://github.com/events" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Events">Events</a></li> + <li class="edge-item-fix"><a href="https://github.community" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Community forum">Community forum</a></li> + <li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to GitHub Education">GitHub Education</a></li> + </ul> + </div> + </details> + </li> + + <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3"> + <a href="/marketplace" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Marketplace">Marketplace</a> + </li> + + <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center "> + <details class="HeaderMenu-details details-overlay details-reset width-full"> + <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block"> + Pricing + <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative"> + <path d="M1,1l6.2,6L13,1"></path> + </svg> + </summary> + + <div class="dropdown-menu flex-auto rounded-1 bg-white px-0 pt-2 pb-4 mt-0 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4"> + <a href="/pricing" class="pb-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Pricing">Plans <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a> + + <ul class="list-style-none mb-3"> + <li class="edge-item-fix"><a href="/pricing#feature-comparison" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Compare plans">Compare plans</a></li> + <li class="edge-item-fix"><a href="https://enterprise.github.com/contact" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Contact Sales">Contact Sales</a></li> + </ul> + + <ul class="list-style-none mb-0 border-lg-top pt-lg-3"> + <li class="edge-item-fix"><a href="/nonprofit" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Nonprofits">Nonprofit <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a></li> + <li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Education">Education <span class="Bump-link-symbol float-right text-normal text-gray-light">→</span></a></li> + </ul> + </div> + </details> + </li> + </ul> + </nav> + + <div class="d-lg-flex flex-items-center px-3 px-lg-0 text-center text-lg-left"> + <div class="d-lg-flex mb-3 mb-lg-0"> + <div class="header-search flex-self-stretch flex-lg-self-auto mr-0 mr-lg-3 mb-3 mb-lg-0 scoped-search site-scoped-search js-site-search position-relative js-jump-to" + role="combobox" + aria-owns="jump-to-results" + aria-label="Search or jump to" + aria-haspopup="listbox" + aria-expanded="false" +> + <div class="position-relative"> + <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-site-search-form" role="search" aria-label="Site" data-scope-type="Repository" data-scope-id="37144575" data-scoped-search-url="/matrix-org/matrix-react-sdk/search" data-unscoped-search-url="/search" action="/matrix-org/matrix-react-sdk/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" /> + <label class="form-control input-sm header-search-wrapper p-0 header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center js-chromeless-input-container"> + <input type="text" + class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable" + data-hotkey="s,/" + name="q" + value="" + placeholder="Search" + data-unscoped-placeholder="Search GitHub" + data-scoped-placeholder="Search" + autocapitalize="off" + aria-autocomplete="list" + aria-controls="jump-to-results" + aria-label="Search" + data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations#csrf-token=ffM0CdGpRD6GhLqJjso4l+3cl2ronRCAWXoPsivurZA54kGqYN9GIUuVf6POBMPxoXDG8z8urw1CxOEPvIm07Q==" + spellcheck="false" + autocomplete="off" + > + <input type="hidden" class="js-site-search-type-field" name="type" > + <img src="https://github.githubassets.com/images/search-key-slash.svg" alt="" class="mr-2 header-search-key-slash"> + + <div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container"> + +<ul class="d-none js-jump-to-suggestions-template-container"> + + +<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion" role="option"> + <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href=""> + <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none"> + <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg> + <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg> + <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg> + </div> + + <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28"> + + <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"> + </div> + + <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search"> + <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository"> + In this repository + </span> + <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub"> + All GitHub + </span> + <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span> + </div> + + <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"> + Jump to + <span class="d-inline-block ml-1 v-align-middle">↵</span> + </div> + </a> +</li> + +</ul> + +<ul class="d-none js-jump-to-no-results-template-container"> + <li class="d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2"> + <span class="text-gray">No suggested jump to results</span> + </li> +</ul> + +<ul id="jump-to-results" role="listbox" class="p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container"> + + +<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none" role="option"> + <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href=""> + <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none"> + <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg> + <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg> + <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg> + </div> + + <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28"> + + <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"> + </div> + + <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search"> + <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository"> + In this repository + </span> + <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub"> + All GitHub + </span> + <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span> + </div> + + <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"> + Jump to + <span class="d-inline-block ml-1 v-align-middle">↵</span> + </div> + </a> +</li> + + + +<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none" role="option"> + <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href=""> + <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none"> + <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg> + <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg> + <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg> + </div> + + <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28"> + + <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"> + </div> + + <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search"> + <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository"> + In this repository + </span> + <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub"> + All GitHub + </span> + <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span> + </div> + + <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"> + Jump to + <span class="d-inline-block ml-1 v-align-middle">↵</span> + </div> + </a> +</li> + + +</ul> + + </div> + </label> +</form> </div> +</div> + + </div> + + <a href="/login?return_to=%2Fmatrix-org%2Fmatrix-react-sdk%2Fblob%2Fdevelop%2Fcode_style.md" + class="HeaderMenu-link no-underline mr-3" + data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="5c1f11935f911f94cc80882c73f71cbad2f8c2820c6121ff4595cadc7033dda3" + data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in"> + Sign in + </a> + <a href="/join?source=header-repo" + class="HeaderMenu-link d-inline-block no-underline border border-gray-dark rounded-1 px-2 py-1" + data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="5c1f11935f911f94cc80882c73f71cbad2f8c2820c6121ff4595cadc7033dda3" + data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up"> + Sign up + </a> + </div> + </div> + </div> +</header> + + </div> + + <div id="start-of-content" class="show-on-focus"></div> + + + <div id="js-flash-container"> + +</div> + + + + <div class="application-main " data-commit-hovercards-enabled> + <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> + <main > + + + + + + + + + + + + + + + + + <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav pt-0 pt-lg-4 "> + <div class="repohead-details-container clearfix container-lg p-responsive d-none d-lg-block"> + + <ul class="pagehead-actions"> + + <li> + <details id="funding-links-modal" class="details-reset details-overlay details-overlay-dark d-inline-block float-left" > + <summary id="sponsor-button-repo" class="btn btn-sm" + title="Sponsor matrix-org/matrix-react-sdk" + data-ga-click="Repository, show sponsor modal, action:blob#show; text:Sponsor" + > + <svg class="octicon octicon-heart text-pink v-align-middle" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"/></svg> + Sponsor + </summary> + <details-dialog + class="anim-fade-in fast Box Box--overlay d-flex flex-column" + src="/matrix-org/matrix-react-sdk/funding_links?fragment=1" + preload + > + <div class="Box-header"> + <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog> + <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg> + </button> + <h3 class="Box-title"> + Sponsor matrix-org/matrix-react-sdk + </h3> + </div> + <div class="overflow-auto"> + <include-fragment + > + <div class="octocat-spinner my-3" aria-label="Loading..."></div> + </include-fragment> + </div> + </details-dialog> + </details> + </li> + + + + <li> + + <a class="tooltipped tooltipped-s btn btn-sm btn-with-count" aria-label="You must be signed in to watch a repository" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="b8d2a0838a4e288b6b7d06c3aed5fa3840f59485f5a59cfd30a8abc98a4be030" href="/login?return_to=%2Fmatrix-org%2Fmatrix-react-sdk"> + <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg> + Watch +</a> <a class="social-count" href="/matrix-org/matrix-react-sdk/watchers" + aria-label="38 users are watching this repository"> + 38 + </a> + + </li> + + <li> + <a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to star a repository" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":37144575,"auth_type":"LOG_IN","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="076b6ccb598aea282621dbfa43e7f4fc44fbcdbc72ea47bd442343993b1b3bb5" href="/login?return_to=%2Fmatrix-org%2Fmatrix-react-sdk"> + <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg> + Star +</a> + <a class="social-count js-social-count" href="/matrix-org/matrix-react-sdk/stargazers" + aria-label="308 users starred this repository"> + 308 + </a> + + </li> + + <li> + <a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to fork a repository" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":37144575,"auth_type":"LOG_IN","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="1da741b849195a3bc6f0815840ccfcebb5b2b57ca723fe3f16b2ef8c886c2697" href="/login?return_to=%2Fmatrix-org%2Fmatrix-react-sdk"> + <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg> + Fork +</a> + <a href="/matrix-org/matrix-react-sdk/network/members" class="social-count" + aria-label="217 users forked this repository"> + 217 + </a> + </li> +</ul> + + <h1 class="public "> + <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg> + <span class="author" itemprop="author"><a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/matrix-org/hovercard" href="/matrix-org">matrix-org</a></span><!-- +--><span class="path-divider">/</span><!-- +--><strong itemprop="name"><a data-pjax="#js-repo-pjax-container" href="/matrix-org/matrix-react-sdk">matrix-react-sdk</a></strong> + + +</h1> + + </div> + +<nav class="hx_reponav reponav js-repo-nav js-sidenav-container-pjax container-lg p-responsive d-none d-lg-block" + itemscope + itemtype="http://schema.org/BreadcrumbList" + aria-label="Repository" + data-pjax="#js-repo-pjax-container"> + + <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"> + <a class="js-selected-navigation-item selected reponav-item" itemprop="url" data-hotkey="g c" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /matrix-org/matrix-react-sdk" href="/matrix-org/matrix-react-sdk"> + <svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg> + <span itemprop="name">Code</span> + <meta itemprop="position" content="1"> +</a> </span> + + + <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"> + <a data-hotkey="g p" itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /matrix-org/matrix-react-sdk/pulls" href="/matrix-org/matrix-react-sdk/pulls"> + <svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg> + <span itemprop="name">Pull requests</span> + <span class="Counter">28</span> + <meta itemprop="position" content="3"> +</a> </span> + + + <a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /matrix-org/matrix-react-sdk/projects" href="/matrix-org/matrix-react-sdk/projects"> + <svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg> + Projects + <span class="Counter" >0</span> +</a> + + + <a data-skip-pjax="true" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy /matrix-org/matrix-react-sdk/security/advisories" href="/matrix-org/matrix-react-sdk/security/advisories"> + <svg class="octicon octicon-shield" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 2l7-2 7 2v6.02C14 12.69 8.69 16 7 16c-1.69 0-7-3.31-7-7.98V2zm1 .75L7 1l6 1.75v5.268C13 12.104 8.449 15 7 15c-1.449 0-6-2.896-6-6.982V2.75zm1 .75L7 2v12c-1.207 0-5-2.482-5-5.985V3.5z"/></svg> + Security +</a> + <a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse people /matrix-org/matrix-react-sdk/pulse" href="/matrix-org/matrix-react-sdk/pulse"> + <svg class="octicon octicon-graph" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg> + Insights +</a> + +</nav> + + <div class="reponav-wrapper reponav-small d-lg-none"> + <nav class="reponav js-reponav text-center no-wrap" + itemscope + itemtype="http://schema.org/BreadcrumbList"> + + <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"> + <a class="js-selected-navigation-item selected reponav-item" itemprop="url" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /matrix-org/matrix-react-sdk" href="/matrix-org/matrix-react-sdk"> + <span itemprop="name">Code</span> + <meta itemprop="position" content="1"> +</a> </span> + + + <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"> + <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /matrix-org/matrix-react-sdk/pulls" href="/matrix-org/matrix-react-sdk/pulls"> + <span itemprop="name">Pull requests</span> + <span class="Counter">28</span> + <meta itemprop="position" content="3"> +</a> </span> + + <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"> + <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /matrix-org/matrix-react-sdk/projects" href="/matrix-org/matrix-react-sdk/projects"> + <span itemprop="name">Projects</span> + <span class="Counter">0</span> + <meta itemprop="position" content="4"> +</a> </span> + + + <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy /matrix-org/matrix-react-sdk/security/advisories" href="/matrix-org/matrix-react-sdk/security/advisories"> + <span itemprop="name">Security</span> + <meta itemprop="position" content="6"> +</a> + <a class="js-selected-navigation-item reponav-item" data-selected-links="pulse /matrix-org/matrix-react-sdk/pulse" href="/matrix-org/matrix-react-sdk/pulse"> + Pulse +</a> + + </nav> +</div> + + + </div> +<div class="container-lg clearfix new-discussion-timeline experiment-repo-nav p-responsive"> + <div class="repository-content "> + + + + + + + + + <a class="d-none js-permalink-shortcut" data-hotkey="y" href="/matrix-org/matrix-react-sdk/blob/4afed0fab4f61a0355f98e0cc5420703af0ec217/code_style.md">Permalink</a> + + <!-- blob contrib key: blob_contributors:v21:51152c467cf2d74518efdacddfe3672e --> + <div class="signup-prompt-bg rounded-1"> + <div class="signup-prompt p-4 text-center mb-4 rounded-1"> + <div class="position-relative"> + <!-- '"` --><!-- </textarea></xmp> --></option></form><form action="/prompt_dismissals/signup" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="9gqksrQXe86xqDURTuzAi6VTJTiXNWRVW4xPVMRcMBilCXX0lAe7u9IaMoObx1b0+KRQpNWdwFnPMSiSYXQEDQ==" /> + <button type="submit" class="position-absolute top-0 right-0 btn-link link-gray" data-ga-click="(Logged out) Sign up prompt, clicked Dismiss, text:dismiss"> + Dismiss + </button> +</form> <h3 class="pt-2">Join GitHub today</h3> + <p class="col-6 mx-auto">GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.</p> + <a class="btn btn-primary" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"files signup prompt","repository_id":null,"auth_type":"SIGN_UP","client_id":null,"originating_request_id":"DFC0:3755:696525:BB13FF:5D554340","originating_url":"https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md","referrer":null,"user_id":null}}" data-hydro-click-hmac="98ac90a592a0c45c7fa062cb2ce17f97a73c3ea6ecbfd05d9d5fed1812bad504" data-ga-click="(Logged out) Sign up prompt, clicked Sign up, text:sign-up" href="/join?source=prompt-blob-show">Sign up</a> + </div> + </div> + </div> + + + <div class="d-flex flex-items-start flex-shrink-0 pb-3 flex-column flex-md-row"> + <span class="d-flex flex-justify-between width-full width-md-auto"> + +<details class="details-reset details-overlay select-menu branch-select-menu hx_rsm" id="branch-select-menu"> + <summary class="btn btn-sm select-menu-button css-truncate" + data-hotkey="w" + + title="Switch branches or tags"> + <i>Branch:</i> + <span class="css-truncate-target">develop</span> + </summary> + + <details-menu class="select-menu-modal hx_rsm-modal position-absolute" style="z-index: 99;" src="/matrix-org/matrix-react-sdk/ref-list/develop/code_style.md?source_action=show&source_controller=blob" preload> + <include-fragment class="select-menu-loading-overlay anim-pulse"> + <svg height="32" class="octicon octicon-octoface" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"/></svg> + </include-fragment> + </details-menu> +</details> + + <div class="BtnGroup flex-shrink-0 d-md-none"> + <a href="/matrix-org/matrix-react-sdk/find/develop" + class="js-pjax-capture-input btn btn-sm BtnGroup-item" + data-pjax + data-hotkey="t"> + Find file + </a> + <clipboard-copy value="code_style.md" class="btn btn-sm BtnGroup-item"> + Copy path + </clipboard-copy> + </div> + </span> + <h2 id="blob-path" class="breadcrumb flex-auto min-width-0 text-normal flex-md-self-center ml-md-2 mr-md-3 my-2 my-md-0"> + <span class="js-repo-root text-bold"><span class="js-path-segment"><a data-pjax="true" href="/matrix-org/matrix-react-sdk"><span>matrix-react-sdk</span></a></span></span><span class="separator">/</span><strong class="final-path">code_style.md</strong> + </h2> + + <div class="BtnGroup flex-shrink-0 d-none d-md-inline-block"> + <a href="/matrix-org/matrix-react-sdk/find/develop" + class="js-pjax-capture-input btn btn-sm BtnGroup-item" + data-pjax + data-hotkey="t"> + Find file + </a> + <clipboard-copy value="code_style.md" class="btn btn-sm BtnGroup-item"> + Copy path + </clipboard-copy> + </div> + </div> + + + + + <div class="Box Box--condensed d-flex flex-column flex-shrink-0"> + <div class="Box-body d-flex flex-justify-between bg-blue-light flex-column flex-md-row flex-items-start flex-md-items-center"> + <span class="pr-md-4 f6"> + <a rel="contributor" data-skip-pjax="true" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=279572" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jryans"><img class="avatar" src="https://avatars0.githubusercontent.com/u/279572?s=40&v=4" width="20" height="20" alt="@jryans" /></a> + <a class="text-bold link-gray-dark lh-default v-align-middle" rel="contributor" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=279572" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jryans">jryans</a> + <span class="lh-default v-align-middle"> + <a data-pjax="true" title="Update React guide in code style + +This updates React guidance to prefer JS classes and adds additional info about +how to handle specific situations when using them. + +Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>" class="link-gray" href="/matrix-org/matrix-react-sdk/commit/757181c322937c1a9bd650b56e2e892b16231fdf">Update React guide in code style</a> + </span> + </span> + <span class="d-inline-block flex-shrink-0 v-align-bottom f6 mt-2 mt-md-0"> + <a class="pr-2 text-mono link-gray" href="/matrix-org/matrix-react-sdk/commit/757181c322937c1a9bd650b56e2e892b16231fdf" data-pjax>757181c</a> + <relative-time datetime="2018-12-06T22:34:54Z">Dec 6, 2018</relative-time> + </span> + </div> + + <div class="Box-body d-flex flex-items-center flex-auto f6 border-bottom-0 flex-wrap" > + <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark float-left mr-2" id="blob_contributors_box"> + <summary class="btn-link" aria-haspopup="dialog"> + <span><strong>6</strong> contributors</span> + </summary> + <details-dialog + class="Box Box--overlay d-flex flex-column anim-fade-in fast" + aria-label="Users who have contributed to this file" + src="/matrix-org/matrix-react-sdk/contributors/develop/code_style.md/list" preload> + <div class="Box-header"> + <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog> + <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg> + </button> + <h3 class="Box-title"> + Users who have contributed to this file + </h3> + </div> + <include-fragment class="octocat-spinner my-3" aria-label="Loading..."></include-fragment> + </details-dialog> + </details> + <span class=""> + <a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=986903" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md?author=dbkr"> + <img class="avatar mr-1" src="https://avatars1.githubusercontent.com/u/986903?s=40&v=4" width="20" height="20" alt="@dbkr" /> +</a> <a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=2403652" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md?author=t3chguy"> + <img class="avatar mr-1" src="https://avatars1.githubusercontent.com/u/2403652?s=40&v=4" width="20" height="20" alt="@t3chguy" /> +</a> <a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=1389908" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md?author=richvdh"> + <img class="avatar mr-1" src="https://avatars3.githubusercontent.com/u/1389908?s=40&v=4" width="20" height="20" alt="@richvdh" /> +</a> <a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=238916" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md?author=aviraldg"> + <img class="avatar mr-1" src="https://avatars2.githubusercontent.com/u/238916?s=40&v=4" width="20" height="20" alt="@aviraldg" /> +</a> <a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=1294269" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md?author=ara4n"> + <img class="avatar mr-1" src="https://avatars0.githubusercontent.com/u/1294269?s=40&v=4" width="20" height="20" alt="@ara4n" /> +</a> <a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=279572" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md?author=jryans"> + <img class="avatar mr-1" src="https://avatars0.githubusercontent.com/u/279572?s=40&v=4" width="20" height="20" alt="@jryans" /> +</a> +</span> + + </div> + </div> + + + + + + <div class="Box mt-3 position-relative"> + +<div class="Box-header py-2 d-flex flex-column flex-shrink-0 flex-md-row flex-md-items-center"> + + <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0"> + 211 lines (181 sloc) + <span class="file-info-divider"></span> + 6.6 KB + </div> + + <div class="d-flex py-1 py-md-0 flex-auto flex-order-1 flex-md-order-2 flex-sm-grow-0 flex-justify-between"> + + <div class="BtnGroup"> + <a id="raw-url" class="btn btn-sm BtnGroup-item" href="/matrix-org/matrix-react-sdk/raw/develop/code_style.md">Raw</a> + <a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/matrix-org/matrix-react-sdk/blame/develop/code_style.md">Blame</a> + <a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/matrix-org/matrix-react-sdk/commits/develop/code_style.md">History</a> + </div> + + + <div> + + <button type="button" class="btn-octicon disabled tooltipped tooltipped-nw" + aria-label="You must be signed in to make or propose changes"> + <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg> + </button> + <button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw" + aria-label="You must be signed in to make or propose changes"> + <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg> + </button> + </div> + </div> +</div> + + + + + + <div id="readme" class="Box-body readme blob instapaper_body js-code-block-container"> + <article class="markdown-body entry-content p-3 p-md-6" itemprop="text"><h1><a id="user-content-matrix-javascriptecmascript-style-guide" class="anchor" aria-hidden="true" href="#matrix-javascriptecmascript-style-guide"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Matrix JavaScript/ECMAScript Style Guide</h1> +<p>The intention of this guide is to make Matrix's JavaScript codebase clean, +consistent with other popular JavaScript styles and consistent with the rest of +the Matrix codebase. For reference, the Matrix Python style guide can be found +at <a href="https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst">https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst</a></p> +<p>This document reflects how we would like Matrix JavaScript code to look, with +acknowledgement that a significant amount of code is written to older +standards.</p> +<p>Write applications in modern ECMAScript and use a transpiler where necessary to +target older platforms. When writing library code, consider carefully whether +to write in ES5 to allow all JavaScript application to use the code directly or +writing in modern ECMAScript and using a transpile step to generate the file +that applications can then include. There are significant benefits in being +able to use modern ECMAScript, although the tooling for doing so can be awkward +for library code, especially with regard to translating source maps and line +number throgh from the original code to the final application.</p> +<h2><a id="user-content-general-style" class="anchor" aria-hidden="true" href="#general-style"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>General Style</h2> +<ul> +<li> +<p>4 spaces to indent, for consistency with Matrix Python.</p> +</li> +<li> +<p>120 columns per line, but try to keep JavaScript code around the 80 column mark. +Inline JSX in particular can be nicer with more columns per line.</p> +</li> +<li> +<p>No trailing whitespace at end of lines.</p> +</li> +<li> +<p>Don't indent empty lines.</p> +</li> +<li> +<p>One newline at the end of the file.</p> +</li> +<li> +<p>Unix newlines, never <code>\r</code></p> +</li> +<li> +<p>Indent similar to our python code: break up long lines at logical boundaries, +more than one argument on a line is OK</p> +</li> +<li> +<p>Use semicolons, for consistency with node.</p> +</li> +<li> +<p>UpperCamelCase for class and type names</p> +</li> +<li> +<p>lowerCamelCase for functions and variables.</p> +</li> +<li> +<p>Single line ternary operators are fine.</p> +</li> +<li> +<p>UPPER_CAMEL_CASE for constants</p> +</li> +<li> +<p>Single quotes for strings by default, for consistency with most JavaScript styles:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-s"><span class="pl-pds">"</span>bad<span class="pl-pds">"</span></span> <span class="pl-c"><span class="pl-c">//</span> Bad</span> +<span class="pl-s"><span class="pl-pds">'</span>good<span class="pl-pds">'</span></span> <span class="pl-c"><span class="pl-c">//</span> Good</span></pre></div> +</li> +<li> +<p>Use parentheses or <code>`</code> instead of <code>\</code> for line continuation where ever possible</p> +</li> +<li> +<p>Open braces on the same line (consistent with Node):</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">if</span> (x) { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Good</span> +} + +<span class="pl-k">if</span> (x) +{ + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Bad</span> +}</pre></div> +</li> +<li> +<p>Spaces after <code>if</code>, <code>for</code>, <code>else</code> etc, no space around the condition:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">if</span> (x) { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Good</span> +} + +<span class="pl-k">if</span>(x) { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Bad</span> +} + +<span class="pl-k">if</span> ( x ) { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Bad</span> +}</pre></div> +</li> +<li> +<p>No new line before else, catch, finally, etc:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">if</span> (x) { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); +} <span class="pl-k">else</span> { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a chimp<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Good</span> +} + +<span class="pl-k">if</span> (x) { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a fish<span class="pl-pds">"</span></span>); +} +<span class="pl-k">else</span> { + <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>I am a chimp<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> Bad</span> +}</pre></div> +</li> +<li> +<p>Declare one variable per var statement (consistent with Node). Unless they +are simple and closely related. If you put the next declaration on a new line, +treat yourself to another <code>var</code>:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-c1">key</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>foo<span class="pl-pds">"</span></span>, + <span class="pl-en">comparator</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">x</span>, <span class="pl-smi">y</span>) { + <span class="pl-k">return</span> x <span class="pl-k">-</span> y; + }; <span class="pl-c"><span class="pl-c">//</span> Bad</span> + +<span class="pl-k">const</span> <span class="pl-c1">key</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>foo<span class="pl-pds">"</span></span>; +<span class="pl-k">const</span> <span class="pl-c1">comparator</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">x</span>, <span class="pl-smi">y</span>) { + <span class="pl-k">return</span> x <span class="pl-k">-</span> y; +}; <span class="pl-c"><span class="pl-c">//</span> Good</span> + +<span class="pl-k">let</span> x <span class="pl-k">=</span> <span class="pl-c1">0</span>, y <span class="pl-k">=</span> <span class="pl-c1">0</span>; <span class="pl-c"><span class="pl-c">//</span> Fine</span> + +<span class="pl-k">let</span> x <span class="pl-k">=</span> <span class="pl-c1">0</span>; +<span class="pl-k">let</span> y <span class="pl-k">=</span> <span class="pl-c1">0</span>; <span class="pl-c"><span class="pl-c">//</span> Also fine</span></pre></div> +</li> +<li> +<p>A single line <code>if</code> is fine, all others have braces. This prevents errors when adding to the code.:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">if</span> (x) <span class="pl-k">return</span> <span class="pl-c1">true</span>; <span class="pl-c"><span class="pl-c">//</span> Fine</span> + +<span class="pl-k">if</span> (x) { + <span class="pl-k">return</span> <span class="pl-c1">true</span>; <span class="pl-c"><span class="pl-c">//</span> Also fine</span> +} + +<span class="pl-k">if</span> (x) + <span class="pl-k">return</span> <span class="pl-c1">true</span>; <span class="pl-c"><span class="pl-c">//</span> Not fine</span></pre></div> +</li> +<li> +<p>Terminate all multi-line lists, object literals, imports and ideally function calls with commas (if using a transpiler). Note that trailing function commas require explicit configuration in babel at time of writing:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> mascots <span class="pl-k">=</span> [ + <span class="pl-s"><span class="pl-pds">"</span>Patrick<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Shirley<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Colin<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Susan<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Sir Arthur David<span class="pl-pds">"</span></span> <span class="pl-c"><span class="pl-c">//</span> Bad</span> +]; + +<span class="pl-k">var</span> mascots <span class="pl-k">=</span> [ + <span class="pl-s"><span class="pl-pds">"</span>Patrick<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Shirley<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Colin<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Susan<span class="pl-pds">"</span></span>, + <span class="pl-s"><span class="pl-pds">"</span>Sir Arthur David<span class="pl-pds">"</span></span>, <span class="pl-c"><span class="pl-c">//</span> Good</span> +];</pre></div> +</li> +<li> +<p>Use <code>null</code>, <code>undefined</code> etc consistently with node: +Boolean variables and functions should always be either true or false. Don't set it to 0 unless it's supposed to be a number. +When something is intentionally missing or removed, set it to null. +If returning a boolean, type coerce:</p> +<div class="highlight highlight-source-js"><pre><span class="pl-k">function</span> <span class="pl-en">hasThings</span>() { + <span class="pl-k">return</span> <span class="pl-k">!!</span>length; <span class="pl-c"><span class="pl-c">//</span> bad</span> + <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-en">Boolean</span>(length); <span class="pl-c"><span class="pl-c">//</span> REALLY bad</span> + <span class="pl-k">return</span> <span class="pl-c1">Boolean</span>(length); <span class="pl-c"><span class="pl-c">//</span> good</span> +}</pre></div> +<p>Don't set things to undefined. Reserve that value to mean "not yet set to anything." +Boolean objects are verboten.</p> +</li> +<li> +<p>Use JSDoc</p> +</li> +</ul> +<h2><a id="user-content-ecmascript" class="anchor" aria-hidden="true" href="#ecmascript"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ECMAScript</h2> +<ul> +<li>Use <code>const</code> unless you need a re-assignable variable. This ensures things you don't want to be re-assigned can't be.</li> +<li>Be careful migrating files to newer syntax. +<ul> +<li>Don't mix <code>require</code> and <code>import</code> in the same file. Either stick to the old style or change them all.</li> +<li>Likewise, don't mix things like class properties and <code>MyClass.prototype.MY_CONSTANT = 42;</code></li> +<li>Be careful mixing arrow functions and regular functions, eg. if one function in a promise chain is an +arrow function, they probably all should be.</li> +</ul> +</li> +<li>Apart from that, newer ES features should be used whenever the author deems them to be appropriate.</li> +<li>Flow annotations are welcome and encouraged.</li> +</ul> +<h2><a id="user-content-react" class="anchor" aria-hidden="true" href="#react"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React</h2> +<ul> +<li> +<p>Pull out functions in props to the class, generally as specific event handlers:</p> +<div class="highlight highlight-source-js-jsx"><pre><<span class="pl-ent">Foo</span> <span class="pl-e">onClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-k">function</span>(<span class="pl-smi">ev</span>) {<span class="pl-en">doStuff</span>();}<span class="pl-pse">}</span>> // Bad +<<span class="pl-ent">Foo</span> <span class="pl-e">onClick</span><span class="pl-k">=</span><span class="pl-pse">{</span>(<span class="pl-smi">ev</span>) <span class="pl-k">=></span> {<span class="pl-en">doStuff</span>();}<span class="pl-pse">}</span>> // Equally bad +<<span class="pl-ent">Foo</span> <span class="pl-e">onClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-c1">this</span><span class="pl-k">.</span><span class="pl-smi">doStuff</span><span class="pl-pse">}</span>> // Better +<<span class="pl-ent">Foo</span> <span class="pl-e">onClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-c1">this</span><span class="pl-k">.</span><span class="pl-smi">onFooClick</span><span class="pl-pse">}</span>> // Best, if onFooClick would do anything other than directly calling doStuff</pre></div> +<p>Not doing so is acceptable in a single case: in function-refs:</p> +<div class="highlight highlight-source-js-jsx"><pre><<span class="pl-ent">Foo</span> <span class="pl-e">ref</span><span class="pl-k">=</span><span class="pl-pse">{</span>(<span class="pl-smi">self</span>) <span class="pl-k">=></span> <span class="pl-c1">this</span><span class="pl-k">.</span><span class="pl-smi">component</span> <span class="pl-k">=</span> <span class="pl-c1">self</span><span class="pl-pse">}</span>></pre></div> +</li> +<li> +<p>Prefer classes that extend <code>React.Component</code> (or <code>React.PureComponent</code>) instead of <code>React.createClass</code></p> +<ul> +<li>You can avoid the need to bind handler functions by using <a href="https://reactjs.org/docs/react-component.html#constructor" rel="nofollow">property initializers</a>:</li> +</ul> +<div class="highlight highlight-source-js"><pre><span class="pl-k">class</span> <span class="pl-en">Widget</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> + <span class="pl-en">onFooClick</span> <span class="pl-k">=</span> () <span class="pl-k">=></span> { + <span class="pl-k">...</span> + } +}</pre></div> +<ul> +<li>To define <code>propTypes</code>, use a static property:</li> +</ul> +<div class="highlight highlight-source-js"><pre><span class="pl-k">class</span> <span class="pl-en">Widget</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> + <span class="pl-k">static</span> propTypes <span class="pl-k">=</span> { + <span class="pl-k">...</span> + } +}</pre></div> +<ul> +<li>If you need to specify initial component state, <a href="https://reactjs.org/docs/react-component.html#constructor" rel="nofollow">assign it</a> to <code>this.state</code> in the constructor:</li> +</ul> +<div class="highlight highlight-source-js"><pre><span class="pl-en">constructor</span>(<span class="pl-smi">props</span>) { + <span class="pl-c1">super</span>(props); + <span class="pl-c"><span class="pl-c">//</span> Don't call this.setState() here!</span> + <span class="pl-c1">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> { counter<span class="pl-k">:</span> <span class="pl-c1">0</span> }; +}</pre></div> +</li> +<li> +<p>Think about whether your component really needs state: are you duplicating +information in component state that could be derived from the model?</p> +</li> +</ul> +</article> + </div> + + </div> + + + + <details class="details-reset details-overlay details-overlay-dark"> + <summary data-hotkey="l" aria-label="Jump to line"></summary> + <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast linejump" aria-label="Jump to line"> + <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-jump-to-line-form Box-body d-flex" action="" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" /> + <input class="form-control flex-auto mr-3 linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line…" aria-label="Jump to line" autofocus> + <button type="submit" class="btn" data-close-dialog>Go</button> +</form> </details-dialog> + </details> + + + + </div> + <div class="modal-backdrop js-touch-events"></div> +</div> + + </main> + </div> + + + </div> + + +<div class="footer container-lg width-full p-responsive" role="contentinfo"> + <div class="position-relative d-flex flex-row-reverse flex-lg-row flex-wrap flex-lg-nowrap flex-justify-center flex-lg-justify-between pt-6 pb-2 mt-6 f6 text-gray border-top border-gray-light "> + <ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0"> + <li class="mr-3 mr-lg-0">© 2019 <span title="0.30459s from unicorn-68464f6b6f-w6ctj">GitHub</span>, Inc.</li> + <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to terms, text:terms" href="https://github.com/site/terms">Terms</a></li> + <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to privacy, text:privacy" href="https://github.com/site/privacy">Privacy</a></li> + <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to security, text:security" href="https://github.com/security">Security</a></li> + <li class="mr-3 mr-lg-0"><a href="https://githubstatus.com/" data-ga-click="Footer, go to status, text:status">Status</a></li> + <li><a data-ga-click="Footer, go to help, text:help" href="https://help.github.com">Help</a></li> + </ul> + + <a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://github.com"> + <svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg> +</a> + <ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0"> + <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to contact, text:contact" href="https://github.com/contact">Contact GitHub</a></li> + <li class="mr-3 mr-lg-0"><a href="https://github.com/pricing" data-ga-click="Footer, go to Pricing, text:Pricing">Pricing</a></li> + <li class="mr-3 mr-lg-0"><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li> + <li class="mr-3 mr-lg-0"><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li> + <li class="mr-3 mr-lg-0"><a href="https://github.blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li> + <li><a data-ga-click="Footer, go to about, text:about" href="https://github.com/about">About</a></li> + + </ul> + </div> + <div class="d-flex flex-justify-center pb-6"> + <span class="f6 text-gray-light"></span> + </div> +</div> + + + + <div id="ajax-error-message" class="ajax-error-message flash flash-error"> + <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg> + <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> + <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg> + </button> + You can’t perform that action at this time. + </div> + + + <script crossorigin="anonymous" integrity="sha512-BlCvumXWTvpASEdhCGiahDUDf7Bwb8QXA2XnnSnqJ9QafxcNcrNYUNYS2wXmd3nEpO//+zlZa9DSV9zmu5MqRg==" type="application/javascript" src="https://github.githubassets.com/assets/compat-bootstrap-90c0ace0.js"></script> + <script crossorigin="anonymous" integrity="sha512-tvpJOpHKYOu+dVKq1e7vf5Ble6rQlpDAhxbiu8KqVZpeztFNcLtD1EwUsvHkXGe6lEIn+1xHgvt/m360g1gdCw==" type="application/javascript" src="https://github.githubassets.com/assets/frameworks-a142dc33.js"></script> + + <script crossorigin="anonymous" async="async" integrity="sha512-zVt6qF6Vnob4M0tszCA7oxQPqafsv7oxS/ONZ+3hUti1AFQhCPby2FqekX7w0S7sbTTOyigUsHzMWmYSxdbJTg==" type="application/javascript" src="https://github.githubassets.com/assets/github-bootstrap-989527f2.js"></script> + + + + <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner" hidden + > + <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg> + <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span> + <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span> + </div> + <template id="site-details-dialog"> + <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark hx_rsm" open> + <summary role="button" aria-label="Close dialog"></summary> + <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> + <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> + <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg> + </button> + <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> + </details-dialog> + </details> +</template> + + <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0"> + <div class="Popover-message Popover-message--bottom-left Popover-message--large Box box-shadow-large" style="width:360px;"> + </div> +</div> + + <div aria-live="polite" class="js-global-screen-reader-notice sr-only"></div> + + </body> +</html> + |