Migrate to Webpack
pull/166/head
Jimmy Lauzau 7 years ago committed by GitHub
commit ff81c21d44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      .circleci/config.yml
  2. 3
      .gitignore
  3. 9
      apps/explorer_web/assets/.eslintrc
  4. 5
      apps/explorer_web/assets/babelrc
  5. 120
      apps/explorer_web/assets/brunch-config.js
  6. 1
      apps/explorer_web/assets/css/app.scss
  7. 19
      apps/explorer_web/assets/js/app.js
  8. 4
      apps/explorer_web/assets/js/lib/block_subscription.js
  9. 41
      apps/explorer_web/assets/js/lib/react_phoenix.js
  10. 2
      apps/explorer_web/assets/js/lib/sidebar.js
  11. 10371
      apps/explorer_web/assets/package-lock.json
  12. 40
      apps/explorer_web/assets/package.json
  13. 9
      apps/explorer_web/assets/postcss.config.js
  14. 7
      apps/explorer_web/assets/spec/lib/block_subscription_spec.js
  15. 8
      apps/explorer_web/assets/spec/spec_helper.js
  16. 1
      apps/explorer_web/assets/spec/support/jasmine.scss
  17. 56
      apps/explorer_web/assets/webpack.config.js
  18. 9
      apps/explorer_web/config/dev.exs
  19. 1
      apps/explorer_web/lib/explorer_web.ex
  20. 6
      apps/explorer_web/lib/explorer_web/router.ex
  21. 3
      apps/explorer_web/mix.exs
  22. 11
      apps/explorer_web/test/explorer_web/features/javascript_test.exs
  23. 2
      mix.lock

@ -87,7 +87,7 @@ jobs:
- run:
name: Build assets
command: node node_modules/brunch/bin/brunch build
command: node node_modules/webpack/bin/webpack.js --mode development
working_directory: "apps/explorer_web/assets"
- persist_to_workspace:

3
.gitignore vendored

@ -13,9 +13,6 @@ erl_crash.dump
# Generated on crash by NPM
npm-debug.log
# Generated on crash by Yarn
yarn-error.log
# Static artifacts
/apps/explorer_web/assets/node_modules

@ -1,10 +1,3 @@
{
"extends": "standard",
"plugins": ["jasmine"],
"env": {
"jasmine": true
},
"globals": {
"$": false
}
"extends": "standard"
}

@ -0,0 +1,5 @@
{
presets: [
'env'
]
}

@ -1,120 +0,0 @@
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
entryPoints: {
'js/app.js': 'js/app.js'
},
joinTo: {
'js/test.js': [/^spec/, /^js/, /^node_modules/]
}
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// 'js/app.js': /^js/,
// 'js/vendor.js': /^(?!js)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// 'vendor/js/jquery-2.1.1.js',
// 'vendor/js/bootstrap.min.js'
// ]
// }
},
stylesheets: {
joinTo: {
'css/app.css': 'css/app.scss',
'css/test.css': 'spec/support/jasmine.scss',
}
},
templates: {
joinTo: 'js/app.js'
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to '/assets/static'. Files in this directory
// will be copied to `paths.public`, which is 'priv/static' by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ['static', 'css', 'css/**', 'js', 'vendor', 'spec'],
// Where to compile files to
public: '../priv/static'
},
// Configure your plugins
plugins: {
babel: {
presets: ['env', 'react'],
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
'fonts': ['node_modules/font-awesome/fonts']
},
sass: {
mode: 'native',
precision: 8,
allowCache: true,
options: {
includePaths: [
'node_modules/bootstrap/scss',
'node_modules/font-awesome/scss',
'node_modules/jasmine-core/lib'
]
}
},
postcss: {
processors: [
require('autoprefixer')(['last 4 versions']),
require('csswring')()
]
}
},
modules: {
autoRequire: {
'js/app.js': ['js/app'],
'js/test.js': ['spec/spec_helper']
}
},
overrides: {
production: {
optimize: true,
sourceMaps: false,
plugins: {
autoReload: {enabled: false},
},
modules: {autoRequire: {'js/app.js': ['js/app']}},
paths: {watched: ['static', 'css', 'css/**', 'js', 'vendor']},
files: {
javascripts: {joinTo: 'js/app.js'},
stylesheets: {joinTo: 'css/app.css'},
}
}
},
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js',
bootstrap: 'bootstrap'
}
}
}

