Merge pull request #1329 from poanetwork/defer-js-to-specific-pages

feat: allow deferring js to specific pages

apps/block_scout_web/assets/js/app.js

@@ -40,7 +40,6 @@ import './lib/market_history_chart'
 import './lib/pending_transactions_toggle'
 import './lib/pretty_json'
 import './lib/reload_button'
-import './lib/smart_contract/code_highlighting'
 import './lib/smart_contract/read_only_functions'
 import './lib/smart_contract/wei_ether_converter'
 import './lib/stop_propagation'

apps/block_scout_web/assets/webpack.config.js

@@ -1,56 +1,83 @@
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const glob = require("glob");
 
-module.exports = {
-  entry: './js/app.js',
-  output: {
-    filename: 'app.js',
-    path: path.resolve(__dirname, '../priv/static/js')
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
-      },
-      {
-        test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
-          use: [{
-            loader: "css-loader"
-          }, {
-            loader: "postcss-loader"
-          }, {
-            loader: "sass-loader",
+function transpileViewScript(file) {
+  return {
+    entry: file,
+    output: {
+      filename: file.replace('./js/view_specific/', ''),
+      path: path.resolve(__dirname, '../priv/static/js')
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+      ]
+    }
+  }
+};
+
+const appJs =
+  {
+    entry: './js/app.js',
+    output: {
+      filename: 'app.js',
+      path: path.resolve(__dirname, '../priv/static/js')
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+        {
+          test: /\.scss$/,
+          use: ExtractTextPlugin.extract({
+            use: [{
+              loader: "css-loader"
+            }, {
+              loader: "postcss-loader"
+            }, {
+              loader: "sass-loader",
+              options: {
+                precision: 8,
+                includePaths: [
+                  'node_modules/bootstrap/scss',
+                  'node_modules/@fortawesome/fontawesome-free/scss'
+                ]
+              }
+            }],
+            fallback: 'style-loader'
+          })
+        }, {
+          test: /\.(svg|ttf|eot|woff|woff2)$/,
+          use: {
+            loader: 'file-loader',
             options: {
-              precision: 8,
-              includePaths: [
-                'node_modules/bootstrap/scss',
-                'node_modules/@fortawesome/fontawesome-free/scss'
-              ]
+              name: '[name].[ext]',
+              outputPath: '../fonts/',
+              publicPath: '../fonts/'
             }
-          }],
-          fallback: 'style-loader'
-        })
-      }, {
-        test: /\.(svg|ttf|eot|woff|woff2)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-            outputPath: '../fonts/',
-            publicPath: '../fonts/'
           }
         }
-      }
+      ]
+    },
+    plugins: [
+      new ExtractTextPlugin('../css/app.css'),
+      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
     ]
-  },
-  plugins: [
-    new ExtractTextPlugin('../css/app.css'),
-    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
-  ]
-};
+  }
+
+const viewScripts = glob.sync('./js/view_specific/**/*.js').map(transpileViewScript);
+
+module.exports = viewScripts.concat(appJs);

apps/block_scout_web/lib/block_scout_web.ex

@@ -50,6 +50,7 @@ defmodule BlockScoutWeb do
         Router.Helpers,
         TabHelpers,
         Tokens.Helpers,
+        Views.ScriptHelpers,
         WeiHelpers
       }
     end

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -52,5 +52,6 @@
       }
     </script>
     <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
+    <%= render_existing(@view_module, "scripts.html", assigns) %>
   </body>
 </html>

apps/block_scout_web/lib/block_scout_web/views/address_contract_view.ex

@@ -1,6 +1,10 @@
 defmodule BlockScoutWeb.AddressContractView do
   use BlockScoutWeb, :view
 
+  def render("scripts.html", %{conn: conn}) do
+    render_scripts(conn, "address_contract/code_highlighting.js")
+  end
+
   def format_smart_contract_abi(abi), do: Poison.encode!(abi, pretty: false)
 
   @doc """

apps/block_scout_web/lib/block_scout_web/views/script_helpers.ex

@@ -0,0 +1,28 @@
+defmodule BlockScoutWeb.Views.ScriptHelpers do
+  @moduledoc """
+  Helpers for rendering view specific script tags.
+  """
+
+  import Phoenix.HTML, only: [sigil_E: 2]
+  import BlockScoutWeb.Router.Helpers, only: [static_path: 2]
+
+  def render_scripts(conn, file_names) do
+    conn
+    |> files(file_names)
+    |> Enum.map(fn file ->
+      ~E"""
+        <script src="<%= file %>"> </script>
+      """
+    end)
+  end
+
+  defp files(conn, file_names) do
+    file_names
+    |> List.wrap()
+    |> Enum.map(fn file ->
+      path = "/" <> Path.join("js", file)
+
+      static_path(conn, path)
+    end)
+  end
+end

apps/block_scout_web/priv/gettext/default.pot

@@ -1123,7 +1123,7 @@ msgid "at"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/address_contract_view.ex:16
+#: lib/block_scout_web/views/address_contract_view.ex:20
 msgid "false"
 msgstr ""
 
@@ -1146,7 +1146,7 @@ msgid "total addresses with a balance"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/address_contract_view.ex:15
+#: lib/block_scout_web/views/address_contract_view.ex:19
 msgid "true"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -1123,7 +1123,7 @@ msgid "at"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/address_contract_view.ex:16
+#: lib/block_scout_web/views/address_contract_view.ex:20
 msgid "false"
 msgstr ""
 
@@ -1146,7 +1146,7 @@ msgid "total addresses with a balance"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/address_contract_view.ex:15
+#: lib/block_scout_web/views/address_contract_view.ex:19
 msgid "true"
 msgstr ""