Include tui image editor with webpack [SCI-2856]

This commit is contained in:
Oleksii Kriuchykhin 2018-11-21 22:05:33 +01:00 committed by Anton Ignatov
parent ded74044de
commit 9bbdc8fc89
27 changed files with 4052 additions and 3226 deletions

View file

@ -1,35 +1,18 @@
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions", "ie 10"],
"uglify": true
},
"useBuiltIns": true
}
],
"react",
"es2015",
"flow"
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"transform-flow-strip-types",
"transform-object-rest-spread",
"syntax-dynamic-import",
"transform-react-jsx-source",
[
"transform-class-properties",
{
"spec": true
}
]
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}

View file

@ -1,4 +1,3 @@
plugins:
postcss-smart-import: {}
precss: {}
autoprefixer: {}
postcss-import: {}
postcss-cssnext: {}

View file

@ -4,6 +4,8 @@ source 'http://rubygems.org'
ruby '2.4.5'
gem 'webpacker', '~> 3.5'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'bootstrap_form'
gem 'devise', '~> 4.3.0'

View file

@ -381,6 +381,8 @@ GEM
rack (2.0.6)
rack-attack (5.4.1)
rack (>= 1.0, < 3)
rack-proxy (0.6.5)
rack
rack-test (1.1.0)
rack (>= 1.0, < 3)
rails (5.1.6)
@ -544,9 +546,9 @@ GEM
addressable (>= 2.3.6)
crack (>= 0.3.2)
hashdiff
webpacker (2.0)
webpacker (3.5.5)
activesupport (>= 4.2)
multi_json (~> 1.2)
rack-proxy (>= 0.6.1)
railties (>= 4.2)
websocket-driver (0.6.5)
websocket-extensions (>= 0.1.0)
@ -662,7 +664,7 @@ DEPENDENCIES
uglifier (>= 1.3.0)
underscore-rails
webmock
webpacker (~> 2.0)
webpacker (~> 3.5)
whacamole
wicked_pdf (~> 1.1.0)
wkhtmltopdf-heroku

View file

@ -0,0 +1,7 @@
global.tui = {}
global.tui.usageStatistics = false;
require('tui-code-snippet');
require('tui-color-picker');
global.tui.ImageEditor = require('tui-image-editor');

View file

@ -0,0 +1,2 @@
@import "~tui-color-picker/dist/tui-color-picker";
@import "~tui-image-editor/dist/tui-image-editor";

View file

@ -18,14 +18,9 @@
<%= yield(:head) %>
<% end %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.3.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.color-picker/v2.2.0/dist/tui-color-picker.js"></script>
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.0/tui-color-picker.css">
<%= javascript_pack_tag 'tui_image_editor' %>
<%= stylesheet_pack_tag 'tui_image_editor_styles' %>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/v3.2.2/tui-image-editor.css">
<script src="https://uicdn.toast.com/tui-image-editor/v3.2.2/tui-image-editor.js"></script>
</head>
<body
class="<%= yield :body_class %>"

View file

@ -1,28 +1,15 @@
#!/usr/bin/env ruby
$stdout.sync = true
require "shellwords"
require "yaml"
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]
require "rubygems"
require "bundler/setup"
APP_PATH = File.expand_path("../", __dir__)
NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
unless File.exist?(WEBPACK_CONFIG)
puts "Webpack configuration not found."
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end
newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
Dir.chdir(APP_PATH) do
exec newenv, *cmdline
end
require "webpacker"
require "webpacker/webpack_runner"
Webpacker::WebpackRunner.run(ARGV)

View file

@ -1,43 +1,15 @@
#!/usr/bin/env ruby
$stdout.sync = true
require "shellwords"
require "yaml"
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]
require "rubygems"
require "bundler/setup"
APP_PATH = File.expand_path("../", __dir__)
CONFIG_FILE = File.join(APP_PATH, "config/webpacker.yml")
NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/development.js")
def args(key)
index = ARGV.index(key)
index ? ARGV[index + 1] : nil
end
begin
dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
rescue Errno::ENOENT, NoMethodError
puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end
newenv = {
"NODE_PATH" => NODE_MODULES_PATH.shellescape,
"ASSET_HOST" => DEV_SERVER_HOST.shellescape
}.freeze
cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
Dir.chdir(APP_PATH) do
exec newenv, *cmdline
end
require "webpacker"
require "webpacker/dev_server_runner"
Webpacker::DevServerRunner.run(ARGV)

View file

@ -1,4 +1,7 @@
Rails.application.configure do
# Verifies that versions and hashed value of the package contents in the project's package.json
config.webpacker.check_yarn_integrity = true
# Settings specified here will take precedence over those in config/application.rb.
# In the development environment your application's code is reloaded on

View file

@ -1,4 +1,7 @@
Rails.application.configure do
# Verifies that versions and hashed value of the package contents in the project's package.json
config.webpacker.check_yarn_integrity = false
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.

View file

