Merge pull request #1435 from naymspace/feature/phoenix-1.8

Support Phoenix 1.8

Author: pehbehbeh

Dockerfile

@@ -64,6 +64,7 @@ RUN yarn install --pure-lockfile
 COPY demo/assets assets/
 COPY demo/lib lib/
 
+RUN mix compile
 RUN mix assets.deploy
 
 # Copy the rest of the application files

demo/assets/css/app.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@plugin "./tailwind_heroicons.js";
+@plugin "../vendor/heroicons";
 
 @plugin "daisyui" {
   themes: all;

demo/assets/js/app.js

@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/browser'
 import topbar from 'topbar'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
+import { hooks as colocatedHooks } from 'phoenix-colocated/demo'
 // in your app.js, just use 'backpex' like this:
 // import { Hooks as BackpexHooks } from 'backpex'
 import { Hooks as BackpexHooks } from '#backpex'
@@ -34,7 +35,7 @@ const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute
 
 const liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { ...BackpexHooks }
+  hooks: { ...BackpexHooks, ...colocatedHooks }
 })
 
 liveSocket.connect()
@@ -43,3 +44,38 @@ liveSocket.connect()
  * Globals
  */
 window.liveSocket = liveSocket
+
+// The lines below enable quality of life phoenix_live_reload
+// development features:
+//
+//     1. stream server logs to the browser console
+//     2. click on elements to jump to their definitions in your code editor
+//
+if (process.env.NODE_ENV === 'development') {
+  window.addEventListener('phx:live_reload:attached', ({ detail: reloader }) => {
+    // Enable server log streaming to client.
+    // Disable with reloader.disableServerLogs()
+    reloader.enableServerLogs()
+
+    // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
+    //
+    //   * click with "c" key pressed to open at caller location
+    //   * click with "d" key pressed to open at function component definition location
+    let keyDown
+    window.addEventListener('keydown', function (e) { keyDown = e.key })
+    window.addEventListener('keyup', function (e) { keyDown = null })
+    window.addEventListener('click', function (e) {
+      if (keyDown === 'c') {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtCaller(e.target)
+      } else if (keyDown === 'd') {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtDef(e.target)
+      }
+    }, true)
+
+    window.liveReloader = reloader
+  })
+}

demo/assets/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowJs": true,
+    "noEmit": true
+  },
+  "include": [
+    "js/**/*"
+  ]
+}

demo/assets/css/tailwind_heroicons.js renamed to demo/assets/vendor/heroicons.js

@@ -66,7 +66,7 @@ config :tailwind,
     cd: Path.expand("..", __DIR__)
   ]
 
-config :logger, :console,
+config :logger, :default_formatter,
   format: "$time $metadata[$level] $message\n",
   metadata: [:request_id]
 

demo/config/config.exs

@@ -22,20 +22,17 @@ config :demo, DemoWeb.Endpoint,
   ],
   live_reload: [
     patterns: [
-      ~r"demo/priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
-      ~r"demo/priv/gettext/.*(po)$",
-      ~r"demo/lib/demo_web/helpers.ex$",
-      ~r"demo/lib/demo_web/(live|views)/.*(ex)$",
-      ~r"demo/lib/demo_web/templates/.*(eex)$",
-      ~r"lib/backpex/(fields|html)/.*(ex)$",
-      ~r"priv/static/js/.*(js)$"
+      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
+      ~r"priv/gettext/.*(po)$",
+      ~r"lib/demo_web/(?:controllers|live|components|router)/?.*\.(ex|heex)$",
+      ~r"lib/backpex/(fields|html)/.*(ex)$"
     ]
   ],
   force_ssl: [hsts: true],
   http: [port: 4000],
   reloadable_apps: [:demo, :backpex]
 
-config :logger, :console, format: "[$level] $message\n"
+config :logger, :default_formatter, format: "[$level] $message\n"
 
 config :phoenix, :stacktrace_depth, 20
 

demo/config/dev.exs

@@ -38,9 +38,7 @@ defmodule DemoWeb do
 
   def controller do
     quote do
-      use Phoenix.Controller,
-        formats: [:html, :json],
-        layouts: [html: DemoWeb.Layouts]
+      use Phoenix.Controller, formats: [:html, :json]
 
       use Gettext, backend: DemoWeb.Gettext
 
@@ -50,16 +48,9 @@ defmodule DemoWeb do
     end
   end
 
-  def live_view(opts \\ []) do
+  def live_view do
     quote do
-      @opts Keyword.merge(
-              [
-                layout: {DemoWeb.Layouts, :app},
-                container: {:div, class: "h-full"}
-              ],
-              unquote(opts)
-            )
-      use Phoenix.LiveView, @opts
+      use Phoenix.LiveView
 
       unquote(html_helpers())
     end
@@ -94,7 +85,8 @@ defmodule DemoWeb do
       # Core UI components and translation
       import DemoWeb.CoreComponents
 
-      # Shortcut for generating JS commands
+      # Common modules used in templates
+      alias DemoWeb.Layouts
       alias Phoenix.LiveView.JS
 
       # Routes generation with the ~p sigil

demo/lib/demo_web.ex

@@ -3,4 +3,12 @@ defmodule DemoWeb.Layouts do
   use DemoWeb, :html
 
   embed_templates "layouts/*"
+
+  attr :flash, :map, required: true, doc: "the map of flash messages"
+  attr :fluid?, :boolean, default: true, doc: "if the content uses full width"
+  attr :current_url, :string, required: true, doc: "the current url"
+
+  slot :inner_block, required: true
+
+  def admin(assigns)
 end

demo/lib/demo_web/components/layouts.ex

@@ -93,5 +93,5 @@
     </Backpex.HTML.Layout.sidebar_section>
   </:sidebar>
   <Backpex.HTML.Layout.flash_messages flash={@flash} />
-  {@inner_content}
+  {render_slot(@inner_block)}
 </Backpex.HTML.Layout.app_shell>