Setup guide

Hej Jakob 👋

Version 16 af Nodejs fungerer åbenbart ikke med nogle af de dependencies som skal downloades 🤷‍♀️. Version 12 virker til gengæld.

Tilføj poison til mix.exs

defp deps do
  [
    # ...
    {:poison, "~> 3.1"}
  ]
end

Det er en god idé at skrive mix deps.get i den nærmeste terminal efter du har tilføjet den nye dependency.

Derefter skal du finde filen lib/din_app_web/views/page_view.ex og tilføje:

defmodule DinAppWeb.PageView do
  # ...
  def svelte(name, props) do
    raw """
    <div 
      class="svelte-component"
      data-name=#{name}
      data-props=#{json(props)}
      >
    </div>
    """
  end


  defp json(props) do
    props
    |> Poison.encode
    |> case do
      {:ok, message} ->
        message
      {:error, reason} ->
        IO.inspect(reason)
        ""
    end
  end
end

Tilføj/erstat følgende filer i mappen assets/

1. tsconfig.json
2. package.json
3. webpack.config.js
4. js/sveltegen.js

Derefter skal du tilføje

import sveltegen from "./sveltegen"

til assets/js/app.js

Til sidst skal du bare tilføje mappen svelte: assets/js/svelte

Eksempel

assets/js/svelte/test.svelte

<script lang="ts">
  export let count: number
</script>

<p> { count } </p>

<style lang="scss">
  # ...
</style>

lib/din_app_web/templates/page/index.html.eex

# ...
<%= svelte("test", %{count: 3}) %>
# ...