kaslo/synapse
1
0
Fork 0
Code Wiki Activity
Files
da19eb18bef41f7d69ee3e73c0fc0ade85df4f1c
synapse/synapse_topology/webui/code_style.md
Jorik Schellekens c747fca2e8 Add some structure.
2019-08-28 15:59:54 +01:00

84 KiB
Raw Blame History

<html lang="en"> <head> 
<meta name="twitter:image:src" content="https://avatars3.githubusercontent.com/u/8418310?s=400&amp;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&amp;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." />

  <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="google-analytics" content="UA-3769691-2">

  <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">

  <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">

<link rel="canonical" href="https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md" data-pjax-transient>
</head>
Skip to content 
    <header class="Header-old header-logged-out js-details-container Details position-relative f4 py-2" role="banner">

      <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="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:null,&quot;originating_request_id&quot;:&quot;DFC0:3755:696525:BB13FF:5D554340&quot;,&quot;originating_url&quot;:&quot;https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:null}}" data-hydro-click-hmac="070c64fc6caaa0b0fb319837744365a4e609ffa99ac843ebb790f2c2aa5715b8"
          data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">
          Sign&nbsp;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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</span></a></li>
                </ul>

                <h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Learn &amp; 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">&rarr;</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">&rarr;</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">&rarr;</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="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
  • No suggested jump to results 
        </div>
  </label>

      </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="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:null,&quot;originating_request_id&quot;:&quot;DFC0:3755:696525:BB13FF:5D554340&quot;,&quot;originating_url&quot;:&quot;https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:null}}" data-hydro-click-hmac="5c1f11935f911f94cc80882c73f71cbad2f8c2820c6121ff4595cadc7033dda3"
      data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">
      Sign&nbsp;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="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:null,&quot;originating_request_id&quot;:&quot;DFC0:3755:696525:BB13FF:5D554340&quot;,&quot;originating_url&quot;:&quot;https://github.com/matrix-org/matrix-react-sdk/blob/develop/code_style.md&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:null}}" data-hydro-click-hmac="5c1f11935f911f94cc80882c73f71cbad2f8c2820c6121ff4595cadc7033dda3"
        data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">
        Sign&nbsp;up
      </a>
  </div>
</div>

<div id="js-flash-container">

  <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>
  • Watch 38
  • Star 308
  • Fork 217 
    •   <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>

    /matrix-react-sdk

    </div>

    <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 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
    Insights 
    <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">


    <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">


      <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 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">
    Pulse 
    <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="&#x2713;" /><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>

    Join GitHub today

    GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

    Sign up 
    <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">
    title="Switch branches or tags"> <i>Branch:</i> <span class="css-truncate-target">develop</span> 
        <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-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&amp;v=4" width="20" height="20" alt="@dbkr" />

    @t3chguy @richvdh @aviraldg @ara4n @jryans 

    </div>

    <div class="Box mt-3 position-relative">
    211 lines (181 sloc) 6.6 KB 
    <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>

    Matrix JavaScript/ECMAScript Style Guide

    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 https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst

    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.

    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.

    General Style

    • 4 spaces to indent, for consistency with Matrix Python.

    • 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.

    • No trailing whitespace at end of lines.

    • Don't indent empty lines.

    • One newline at the end of the file.

    • Unix newlines, never \r

    • Indent similar to our python code: break up long lines at logical boundaries, more than one argument on a line is OK

    • Use semicolons, for consistency with node.

    • UpperCamelCase for class and type names

    • lowerCamelCase for functions and variables.

    • Single line ternary operators are fine.

    • UPPER_CAMEL_CASE for constants

    • Single quotes for strings by default, for consistency with most JavaScript styles:

      "bad" // Bad
'good' // Good

    • Use parentheses or ` instead of \ for line continuation where ever possible

    • Open braces on the same line (consistent with Node):

      if (x) {
    console.log("I am a fish"); // Good
}

      if (x)
{
console.log("I am a fish"); // Bad
}

    • Spaces after if, for, else etc, no space around the condition:

      if (x) {
    console.log("I am a fish"); // Good
}

      if(x) {
console.log("I am a fish"); // Bad
}
      

      if ( x ) {
console.log("I am a fish"); // Bad
}

    • No new line before else, catch, finally, etc:

      if (x) {
    console.log("I am a fish");
} else {
    console.log("I am a chimp"); // Good
}

      if (x) {
console.log("I am a fish");
}
else {
console.log("I am a chimp"); // Bad
}

    • 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 var:

      const key = "foo",
    comparator = function(x, y) {
        return x - y;
    }; // Bad

      const key = "foo";
const comparator = function(x, y) {
return x - y;
}; // Good
      

      let x = 0, y = 0; // Fine
      

      let x = 0;
let y = 0; // Also fine

    • A single line if is fine, all others have braces. This prevents errors when adding to the code.:

      if (x) return true; // Fine

      if (x) {
return true; // Also fine
}
      

      if (x)
return true; // Not fine

    • 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:

      var mascots = [
    "Patrick",
    "Shirley",
    "Colin",
    "Susan",
    "Sir Arthur David" // Bad
];

      var mascots = [
"Patrick",
"Shirley",
"Colin",
"Susan",
"Sir Arthur David", // Good
];

    • Use null, undefined 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:

      function hasThings() {
    return !!length; // bad
    return new Boolean(length); // REALLY bad
    return Boolean(length); // good
}

      Don't set things to undefined. Reserve that value to mean "not yet set to anything." Boolean objects are verboten.

    • Use JSDoc

    ECMAScript

    • Use const unless you need a re-assignable variable. This ensures things you don't want to be re-assigned can't be.
    • Be careful migrating files to newer syntax.
      • Don't mix require and import in the same file. Either stick to the old style or change them all.
      • Likewise, don't mix things like class properties and MyClass.prototype.MY_CONSTANT = 42;
      • 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.
    • Apart from that, newer ES features should be used whenever the author deems them to be appropriate.
    • Flow annotations are welcome and encouraged.

    React

    • Pull out functions in props to the class, generally as specific event handlers:

      <Foo onClick={function(ev) {doStuff();}}> // Bad
<Foo onClick={(ev) => {doStuff();}}> // Equally bad
<Foo onClick={this.doStuff}> // Better
<Foo onClick={this.onFooClick}> // Best, if onFooClick would do anything other than directly calling doStuff

      Not doing so is acceptable in a single case: in function-refs:

      <Foo ref={(self) => this.component = self}>

    • Prefer classes that extend React.Component (or React.PureComponent) instead of React.createClass

      class Widget extends React.Component
    onFooClick = () => {
        ...
    }
}
      • To define propTypes, use a static property:
      class Widget extends React.Component
    static propTypes = {
        ...
    }
}
      • If you need to specify initial component state, assign it to this.state in the constructor:
      constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
}

    • Think about whether your component really needs state: are you duplicating information in component state that could be derived from the model?

    </div>
    Go 
    </main>

    <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>
    You can’t perform that action at this time. 
    <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>
    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
    </html>
    View Git Blame Copy Permalink