Update to latest phoenix and liveview

Author: RoyalIcing

apps/components_guide/lib/components_guide/content/text.ex

@@ -11,9 +11,7 @@ defmodule ComponentsGuide.Content.Text do
       |> cast(params, [:content])
       |> validate_required([:content])
   end
-end
 
-defimpl Phoenix.Param, for: ComponentsGuide.Content.Text do
   def to_param(%ComponentsGuide.Content.Text{id: id}) do
     Base.url_encode64(id)
   end
@@ -22,3 +20,13 @@ defimpl Phoenix.Param, for: ComponentsGuide.Content.Text do
     Base.url_encode64(:crypto.hash(:sha256, content))
   end
 end
+
+# defimpl Phoenix.Param, for: ComponentsGuide.Content.Text do
+#   def to_param(%ComponentsGuide.Content.Text{id: id}) do
+#     Base.url_encode64(id)
+#   end
+
+#   def to_param(%ComponentsGuide.Content.Text{content: content}) when is_binary(content) do
+#     Base.url_encode64(:crypto.hash(:sha256, content))
+#   end
+# end

apps/components_guide_web/assets/css/app.css

@@ -6,6 +6,8 @@
 
 @tailwind utilities;
 
+@import "../node_modules/nprogress/nprogress.css";
+
 html {
     @apply bg-gray-900;
 }

apps/components_guide_web/assets/js/app.js

@@ -10,12 +10,26 @@ import css from "../css/app.css"
 // Import dependencies
 //
 import "phoenix_html";
-
+import {Socket} from "phoenix"
+import NProgress from "nprogress"
 import LiveSocket from "phoenix_live_view"
 
-let liveSocket = new LiveSocket("/live")
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+// Show progress bar on live navigation and form submits
+window.addEventListener("phx:page-loading-start", info => NProgress.start())
+window.addEventListener("phx:page-loading-stop", info => NProgress.done())
+
+// connect if there are any LiveViews on the page
 liveSocket.connect()
 
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)
+window.liveSocket = liveSocket
+
+
 import Vue from "vue";
 import VueEditor from "./editor.vue";
 

apps/components_guide_web/assets/package-lock.json

@@ -6,30 +6,31 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "nprogress": "^0.2.0",
     "phoenix": "file:../../../deps/phoenix",
     "phoenix_html": "file:../../../deps/phoenix_html",
     "phoenix_live_view": "file:../../../deps/phoenix_live_view",
-    "tiptap": "^1.20.1",
-    "vue": "^2.6.10"
+    "tiptap": "^1.27.1",
+    "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "@tailwindcss/ui": "^0.2.2",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.0",
+    "autoprefixer": "^9.8.0",
+    "babel-loader": "^8.1.0",
     "copy-webpack-plugin": "^4.5.0",
     "css-loader": "^2.1.1",
     "install": "^0.13.0",
     "mini-css-extract-plugin": "^0.4.0",
-    "npm": "^6.14.4",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "npm": "^6.14.5",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
-    "tailwindcss": "^1.4.1",
+    "tailwindcss": "^1.4.6",
     "uglifyjs-webpack-plugin": "^1.2.4",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.4.0",
-    "webpack-cli": "^3.3.4"
+    "vue-loader": "^15.9.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   }
 }

apps/components_guide_web/assets/package.json

@@ -20,10 +20,10 @@ defmodule ComponentsGuideWeb do
   def controller do
     quote do
       use Phoenix.Controller, namespace: ComponentsGuideWeb
+
       import Plug.Conn
       import ComponentsGuideWeb.Gettext
       alias ComponentsGuideWeb.Router.Helpers, as: Routes
-      import Phoenix.LiveView.Controller, only: [live_render: 3]
     end
   end
 
@@ -36,23 +36,32 @@ defmodule ComponentsGuideWeb do
       # Import convenience functions from controllers
       import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]
 
-      # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
+      # Include shared imports and aliases for views
+      unquote(view_helpers())
+    end
+  end
 
-      import ComponentsGuideWeb.ErrorHelpers
-      import ComponentsGuideWeb.Gettext
-      alias ComponentsGuideWeb.Router.Helpers, as: Routes
-      # import Phoenix.LiveView.Helpers
-      import Phoenix.LiveView, only: [live_render: 2, live_render: 3]
+  def live_view do
+    quote do
+      use Phoenix.LiveView,
+        layout: {ComponentsGuideWeb.LayoutView, "live.html"}
 