@ -7,6 +7,7 @@
/* This file is for your main application css. */
// Font Awesome
$fa-font-path: "~font-awesome/fonts";
@import "font-awesome";
// Bootstrap Core CSS

@ -1,19 +1,16 @@
// Brunch automatically concatenates all files in your
// watched paths. Those paths can be configured at
// config.paths.watched in "brunch-config.js".
//
// However, those files will only be executed if
// explicitly imported. The only exception are files
// in vendor, which are never wrapped in imports and
// therefore are always executed.
// We need to import the CSS so that webpack will load it.
// The ExtractTextPlugin is used to separate it out into
// its own CSS file.
import '../css/app.scss'
// webpack automatically concatenates all files in your
// watched paths. Those paths can be configured as
// endpoints in "webpack.config.js".
//
// Import dependencies
//
// If you no longer want to use a dependency, remember
// to also remove its path from "config.paths.watched".
import '@babel/polyfill'
import 'phoenix_html'
import './lib/react_phoenix'
import 'bootstrap'
// Import local files

@ -1,4 +0,0 @@
class BlockSubscription {
}
export default BlockSubscription

@ -1,41 +0,0 @@
// MIT License
// Copyright (c) 2017 Geoffrey Lessel
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import React from 'react'
import ReactDOM from 'react-dom'
export default class ReactPhoenix {
static init () {
const elements = document.querySelectorAll('[data-react-class]')
Array.prototype.forEach.call(elements, e => {
const targetId = document.getElementById(e.dataset.reactTargetId)
const targetDiv = targetId || e
const reactProps = e.dataset.reactProps ? e.dataset.reactProps : '{}'
const reactElement = React.createElement(global[e.dataset.reactClass], JSON.parse(reactProps))
ReactDOM.render(reactElement, targetDiv)
})
}
}
document.addEventListener('DOMContentLoaded', e => {
ReactPhoenix.init()
})

@ -1,3 +1,5 @@
import $ from 'jquery'
$('#sidebarCollapse').on('click', function () {
$('#sidebar--container').toggleClass('active')
$(this).toggleClass('active')

File diff suppressed because it is too large Load Diff

@ -12,42 +12,40 @@
"npm": "5.x"
},
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin",
"build": "brunch build",
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch",
"build": "webpack --mode development",
"eslint": "eslint js/**"
},
"dependencies": {
"@babel/polyfill": "^7.0.0-beta.39",
"autoprefixer": "^8.3.0",
"babel-brunch": "6.1.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.1.0",
"brunch": "2.10.9",
"copycat-brunch": "^1.1.0",
"csswring": "^6.0.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"phoenix": "file:../../../deps/phoenix",
"phoenix_html": "file:../../../deps/phoenix_html",
"popper.js": "^1.14.3",
"postcss-brunch": "0.5.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.10.0"
"popper.js": "^1.14.3"
},
"devDependencies": {
"@babel/polyfill": "^7.0.0-beta.46",
"autoprefixer": "^8.4.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^4.15.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-config-standard-jsx": "^4.0.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jasmine": "^2.9.1",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-react": "^7.5.1",
"eslint-plugin-standard": "^3.0.1",
"jasmine-core": "^2.9.1"
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.4",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2"
}
}

@ -0,0 +1,9 @@
module.exports = {
plugins: [
require('autoprefixer')({
browsers: [
'last 4 versions'
]
})
]
};

@ -1,7 +0,0 @@
import BlockSubscription from 'js/lib/block_subscription'
describe('BlockSubscription', function () {
it('exists', function () {
expect(BlockSubscription).toBeDefined()
})
})

@ -1,8 +0,0 @@
import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine'
global.jasmineRequire = jasmineRequire
require('jasmine-core/lib/jasmine-core/jasmine-html')
require('jasmine-core/lib/jasmine-core/boot')
window.require.list().forEach(function (module) {
if (module.indexOf("_spec.js") !== -1) require(module)
})

