From a447e5b918242e84266e69e25e7e8f297396e11d Mon Sep 17 00:00:00 2001
From: Thore Caspersen <thorecaspersen@hotmail.com>
Date: Mon, 10 Jun 2019 21:49:47 +0200
Subject: [PATCH] fix(import): check if the element is already imported & dont
 import undefined

---
 input/testmarkdown.md    |  2 +-
 lib/templates/default.js | 20 ++++++++++++++++----
 output/testmarkdown.js   |  4 ++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/input/testmarkdown.md b/input/testmarkdown.md
index e5c066b..8e882f8 100644
--- a/input/testmarkdown.md
+++ b/input/testmarkdown.md
@@ -7,7 +7,7 @@ prependJs:
 ---
 # An h1 header
 
-{{ <LetsDoThis /> }}
+{{ <headline /> }}
 Paragraphs are separated by a blank line. 
 
 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
diff --git a/lib/templates/default.js b/lib/templates/default.js
index ecd6abf..c044090 100644
--- a/lib/templates/default.js
+++ b/lib/templates/default.js
@@ -5,6 +5,8 @@ const stringifyObject = require("stringify-object");
 
 module.exports = data => {
   let prepended = "";
+  // remember what impoter that is used, so we dont import same element twice
+  let usedElementNames = [];
   if (data.prependJs !== undefined) {
     data.prependJs.forEach(m => {
       prepended += `${m}\n`;
@@ -17,10 +19,12 @@ module.exports = data => {
     data.listOfReactComponentsUsed.forEach(value => {
       // use special impoter, if it is defined in the impoter list
 
-      if (importer && value in importer) {
+      if (importer && typeof value != "undefined" && value in importer) {
         prepended += `import ${value} from '${importer[value]}/${value}';\n`;
-      } else {
+        usedElementNames.push(value);
+      } else if (typeof value != "undefined") {
         prepended += `import ${value} from '${data.defualtImport}/${value}';\n`;
+        usedElementNames.push(value);
       }
     }); // eksampel: import button from 'tequila-ui/button';
   }
@@ -30,9 +34,17 @@ module.exports = data => {
       // the array contains empty string, so we hva to check for that
       if (value !== "") {
         // use special impoter, if it is defined in the impoter list
-        if (importer && value in importer) {
+        if (
+          importer &&
+          typeof value != "undefined" &&
+          value in importer &&
+          !usedElementNames.includes(value)
+        ) {
           prepended += `import ${value} from '${importer[value]}/${value}';\n`;
-        } else {
+        } else if (
+          typeof value != "undefined" &&
+          !usedElementNames.includes(value)
+        ) {
           prepended += `import ${value} from '${
             data.defualtImport
           }/${value}';\n`;
diff --git a/output/testmarkdown.js b/output/testmarkdown.js
index e5a5a3f..2299999 100644
--- a/output/testmarkdown.js
+++ b/output/testmarkdown.js
@@ -4,9 +4,9 @@ Everything is ok
 import React from 'react';
 const Timer = require('./timer');
 import { Watcher } from './watcher';
+import headline from 'semantic-ui-react/headline';
 import LetsDoThis from 'tequila-ui/LetsDoThis';
 import FancyReactComponent from 'antd/FancyReactComponent';
-import headline from 'semantic-ui-react/headline';
 import quotes from 'tequila-ui/quotes';
 
 const frontMatter = {
@@ -20,7 +20,7 @@ export default class Testmarkdown extends React.PureComponent {
     return (
       <div>
         <headline>An h1 header</headline>
-        <LetsDoThis />
+        <headline />
         <p>Paragraphs are separated by a blank line. </p>
         <p>
           2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and{' '}