-      import Paredown
-      alias ComponentsGuideWeb.StylingHelpers, as: Styling
+      unquote(view_helpers())
+    end
+  end
+
+  def live_component do
+    quote do
+      use Phoenix.LiveComponent
+
+      unquote(view_helpers())
     end
   end
 
   def router do
     quote do
       use Phoenix.Router
+
       import Plug.Conn
       import Phoenix.Controller
       import Phoenix.LiveView.Router
@@ -66,6 +75,26 @@ defmodule ComponentsGuideWeb do
     end
   end
 
+  defp view_helpers do
+    quote do
+      # Use all HTML functionality (forms, tags, etc)
+      use Phoenix.HTML
+
+      # Import LiveView helpers (live_render, live_component, live_patch, etc)
+      import Phoenix.LiveView.Helpers
+
+      # Import basic rendering functionality (render, render_layout, etc)
+      import Phoenix.View
+
+      import ComponentsGuideWeb.ErrorHelpers
+      import ComponentsGuideWeb.Gettext
+      alias ComponentsGuideWeb.Router.Helpers, as: Routes
+
+      import Paredown
+      alias ComponentsGuideWeb.StylingHelpers, as: Styling
+    end
+  end
+
   @doc """
   When used, dispatch to the appropriate controller/view/etc.
   """

apps/components_guide_web/lib/components_guide_web.ex

@@ -8,6 +8,10 @@ defmodule ComponentsGuideWeb.Application do
   def start(_type, _args) do
     # List all child processes to be supervised
     children = [
+      # Start the Telemetry supervisor
+      ComponentsGuideWeb.Telemetry,
+      # Start the PubSub system
+      {Phoenix.PubSub, name: ComponentsGuide.PubSub},
       # Start the endpoint when the application starts
       ComponentsGuideWeb.Endpoint
       # Starts a worker by calling: ComponentsGuideWeb.Worker.start_link(arg)

apps/components_guide_web/lib/components_guide_web/application.ex

@@ -1,12 +1,18 @@
 defmodule ComponentsGuideWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :components_guide_web
 
-  socket "/live", Phoenix.LiveView.Socket
+  @session_options [
+    store: :cookie,
+    key: "_components_guide_web_key",
+    signing_salt: "BfF2quM8"
+  ]
 
   socket "/socket", ComponentsGuideWeb.UserSocket,
     websocket: true,
     longpoll: false
 
+  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
+
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phx.digest
@@ -25,8 +31,12 @@ defmodule ComponentsGuideWeb.Endpoint do
     plug Phoenix.CodeReloader
   end
 
+  plug Phoenix.LiveDashboard.RequestLogger,
+    param_key: "request_logger",
+    cookie_key: "request_logger"
+
   plug Plug.RequestId
-  plug Plug.Logger
+  plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
 
   plug Plug.Parsers,
     parsers: [:urlencoded, :multipart, :json],
@@ -35,14 +45,6 @@ defmodule ComponentsGuideWeb.Endpoint do
 
   plug Plug.MethodOverride
   plug Plug.Head
-
-  # The session will be stored in the cookie and signed,
-  # this means its contents can be read but not tampered with.
-  # Set :encryption_salt if you would also like to encrypt it.
-  plug Plug.Session,
-    store: :cookie,
-    key: "_components_guide_web_key",
-    signing_salt: "VQAmPv+f"
-
+  plug Plug.Session, @session_options
   plug ComponentsGuideWeb.Router
 end

apps/components_guide_web/lib/components_guide_web/endpoint.ex

@@ -11,7 +11,7 @@ defmodule ComponentsGuideWeb.ActivityLive do
     Ecto.UUID.generate
   end
 
-  def mount(%{}, socket) do
+  def mount(%{}, _session, socket) do
     if connected?(socket), do: :timer.send_interval(5000, self(), :update)
 
     {:ok, assign(socket, uuid: new_uuid())}

apps/components_guide_web/lib/components_guide_web/live/activity.ex

@@ -28,7 +28,7 @@ defmodule ComponentsGuideWeb.FakeSearchLive do
     Ecto.UUID.generate()
   end
 
-  def mount(%{}, socket) do
+  def mount(%{}, _session, socket) do
     #if connected?(socket), do: :timer.send_interval(5000, self(), :update)
 
     items = FakeSearch.list()