@ -1,35 +0,0 @@
// Common configuration for webpacker loaded from config/webpacker.yml
const { join, resolve } = require('path')
const { env } = require('process')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')
const configPath = resolve('config', 'webpacker.yml')
const loadersDir = join(__dirname, 'loaders')
const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
function removeOuterSlashes(string) {
return string.replace(/^\/*/, '').replace(/\/*$/, '')
}
function formatPublicPath(host = '', path = '') {
let formattedHost = removeOuterSlashes(host)
if (formattedHost && !/^http/i.test(formattedHost)) {
formattedHost = `//${formattedHost}`
}
const formattedPath = removeOuterSlashes(path)
return `${formattedHost}/${formattedPath}/`
}
const output = {
path: resolve('public', settings.public_output_path),
publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
}
module.exports = {
settings,
env,
loadersDir,
output
}

View file

@ -1,32 +1,5 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const merge = require('webpack-merge')
const sharedConfig = require('./shared.js')
const { settings, output } = require('./configuration.js')
const environment = require('./environment')
module.exports = merge(sharedConfig, {
devtool: 'cheap-eval-source-map',
stats: {
errorDetails: true
},
output: {
pathinfo: true
},
devServer: {
clientLogLevel: 'none',
https: settings.dev_server.https,
host: settings.dev_server.host,
port: settings.dev_server.port,
contentBase: output.path,
publicPath: output.publicPath,
compress: true,
headers: { 'Access-Control-Allow-Origin': '*' },
historyApiFallback: true,
watchOptions: {
ignored: /node_modules/
}
}
})
module.exports = environment.toWebpackConfig()

View file

@ -0,0 +1,3 @@
const { environment } = require('@rails/webpacker')
module.exports = environment

View file

@ -1,12 +0,0 @@
const { env, publicPath } = require('../configuration.js')
module.exports = {
test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
use: [{
loader: 'file-loader',
options: {
publicPath,
name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
}
}]
}

View file

@ -1,5 +0,0 @@
module.exports = {
test: /\.js(\.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}

View file

@ -1,4 +0,0 @@
module.exports = {
test: /\.coffee(\.erb)?$/,
loader: 'coffee-loader'
}

View file

@ -1,9 +0,0 @@
module.exports = {
test: /\.erb$/,
enforce: 'pre',
exclude: /node_modules/,
loader: 'rails-erb-loader',
options: {
runner: 'bin/rails runner'
}
}

View file

@ -1,5 +0,0 @@
module.exports = {
test: /\.(js|jsx)?(\.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}

View file

@ -1,15 +0,0 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')
module.exports = {
test: /\.(scss|sass|css)$/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
'resolve-url-loader',
{ loader: 'sass-loader', options: { sourceMap: true } }
]
})
}

View file

@ -1,35 +1,5 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
/* eslint global-require: 0 */
const environment = require('./environment')
const webpack = require('webpack')
const merge = require('webpack-merge')
const CompressionPlugin = require('compression-webpack-plugin')
const sharedConfig = require('./shared.js')
module.exports = merge(sharedConfig, {
output: { filename: '[name]-[chunkhash].js' },
devtool: 'source-map',
stats: 'normal',
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: true,
compress: {
warnings: false
},
output: {
comments: false
}
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
})
]
})
module.exports = environment.toWebpackConfig()

View file

@ -1,58 +0,0 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */
const webpack = require('webpack')
const { basename, dirname, join, relative, resolve } = require('path')
const { sync } = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const extname = require('path-complete-extname')
const { env, settings, output, loadersDir } = require('./configuration.js')
const extensionGlob = `**/*{${settings.extensions.join(',')}}*`
const entryPath = join(settings.source_path, settings.source_entry_path)
const packPaths = sync(join(entryPath, extensionGlob))
module.exports = {
entry: packPaths.reduce(
(map, entry) => {
const localMap = map
const namespace = relative(join(entryPath), dirname(entry))
localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
return localMap
}, {}
),
output: {
filename: '[name].js',
path: output.path,
publicPath: output.publicPath
},
module: {
rules: sync(join(loadersDir, '*.js')).map(loader => require(loader))
},
plugins: [
new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
new ManifestPlugin({
publicPath: output.publicPath,
writeToFileEmit: true
})
],
resolve: {
extensions: settings.extensions,
modules: [
resolve(settings.source_path),
'node_modules'
]
},
resolveLoader: {
modules: ['node_modules']
}
}

View file

@ -1,6 +1,5 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const merge = require('webpack-merge')
const sharedConfig = require('./shared.js')
const environment = require('./environment')
module.exports = merge(sharedConfig, {})
module.exports = environment.toWebpackConfig()

View file

@ -4,17 +4,23 @@ default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .coffee
- .erb
- .js
- .jsx
- .ts
- .vue
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
@ -23,16 +29,40 @@ default: &default
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
host: 0.0.0.0
port: 8080
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true

View file

@ -38,7 +38,7 @@ services:
stdin_open: true
tty: true
ports:
- "8080:8080"
- "3035:3035"
command: >
bash -c "./bin/webpack-dev-server"
environment:

6842
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -42,6 +42,7 @@
"webpack-dev-server": "^2.11.2"
},
"dependencies": {
"@rails/webpacker": "^3.5.5",
"autoprefixer": "^7.2.6",
"axios": "^0.16.2",
"babel-core": "^6.26.3",
@ -59,6 +60,7 @@
"compression-webpack-plugin": "^1.1.11",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"fabric": "^1.6.7",
"file-loader": "^0.11.2",
"glob": "^7.1.2",
"immutability-helper": "^2.7.1",
@ -67,6 +69,7 @@
"lodash": "^4.17.10",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"node-gyp": "^3.8.0",
"node-sass": "^4.9.2",
"path-complete-extname": "^0.1.0",
"postcss-loader": "^2.1.6",
@ -93,10 +96,14 @@
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "^2.3.0",
"safe-umd-webpack-plugin": "^4.0.0",
"sass-loader": "^6.0.7",
"shortid": "^2.2.12",
"style-loader": "^0.18.2",
"styled-components": "^2.4.1",
"tui-code-snippet": "^1.4.0",
"tui-color-picker": "^2.2.0",
"tui-image-editor": "^3.2.2",
"webpack": "^3.12.0",
"webpack-manifest-plugin": "^1.3.2",
"webpack-merge": "^4.1.3"