fixed tokenizer logic error on tokenizing the text around self closin…

…g tags causing #4 to occur

packages/temple/src/compiler/Tokenizer.ts

@@ -232,6 +232,27 @@ export default class Tokenizer {
         this._addTextToChildren(this._markup, last.end, tag.start);
       }
     //there are no markup tokens
+    //check history
+    } else if (this._history.length > 0) {
+      //find the gap between the last markup token and the self closing tag
+      const last = this._history[this._history.length - 1];
+      //get the end index
+      let end = last.end;
+      //if the last type is a script
+      if (last.type === 'ProgramExpression') {
+        //type update
+        const script = last as ScriptToken;
+        //} is not included
+        //</script> is not included
+        end += script.inline ? 1: 9;
+      //if the last type is a style
+      } else if (last.type === 'StyleExpression') {
+        //</style> is not included
+        end += 8;
+      }
+      if (last.end < tag.start) {
+        this._addTextToChildren(this._markup, end, tag.start);
+      }
     //if there is a gap between the start and the self closing tag
     } else if (tag.start > 0) {
       //add it as a text node

packages/temple/src/compiler/Transpiler.ts

@@ -220,7 +220,6 @@ export default class Transpiler {
           } else {
             expression += `TempleRegistry.createText(\`${child.value}\`, false)`;
           }
-
         //null, true, false, number 
         } else {
           expression += `TempleRegistry.createText(String(${child.value}))`;

packages/temple/tests/CompilerTokenizer.test.ts

@@ -8,7 +8,7 @@ import fs from 'fs';
 import Tokenizer from '../src/compiler/Tokenizer';
 
 describe('Temple Compiler Tokenizer', () => {
-  it('Should parse Temple Page', () => {
+  it('Should tokenize Temple Page', () => {
     const actual = Tokenizer.tokenize(
       fs.readFileSync(__dirname + '/fixtures/page.dtml', 'utf8')
     );
@@ -19,7 +19,17 @@ describe('Temple Compiler Tokenizer', () => {
     expect(actual.markup.length).to.equal(2);
   });
 
-  it('Should parse Temple App', () => {
+  it('Should tokenize No Markup', () => {
+    const actual = Tokenizer.tokenize(
+      fs.readFileSync(__dirname + '/fixtures/footer.tml', 'utf8')
+    );
+    expect(actual.components.length).to.equal(1);
+    expect(actual.scripts.length).to.equal(1);
+    expect(actual.styles.length).to.equal(1);
+    expect(actual.markup.length).to.equal(2);
+  });
+
+  it('Should tokenize Temple App', () => {
     const actual = Tokenizer.tokenize(
       fs.readFileSync(__dirname + '/fixtures/app.tml', 'utf8')
     );
@@ -30,7 +40,7 @@ describe('Temple Compiler Tokenizer', () => {
     expect(actual.markup.length).to.equal(8);
   });
 
-  it('Should parse link (inline) to style (block) issue', () => {
+  it('Should tokenize link (inline) to style (block) issue', () => {
     const actual = Tokenizer.tokenize(
       fs.readFileSync(__dirname + '/fixtures/components/header.tml', 'utf8')
     );
@@ -41,7 +51,7 @@ describe('Temple Compiler Tokenizer', () => {
     expect(actual.markup.length).to.equal(2);
   });
 
-  it('Should parse $', () => {
+  it('Should tokenize $', () => {
     const actual = Tokenizer.tokenize('<div><span>$</span>ok</div>');
     const markup = actual.markup[0].children?.[0] as MarkupToken;
     const literal = markup.children?.[0] as LiteralToken;

packages/temple/tests/DocumentTranspiler.test.ts

@@ -27,12 +27,12 @@ describe('Temple Document Transpiler', () => {
     //     TempleRegistry.createText(`ok`)
     //   ]).element
     // ]
-    expect(server).to.contain('TempleRegistry.createElement(\'div\', { \'title\': title }, [');
+    expect(server).to.contain('TempleRegistry.createElement(\'div\', { \'title\': title },');
     expect(server).to.contain('TempleRegistry.createText(`$`, false)');
 
     const client = toTS(transpiler.client());
     //console.log('--client--', client);
     //const __BINDINGS__: Record<string, Record<string, any>> = {'1': { 'title': title }, };
-    expect(client).to.contain('{\'1\': { \'title\': title }, }');
+    expect(client).to.contain("const title = 'Temple - The reactive web component template engine.';");
   });
 });

packages/temple/tests/fixtures/footer.tml

@@ -0,0 +1,10 @@
+<link rel="import" type="component" href="./manifest.tml" />
+<style>
+  :host { display: block; }
+</style>
+<script>
+  import { props, children } from '@ossph/temple';
+  const { year, href } = props();
+  const company = children();
+</script>
+<manifest {year} {href} {company} />