@ -1 +0,0 @@
@import "jasmine-core/jasmine";

@ -0,0 +1,56 @@
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
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",
options: {
precision: 8,
includePaths: [
'node_modules/bootstrap/scss',
'node_modules/font-awesome/scss'
]
}
}],
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: '../' }])
]
};

@ -5,7 +5,7 @@ use Mix.Config
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with brunch.io to recompile .js and .css sources.
# with webpack to recompile .js and .css sources.
config :explorer_web, ExplorerWeb.Endpoint,
http: [port: 4000],
debug_errors: true,
@ -13,9 +13,10 @@ config :explorer_web, ExplorerWeb.Endpoint,
check_origin: false,
watchers: [
node: [
"node_modules/brunch/bin/brunch",
"watch",
"--stdin",
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--watch",
cd: Path.expand("../assets", __DIR__)
]
]

@ -41,7 +41,6 @@ defmodule ExplorerWeb do
use Phoenix.HTML
import ExplorerWeb.{ErrorHelpers, Gettext, Router.Helpers}
import ReactPhoenix.ClientSide
import Scrivener.HTML
end
end

@ -39,10 +39,6 @@ defmodule ExplorerWeb.Router do
plug(ExqUi.RouterPlug, namespace: "exq")
end
pipeline :jasmine do
if Mix.env() != :prod, do: plug(Jasmine, js_files: ["js/test.js"], css_files: ["css/test.css"])
end
pipeline :api do
plug(:accepts, ["json"])
end
@ -54,14 +50,12 @@ defmodule ExplorerWeb.Router do
scope "/", ExplorerWeb do
pipe_through(:browser)
pipe_through(:jasmine)
pipe_through(:set_locale)
resources("/", ChainController, only: [:show], singleton: true, as: :chain)
end
scope "/:locale", ExplorerWeb do
pipe_through(:browser)
pipe_through(:jasmine)
pipe_through(:set_locale)
resources("/", ChainController, only: [:show], singleton: true, as: :chain)

