├── .formatter.exs ├── .gitignore ├── LICENSE.md ├── README.md ├── assets ├── .babelrc ├── css │ ├── app.scss │ └── phoenix.css ├── js │ └── app.js ├── package-lock.json ├── package.json ├── static │ ├── favicon.ico │ ├── images │ │ └── phoenix.png │ └── robots.txt └── webpack.config.js ├── config ├── config.exs ├── dev.exs ├── prod.exs └── test.exs ├── lib ├── demo.ex ├── demo │ └── application.ex ├── demo_web.ex └── demo_web │ ├── channels │ └── user_socket.ex │ ├── controllers │ └── page_controller.ex │ ├── endpoint.ex │ ├── gettext.ex │ ├── live │ ├── component │ │ └── modal_live.ex │ ├── counter_live.ex │ ├── example_live │ │ ├── assigns_title_component.ex │ │ ├── assigns_title_live_view.ex │ │ ├── component_blocks_component.ex │ │ ├── component_blocks_live_view.ex │ │ ├── example_live.ex │ │ ├── stateful_component.ex │ │ ├── stateful_component_live_view.ex │ │ ├── stateful_preload_component.ex │ │ ├── stateful_preload_component_live_view.ex │ │ ├── stateful_send_self_component.ex │ │ ├── stateful_send_self_component_live_view.ex │ │ ├── stateless_component.ex │ │ ├── stateless_component_live_view.ex │ │ ├── static_title_component.ex │ │ └── static_title_live_view.ex │ ├── page_live.ex │ └── page_live.html.leex │ ├── router.ex │ ├── telemetry.ex │ ├── templates │ ├── layout │ │ ├── app.html.eex │ │ ├── live.html.leex │ │ └── root.html.leex │ └── page │ │ ├── index.html.eex │ │ ├── keyboard.html.leex │ │ └── px.html.leex │ └── views │ ├── error_helpers.ex │ ├── error_view.ex │ └── layout_view.ex ├── mix.exs ├── mix.lock ├── priv └── gettext │ ├── en │ └── LC_MESSAGES │ │ └── errors.po │ └── errors.pot └── test ├── demo_web ├── live │ └── page_live_test.exs └── views │ ├── error_view_test.exs │ └── layout_view_test.exs ├── support ├── channel_case.ex └── conn_case.ex └── test_helper.exs /.formatter.exs: -------------------------------------------------------------------------------- 1 | [ 2 | import_deps: [:phoenix], 3 | inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"] 4 | ] 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # The directory Mix will write compiled artifacts to. 2 | /_build/ 3 | 4 | # If you run "mix test --cover", coverage assets end up here. 5 | /cover/ 6 | 7 | # The directory Mix downloads your dependencies sources to. 8 | /deps/ 9 | 10 | # Where 3rd-party dependencies like ExDoc output generated docs. 11 | /doc/ 12 | 13 | # Ignore .fetch files in case you like to edit your project deps locally. 14 | /.fetch 15 | 16 | # If the VM crashes, it generates a dump, let's ignore it too. 17 | erl_crash.dump 18 | 19 | # Also ignore archive artifacts (built via "mix archive.build"). 20 | *.ez 21 | 22 | # Ignore package tarball (built via "mix hex.build"). 23 | demo-*.tar 24 | 25 | # If NPM crashes, it generates a log, let's ignore it too. 26 | npm-debug.log 27 | 28 | # The directory NPM downloads your dependencies sources to. 29 | /assets/node_modules/ 30 | 31 | # Since we are building assets from assets/, 32 | # we ignore priv/static. You may want to comment 33 | # this depending on your deployment strategy. 34 | /priv/static/ 35 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2020 Patrick Thompson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demo 2 | 3 | To start your Phoenix server: 4 | 5 | * Install dependencies with `mix deps.get` 6 | * Install Node.js dependencies with `npm install` inside the `assets` directory 7 | * Start Phoenix endpoint with `mix phx.server` 8 | 9 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser. 10 | 11 | Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html). 12 | 13 | ## Learn more 14 | 15 | * Official website: https://www.phoenixframework.org/ 16 | * Guides: https://hexdocs.pm/phoenix/overview.html 17 | * Docs: https://hexdocs.pm/phoenix 18 | * Forum: https://elixirforum.com/c/phoenix-forum 19 | * Source: https://github.com/phoenixframework/phoenix 20 | -------------------------------------------------------------------------------- /assets/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /assets/css/app.scss: -------------------------------------------------------------------------------- 1 | /* This file is for your main application css. */ 2 | @import './phoenix.css'; 3 | 4 | .modal-container { 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | bottom: 0; 9 | right: 0; 10 | overflow-y: auto; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | z-index: 998; 15 | background-color: rgba(0, 0, 0, 0.7); 16 | } 17 | 18 | .modal-inner-container { 19 | position: relative; 20 | z-index: 999; 21 | } 22 | 23 | .modal-card { 24 | height: auto; 25 | width: 28rem; 26 | max-width: 51rem; 27 | margin: 0.5rem; 28 | border-radius: 0.4rem; 29 | background-color: #fff; 30 | } 31 | 32 | .modal-inner-card { 33 | padding-top: 1rem; 34 | padding-bottom: 0.5rem; 35 | padding-left: 2.25rem; 36 | padding-right: 2.25rem; 37 | } 38 | 39 | .modal-title { 40 | color: #0069d9; 41 | text-transform: uppercase; 42 | text-align: center; 43 | font-weight: 600; 44 | font-size: 1.5rem; 45 | letter-spacing: 0.075em; 46 | } 47 | 48 | .modal-form-title { 49 | color: #000; 50 | text-transform: uppercase; 51 | text-align: center; 52 | font-weight: 600; 53 | font-size: 1.5rem; 54 | letter-spacing: 0.075em; 55 | margin-bottom: 1.75rem; 56 | } 57 | 58 | .modal-body { 59 | margin-top: 0.8rem; 60 | text-align: center; 61 | font-size: 1.6rem; 62 | } 63 | 64 | .modal-buttons { 65 | display: flex; 66 | align-items: center; 67 | justify-content: center; 68 | margin-top: 1.75rem; 69 | } 70 | 71 | .left-button { 72 | color: #31708f; 73 | background-color: #d9edf7; 74 | border-color: #bce8f1; 75 | } 76 | 77 | .right-button { 78 | margin-left: 0.6rem; 79 | } 80 | 81 | .fix-position { 82 | position: fixed; 83 | right: 0; 84 | left: 0; 85 | overflow: hidden; 86 | } 87 | -------------------------------------------------------------------------------- /assets/css/phoenix.css: -------------------------------------------------------------------------------- 1 | /* Includes some default style for the starter application. 2 | * This can be safely deleted to start fresh. 3 | */ 4 | 5 | /* Milligram v1.3.0 https://milligram.github.io 6 | * Copyright (c) 2017 CJ Patoilo Licensed under the MIT license 7 | */ 8 | 9 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='email'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem;width:100%}input[type='email']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,') center right no-repeat;padding-right:3.0rem}select:focus{background-image:url('data:image/svg+xml;utf8,')}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding>.column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{-ms-grid-row-align:center;align-self:center}@media (min-width: 40rem){.row{flex-direction:row;margin-left:-1.0rem;width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;padding:0 1.0rem}}a{color:#0069d9;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3.0rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1.0rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;width:100%}td,th{border-bottom:0.1rem solid #e1e1e1;padding:1.2rem 1.5rem;text-align:left}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2.0rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right} 10 | 11 | /* General style */ 12 | h1{font-size: 3.6rem; line-height: 1.25} 13 | h2{font-size: 2.8rem; line-height: 1.3} 14 | h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35} 15 | h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5} 16 | h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4} 17 | h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2} 18 | pre{padding: 1em;} 19 | 20 | .container{ 21 | margin: 0 auto; 22 | max-width: 80.0rem; 23 | padding: 0 2.0rem; 24 | position: relative; 25 | width: 100% 26 | } 27 | select { 28 | width: auto; 29 | } 30 | 31 | /* Phoenix promo and logo */ 32 | .phx-hero { 33 | text-align: center; 34 | border-bottom: 1px solid #e3e3e3; 35 | background: #eee; 36 | border-radius: 6px; 37 | padding: 3em 3em 1em; 38 | margin-bottom: 3rem; 39 | font-weight: 200; 40 | font-size: 120%; 41 | } 42 | .phx-hero input { 43 | background: #ffffff; 44 | } 45 | .phx-logo { 46 | min-width: 300px; 47 | margin: 1rem; 48 | display: block; 49 | } 50 | .phx-logo img { 51 | width: auto; 52 | display: block; 53 | } 54 | 55 | /* Headers */ 56 | header { 57 | width: 100%; 58 | background: #fdfdfd; 59 | border-bottom: 1px solid #eaeaea; 60 | margin-bottom: 2rem; 61 | } 62 | header section { 63 | align-items: center; 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: space-between; 67 | } 68 | header section :first-child { 69 | order: 2; 70 | } 71 | header section :last-child { 72 | order: 1; 73 | } 74 | header nav ul, 75 | header nav li { 76 | margin: 0; 77 | padding: 0; 78 | display: block; 79 | text-align: right; 80 | white-space: nowrap; 81 | } 82 | header nav ul { 83 | margin: 1rem; 84 | margin-top: 0; 85 | } 86 | header nav a { 87 | display: block; 88 | } 89 | 90 | @media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */ 91 | header section { 92 | flex-direction: row; 93 | } 94 | header nav ul { 95 | margin: 1rem; 96 | } 97 | .phx-logo { 98 | flex-basis: 527px; 99 | margin: 2rem 1rem; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | import "../css/app.scss" 2 | import 'phoenix_html' 3 | import { 4 | Socket 5 | } from 'phoenix' 6 | import { 7 | LiveSocket 8 | } from 'phoenix_live_view' 9 | // Define hooks 10 | const Hooks = {} 11 | Hooks.ScrollLock = { 12 | mounted() { 13 | this.lockScroll() 14 | }, 15 | destroyed() { 16 | this.unlockScroll() 17 | }, 18 | lockScroll() { 19 | // From https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/modal.js 20 | // Add right padding to the body so the page doesn't shift when we disable scrolling 21 | const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth 22 | document.body.style.paddingRight = `${scrollbarWidth}px` 23 | // Save the scroll position 24 | this.scrollPosition = window.pageYOffset || document.body.scrollTop 25 | // Add classes to body to fix its position 26 | document.body.classList.add('fix-position') 27 | // Add negative top position in order for body to stay in place 28 | document.body.style.top = `-${this.scrollPosition}px` 29 | }, 30 | unlockScroll() { 31 | // From https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/modal.js 32 | // Remove tweaks for scrollbar 33 | document.body.style.paddingRight = null 34 | // Remove classes from body to unfix position 35 | document.body.classList.remove('fix-position') 36 | // Restore the scroll position of the body before it got locked 37 | document.documentElement.scrollTop = this.scrollPosition 38 | // Remove the negative top inline style from body 39 | document.body.style.top = null 40 | } 41 | } 42 | let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content"); 43 | let liveSocket = new LiveSocket("/live", Socket, { 44 | params: { 45 | _csrf_token: csrfToken 46 | }, 47 | hooks: Hooks 48 | }); 49 | liveSocket.connect() 50 | -------------------------------------------------------------------------------- /assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "repository": {}, 3 | "description": " ", 4 | "license": "MIT", 5 | "scripts": { 6 | "deploy": "webpack --mode production", 7 | "watch": "webpack --mode development --watch" 8 | }, 9 | "dependencies": { 10 | "phoenix": "file:../deps/phoenix", 11 | "phoenix_html": "file:../deps/phoenix_html", 12 | "phoenix_live_view": "file:../deps/phoenix_live_view", 13 | "nprogress": "^0.2.0" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.11.6", 17 | "@babel/preset-env": "^7.11.5", 18 | "babel-loader": "^8.0.0", 19 | "copy-webpack-plugin": "^5.1.2", 20 | "css-loader": "^3.4.2", 21 | "mini-css-extract-plugin": "^0.9.0", 22 | "node-sass": "^4.13.1", 23 | "optimize-css-assets-webpack-plugin": "^5.0.4", 24 | "sass-loader": "^8.0.2", 25 | "terser-webpack-plugin": "^2.3.8", 26 | "webpack": "4.41.5", 27 | "webpack-cli": "^3.3.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /assets/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pthompson/live_component_examples/e2e1be52a7ff1065fd5ef749c375d729d5d08c21/assets/static/favicon.ico -------------------------------------------------------------------------------- /assets/static/images/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pthompson/live_component_examples/e2e1be52a7ff1065fd5ef749c375d729d5d08c21/assets/static/images/phoenix.png -------------------------------------------------------------------------------- /assets/static/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | # 3 | # To ban all spiders from the entire site uncomment the next two lines: 4 | # User-agent: * 5 | # Disallow: / 6 | -------------------------------------------------------------------------------- /assets/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const glob = require('glob'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const TerserPlugin = require('terser-webpack-plugin'); 5 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | 8 | module.exports = (env, options) => { 9 | const devMode = options.mode !== 'production'; 10 | 11 | return { 12 | optimization: { 13 | minimizer: [ 14 | new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }), 15 | new OptimizeCSSAssetsPlugin({}) 16 | ] 17 | }, 18 | entry: { 19 | 'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']) 20 | }, 21 | output: { 22 | filename: '[name].js', 23 | path: path.resolve(__dirname, '../priv/static/js'), 24 | publicPath: '/js/' 25 | }, 26 | devtool: devMode ? 'source-map' : undefined, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.js$/, 31 | exclude: /node_modules/, 32 | use: { 33 | loader: 'babel-loader' 34 | } 35 | }, 36 | { 37 | test: /\.[s]?css$/, 38 | use: [ 39 | MiniCssExtractPlugin.loader, 40 | 'css-loader', 41 | 'sass-loader', 42 | ], 43 | } 44 | ] 45 | }, 46 | plugins: [ 47 | new MiniCssExtractPlugin({ filename: '../css/app.css' }), 48 | new CopyWebpackPlugin([{ from: 'static/', to: '../' }]) 49 | ] 50 | } 51 | }; 52 | -------------------------------------------------------------------------------- /config/config.exs: -------------------------------------------------------------------------------- 1 | # This file is responsible for configuring your application 2 | # and its dependencies with the aid of the Mix.Config module. 3 | # 4 | # This configuration file is loaded before any dependency and 5 | # is restricted to this project. 6 | 7 | # General application configuration 8 | use Mix.Config 9 | 10 | # Configures the endpoint 11 | config :demo, DemoWeb.Endpoint, 12 | url: [host: "localhost"], 13 | secret_key_base: "k/d0tiW1bKu2BIduJ9EZ4DZcCQzjnd36p1kgj17upbXPHiSxXORVbwB6nsvs4z7G", 14 | render_errors: [view: DemoWeb.ErrorView, accepts: ~w(html json), layout: false], 15 | pubsub_server: Demo.PubSub, 16 | live_view: [signing_salt: "UfRw5YAi"] 17 | 18 | # Configures Elixir's Logger 19 | config :logger, :console, 20 | format: "$time $metadata[$level] $message\n", 21 | metadata: [:request_id] 22 | 23 | # Use Jason for JSON parsing in Phoenix 24 | config :phoenix, :json_library, Jason 25 | 26 | # Import environment specific config. This must remain at the bottom 27 | # of this file so it overrides the configuration defined above. 28 | import_config "#{Mix.env()}.exs" 29 | -------------------------------------------------------------------------------- /config/dev.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For development, we disable any cache and enable 4 | # debugging and code reloading. 5 | # 6 | # The watchers configuration can be used to run external 7 | # watchers to your application. For example, we use it 8 | # with webpack to recompile .js and .css sources. 9 | config :demo, DemoWeb.Endpoint, 10 | http: [port: 4000], 11 | debug_errors: true, 12 | code_reloader: true, 13 | check_origin: false, 14 | watchers: [ 15 | node: [ 16 | "node_modules/webpack/bin/webpack.js", 17 | "--mode", 18 | "development", 19 | "--watch-stdin", 20 | cd: Path.expand("../assets", __DIR__) 21 | ] 22 | ] 23 | 24 | # ## SSL Support 25 | # 26 | # In order to use HTTPS in development, a self-signed 27 | # certificate can be generated by running the following 28 | # Mix task: 29 | # 30 | # mix phx.gen.cert 31 | # 32 | # Note that this task requires Erlang/OTP 20 or later. 33 | # Run `mix help phx.gen.cert` for more information. 34 | # 35 | # The `http:` config above can be replaced with: 36 | # 37 | # https: [ 38 | # port: 4001, 39 | # cipher_suite: :strong, 40 | # keyfile: "priv/cert/selfsigned_key.pem", 41 | # certfile: "priv/cert/selfsigned.pem" 42 | # ], 43 | # 44 | # If desired, both `http:` and `https:` keys can be 45 | # configured to run both http and https servers on 46 | # different ports. 47 | 48 | # Watch static and templates for browser reloading. 49 | config :demo, DemoWeb.Endpoint, 50 | live_reload: [ 51 | patterns: [ 52 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$", 53 | ~r"priv/gettext/.*(po)$", 54 | ~r"lib/demo_web/(live|views)/.*(ex)$", 55 | ~r"lib/demo_web/templates/.*(eex)$" 56 | ] 57 | ] 58 | 59 | # Do not include metadata nor timestamps in development logs 60 | config :logger, :console, format: "[$level] $message\n" 61 | 62 | # Set a higher stacktrace during development. Avoid configuring such 63 | # in production as building large stacktraces may be expensive. 64 | config :phoenix, :stacktrace_depth, 20 65 | 66 | # Initialize plugs at runtime for faster development compilation 67 | config :phoenix, :plug_init_mode, :runtime 68 | -------------------------------------------------------------------------------- /config/prod.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For production, don't forget to configure the url host 4 | # to something meaningful, Phoenix uses this information 5 | # when generating URLs. 6 | # 7 | # Note we also include the path to a cache manifest 8 | # containing the digested version of static files. This 9 | # manifest is generated by the `mix phx.digest` task, 10 | # which you should run after static files are built and 11 | # before starting your production server. 12 | config :demo, DemoWeb.Endpoint, 13 | url: [host: "example.com", port: 80], 14 | cache_static_manifest: "priv/static/cache_manifest.json" 15 | 16 | # Do not print debug messages in production 17 | config :logger, level: :info 18 | 19 | # ## SSL Support 20 | # 21 | # To get SSL working, you will need to add the `https` key 22 | # to the previous section and set your `:url` port to 443: 23 | # 24 | # config :demo, DemoWeb.Endpoint, 25 | # ... 26 | # url: [host: "example.com", port: 443], 27 | # https: [ 28 | # port: 443, 29 | # cipher_suite: :strong, 30 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"), 31 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH"), 32 | # transport_options: [socket_opts: [:inet6]] 33 | # ] 34 | # 35 | # The `cipher_suite` is set to `:strong` to support only the 36 | # latest and more secure SSL ciphers. This means old browsers 37 | # and clients may not be supported. You can set it to 38 | # `:compatible` for wider support. 39 | # 40 | # `:keyfile` and `:certfile` expect an absolute path to the key 41 | # and cert in disk or a relative path inside priv, for example 42 | # "priv/ssl/server.key". For all supported SSL configuration 43 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1 44 | # 45 | # We also recommend setting `force_ssl` in your endpoint, ensuring 46 | # no data is ever sent via http, always redirecting to https: 47 | # 48 | # config :demo, DemoWeb.Endpoint, 49 | # force_ssl: [hsts: true] 50 | # 51 | # Check `Plug.SSL` for all available options in `force_ssl`. 52 | 53 | # Finally import the config/prod.secret.exs which loads secrets 54 | # and configuration from environment variables. 55 | import_config "prod.secret.exs" 56 | -------------------------------------------------------------------------------- /config/test.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # We don't run a server during test. If one is required, 4 | # you can enable the server option below. 5 | config :demo, DemoWeb.Endpoint, 6 | http: [port: 4002], 7 | server: false 8 | 9 | # Print only warnings and errors during test 10 | config :logger, level: :warn 11 | -------------------------------------------------------------------------------- /lib/demo.ex: -------------------------------------------------------------------------------- 1 | defmodule Demo do 2 | @moduledoc """ 3 | Demo keeps the contexts that define your domain 4 | and business logic. 5 | 6 | Contexts are also responsible for managing your data, regardless 7 | if it comes from the database, an external API or others. 8 | """ 9 | end 10 | -------------------------------------------------------------------------------- /lib/demo/application.ex: -------------------------------------------------------------------------------- 1 | defmodule Demo.Application do 2 | # See https://hexdocs.pm/elixir/Application.html 3 | # for more information on OTP Applications 4 | @moduledoc false 5 | 6 | use Application 7 | 8 | def start(_type, _args) do 9 | children = [ 10 | # Start the Telemetry supervisor 11 | DemoWeb.Telemetry, 12 | # Start the PubSub system 13 | {Phoenix.PubSub, name: Demo.PubSub}, 14 | # Start the Endpoint (http/https) 15 | DemoWeb.Endpoint 16 | # Start a worker by calling: Demo.Worker.start_link(arg) 17 | # {Demo.Worker, arg} 18 | ] 19 | 20 | # See https://hexdocs.pm/elixir/Supervisor.html 21 | # for other strategies and supported options 22 | opts = [strategy: :one_for_one, name: Demo.Supervisor] 23 | Supervisor.start_link(children, opts) 24 | end 25 | 26 | # Tell Phoenix to update the endpoint configuration 27 | # whenever the application is updated. 28 | def config_change(changed, _new, removed) do 29 | DemoWeb.Endpoint.config_change(changed, removed) 30 | :ok 31 | end 32 | end 33 | -------------------------------------------------------------------------------- /lib/demo_web.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb do 2 | @moduledoc """ 3 | The entrypoint for defining your web interface, such 4 | as controllers, views, channels and so on. 5 | 6 | This can be used in your application as: 7 | 8 | use DemoWeb, :controller 9 | use DemoWeb, :view 10 | 11 | The definitions below will be executed for every view, 12 | controller, etc, so keep them short and clean, focused 13 | on imports, uses and aliases. 14 | 15 | Do NOT define functions inside the quoted expressions 16 | below. Instead, define any helper function in modules 17 | and import those modules here. 18 | """ 19 | 20 | def controller do 21 | quote do 22 | use Phoenix.Controller, namespace: DemoWeb 23 | 24 | import Plug.Conn 25 | import DemoWeb.Gettext 26 | alias DemoWeb.Router.Helpers, as: Routes 27 | end 28 | end 29 | 30 | def view do 31 | quote do 32 | use Phoenix.View, 33 | root: "lib/demo_web/templates", 34 | namespace: DemoWeb 35 | 36 | # Import convenience functions from controllers 37 | import Phoenix.Controller, 38 | only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1] 39 | 40 | # Include shared imports and aliases for views 41 | unquote(view_helpers()) 42 | end 43 | end 44 | 45 | def live_view do 46 | quote do 47 | use Phoenix.LiveView, 48 | layout: {DemoWeb.LayoutView, "live.html"} 49 | 50 | unquote(view_helpers()) 51 | end 52 | end 53 | 54 | def live_component do 55 | quote do 56 | use Phoenix.LiveComponent 57 | 58 | unquote(view_helpers()) 59 | end 60 | end 61 | 62 | def router do 63 | quote do 64 | use Phoenix.Router 65 | 66 | import Plug.Conn 67 | import Phoenix.Controller 68 | import Phoenix.LiveView.Router 69 | end 70 | end 71 | 72 | def channel do 73 | quote do 74 | use Phoenix.Channel 75 | import DemoWeb.Gettext 76 | end 77 | end 78 | 79 | defp view_helpers do 80 | quote do 81 | # Use all HTML functionality (forms, tags, etc) 82 | use Phoenix.HTML 83 | 84 | # Import LiveView helpers (live_render, live_component, live_patch, etc) 85 | import Phoenix.LiveView.Helpers 86 | 87 | # Import basic rendering functionality (render, render_layout, etc) 88 | import Phoenix.View 89 | 90 | import DemoWeb.ErrorHelpers 91 | import DemoWeb.Gettext 92 | alias DemoWeb.Router.Helpers, as: Routes 93 | end 94 | end 95 | 96 | @doc """ 97 | When used, dispatch to the appropriate controller/view/etc. 98 | """ 99 | defmacro __using__(which) when is_atom(which) do 100 | apply(__MODULE__, which, []) 101 | end 102 | end 103 | -------------------------------------------------------------------------------- /lib/demo_web/channels/user_socket.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.UserSocket do 2 | use Phoenix.Socket 3 | 4 | ## Channels 5 | # channel "room:*", DemoWeb.RoomChannel 6 | 7 | # Socket params are passed from the client and can 8 | # be used to verify and authenticate a user. After 9 | # verification, you can put default assigns into 10 | # the socket that will be set for all channels, ie 11 | # 12 | # {:ok, assign(socket, :user_id, verified_user_id)} 13 | # 14 | # To deny connection, return `:error`. 15 | # 16 | # See `Phoenix.Token` documentation for examples in 17 | # performing token verification on connect. 18 | @impl true 19 | def connect(_params, socket, _connect_info) do 20 | {:ok, socket} 21 | end 22 | 23 | # Socket id's are topics that allow you to identify all sockets for a given user: 24 | # 25 | # def id(socket), do: "user_socket:#{socket.assigns.user_id}" 26 | # 27 | # Would allow you to broadcast a "disconnect" event and terminate 28 | # all active sockets and channels for a given user: 29 | # 30 | # DemoWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{}) 31 | # 32 | # Returning `nil` makes this socket anonymous. 33 | @impl true 34 | def id(_socket), do: nil 35 | end 36 | -------------------------------------------------------------------------------- /lib/demo_web/controllers/page_controller.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.PageController do 2 | use DemoWeb, :controller 3 | 4 | def index(conn, _params) do 5 | render(conn, "index.html") 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /lib/demo_web/endpoint.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.Endpoint do 2 | use Phoenix.Endpoint, otp_app: :demo 3 | 4 | # The session will be stored in the cookie and signed, 5 | # this means its contents can be read but not tampered with. 6 | # Set :encryption_salt if you would also like to encrypt it. 7 | @session_options [ 8 | store: :cookie, 9 | key: "_demo_key", 10 | signing_salt: "voLCDbyA" 11 | ] 12 | 13 | socket "/socket", DemoWeb.UserSocket, 14 | websocket: true, 15 | longpoll: false 16 | 17 | socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]] 18 | 19 | # Serve at "/" the static files from "priv/static" directory. 20 | # 21 | # You should set gzip to true if you are running phx.digest 22 | # when deploying your static files in production. 23 | plug Plug.Static, 24 | at: "/", 25 | from: :demo, 26 | gzip: false, 27 | only: ~w(css fonts images js favicon.ico robots.txt) 28 | 29 | # Code reloading can be explicitly enabled under the 30 | # :code_reloader configuration of your endpoint. 31 | if code_reloading? do 32 | socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket 33 | plug Phoenix.LiveReloader 34 | plug Phoenix.CodeReloader 35 | end 36 | 37 | plug Phoenix.LiveDashboard.RequestLogger, 38 | param_key: "request_logger", 39 | cookie_key: "request_logger" 40 | 41 | plug Plug.RequestId 42 | plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint] 43 | 44 | plug Plug.Parsers, 45 | parsers: [:urlencoded, :multipart, :json], 46 | pass: ["*/*"], 47 | json_decoder: Phoenix.json_library() 48 | 49 | plug Plug.MethodOverride 50 | plug Plug.Head 51 | plug Plug.Session, @session_options 52 | plug DemoWeb.Router 53 | end 54 | -------------------------------------------------------------------------------- /lib/demo_web/gettext.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.Gettext do 2 | @moduledoc """ 3 | A module providing Internationalization with a gettext-based API. 4 | 5 | By using [Gettext](https://hexdocs.pm/gettext), 6 | your module gains a set of macros for translations, for example: 7 | 8 | import DemoWeb.Gettext 9 | 10 | # Simple translation 11 | gettext("Here is the string to translate") 12 | 13 | # Plural translation 14 | ngettext("Here is the string to translate", 15 | "Here are the strings to translate", 16 | 3) 17 | 18 | # Domain-based translation 19 | dgettext("errors", "Here is the error message to translate") 20 | 21 | See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage. 22 | """ 23 | use Gettext, otp_app: :demo 24 | end 25 | -------------------------------------------------------------------------------- /lib/demo_web/live/component/modal_live.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.LiveComponent.ModalLive do 2 | @moduledoc """ 3 | This is a general modal component with title, body text, and two buttons. 4 | 5 | A required action string and optional parameter are provided for each 6 | button when the modal is initialized. These will be returned to the caller 7 | when the corresponding button is clicked. 8 | 9 | The caller must have message handlers defined for each button that takes 10 | the given action and parameter for each button. For example: 11 | 12 | def handle_info( 13 | {ModalLive, :button_clicked, %{action: "delete", param: item_id}}, 14 | socket 15 | ) 16 | 17 | This is a stateful component, so you MUST specify an id when calling 18 | live_component. 19 | 20 | The component can be called like: 21 | 22 | <%= live_component(@socket, 23 | ModalLive, 24 | id: "confirm-boom", 25 | title: "Go Boom?", 26 | body: "Are you sure you want to crash the counter?", 27 | right_button: "OK", 28 | right_button_action: "crash", 29 | right_button_param: "boom", 30 | left_button: "Cancel", 31 | left_button_action: "cancel-boom", 32 | left_button_param: nil) 33 | %> 34 | """ 35 | use Phoenix.LiveComponent 36 | 37 | @defaults %{ 38 | left_button: "Cancel", 39 | left_button_action: nil, 40 | left_button_param: nil, 41 | right_button: "OK", 42 | right_button_action: nil, 43 | right_button_param: nil 44 | } 45 | 46 | # render modal 47 | @spec render(map()) :: Phoenix.LiveView.Rendered.t() 48 | def render(assigns) do 49 | ~L""" 50 | 97 | """ 98 | end 99 | 100 | def mount(socket) do 101 | {:ok, socket} 102 | end 103 | 104 | def update(%{id: _id} = assigns, socket) do 105 | {:ok, assign(socket, Map.merge(@defaults, assigns))} 106 | end 107 | 108 | # Fired when user clicks right button on modal 109 | def handle_event( 110 | "right-button-click", 111 | _params, 112 | %{ 113 | assigns: %{ 114 | right_button_action: right_button_action, 115 | right_button_param: right_button_param 116 | } 117 | } = socket 118 | ) do 119 | send( 120 | self(), 121 | {__MODULE__, :button_clicked, %{action: right_button_action, param: right_button_param}} 122 | ) 123 | 124 | {:noreply, socket} 125 | end 126 | 127 | def handle_event( 128 | "left-button-click", 129 | _params, 130 | %{ 131 | assigns: %{ 132 | left_button_action: left_button_action, 133 | left_button_param: left_button_param 134 | } 135 | } = socket 136 | ) do 137 | send( 138 | self(), 139 | {__MODULE__, :button_clicked, %{action: left_button_action, param: left_button_param}} 140 | ) 141 | 142 | {:noreply, socket} 143 | end 144 | end 145 | -------------------------------------------------------------------------------- /lib/demo_web/live/counter_live.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.CounterLive do 2 | use DemoWeb, :live_view 3 | alias DemoWeb.LiveComponent.ModalLive 4 | 5 | def render(assigns) do 6 | ~L""" 7 |
8 |

The count is: <%= @val %>

9 | 11 | 12 | 13 |
14 | <%= if @show_modal do %> 15 | <%= live_component(@socket, 16 | ModalLive, 17 | id: "confirm-boom", 18 | title: "Go Boom", 19 | body: "Are you sure you want to crash the counter?", 20 | right_button: "Sure", 21 | right_button_action: "crash", 22 | right_button_param: "boom", 23 | left_button: "Yikes, No!", 24 | left_button_action: "cancel-crash") 25 | %> 26 | <% end %> 27 | """ 28 | end 29 | 30 | def mount(_params, session, socket) do 31 | {:ok, assign(socket, val: session[:val] || 0)} 32 | end 33 | 34 | def handle_params(params, _url, socket) do 35 | {:noreply, apply_action(socket, socket.assigns.live_action, params)} 36 | end 37 | 38 | def apply_action(socket, :show, _params) do 39 | assign(socket, show_modal: false) 40 | end 41 | 42 | def apply_action(%{assigns: %{show_modal: _}} = socket, :confirm_boom, _params) do 43 | assign(socket, show_modal: true) 44 | end 45 | 46 | def apply_action(socket, _live_action, _params) do 47 | # Redirect to base counter path if live_action is unknown or if 48 | # show_modal not set, which indicates that the counter hasn't been 49 | # initialized. This can happen when user comes in on 50 | # /counter/confirm-boom uri without going through /counter first 51 | # or if the counter crashed while on the /counter/confirm-boom URL. 52 | push_patch(socket, 53 | to: Routes.counter_path(socket, :show), 54 | replace: true 55 | ) 56 | end 57 | 58 | def handle_event("inc", _, socket) do 59 | {:noreply, update(socket, :val, &(&1 + 1))} 60 | end 61 | 62 | def handle_event("dec", _, socket) do 63 | {:noreply, update(socket, :val, &(&1 - 1))} 64 | end 65 | 66 | def handle_event("go-boom", _, socket) do 67 | {:noreply, 68 | push_patch( 69 | assign(socket, show_modal: true), 70 | to: Routes.counter_path(socket, :confirm_boom), 71 | replace: true 72 | )} 73 | end 74 | 75 | # Handle message to self() from Confirm Boom modal 76 | def handle_info( 77 | {ModalLive, :button_clicked, %{action: "crash", param: exception}}, 78 | socket 79 | ) do 80 | raise(exception) 81 | {:noreply, socket} 82 | end 83 | 84 | # Handle message to self() from Confirm Boom modal 85 | def handle_info( 86 | {ModalLive, :button_clicked, %{action: "cancel-crash"}}, 87 | socket 88 | ) do 89 | {:noreply, 90 | push_patch(socket, 91 | to: Routes.counter_path(socket, :show), 92 | replace: true 93 | )} 94 | end 95 | end 96 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/assigns_title_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.AssignsTitleComponent do 2 | use Phoenix.LiveComponent 3 | 4 | def render(assigns) do 5 | ~L""" 6 |

<%= @title %>

7 | """ 8 | end 9 | 10 | def mount(socket) do 11 | {:ok, socket} 12 | end 13 | 14 | def update(%{title: title} = _assigns, socket) do 15 | {:ok, assign(socket, title: title)} 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/assigns_title_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.AssignsTitleLiveView do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component( 8 | @socket, 9 | DemoWeb.AssignsTitleComponent, 10 | title: "Assigns Title" 11 | ) 12 | %> 13 |
14 | """ 15 | end 16 | 17 | def mount(_params, _session, socket) do 18 | {:ok, socket} 19 | end 20 | 21 | def handle_params(_params, _uri, socket) do 22 | {:noreply, socket} 23 | end 24 | end 25 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/component_blocks_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ComponentBlocksComponent do 2 | use Phoenix.LiveComponent 3 | use Phoenix.HTML 4 | 5 | def render(assigns) do 6 | ~L""" 7 | <%= @render_title.(title_passed_from_component: @title) %> 8 | """ 9 | end 10 | 11 | def mount(socket) do 12 | {:ok, socket} 13 | end 14 | 15 | def update(%{title: title, inner_content: inner_content}, socket) do 16 | {:ok, 17 | assign(socket, 18 | title: title, 19 | render_title: inner_content 20 | )} 21 | end 22 | end 23 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/component_blocks_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ComponentBlocksLiveView do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component @socket, 8 | DemoWeb.ComponentBlocksComponent, 9 | title: "Title" do %> 10 |

11 | <%= @title_passed_from_component %> 12 |

13 | <% end %> 14 |
15 | """ 16 | end 17 | 18 | def mount(_params, _session, socket) do 19 | {:ok, socket} 20 | end 21 | 22 | def handle_params(_params, _uri, socket) do 23 | {:noreply, socket} 24 | end 25 | end 26 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/example_live.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.LiveComponentExamples do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 |
8 |

Simple LiveComponent Examples

9 | 18 |
19 |
20 | """ 21 | end 22 | 23 | def mount(_session, socket) do 24 | {:ok, socket} 25 | end 26 | 27 | def handle_params(_params, _uri, socket) do 28 | {:noreply, socket} 29 | end 30 | end 31 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateful_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatefulComponent do 2 | use Phoenix.LiveComponent 3 | use Phoenix.HTML 4 | 5 | def render(assigns) do 6 | ~L""" 7 |

<%= @title %>

8 |
9 | <%= f = form_for :heading, "#", [phx_submit: :set_title, "phx-target": "#stateful-#{@id}"] %> 10 | <%= label f, :title %> 11 | <%= text_input f, :title %> 12 |
13 | <%= submit "Set", phx_disable_with: "Setting..." %> 14 |
15 | 16 | """ 17 | end 18 | 19 | def mount(socket) do 20 | {:ok, socket} 21 | end 22 | 23 | def update(%{title: title, id: id}, socket) do 24 | {:ok, 25 | assign(socket, 26 | title: title, 27 | id: id 28 | )} 29 | end 30 | 31 | def handle_event( 32 | "set_title", 33 | %{"heading" => %{"title" => updated_title}}, 34 | socket 35 | ) do 36 | {:noreply, assign(socket, title: updated_title)} 37 | end 38 | end 39 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateful_component_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatefulComponentLiveView do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component( 8 | @socket, 9 | DemoWeb.StatefulComponent, 10 | id: "1", 11 | title: @title 12 | ) 13 | %> 14 |
15 | """ 16 | end 17 | 18 | def mount(_params, _session, socket) do 19 | {:ok, 20 | assign(socket, 21 | title: "Initial Title" 22 | )} 23 | end 24 | 25 | def handle_params(_params, _uri, socket) do 26 | {:noreply, socket} 27 | end 28 | end 29 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateful_preload_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatefulPreloadComponent do 2 | use Phoenix.LiveComponent 3 | use Phoenix.HTML 4 | 5 | def render(assigns) do 6 | ~L""" 7 |

<%= @title %>

8 |
9 | <%= f = form_for :heading, "#", [phx_submit: :set_title, "phx-target": "#preload-#{@id}"] %> 10 | <%= label f, :title %> 11 | <%= text_input f, :title %> 12 |
13 | <%= submit "Set", phx_disable_with: "Setting..." %> 14 |
15 | 16 | """ 17 | end 18 | 19 | def mount(socket) do 20 | {:ok, socket} 21 | end 22 | 23 | def update(%{title: title, id: id}, socket) do 24 | {:ok, 25 | assign(socket, 26 | title: title, 27 | id: id 28 | )} 29 | end 30 | 31 | def preload(list_of_assigns) do 32 | Enum.map(list_of_assigns, fn %{id: id, title: title} -> 33 | %{id: id, title: "#{title} #{id}"} 34 | end) 35 | end 36 | 37 | def handle_event( 38 | "set_title", 39 | %{"heading" => %{"title" => updated_title}}, 40 | socket 41 | ) do 42 | {:noreply, assign(socket, title: updated_title)} 43 | end 44 | end 45 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateful_preload_component_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatefulPreloadComponentLiveView do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component( 8 | @socket, 9 | DemoWeb.StatefulPreloadComponent, 10 | id: "1", 11 | title: @title 12 | ) 13 | %> 14 |
15 |
16 | <%= live_component( 17 | @socket, 18 | DemoWeb.StatefulPreloadComponent, 19 | id: "2", 20 | title: @title 21 | ) 22 | %> 23 |
24 |
25 | <%= live_component( 26 | @socket, 27 | DemoWeb.StatefulPreloadComponent, 28 | id: "3", 29 | title: @title 30 | ) 31 | %> 32 |
33 | """ 34 | end 35 | 36 | def mount(_params, _session, socket) do 37 | {:ok, 38 | assign(socket, 39 | title: "Initial Title" 40 | )} 41 | end 42 | 43 | def handle_params(_params, _uri, socket) do 44 | {:noreply, socket} 45 | end 46 | end 47 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateful_send_self_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatefulSendSelfComponent do 2 | use Phoenix.LiveComponent 3 | use Phoenix.HTML 4 | 5 | def render(assigns) do 6 | ~L""" 7 |

<%= @title %>

8 |
9 | <%= f = form_for :heading, "#", [phx_submit: :set_title, "phx-target": "##{@id}"] %> 10 | <%= label f, :title %> 11 | <%= text_input f, :title %> 12 |
13 | <%= submit "Set", phx_disable_with: "Setting..." %> 14 |
15 | 16 | """ 17 | end 18 | 19 | def mount(socket) do 20 | {:ok, socket} 21 | end 22 | 23 | def update(%{title: title, id: id}, socket) do 24 | {:ok, 25 | assign(socket, 26 | title: title, 27 | id: id 28 | )} 29 | end 30 | 31 | def handle_event( 32 | "set_title", 33 | %{"heading" => %{"title" => updated_title}}, 34 | socket 35 | ) do 36 | send( 37 | self(), 38 | {__MODULE__, :updated_title, %{title: updated_title}} 39 | ) 40 | 41 | {:noreply, socket} 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateful_send_self_component_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatefulSendSelfComponentLiveView do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component( 8 | @socket, 9 | DemoWeb.StatefulSendSelfComponent, 10 | id: "stateful-send-self-component", 11 | title: @title 12 | ) 13 | %> 14 |
15 | """ 16 | end 17 | 18 | def mount(_params, _session, socket) do 19 | {:ok, 20 | assign(socket, 21 | title: "Initial Title" 22 | )} 23 | end 24 | 25 | def handle_params(_params, _uri, socket) do 26 | {:noreply, socket} 27 | end 28 | 29 | def handle_info( 30 | {DemoWeb.StatefulSendSelfComponent, :updated_title, %{title: updated_title}}, 31 | socket 32 | ) do 33 | {:noreply, assign(socket, title: updated_title)} 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateless_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatelessComponent do 2 | use Phoenix.LiveComponent 3 | use Phoenix.HTML 4 | 5 | def render(assigns) do 6 | ~L""" 7 |

<%= @title %>

8 |
9 | <%= f = form_for :heading, "#", [phx_submit: :set_title] %> 10 | <%= label f, :title %> 11 | <%= text_input f, :title %> 12 |
13 | <%= submit "Set", phx_disable_with: "Setting..." %> 14 |
15 | 16 | """ 17 | end 18 | 19 | def mount(socket) do 20 | {:ok, socket} 21 | end 22 | 23 | def update(%{title: title}, socket) do 24 | {:ok, assign(socket, title: title)} 25 | end 26 | end 27 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/stateless_component_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StatelessComponentLiveView do 2 | use DemoWeb, :live_view 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component( 8 | @socket, 9 | DemoWeb.StatelessComponent, 10 | title: @title 11 | ) 12 | %> 13 |
14 | """ 15 | end 16 | 17 | def mount(_params, _session, socket) do 18 | {:ok, 19 | assign(socket, 20 | title: "Initial Title" 21 | )} 22 | end 23 | 24 | def handle_event( 25 | "set_title", 26 | %{"heading" => %{"title" => updated_title}}, 27 | socket 28 | ) do 29 | {:noreply, assign(socket, title: updated_title)} 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/static_title_component.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StaticTitleComponent do 2 | use Phoenix.LiveComponent 3 | 4 | def render(assigns) do 5 | ~L""" 6 |

Title

7 | """ 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /lib/demo_web/live/example_live/static_title_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.StaticTitleLiveView do 2 | use Phoenix.LiveView 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | <%= live_component( 8 | @socket, 9 | DemoWeb.StaticTitleComponent 10 | ) 11 | %> 12 |
13 | """ 14 | end 15 | 16 | def mount(_params, _session, socket) do 17 | {:ok, socket} 18 | end 19 | 20 | def handle_params(_params, _uri, socket) do 21 | {:noreply, socket} 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /lib/demo_web/live/page_live.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.PageLive do 2 | use DemoWeb, :live_view 3 | 4 | @impl true 5 | def mount(_params, _session, socket) do 6 | {:ok, assign(socket, query: "", results: %{})} 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /lib/demo_web/live/page_live.html.leex: -------------------------------------------------------------------------------- 1 |
2 |

<%= gettext "Welcome to %{name}!", name: "Phoenix LiveView" %>

3 |
4 |
5 |
6 |

LiveView LiveComponent Examples

7 | 11 |
12 |
13 | -------------------------------------------------------------------------------- /lib/demo_web/router.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.Router do 2 | use DemoWeb, :router 3 | 4 | pipeline :browser do 5 | plug :accepts, ["html"] 6 | plug :fetch_session 7 | plug :fetch_live_flash 8 | plug :put_root_layout, {DemoWeb.LayoutView, :root} 9 | plug :protect_from_forgery 10 | plug :put_secure_browser_headers 11 | end 12 | 13 | pipeline :api do 14 | plug :accepts, ["json"] 15 | end 16 | 17 | scope "/", DemoWeb do 18 | pipe_through :browser 19 | 20 | live "/", PageLive, :index 21 | 22 | live "/counter", CounterLive, :show 23 | 24 | live "/counter/confirm-boom", CounterLive, :confirm_boom 25 | 26 | live "/examples", LiveComponentExamples 27 | 28 | live "/examples/static-title", StaticTitleLiveView 29 | 30 | live "/examples/assigns-title", AssignsTitleLiveView 31 | 32 | live "/examples/stateless-component", StatelessComponentLiveView 33 | 34 | live "/examples/stateful-component", StatefulComponentLiveView 35 | 36 | live "/examples/stateful-send-self-component", StatefulSendSelfComponentLiveView 37 | 38 | live "/examples/stateful-preload-component", StatefulPreloadComponentLiveView 39 | 40 | live "/examples/component-blocks", ComponentBlocksLiveView 41 | end 42 | end 43 | -------------------------------------------------------------------------------- /lib/demo_web/telemetry.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.Telemetry do 2 | use Supervisor 3 | import Telemetry.Metrics 4 | 5 | def start_link(arg) do 6 | Supervisor.start_link(__MODULE__, arg, name: __MODULE__) 7 | end 8 | 9 | @impl true 10 | def init(_arg) do 11 | children = [ 12 | # Telemetry poller will execute the given period measurements 13 | # every 10_000ms. Learn more here: https://hexdocs.pm/telemetry_metrics 14 | {:telemetry_poller, measurements: periodic_measurements(), period: 10_000} 15 | # Add reporters as children of your supervision tree. 16 | # {Telemetry.Metrics.ConsoleReporter, metrics: metrics()} 17 | ] 18 | 19 | Supervisor.init(children, strategy: :one_for_one) 20 | end 21 | 22 | def metrics do 23 | [ 24 | # Phoenix Metrics 25 | summary("phoenix.endpoint.stop.duration", 26 | unit: {:native, :millisecond} 27 | ), 28 | summary("phoenix.router_dispatch.stop.duration", 29 | tags: [:route], 30 | unit: {:native, :millisecond} 31 | ), 32 | 33 | # VM Metrics 34 | summary("vm.memory.total", unit: {:byte, :kilobyte}), 35 | summary("vm.total_run_queue_lengths.total"), 36 | summary("vm.total_run_queue_lengths.cpu"), 37 | summary("vm.total_run_queue_lengths.io") 38 | ] 39 | end 40 | 41 | defp periodic_measurements do 42 | [ 43 | # A module, function and arguments to be invoked periodically. 44 | # This function must call :telemetry.execute/3 and a metric must be added above. 45 | # {DemoWeb, :count_users, []} 46 | ] 47 | end 48 | end 49 | -------------------------------------------------------------------------------- /lib/demo_web/templates/layout/app.html.eex: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | <%= @inner_content %> 5 |
6 | -------------------------------------------------------------------------------- /lib/demo_web/templates/layout/live.html.leex: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | 9 | 10 | <%= @inner_content %> 11 |
12 | -------------------------------------------------------------------------------- /lib/demo_web/templates/layout/root.html.leex: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= csrf_meta_tag() %> 8 | <%= live_title_tag assigns[:page_title] || "Demo", suffix: " · Phoenix Framework" %> 9 | "/> 10 | 11 | 12 | 13 |
14 |
15 | 23 | 26 |
27 |
28 | <%= @inner_content %> 29 | 30 | 31 | -------------------------------------------------------------------------------- /lib/demo_web/templates/page/index.html.eex: -------------------------------------------------------------------------------- 1 |
2 |

<%= gettext "Welcome to %{name}!", name: "Phoenix LiveView" %>

3 |
4 |
5 |
6 |

LiveView LiveComponent Examples

7 | 11 |
12 |
13 | -------------------------------------------------------------------------------- /lib/demo_web/templates/page/keyboard.html.leex: -------------------------------------------------------------------------------- 1 |
2 | 11 |
12 | <%= for char <- @chars do %> 13 | <%= if char.dim, do: "dim " %><%= if char.mark, do: "mark " %>"> 14 | <%= char.text %> 15 | 16 |
">
17 | <% end %> 18 |
19 |
20 | 21 |
22 |
23 |
    24 |
  • 25 |
    26 |
    ~
    27 |
    `
    28 |
    29 |
  • 30 |
  • 31 |
    32 |
    !
    33 |
    1
    34 |
    35 |
  • 36 |
  • 37 |
    38 |
    @
    39 |
    2
    40 |
    41 |
  • 42 |
  • 43 |
    44 |
    #
    45 |
    3
    46 |
    47 |
  • 48 |
  • 49 |
    50 |
    $
    51 |
    4
    52 |
    53 |
  • 54 |
  • 55 |
    56 |
    %
    57 |
    5
    58 |
    59 |
  • 60 |
  • 61 |
    62 |
    ^
    63 |
    6
    64 |
    65 |
  • 66 |
  • 67 |
    68 |
    &
    69 |
    7
    70 |
    71 |
  • 72 |
  • 73 |
    74 |
    *
    75 |
    8
    76 |
    77 |
  • 78 |
  • 79 |
    80 |
    (
    81 |
    9
    82 |
    83 |
  • 84 |
  • 85 |
    86 |
    )
    87 |
    0
    88 |
    89 |
  • 90 |
  • 91 |
    92 |
    _
    93 |
    -
    94 |
    95 |
  • 96 |
  • 97 |
    98 |
    +
    99 |
    =
    100 |
    101 |
  • 102 |
  • delete
  • 103 | 104 |
105 | 106 |
    107 |
  • tab
  • 108 |
  • q
  • 109 |
  • w
  • 110 |
  • e
  • 111 |
  • r
  • 112 |
  • t
  • 113 |
  • y
  • 114 |
  • u
  • 115 |
  • i
  • 116 |
  • o
  • 117 |
  • p
  • 118 |
  • 119 |
    120 |
    {
    121 |
    [
    122 |
    123 |
  • 124 |
  • 125 |
    126 |
    }
    127 |
    ]
    128 |
    129 |
  • 130 |
  • 131 |
    132 |
    |
    133 |
    \
    134 |
    135 |
  • 136 |
137 | 138 |
    139 |
  • capslock
  • 140 |
  • a
  • 141 |
  • s
  • 142 |
  • d
  • 143 |
  • f

    _

  • 144 |
  • g
  • 145 |
  • h
  • 146 |
  • j

    _

  • 147 |
  • k
  • 148 |
  • l
  • 149 |
  • 150 |
    151 |
    :
    152 |
    ;
    153 |
    154 |
  • 155 |
  • 156 |
    157 |
    "
    158 |
    '
    159 |
    160 |
  • 161 |
  • 162 | return 163 |
  • 164 |
165 | 166 |
    167 |
  • shift
  • 168 |
  • z
  • 169 |
  • x
  • 170 |
  • c
  • 171 |
  • v
  • 172 |
  • b
  • 173 |
  • n
  • 174 |
  • m
  • 175 |
  • 176 |
    177 |
    <
    178 |
    ,
    179 |
    180 |
  • 181 |
  • 182 |
    183 |
    >
    184 |
    .
    185 |
    186 |
  • 187 |
  • 188 |
    189 |
    ?
    190 |
    /
    191 |
    192 |
  • 193 |
  • 194 | shift 195 |
  • 196 |
197 | 198 |
    199 |
  • control
  • 200 |
  • alt
  • 201 |
  • space
  • 202 |
  • alt
  • 203 |
  • control
  • 204 |
205 |
206 | 207 |
208 | 209 |
210 |
211 | 212 |
213 |
214 | 215 |
216 |
217 |
218 |
219 |
220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 |
233 | -------------------------------------------------------------------------------- /lib/demo_web/templates/page/px.html.leex: -------------------------------------------------------------------------------- 1 |

<%= @px %>px

2 | <%= "
" %> 3 | -------------------------------------------------------------------------------- /lib/demo_web/views/error_helpers.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ErrorHelpers do 2 | @moduledoc """ 3 | Conveniences for translating and building error messages. 4 | """ 5 | 6 | use Phoenix.HTML 7 | 8 | @doc """ 9 | Generates tag for inlined form input errors. 10 | """ 11 | def error_tag(form, field) do 12 | Enum.map(Keyword.get_values(form.errors, field), fn error -> 13 | content_tag(:span, translate_error(error), 14 | class: "invalid-feedback", 15 | phx_feedback_for: input_id(form, field) 16 | ) 17 | end) 18 | end 19 | 20 | @doc """ 21 | Translates an error message using gettext. 22 | """ 23 | def translate_error({msg, opts}) do 24 | # When using gettext, we typically pass the strings we want 25 | # to translate as a static argument: 26 | # 27 | # # Translate "is invalid" in the "errors" domain 28 | # dgettext("errors", "is invalid") 29 | # 30 | # # Translate the number of files with plural rules 31 | # dngettext("errors", "1 file", "%{count} files", count) 32 | # 33 | # Because the error messages we show in our forms and APIs 34 | # are defined inside Ecto, we need to translate them dynamically. 35 | # This requires us to call the Gettext module passing our gettext 36 | # backend as first argument. 37 | # 38 | # Note we use the "errors" domain, which means translations 39 | # should be written to the errors.po file. The :count option is 40 | # set by Ecto and indicates we should also apply plural rules. 41 | if count = opts[:count] do 42 | Gettext.dngettext(DemoWeb.Gettext, "errors", msg, msg, count, opts) 43 | else 44 | Gettext.dgettext(DemoWeb.Gettext, "errors", msg, opts) 45 | end 46 | end 47 | end 48 | -------------------------------------------------------------------------------- /lib/demo_web/views/error_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ErrorView do 2 | use DemoWeb, :view 3 | 4 | # If you want to customize a particular status code 5 | # for a certain format, you may uncomment below. 6 | # def render("500.html", _assigns) do 7 | # "Internal Server Error" 8 | # end 9 | 10 | # By default, Phoenix returns the status message from 11 | # the template name. For example, "404.html" becomes 12 | # "Not Found". 13 | def template_not_found(template, _assigns) do 14 | Phoenix.Controller.status_message_from_template(template) 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /lib/demo_web/views/layout_view.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.LayoutView do 2 | use DemoWeb, :view 3 | end 4 | -------------------------------------------------------------------------------- /mix.exs: -------------------------------------------------------------------------------- 1 | defmodule Demo.MixProject do 2 | use Mix.Project 3 | 4 | def project do 5 | [ 6 | app: :demo, 7 | version: "0.1.0", 8 | elixir: "~> 1.7", 9 | elixirc_paths: elixirc_paths(Mix.env()), 10 | compilers: [:phoenix, :gettext] ++ Mix.compilers(), 11 | start_permanent: Mix.env() == :prod, 12 | aliases: aliases(), 13 | deps: deps() 14 | ] 15 | end 16 | 17 | # Configuration for the OTP application. 18 | # 19 | # Type `mix help compile.app` for more information. 20 | def application do 21 | [ 22 | mod: {Demo.Application, []}, 23 | extra_applications: [:logger, :runtime_tools] 24 | ] 25 | end 26 | 27 | # Specifies which paths to compile per environment. 28 | defp elixirc_paths(:test), do: ["lib", "test/support"] 29 | defp elixirc_paths(_), do: ["lib"] 30 | 31 | # Specifies your project dependencies. 32 | # 33 | # Type `mix help deps` for examples and options. 34 | defp deps do 35 | [ 36 | {:phoenix, "~> 1.5.3"}, 37 | {:phoenix_live_view, "~> 0.14.4"}, 38 | {:floki, ">= 0.0.0", only: :test}, 39 | {:phoenix_html, "~> 2.11"}, 40 | {:phoenix_live_reload, "~> 1.2", only: :dev}, 41 | {:phoenix_live_dashboard, "~> 0.2.0"}, 42 | {:telemetry_metrics, "~> 0.4"}, 43 | {:telemetry_poller, "~> 0.4"}, 44 | {:gettext, "~> 0.11"}, 45 | {:jason, "~> 1.0"}, 46 | {:plug_cowboy, "~> 2.0"} 47 | ] 48 | end 49 | 50 | # Aliases are shortcuts or tasks specific to the current project. 51 | # For example, to install project dependencies and perform other setup tasks, run: 52 | # 53 | # $ mix setup 54 | # 55 | # See the documentation for `Mix` for more info on aliases. 56 | defp aliases do 57 | [ 58 | setup: ["deps.get", "cmd npm install --prefix assets"] 59 | ] 60 | end 61 | end 62 | -------------------------------------------------------------------------------- /mix.lock: -------------------------------------------------------------------------------- 1 | %{ 2 | "cowboy": {:hex, :cowboy, "2.8.0", "f3dc62e35797ecd9ac1b50db74611193c29815401e53bac9a5c0577bd7bc667d", [:rebar3], [{:cowlib, "~> 2.9.1", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "~> 1.7.1", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "4643e4fba74ac96d4d152c75803de6fad0b3fa5df354c71afdd6cbeeb15fac8a"}, 3 | "cowlib": {:hex, :cowlib, "2.9.1", "61a6c7c50cf07fdd24b2f45b89500bb93b6686579b069a89f88cb211e1125c78", [:rebar3], [], "hexpm", "e4175dc240a70d996156160891e1c62238ede1729e45740bdd38064dad476170"}, 4 | "file_system": {:hex, :file_system, "0.2.8", "f632bd287927a1eed2b718f22af727c5aeaccc9a98d8c2bd7bff709e851dc986", [:mix], [], "hexpm", "97a3b6f8d63ef53bd0113070102db2ce05352ecf0d25390eb8d747c2bde98bca"}, 5 | "floki": {:hex, :floki, "0.28.0", "0d0795a17189510ee01323e6990f906309e9fc6e8570219135211f1264d78c7f", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "db1549560874ebba5a6367e46c3aec5fedd41f2757ad6efe567efb04b4d4ee55"}, 6 | "gettext": {:hex, :gettext, "0.18.1", "89e8499b051c7671fa60782faf24409b5d2306aa71feb43d79648a8bc63d0522", [:mix], [], "hexpm", "e70750c10a5f88cb8dc026fc28fa101529835026dec4a06dba3b614f2a99c7a9"}, 7 | "html_entities": {:hex, :html_entities, "0.5.1", "1c9715058b42c35a2ab65edc5b36d0ea66dd083767bef6e3edb57870ef556549", [:mix], [], "hexpm", "30efab070904eb897ff05cd52fa61c1025d7f8ef3a9ca250bc4e6513d16c32de"}, 8 | "jason": {:hex, :jason, "1.2.1", "12b22825e22f468c02eb3e4b9985f3d0cb8dc40b9bd704730efa11abd2708c44", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "b659b8571deedf60f79c5a608e15414085fa141344e2716fbd6988a084b5f993"}, 9 | "mime": {:hex, :mime, "1.4.0", "5066f14944b470286146047d2f73518cf5cca82f8e4815cf35d196b58cf07c47", [:mix], [], "hexpm", "75fa42c4228ea9a23f70f123c74ba7cece6a03b1fd474fe13f6a7a85c6ea4ff6"}, 10 | "phoenix": {:hex, :phoenix, "1.5.4", "0fca9ce7e960f9498d6315e41fcd0c80bfa6fbeb5fa3255b830c67fdfb7e703f", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.1.2 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4e516d131fde87b568abd62e1b14aa07ba7d5edfd230bab4e25cc9dedbb39135"}, 11 | "phoenix_html": {:hex, :phoenix_html, "2.14.2", "b8a3899a72050f3f48a36430da507dd99caf0ac2d06c77529b1646964f3d563e", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "58061c8dfd25da5df1ea0ca47c972f161beb6c875cd293917045b92ffe1bf617"}, 12 | "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.2.7", "21564144897109ac486518651fecd09403a4d9df4d8432e7dcdf156df6a6a31a", [:mix], [{:phoenix_html, "~> 2.14.1 or ~> 2.15", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.14.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.4.0 or ~> 0.5.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "2204c2c6755da7b39a21e312253b93d977cc846c85df8a6c0d9f9505cd8bf15b"}, 13 | "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.4", "940c0344b1d66a2e46eef02af3a70e0c5bb45a4db0bf47917add271b76cd3914", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "38f9308357dea4cc77f247e216da99fcb0224e05ada1469167520bed4cb8cccd"}, 14 | "phoenix_live_view": {:hex, :phoenix_live_view, "0.14.4", "7286a96287cd29b594ce4a7314249cea7311af04a06c0fa3e50932e188e73996", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.3", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 0.5", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "fc4f8cf205c784eeccee35de8afbfeb995ce5511ac4839db63d6d67a5ba091d1"}, 15 | "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"}, 16 | "plug": {:hex, :plug, "1.10.4", "41eba7d1a2d671faaf531fa867645bd5a3dce0957d8e2a3f398ccff7d2ef017f", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "ad1e233fe73d2eec56616568d260777b67f53148a999dc2d048f4eb9778fe4a0"}, 17 | "plug_cowboy": {:hex, :plug_cowboy, "2.3.0", "149a50e05cb73c12aad6506a371cd75750c0b19a32f81866e1a323dda9e0e99d", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "bc595a1870cef13f9c1e03df56d96804db7f702175e4ccacdb8fc75c02a7b97e"}, 18 | "plug_crypto": {:hex, :plug_crypto, "1.1.2", "bdd187572cc26dbd95b87136290425f2b580a116d3fb1f564216918c9730d227", [:mix], [], "hexpm", "6b8b608f895b6ffcfad49c37c7883e8df98ae19c6a28113b02aa1e9c5b22d6b5"}, 19 | "ranch": {:hex, :ranch, "1.7.1", "6b1fab51b49196860b733a49c07604465a47bdb78aa10c1c16a3d199f7f8c881", [:rebar3], [], "hexpm", "451d8527787df716d99dc36162fca05934915db0b6141bbdac2ea8d3c7afc7d7"}, 20 | "telemetry": {:hex, :telemetry, "0.4.2", "2808c992455e08d6177322f14d3bdb6b625fbcfd233a73505870d8738a2f4599", [:rebar3], [], "hexpm", "2d1419bd9dda6a206d7b5852179511722e2b18812310d304620c7bd92a13fcef"}, 21 | "telemetry_metrics": {:hex, :telemetry_metrics, "0.5.0", "1b796e74add83abf844e808564275dfb342bcc930b04c7577ab780e262b0d998", [:mix], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "31225e6ce7a37a421a0a96ec55244386aec1c190b22578bd245188a4a33298fd"}, 22 | "telemetry_poller": {:hex, :telemetry_poller, "0.5.1", "21071cc2e536810bac5628b935521ff3e28f0303e770951158c73eaaa01e962a", [:rebar3], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4cab72069210bc6e7a080cec9afffad1b33370149ed5d379b81c7c5f0c663fd4"}, 23 | } 24 | -------------------------------------------------------------------------------- /priv/gettext/en/LC_MESSAGES/errors.po: -------------------------------------------------------------------------------- 1 | ## `msgid`s in this file come from POT (.pot) files. 2 | ## 3 | ## Do not add, change, or remove `msgid`s manually here as 4 | ## they're tied to the ones in the corresponding POT file 5 | ## (with the same domain). 6 | ## 7 | ## Use `mix gettext.extract --merge` or `mix gettext.merge` 8 | ## to merge POT files into PO files. 9 | msgid "" 10 | msgstr "" 11 | "Language: en\n" 12 | -------------------------------------------------------------------------------- /priv/gettext/errors.pot: -------------------------------------------------------------------------------- 1 | ## This is a PO Template file. 2 | ## 3 | ## `msgid`s here are often extracted from source code. 4 | ## Add new translations manually only if they're dynamic 5 | ## translations that can't be statically extracted. 6 | ## 7 | ## Run `mix gettext.extract` to bring this file up to 8 | ## date. Leave `msgstr`s empty as changing them here has no 9 | ## effect: edit them in PO (`.po`) files instead. 10 | 11 | -------------------------------------------------------------------------------- /test/demo_web/live/page_live_test.exs: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.PageLiveTest do 2 | use DemoWeb.ConnCase 3 | 4 | import Phoenix.LiveViewTest 5 | 6 | test "disconnected and connected render", %{conn: conn} do 7 | {:ok, page_live, disconnected_html} = live(conn, "/") 8 | assert disconnected_html =~ "Welcome to Phoenix!" 9 | assert render(page_live) =~ "Welcome to Phoenix!" 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/demo_web/views/error_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ErrorViewTest do 2 | use DemoWeb.ConnCase, async: true 3 | 4 | # Bring render/3 and render_to_string/3 for testing custom views 5 | import Phoenix.View 6 | 7 | test "renders 404.html" do 8 | assert render_to_string(DemoWeb.ErrorView, "404.html", []) == "Not Found" 9 | end 10 | 11 | test "renders 500.html" do 12 | assert render_to_string(DemoWeb.ErrorView, "500.html", []) == "Internal Server Error" 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /test/demo_web/views/layout_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.LayoutViewTest do 2 | use DemoWeb.ConnCase, async: true 3 | 4 | # When testing helpers, you may want to import Phoenix.HTML and 5 | # use functions such as safe_to_string() to convert the helper 6 | # result into an HTML string. 7 | # import Phoenix.HTML 8 | end 9 | -------------------------------------------------------------------------------- /test/support/channel_case.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ChannelCase do 2 | @moduledoc """ 3 | This module defines the test case to be used by 4 | channel tests. 5 | 6 | Such tests rely on `Phoenix.ChannelTest` and also 7 | import other functionality to make it easier 8 | to build common data structures and query the data layer. 9 | 10 | Finally, if the test case interacts with the database, 11 | we enable the SQL sandbox, so changes done to the database 12 | are reverted at the end of every test. If you are using 13 | PostgreSQL, you can even run database tests asynchronously 14 | by setting `use DemoWeb.ChannelCase, async: true`, although 15 | this option is not recommended for other databases. 16 | """ 17 | 18 | use ExUnit.CaseTemplate 19 | 20 | using do 21 | quote do 22 | # Import conveniences for testing with channels 23 | import Phoenix.ChannelTest 24 | import DemoWeb.ChannelCase 25 | 26 | # The default endpoint for testing 27 | @endpoint DemoWeb.Endpoint 28 | end 29 | end 30 | 31 | setup _tags do 32 | :ok 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /test/support/conn_case.ex: -------------------------------------------------------------------------------- 1 | defmodule DemoWeb.ConnCase do 2 | @moduledoc """ 3 | This module defines the test case to be used by 4 | tests that require setting up a connection. 5 | 6 | Such tests rely on `Phoenix.ConnTest` and also 7 | import other functionality to make it easier 8 | to build common data structures and query the data layer. 9 | 10 | Finally, if the test case interacts with the database, 11 | we enable the SQL sandbox, so changes done to the database 12 | are reverted at the end of every test. If you are using 13 | PostgreSQL, you can even run database tests asynchronously 14 | by setting `use DemoWeb.ConnCase, async: true`, although 15 | this option is not recommended for other databases. 16 | """ 17 | 18 | use ExUnit.CaseTemplate 19 | 20 | using do 21 | quote do 22 | # Import conveniences for testing with connections 23 | import Plug.Conn 24 | import Phoenix.ConnTest 25 | import DemoWeb.ConnCase 26 | 27 | alias DemoWeb.Router.Helpers, as: Routes 28 | 29 | # The default endpoint for testing 30 | @endpoint DemoWeb.Endpoint 31 | end 32 | end 33 | 34 | setup _tags do 35 | {:ok, conn: Phoenix.ConnTest.build_conn()} 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /test/test_helper.exs: -------------------------------------------------------------------------------- 1 | ExUnit.start() 2 | --------------------------------------------------------------------------------