live/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>kasper-js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
      rel="stylesheet"
    />
    <script src="../dist/kasper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          fontFamily: {
            mono: [
              "Share Tech Mono",
              "Consolas",
              "Liberation Mono",
              "Courier New",
            ],
          },
        },
      };
    </script>
    <script>
      const DemoSourceCode = `
<!-- accessing scope elements -->
<h3>{{person.name}}</h3>
<h4>{{person.profession}}</h4>

<!-- conditional element creation -->
<p @if="person.age > 21">Age is greater than 21</p>
<p @elseif="person.age == 21">Age is equal to 21</p>
<p @elseif="person.age < 21">Age is less than 21</p>
<p @else>Age is impossible</p>

<!-- iterating over arrays -->
<h4>Hobbies ({{person.hobbies.length}}):</h4>
<ul class="list-disc">
  <li @each="hobby with index of person.hobbies" class="text-red">
    {{index + 1}}: {{hobby}}
  </li>
</ul>

<!-- event binding -->
<div class="my-4">
  <button
    class="bg-blue-500 rounded px-4 py-2 text-white hover:bg-blue-700"
    @on:click="alert('Hello World'); console.log(100 / 2.5 + 15)"
  >
    CLICK ME
  </button>
</div>

<!-- evaluating code on element creation -->
<div @let="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
    {{student.name}}
</div>

<!-- foreach loop with objects -->
<span @each="item of Object.entries({a: 1, b: 2, c: 3 })">
  {{item[0]}}:{{item[1]}},
</span>

<!-- while loop -->
<span @let="index = 0">
   <span @while="index < 3">
     {{index = index + 1}},
   </span>
</span>

<!-- void elements -->
<div>
  <void @let="index = 0">
    <void @while="index < 3">
      {{index = index + 1}}
    </void>
  </void>
</div>

<!-- complex expressions -->
{{Math.floor(Math.sqrt(100 + 20 / (10 * (Math.abs(10 -20)) + 4)))}}

<!-- void expression -->
{{void "this won't be shown"}}

<!-- logging / debugging  -->
{{debug "expression"}}
{{void console.log("same as previous just less wordy")}}
`;

      const DemoJson = `{
  "person": {
    "name": "John Doe",
    "profession": "Software Developer",
    "age": 20,
    "hobbies": ["reading", "music", "golf"]
  }
}
`;
    </script>
    <style>
      kasper {
        color: #374151;
      }
      kasper h3 {
        font-size: 28px;
        margin-bottom: 8px;
      }
      kasper h4 {
        font-size: 21px;
        margin-bottom: 8px;
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <div class="max-w-screen-xl mx-auto px-6 pt-6 pb-12">
      <h1 class="font-mono text-5xl text-gray-500 pb-1">kasper-js</h1>
      <h3 class="font-mono text-lg text-gray-500 pb-4">
        <i>kasper-js</i> is an experimental javascript template parser, renderer
        and interpreter
      </h3>

      <div class="py-6 font-header text-gray-500 text-3xl">
        <h3>Try it out!</h3>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="flex flex-col gap-6 md:col-span-2">
          <div id="json" class="w-full h-32"></div>
          <div id="editor" class="w-full h-64 md:h-96"></div>
        </div>
        <div>
          <div
            id="render"
            class="border border-gray-300 h-64 md:h-full p-6 text-gray-700"
          >
            <div class="text-gray-500">Hit RENDER to view template output</div>
          </div>
        </div>
      </div>
      <div class="flex justify-end py-6">
        <button
          class="px-12 py-2 bg-green-600 rounded text-white font-mono hover:bg-green-500"
          id="execute"
        >
          RENDER
        </button>
      </div>
    </div>
    <a
      href="https://github.com/eugenioenko/kasper-js"
      title="View source on GitHub"
      aria-label="View source on GitHub"
      ><svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style="
          fill: #151513;
          color: #fff;
          position: absolute;
          top: 0;
          border: 0;
          right: 0;
        "
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px"
        ></path>
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
        ></path>
      </svg>
    </a>
    <script>
      function createEditor(id, source, mode) {
        let editor = ace.edit(id);
        editor.session.setMode(`ace/mode/${mode || "javascript"}`);
        editor.getSession().setUseWorker(false);
        editor.setTheme("ace/theme/monokai");
        editor.setFontSize(15);
        editor.setValue(source);
        editor.selection.moveCursorToPosition({ row: 1, column: 0 });
        editor.selection.selectLine();
        return editor;
      }

      const ejson = createEditor("json", DemoJson, "json");
      const editor = createEditor("editor", DemoSourceCode, "html");

      document.getElementById("execute").addEventListener("click", () => {
        const source = editor.getValue();
        const result = kasper.execute(source);
        const entries = JSON.parse(ejson.getValue());
        entries.alert = function (value) {
          alert(value);
        };
        const node = kasper.transpile(
          source,
          entries,
          document.getElementById("render")
        );
      });
    </script>
  </body>
</html>