title: Load multiple components to js file but use only the required one(s)
body: <p>I'm learning to use the svelte framework to make components. But I haven't been able to make an instance of only one component from those I have loaded into the js file.</p>
  
  <p>So, this is my html file:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html&gt;
       &lt;head&gt;
           &lt;meta charset="utf-8"&gt;
       &lt;/head&gt;
       &lt;body&gt;
  &lt;script src="./build/ReviewPanelComponent.js"&gt;&lt;/script&gt;
       &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>My js input file (where I import the components):</p>
  
  <pre><code>import ReviewPanel from './ReviewPanel.html';
  
   const reviewPanel = new ReviewPanel({
        target: document.querySelector( 'body' ),
        data: 
          JSON.parse(localStorage.getItem('rooms'))
  
      });
  
        export default {
          components: {
              reviewPanel,
          }
      }
  </code></pre>
  
  <p>And the html for the component:</p>
  
  <pre><code>&lt;style&gt;
  #main{
      background-color:white;
  }
  h3,
  h4,
  h5{
      font-weight: bold;
  }
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div id="main" class="col-xs-12"&gt;
              &lt;div id="title"&gt;
                  {{#if BookedRooms.length &gt; 0}}
                      {{#each BookedRooms as br}}
                      &lt;h3&gt;{{br.Title}}&lt;/h3&gt;
                          {{#each br.PossibleRateTypes as prt}}
                      &lt;h4&gt;{{prt.UUID}}&lt;/h4&gt;
  
                          {{/each}}
                      {{/each}}
                  {{/if}}             
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, at this moment, it loads the component, because it has an instance on the js input file. The thing is, at this moment, if I want a second instance I have to create one of the js file itself. I was thinking more like just importing all the components I want in the js file and in the html file where I want to use them I would just call them.</p>
  
  <p>Is this possible. I've been reading the docs but I haven't found what I want.</p>
  
  <p>EDIT: I forgot to say that I'm using webpack, also. Hence the input and output files. I managed to use multiple components. The solution I've found was to just do this on my js input file:</p>
  
  <pre><code>import ReviewPanel from './ReviewPanel.html';
  
   window.ReviewPanel=ReviewPanel;
   window.ReviewPanel2=ReviewPanel;  
  </code></pre>
  
  <p>I put the imported object in a global variable so I can call it where I want it, like so:</p>
  
  <pre><code>&lt;div id="reviewPanel"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      // Creates the review panel component
      window.ReviewPanel = new ReviewPanel({
          target: document.querySelector('#reviewPanel'),
          data:
          JSON.parse(localStorage.getItem('rooms'))
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Yet, although I have this solution, my expectation would be import it only once in the js input file, without having to rely on global objects, and then just call it where I need it like so:</p>
  
  <pre><code>// And passing the parameters
  &lt;ReviewPanel /&gt;
  </code></pre>
  
  <p>Although I haven't seen much on React.js that's how I generally see programmers doing this. I was expecting the same. Still, as I have other things that need to be done, I'll leave it like this for now, to be optimized later.</p>
  
  <p>Still, if anyone knows how to do this I'm all ears, as I'm new to Svelte and there's not much info on it, apart from the docs, which I consider a bit confusing on same parts.</p>