Merge pull request #148 from wyeworks/heex

Migrate soft-deprecated leex templates to HEEx

Author: grzuy

…_console_web/live/console_live.html.leex …_console_web/live/console_live.html.heexlib/elixir_console_web/live/console_live.html.leex renamed to lib/elixir_console_web/live/console_live.html.heex lib/elixir_console_web/live/console_live.html.leex renamed to lib/elixir_console_web/live/console_live.html.heex

@@ -1,6 +1,7 @@
 <div class="flex h-full flex-col sm:flex-row">
   <div class="flex-1 sm:h-full overflow-scroll">
     <div class="h-full flex flex-col">
+      <div class="flex-1"></div>
       <%= live_component(HistoryComponent, output: @output, id: :history) %>
       <%= live_component(CommandInputComponent, history: @history, bindings: @sandbox.bindings, id: :command_input) %>
     </div>

…e_live/command_input_component.html.leex …e_live/command_input_component.html.heexlib/elixir_console_web/live/console_live/command_input_component.html.leex renamed to lib/elixir_console_web/live/console_live/command_input_component.html.heex lib/elixir_console_web/live/console_live/command_input_component.html.leex renamed to lib/elixir_console_web/live/console_live/command_input_component.html.heex

@@ -9,8 +9,8 @@
       autofocus
       name="command"
       phx-hook="CommandInput"
-      data-input_value="<%= @input_value %>"
-      data-caret_position="<%= @caret_position %>"
+      data-input_value={@input_value}
+      data-caret_position={@caret_position}
     />
   </div>
 </form>

lib/elixir_console_web/live/console_live/history_component.html.heex

@@ -0,0 +1,18 @@
+<div class="p-2" id="commandOutput" phx-update="append">
+  <div id="version-info" class="text-gray-500 font-medium">
+    <p>Elixir <%= System.version() %>/OTP <%= System.otp_release() %></p>
+  </div>
+  <%= for output <- @output do %>
+    <div id={"command#{output.id}"} class="text-gray-300 font-medium">
+      <%= print_prompt() %><%= format_command(output.command) %>
+    </div>
+    <div id={"output#{output.id}"} class="text-teal-300">
+      <%= output.result %>
+      <%= if output.error do %>
+        <span class="text-pink-400">
+          <%= output.error %>
+        </span>
+      <% end %>
+    </div>
+  <% end %>
+</div>

lib/elixir_console_web/live/console_live/history_component.html.leex

@@ -18,7 +18,7 @@
       <%= if @contextual_help do %>
         <div id="documentation-output">
           <span class="mb-8 font-bold text-green-400">
-          <a href="<%= @contextual_help[:link] %>" target="_blank" class="underline"><%= @contextual_help[:func_name] %></a>
+            <a href={@contextual_help[:link]} target="_blank" class="underline"><%= @contextual_help[:func_name] %></a>
           </span>
           <span class="text-xs mb-4 font-bold text-gray-400"><%= @contextual_help[:header] %></span>
           <span class="contextual-help-doc text-xs text-gray-400"><%= Phoenix.HTML.raw @contextual_help[:doc] %></span>
@@ -33,7 +33,7 @@
         <p class="text-sm">Please note some features of the language are not safe to run in a shared environment like this console.
         If you are interested in knowing more about the limitations, you must <a class="underline" href="https://github.com/wyeworks/elixir_console#how-much-elixir-can-i-run-in-the-web-console">read here</a>.</p>
         <p class="text-sm">Please report any security vulnerabilities to
-          <a class="underline" href="mailto:elixir-console-security@wyeworks.com">elixir-console-security@wyeworks.com<a>.
+          <a class="underline" href="mailto:elixir-console-security@wyeworks.com">elixir-console-security@wyeworks.com</a>.
         </p>
       <% end %>
     <% end %>

…console_live/sidebar_component.html.leex …console_live/sidebar_component.html.heexlib/elixir_console_web/live/console_live/sidebar_component.html.leex renamed to lib/elixir_console_web/live/console_live/sidebar_component.html.heex lib/elixir_console_web/live/console_live/sidebar_component.html.leex renamed to lib/elixir_console_web/live/console_live/sidebar_component.html.heex

@@ -17,7 +17,7 @@
     <%= csrf_meta_tag() %>
     <title>Elixir Web Console - WyeWorks</title>
     <meta name="description" content="The Elixir Web Console is where you can try the Elixir language without the need to leave the browser." />
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
     <link href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500&display=swap" rel="stylesheet">
   </head>
   <body class="h-screen bg-white flex flex-col px-10 pb-5">
@@ -45,6 +45,6 @@
         <%= @inner_content %>
       </div>
     </main>
-    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <script type="text/javascript" src={Routes.static_path(@conn, "/js/app.js")}></script>
   </body>
 </html>

…sole_web/templates/layout/root.html.leex …sole_web/templates/layout/root.html.heexlib/elixir_console_web/templates/layout/root.html.leex renamed to lib/elixir_console_web/templates/layout/root.html.heex lib/elixir_console_web/templates/layout/root.html.leex renamed to lib/elixir_console_web/templates/layout/root.html.heex

@@ -20,11 +20,11 @@ defmodule ElixirConsoleWeb.ConsoleLiveTest do
     end
 
     test "command result is displayed", %{html: html} do
-      assert html =~ ~r/<div id="output.".*3.*<\/div>/s
+      assert html =~ ~r/<div[^>]*id="output.".*3.*<\/div>/s
     end
 
     test "binding value is displayed in the Current Variables section", %{html: html} do
-      assert html =~ ~r/<h2.*Current Bindings<\/h2><ul><li.*>a: <code.*3<\/code>/s
+      assert html =~ ~r/<h2[^>]*>Current Bindings<\/h2><ul><li.*>a: <code.*3<\/code>/s
     end
   end