@ -55,7 +55,6 @@ defmodule ExplorerWeb.Mixfile do
do: [
:scrivener_html,
:ex_cldr,
:ex_jasmine,
:timex,
:timex_ecto,
:crontab,
@ -76,7 +75,6 @@ defmodule ExplorerWeb.Mixfile do
{:dialyxir, "~> 0.5", only: [:dev, :test], runtime: false},
{:ex_cldr_numbers, "~> 1.0"},
{:ex_cldr_units, "~> 1.0"},
{:ex_jasmine, github: "minifast/ex_jasmine", branch: "master"},
{:ex_machina, "~> 2.1", only: [:test]},
# Code coverage
{:excoveralls, "~> 0.8.1", only: [:test]},
@ -98,7 +96,6 @@ defmodule ExplorerWeb.Mixfile do
{:phoenix_pubsub, "~> 1.0"},
{:phoenix_pubsub_redis, "~> 2.1.0", only: [:prod]},
{:postgrex, ">= 0.0.0"},
{:react_phoenix, "~> 0.5"},
{:scrivener_html, "~> 1.7"},
# Waiting on https://github.com/smeevil/set_locale/pull/9
{:set_locale, github: "minifast/set_locale", branch: "master"},

@ -1,11 +0,0 @@
defmodule ExplorerWeb.JavascriptTest do
use ExplorerWeb.FeatureCase, async: true
import Wallaby.Query, only: [css: 1]
test "runs jasmine", %{session: session} do
session
|> visit("/jasmine")
|> assert_has(css(".jasmine-bar.jasmine-passed"))
end
end

@ -19,7 +19,6 @@
"ex_cldr_numbers": {:hex, :ex_cldr_numbers, "1.2.0", "ef27299922da913ffad1ed296cacf28b6452fc1243b77301dc17c03276c6ee34", [:mix], [{:decimal, "~> 1.4", [hex: :decimal, repo: "hexpm", optional: false]}, {:ex_cldr, "~> 1.3", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:poison, "~> 2.1 or ~> 3.1", [hex: :poison, repo: "hexpm", optional: false]}], "hexpm"},
"ex_cldr_units": {:hex, :ex_cldr_units, "1.1.1", "b3c7256709bdeb3740a5f64ce2bce659eb9cf4cc1afb4cf94aba033b4a18bc5f", [:mix], [{:ex_cldr, "~> 1.0", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:ex_cldr_numbers, "~> 1.0", [hex: :ex_cldr_numbers, repo: "hexpm", optional: false]}], "hexpm"},
"ex_doc": {:hex, :ex_doc, "0.18.3", "f4b0e4a2ec6f333dccf761838a4b253d75e11f714b85ae271c9ae361367897b7", [:mix], [{:earmark, "~> 1.1", [hex: :earmark, repo: "hexpm", optional: false]}], "hexpm"},
"ex_jasmine": {:git, "https://github.com/minifast/ex_jasmine.git", "f2c906e36b469a9bf0891c23cd72135ba6a257f1", [branch: "master"]},
"ex_machina": {:hex, :ex_machina, "2.1.0", "4874dc9c78e7cf2d429f24dc3c4005674d4e4da6a08be961ffccc08fb528e28b", [:mix], [{:ecto, "~> 2.1", [hex: :ecto, repo: "hexpm", optional: true]}], "hexpm"},
"exactor": {:hex, :exactor, "2.2.4", "5efb4ddeb2c48d9a1d7c9b465a6fffdd82300eb9618ece5d34c3334d5d7245b1", [:mix], [], "hexpm"},
"excoveralls": {:hex, :excoveralls, "0.8.1", "0bbf67f22c7dbf7503981d21a5eef5db8bbc3cb86e70d3798e8c802c74fa5e27", [:mix], [{:exjsx, ">= 3.0.0", [hex: :exjsx, repo: "hexpm", optional: false]}, {:hackney, ">= 0.12.0", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm"},
@ -61,7 +60,6 @@
"postgrex": {:hex, :postgrex, "0.13.5", "3d931aba29363e1443da167a4b12f06dcd171103c424de15e5f3fc2ba3e6d9c5", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 1.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm"},
"quantum": {:hex, :quantum, "2.2.1", "a8f2ef38b68121833651617ed0c01b348582542dee11730d553acdc57a7d0f7c", [:mix], [{:calendar, "~> 0.17", [hex: :calendar, repo: "hexpm", optional: true]}, {:crontab, "~> 1.1", [hex: :crontab, repo: "hexpm", optional: false]}, {:gen_stage, "~> 0.12.2", [hex: :gen_stage, repo: "hexpm", optional: false]}, {:timex, "~> 3.1.13", [hex: :timex, repo: "hexpm", optional: true]}], "hexpm"},
"ranch": {:hex, :ranch, "1.3.2", "e4965a144dc9fbe70e5c077c65e73c57165416a901bd02ea899cfd95aa890986", [:rebar3], [], "hexpm"},
"react_phoenix": {:hex, :react_phoenix, "0.5.1", "962e1e46ce0ad6e0c9f007ee5f602a6c3758c3a808ce990134b6ed155d60b46d", [:mix], [{:phoenix_html, "~> 2.9", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:poison, "~> 2.2 or ~> 3.0", [hex: :poison, repo: "hexpm", optional: false]}], "hexpm"},
"redix": {:hex, :redix, "0.6.1", "20986b0e02f02b13e6f53c79a1ae70aa83147488c408f40275ec261f5bb0a6d0", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}], "hexpm"},
"redix_pubsub": {:hex, :redix_pubsub, "0.4.1", "26e6a69129072ac2226be49139019bdf951bb1e9e210a773c1372acf88100936", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:redix, "~> 0.6.0", [hex: :redix, repo: "hexpm", optional: false]}], "hexpm"},
"scrivener": {:hex, :scrivener, "2.5.0", "e1f78c62b6806d91cc9c4778deef1ea4e80aa9fadfce2c16831afe0468cc8a2c", [:mix], [], "hexpm"},

Loading…
Cancel
Save