put things in the right place so they actually work

docs/tutorial_start.md

@@ -60,33 +60,6 @@ This will create the basics CRUD functions we need to work with Contacts. Don't
 
 ## Creating our `<contact-form>`
 
-Now we're ready to start building our contact form custom element. Before we start, we'll want to add an additional esbuild config that will keep our custom element code separate from the rest of the app. This will let us easily serve it to our clients without needing to do the additional step of publishing an npm package.
-
-### Setup
-
-To do this, crack open `config.exs` and add the following add a `:custom_elements` section to the end of your esbuild config:
-
-```elixir
-config :esbuild,
-  default: [
-    ...
-  ],
-  custom_elements: [
-    args:
-      ~w(js/custom_elements.ts --bundle --target=es2020 --format=esm --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
-    cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
-  ]
-```
-
-We'll want to add a watcher in our `dev.exs` as well. Add this line to the `watchers` section of your endpoint config:
-
-```elixir
-    esbuild_custom_elements: {Esbuild, :install_and_run, [:custom_elements, ~w(--sourcemap=inline --watch)]},
-```
-
-### Creating the element
-
 To create our `<contact-form>` custom element, we'll use a generator to help us out:
 
 ```
@@ -101,6 +74,22 @@ We'll also want to add an import for our element in `app/js/custom_elements.js`.
 import './contact-form.js'
 ```
 
+**Note: **
+It is recommended your `esbuild` config to target `es2020`:
+
+```elixir
+# Configure esbuild (the version is required)
+config :esbuild,
+  version: "0.17.11",
+  default: [
+    args:
+      ~w(js/app.js --bundle --target=es2020 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]
+
+```
+
 ### Render state, dispatch events
 
 As we mentioned earlier, the goal of LiveState is to keep our front end code simple. For our ContactForm element, our state is very simple indeed. To start with, we'll have a single property, `complete`, which will determine if we need to display the contact form or the success message. First, we'll add a `complete` field to hold this state, and tell `LiveState` we want it to be the source of this property. Here's the code we need to add the body of our element class:

lib/mix/tasks/live_state.gen.channel.ex

@@ -28,7 +28,7 @@ defmodule Mix.Tasks.LiveState.Gen.Channel do
 
     Mix.Phoenix.check_module_name_availability!(binding[:module] <> "Channel")
 
-    channel_contents = EEx.eval_file(Path.join(__DIR__, "../../../templates/channel.ex"), binding)
+    channel_contents = EEx.eval_file(Path.join(__DIR__, "../../../priv/templates/channel.ex"), binding)
     File.mkdir_p!(Path.join(web_prefix, "channels"))
     File.write!(Path.join(web_prefix, "channels/#{binding[:path]}_channel.ex"), channel_contents)
 

lib/mix/tasks/live_state.gen.element.ex

@@ -31,7 +31,7 @@ defmodule Mix.Tasks.LiveState.Gen.Element do
     Mix.shell().cmd("npm install --prefix assets lit phx-live-state")
 
     element_contents =
-      EEx.eval_file(Path.join(__DIR__, "../../../templates/custom-element.ts"), binding)
+      EEx.eval_file(Path.join(__DIR__, "../../../priv/templates/custom-element.ts"), binding)
 
     File.write!("assets/js/#{tag_name}.ts", element_contents)
   end

mix.exs

@@ -6,7 +6,7 @@ defmodule LiveState.MixProject do
   def project do
     [
       app: :live_state,
-      version: "0.7.0",
+      version: "0.7.1",
       elixir: ">= 1.12.0",
       elixirc_paths: elixirc_paths(Mix.env()),
       start_permanent: Mix.env() == :prod,