diff --git a/docs/development/core/development-dependencies.asciidoc b/docs/development/core/development-dependencies.asciidoc index 738112ad562a9..a403e9c2c7516 100644 --- a/docs/development/core/development-dependencies.asciidoc +++ b/docs/development/core/development-dependencies.asciidoc @@ -70,7 +70,7 @@ webpack shim for jQuery: ----------- // webpackShims/jquery.js -module.exports = window.jQuery = window.$ = require('node_modules/jquery/dist/jquery'); +module.exports = window.jQuery = window.$ = require('../node_modules/jquery/dist/jquery'); require('ui/jquery/findTestSubject')(window.$); ----------- @@ -88,8 +88,8 @@ Here is what our webpack shim for angular looks like: // webpackShims/angular.js require('jquery'); -require('node_modules/angular/angular'); -require('node_modules/angular-elastic/elastic'); +require('../node_modules/angular/angular'); +require('../node_modules/angular-elastic/elastic'); require('ui/modules').get('kibana', ['monospaced.elastic']); module.exports = window.angular; ----------- @@ -100,4 +100,4 @@ What this shim does is fairly simple if you go line by line: . load the angular.js file from the npm installation . load the angular-elastic plugin, a plugin we want to always be included whenever we import angular . use the `ui/modules` module to add the module exported by angular-elastic as a dependency to the `kibana` angular module -. finally, export the window.angular variable. This means that writing `import angular from 'angular';` will properly set the angular variable to the angular library, rather than undefined which is the default behavior. +. finally, export the window.angular variable. This means that writing `import angular from 'angular';` will properly set the angular variable to the angular library, rather than undefined which is the default behavior. \ No newline at end of file diff --git a/package.json b/package.json index 4cbd2e63a07e2..572c1aaf55643 100644 --- a/package.json +++ b/package.json @@ -88,10 +88,9 @@ "angular-translate": "2.13.1", "ansicolors": "0.3.2", "autoprefixer": "6.5.4", - "autoprefixer-loader": "2.0.0", "babel-core": "6.21.0", "babel-jest": "21.0.0", - "babel-loader": "6.2.10", + "babel-loader": "7.1.2", "babel-plugin-add-module-exports": "0.2.1", "babel-plugin-transform-async-generator-functions": "6.24.1", "babel-plugin-transform-class-properties": "6.24.1", @@ -106,10 +105,11 @@ "boom": "5.2.0", "brace": "0.5.1", "bunyan": "1.7.1", + "cache-loader": "1.0.3", "check-hash": "1.0.1", "color": "1.0.3", "commander": "2.8.1", - "css-loader": "0.28.1", + "css-loader": "0.28.7", "d3": "3.5.6", "d3-cloud": "1.2.1", "dragula": "3.7.0", @@ -118,10 +118,10 @@ "encode-uri-query": "1.0.0", "even-better": "7.0.2", "expiry-js": "0.1.7", - "exports-loader": "0.6.2", - "expose-loader": "0.7.0", - "extract-text-webpack-plugin": "0.8.2", - "file-loader": "0.8.4", + "exports-loader": "0.6.4", + "expose-loader": "0.7.3", + "extract-text-webpack-plugin": "3.0.1", + "file-loader": "1.1.4", "focus-trap-react": "3.0.3", "font-awesome": "4.4.0", "glob": "5.0.13", @@ -131,14 +131,13 @@ "handlebars": "4.0.5", "hapi": "14.2.0", "http-proxy-agent": "1.0.0", - "imports-loader": "0.6.4", + "imports-loader": "0.7.1", "inert": "4.0.2", "jade": "1.11.0", - "jade-loader": "0.7.1", + "jade-loader": "0.8.0", "joi": "10.4.1", "jquery": "2.2.4", "js-yaml": "3.4.1", - "json-loader": "0.5.3", "json-stringify-safe": "5.0.1", "jstimezonedetect": "1.0.5", "leaflet": "1.0.3", @@ -146,7 +145,7 @@ "leaflet-responsive-popup": "0.2.0", "leaflet.heat": "0.2.0", "less": "2.7.1", - "less-loader": "2.2.3", + "less-loader": "4.0.5", "lodash": "3.10.1", "lru-cache": "4.1.1", "markdown-it": "8.3.2", @@ -159,7 +158,7 @@ "no-ui-slider": "1.2.0", "node-fetch": "1.3.2", "pegjs": "0.9.0", - "postcss-loader": "1.3.3", + "postcss-loader": "2.0.6", "prop-types": "15.5.8", "proxy-from-env": "1.0.0", "pui-react-overlay-trigger": "7.5.4", @@ -193,28 +192,29 @@ "resize-observer-polyfill": "1.2.1", "rimraf": "2.4.3", "rison-node": "1.0.0", - "rjs-repack-loader": "1.0.6", "rxjs": "5.4.3", - "script-loader": "0.6.1", + "script-loader": "0.7.2", "semver": "5.1.0", - "style-loader": "0.12.3", + "style-loader": "0.19.0", "tabbable": "1.1.0", "tar": "2.2.0", "tinygradient": "0.3.0", "trunc-html": "1.0.2", "trunc-text": "1.0.2", + "uglifyjs-webpack-plugin": "0.4.6", "ui-select": "0.19.6", - "url-loader": "0.5.6", + "url-loader": "0.5.9", "uuid": "3.0.1", "validate-npm-package-name": "2.2.2", "vision": "4.1.0", - "webpack": "github:elastic/webpack#fix/query-params-for-aliased-loaders", + "webpack": "3.6.0", + "webpack-merge": "4.1.0", "wreck": "12.4.0", "yauzl": "2.7.0" }, "devDependencies": { "@elastic/eslint-config-kibana": "0.13.0", - "@elastic/eslint-import-resolver-kibana": "0.8.1", + "@elastic/eslint-import-resolver-kibana": "0.9.0", "@elastic/eslint-plugin-kibana-custom": "1.0.3", "angular-mocks": "1.4.7", "babel-eslint": "7.2.3", @@ -253,10 +253,10 @@ "highlight.js": "9.0.0", "history": "2.1.1", "html": "1.0.0", - "html-loader": "0.4.3", + "html-loader": "0.5.1", "husky": "0.8.1", "image-diff": "1.6.0", - "istanbul-instrumenter-loader": "0.1.3", + "istanbul-instrumenter-loader": "3.0.0", "jest": "21.0.1", "jest-cli": "21.0.1", "jsdom": "9.9.1", @@ -278,10 +278,10 @@ "murmurhash3js": "3.0.1", "ncp": "2.0.0", "nock": "8.0.0", - "node-sass": "3.8.0", + "node-sass": "4.5.3", "pixelmatch": "4.0.2", "proxyquire": "1.7.10", - "sass-loader": "4.0.0", + "sass-loader": "6.0.6", "simple-git": "1.37.0", "sinon": "1.17.2", "source-map": "0.5.6", @@ -290,7 +290,7 @@ "supertest": "3.0.0", "supertest-as-promised": "2.0.2", "tree-kill": "1.1.0", - "webpack-dev-server": "1.14.1", + "webpack-dev-server": "2.9.1", "yeoman-generator": "1.1.1", "yo": "2.0.0" }, diff --git a/src/core_plugins/console/public/src/directives/sense_help_example.js b/src/core_plugins/console/public/src/directives/sense_help_example.js index 42bb30fcfecd7..431a5fbdfab54 100644 --- a/src/core_plugins/console/public/src/directives/sense_help_example.js +++ b/src/core_plugins/console/public/src/directives/sense_help_example.js @@ -1,5 +1,5 @@ const SenseEditor = require('../sense_editor/editor'); -const exampleText = require('raw!./helpExample.txt').trim(); +const exampleText = require('raw-loader!./helpExample.txt').trim(); import { useResizeCheckerProvider } from '../sense_editor_resize'; require('ui/modules') diff --git a/src/core_plugins/console/public/src/sense_editor/mode/input.js b/src/core_plugins/console/public/src/sense_editor/mode/input.js index 06231729dc3a6..6d2470917fd0f 100644 --- a/src/core_plugins/console/public/src/sense_editor/mode/input.js +++ b/src/core_plugins/console/public/src/sense_editor/mode/input.js @@ -13,7 +13,7 @@ var AceTokenizer = acequire("ace/tokenizer").Tokenizer; var HighlightRules = require("./input_highlight_rules").InputHighlightRules; -acequire("ace/config").setModuleUrl("sense_editor/mode/worker", require("file!./worker.js")); +acequire("ace/config").setModuleUrl("sense_editor/mode/worker", require("file-loader!./worker.js")); export function Mode() { this.$tokenizer = new AceTokenizer(new HighlightRules().getRules()); diff --git a/src/core_plugins/console/public/tests/src/curl_parsing_tests.js b/src/core_plugins/console/public/tests/src/curl_parsing_tests.js index a472683b2839b..79814c3bc990c 100644 --- a/src/core_plugins/console/public/tests/src/curl_parsing_tests.js +++ b/src/core_plugins/console/public/tests/src/curl_parsing_tests.js @@ -1,6 +1,6 @@ let _ = require('lodash'); let curl = require('../../src/curl'); -let curlTests = require('raw!./curl_parsing_tests.txt'); +let curlTests = require('raw-loader!./curl_parsing_tests.txt'); var { test, module, ok, equal } = window.QUnit; diff --git a/src/core_plugins/console/public/tests/src/editor_tests.js b/src/core_plugins/console/public/tests/src/editor_tests.js index f7d121a0ddf22..aa79d5d4a9abe 100644 --- a/src/core_plugins/console/public/tests/src/editor_tests.js +++ b/src/core_plugins/console/public/tests/src/editor_tests.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import _ from 'lodash'; let ace = require('ace'); import { initializeInput } from '../../src/input'; -let editor_input1 = require('raw!./editor_input1.txt'); +let editor_input1 = require('raw-loader!./editor_input1.txt'); let utils = require('../../src/utils'); var aceRange = ace.require("ace/range"); diff --git a/src/core_plugins/console/public/tests/src/utils_tests.js b/src/core_plugins/console/public/tests/src/utils_tests.js index 382b967544885..eac7a24a55c51 100644 --- a/src/core_plugins/console/public/tests/src/utils_tests.js +++ b/src/core_plugins/console/public/tests/src/utils_tests.js @@ -1,7 +1,7 @@ let _ = require('lodash'); let utils = require('../../src/utils'); -let collapsingTests = require('raw!./utils_string_collapsing.txt'); -let expandingTests = require('raw!./utils_string_expanding.txt'); +let collapsingTests = require('raw-loader!./utils_string_collapsing.txt'); +let expandingTests = require('raw-loader!./utils_string_expanding.txt'); var { test, module, deepEqual } = window.QUnit; diff --git a/src/core_plugins/timelion/public/directives/timelion_expression_input.js b/src/core_plugins/timelion/public/directives/timelion_expression_input.js index 591f283cbf368..89a6797825833 100644 --- a/src/core_plugins/timelion/public/directives/timelion_expression_input.js +++ b/src/core_plugins/timelion/public/directives/timelion_expression_input.js @@ -25,7 +25,7 @@ import _ from 'lodash'; import $ from 'jquery'; import PEG from 'pegjs'; -import grammar from 'raw!../chain.peg'; +import grammar from 'raw-loader!../chain.peg'; import './timelion_expression_suggestions/timelion_expression_suggestions'; import timelionExpressionInputTemplate from './timelion_expression_input.html'; import { diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js index 858bd43aae76e..013b8007be338 100644 --- a/src/optimize/base_optimizer.js +++ b/src/optimize/base_optimizer.js @@ -1,21 +1,27 @@ import { resolve } from 'path'; import { writeFile } from 'fs'; -import webpack from 'webpack'; import Boom from 'boom'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; +import webpack from 'webpack'; import CommonsChunkPlugin from 'webpack/lib/optimize/CommonsChunkPlugin'; import DefinePlugin from 'webpack/lib/DefinePlugin'; import UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin'; -import { defaults, transform } from 'lodash'; +import NoEmitOnErrorsPlugin from 'webpack/lib/NoEmitOnErrorsPlugin'; +import Stats from 'webpack/lib/Stats'; +import webpackMerge from 'webpack-merge'; + +import { defaults } from 'lodash'; import { fromRoot } from '../utils'; -import pkg from '../../package.json'; import { PUBLIC_PATH_PLACEHOLDER } from './public_path_placeholder'; -import { setLoaderQueryParam, makeLoaderString } from './loaders'; -const babelExclude = [/[\/\\](webpackShims|node_modules|bower_components)[\/\\]/]; +const POSTCSS_CONFIG_PATH = require.resolve('./postcss.config'); +const BABEL_PRESET_PATH = require.resolve('../babel-preset/webpack'); +const BABEL_EXCLUDE_RE = [ + /[\/\\](webpackShims|node_modules|bower_components)[\/\\]/, +]; export default class BaseOptimizer { constructor(opts) { @@ -65,31 +71,38 @@ export default class BaseOptimizer { } getConfig() { - const loaderWithSourceMaps = (loader) => - setLoaderQueryParam(loader, 'sourceMap', !!this.sourceMaps); - - const makeStyleLoader = preprocessor => { - let loaders = [ - loaderWithSourceMaps('css-loader?autoprefixer=false'), - { - name: 'postcss-loader', - query: { - config: require.resolve('./postcss.config') - } - }, - ]; - - if (preprocessor) { - loaders = [ - ...loaders, - loaderWithSourceMaps(preprocessor) - ]; - } + const cacheDirectory = resolve(this.env.workingDir, '../.cache', this.bundles.hashBundleEntries()); - return ExtractTextPlugin.extract(makeLoaderString(loaders)); - }; + function getStyleLoaders(preProcessors = [], postProcessors = []) { + return ExtractTextPlugin.extract({ + fallback: { + loader: 'style-loader' + }, + use: [ + ...postProcessors, + { + loader: 'css-loader', + options: { + // importLoaders needs to know the number of loaders that follow this one, + // so we add 1 (for the postcss-loader) to the length of the preProcessors + // array that we merge into this array + importLoaders: 1 + preProcessors.length, + }, + }, + { + loader: 'postcss-loader', + options: { + config: { + path: POSTCSS_CONFIG_PATH, + }, + }, + }, + ...preProcessors, + ], + }); + } - const config = { + const commonConfig = { node: { fs: 'empty' }, context: fromRoot('.'), entry: this.bundles.toWebpackEntries(), @@ -105,126 +118,139 @@ export default class BaseOptimizer { devtoolModuleFilenameTemplate: '[absolute-resource-path]' }, - recordsPath: resolve(this.env.workingDir, 'webpack.records'), - plugins: [ - new webpack.NoErrorsPlugin(), new ExtractTextPlugin('[name].style.css', { allChunks: true }), + new CommonsChunkPlugin({ name: 'commons', filename: 'commons.bundle.js' }), - ...this.pluginsForEnv(this.env.context.env) + + new NoEmitOnErrorsPlugin(), ], module: { - loaders: [ - { test: /\.less$/, loader: makeStyleLoader('less-loader') }, - { test: /\.css$/, loader: makeStyleLoader() }, - { test: /\.jade$/, loader: 'jade-loader' }, - { test: /\.json$/, loader: 'json-loader' }, - { test: /\.(html|tmpl)$/, loader: 'raw-loader' }, - { test: /\.png$/, loader: 'url-loader' }, - { test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, loader: 'file-loader' }, - { test: /[\/\\]src[\/\\](core_plugins|ui)[\/\\].+\.js$/, loader: loaderWithSourceMaps('rjs-repack-loader') }, + rules: [ + { + test: /\.less$/, + use: getStyleLoaders( + ['less-loader'], + [{ + loader: 'cache-loader', + options: { + cacheDirectory: resolve(cacheDirectory, 'less'), + } + }] + ), + }, + { + test: /\.css$/, + use: getStyleLoaders(), + }, + { + // TODO: this doesn't seem to be used, remove? + test: /\.jade$/, + loader: 'jade-loader' + }, + { + test: /\.(html|tmpl)$/, + loader: 'raw-loader' + }, + { + test: /\.png$/, + loader: 'url-loader' + }, + { + test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, + loader: 'file-loader' + }, { test: /\.js$/, - exclude: babelExclude.concat(this.env.noParse), - loader: 'babel-loader', - query: { - presets: [ - require.resolve('../babel-preset/webpack') - ] - } + exclude: BABEL_EXCLUDE_RE.concat(this.env.noParse), + use: [ + { + loader: 'cache-loader', + options: { + cacheDirectory: resolve(cacheDirectory, 'babel'), + } + }, + { + loader: 'babel-loader', + options: { + babelrc: false, + presets: [ + BABEL_PRESET_PATH, + ], + }, + }, + ], }, + ...this.env.postLoaders.map(loader => ({ + enforce: 'post', + ...loader + })), ], - postLoaders: this.env.postLoaders || [], noParse: this.env.noParse, }, resolve: { - extensions: ['.js', '.json', ''], - postfixes: [''], - modulesDirectories: ['webpackShims', 'node_modules'], - fallback: [fromRoot('webpackShims'), fromRoot('node_modules')], - loaderPostfixes: ['-loader', ''], - root: fromRoot('.'), + extensions: ['.js', '.json'], + mainFields: ['browser', 'main'], + modules: [ + 'webpackShims', + fromRoot('webpackShims'), + + 'node_modules', + fromRoot('node_modules'), + ], alias: this.env.aliases, unsafeCache: this.unsafeCache, }, - - resolveLoader: { - alias: transform(pkg.dependencies, function (aliases, version, name) { - if (name.endsWith('-loader')) { - aliases[name] = require.resolve(name); - } - }, {}) - } }; - // In the test env we need to add react-addons (and a few other bits) for the - // enzyme tests to work. - // https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md if (this.env.context.env === 'development') { - config.externals = { - 'react/lib/ExecutionEnvironment': true, - 'react/addons': true, - 'react/lib/ReactContext': true, - }; - } - - return config; - } - - pluginsForEnv(env) { - if (env !== 'production') { - return []; + return webpackMerge(commonConfig, { + // In the test env we need to add react-addons (and a few other bits) for the + // enzyme tests to work. + // https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md + externals: { + 'react/lib/ExecutionEnvironment': true, + 'react/addons': true, + 'react/lib/ReactContext': true, + } + }); } - return [ - new DefinePlugin({ - 'process.env': { - 'NODE_ENV': '"production"' - } - }), - new UglifyJsPlugin({ - compress: { - warnings: false - }, - sourceMap: false, - mangle: false - }), - ]; + return webpackMerge(commonConfig, { + plugins: [ + new DefinePlugin({ + 'process.env': { + 'NODE_ENV': '"production"' + } + }), + new UglifyJsPlugin({ + compress: { + warnings: false + }, + sourceMap: false, + mangle: false + }), + ] + }); } failedStatsToError(stats) { - const statFormatOpts = { - hash: false, // add the hash of the compilation - version: false, // add webpack version information - timings: false, // add timing information - assets: false, // add assets information - chunks: false, // add chunk information - chunkModules: false, // add built modules information to chunk information - modules: false, // add built modules information - cached: false, // add also information about cached (not built) modules - reasons: false, // add information about the reasons why modules are included - source: false, // add the source code of modules - errorDetails: false, // add details to errors (like resolving log) - chunkOrigins: false, // add the origins of chunks and chunk merging info - modulesSort: false, // (string) sort the modules by that field - chunksSort: false, // (string) sort the chunks by that field - assetsSort: false, // (string) sort the assets by that field - children: false, - }; - - const details = stats.toString(defaults({ colors: true }, statFormatOpts)); + const details = stats.toString(defaults( + { colors: true }, + Stats.presetToOptions('minimal') + )); return Boom.create( 500, `Optimizations failure.\n${details.split('\n').join('\n ')}\n`, - stats.toJson(statFormatOpts) + stats.toJson(Stats.presetToOptions('detailed')) ); } } diff --git a/src/optimize/loaders.js b/src/optimize/loaders.js deleted file mode 100644 index 43750f6cc503c..0000000000000 --- a/src/optimize/loaders.js +++ /dev/null @@ -1,48 +0,0 @@ -import { parse as parseUrl, format as formatUrl } from 'url'; - -class Loader { - constructor({ name, query } = {}) { - if (!name) { - throw new Error('Loaders must define a name'); - } - - this.name = name; - this.query = query || {}; - } - - static fromUrl(url) { - const parsed = parseUrl(url, true); - return new Loader({ - name: parsed.pathname, - query: parsed.query - }); - } - - toString() { - return formatUrl({ - pathname: this.name, - query: this.query - }); - } - - setQueryParam(name, value) { - this.query[name] = value; - return this; - } -} - -function parseLoader(spec) { - if (typeof spec === 'string') { - return Loader.fromUrl(spec); - } - - return new Loader(spec); -} - -export const makeLoaderString = (loaders) => { - return loaders.map(parseLoader).map(l => l.toString()).join('!'); -}; - -export const setLoaderQueryParam = (loader, name, value) => { - return parseLoader(loader).setQueryParam(name, value).toString(); -}; diff --git a/src/ui/public/field_format_editor/editors/url/icons/index.js b/src/ui/public/field_format_editor/editors/url/icons/index.js index d6b5254e0014b..3c663303977f1 100644 --- a/src/ui/public/field_format_editor/editors/url/icons/index.js +++ b/src/ui/public/field_format_editor/editors/url/icons/index.js @@ -1,7 +1,7 @@ -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/go.png'; -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/stop.png'; -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/de.png'; -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ne.png'; -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/us.png'; -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ni.png'; -import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/cv.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/go.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/stop.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/de.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ne.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/us.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ni.png'; +import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/cv.png'; diff --git a/src/ui/public/kuery/ast/ast.js b/src/ui/public/kuery/ast/ast.js index 9dfa72a9aaf1b..214fb5ed58838 100644 --- a/src/ui/public/kuery/ast/ast.js +++ b/src/ui/public/kuery/ast/ast.js @@ -1,4 +1,4 @@ -import grammar from 'raw!./kuery.peg'; +import grammar from 'raw-loader!./kuery.peg'; import PEG from 'pegjs'; import _ from 'lodash'; import { nodeTypes } from '../node_types/index'; diff --git a/src/ui/ui_bundle_collection.js b/src/ui/ui_bundle_collection.js index 7452871d85896..b4ce0992e2617 100644 --- a/src/ui/ui_bundle_collection.js +++ b/src/ui/ui_bundle_collection.js @@ -1,3 +1,5 @@ +import { createHash } from 'crypto'; + import UiBundle from './ui_bundle'; import appEntryTemplate from './app_entry_template'; import { transform, pluck } from 'lodash'; @@ -68,6 +70,15 @@ export default class UiBundleCollection { } } + hashBundleEntries() { + const hash = createHash('sha1'); + for (const bundle of this.each) { + hash.update(`bundleEntryPath:${bundle.entryPath}`); + hash.update(`bundleEntryContent:${bundle.renderContent()}`); + } + return hash.digest('hex'); + } + async getInvalidBundles() { const invalids = new UiBundleCollection(this.env); diff --git a/src/ui/ui_bundler_env.js b/src/ui/ui_bundler_env.js index c75777b55d98e..b0bdc3b890e43 100644 --- a/src/ui/ui_bundler_env.js +++ b/src/ui/ui_bundler_env.js @@ -1,5 +1,6 @@ import { fromRoot } from '../utils'; -import { includes } from 'lodash'; +import { includes, escapeRegExp } from 'lodash'; +import { isAbsolute } from 'path'; const arr = v => [].concat(v || []); @@ -29,6 +30,7 @@ export default class UiBundlerEnv { // webpack aliases, like require paths, mapping a prefix to a directory this.aliases = { ui: fromRoot('src/ui/public'), + ui_framework: fromRoot('ui_framework'), packages: fromRoot('packages'), test_harness: fromRoot('src/test_harness/public'), querystring: 'querystring-browser', @@ -61,7 +63,9 @@ export default class UiBundlerEnv { switch (type) { case 'noParse': return (plugin, spec) => { - for (const re of arr(spec)) this.addNoParse(re); + for (const rule of arr(spec)) { + this.noParse.push(this.getNoParseRegexp(rule)); + } }; case '__globalImportAliases__': @@ -81,7 +85,15 @@ export default class UiBundlerEnv { this.postLoaders.push(loader); } - addNoParse(regExp) { - this.noParse.push(regExp); + getNoParseRegexp(rule) { + if (typeof rule === 'string') { + return new RegExp(`${isAbsolute(rule) ? '^' : ''}${escapeRegExp(rule)}`); + } + + if (rule instanceof RegExp) { + return rule; + } + + throw new Error('Expected noParse rule to be a string or regexp'); } } diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index 49e0105fab12b..38fa198bf5d9c 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -16,7 +16,7 @@ module.exports = function (grunt) { args: [ '-p', '--config=ui_framework/doc_site/webpack.config.js', - '--devtool', // Prevent the source map from being generated + '--devtool=null', // Prevent the source map from being generated ], opts: { stdio: 'inherit' } }; @@ -55,7 +55,7 @@ module.exports = function (grunt) { cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server', args: [ '--config=ui_framework/doc_site/webpack.config.js', - '--hot ', + '--hot', '--inline', '--content-base=ui_framework/doc_site/build', '--host=0.0.0.0', diff --git a/ui_framework/doc_site/src/views/accessibility/accessibility_example.js b/ui_framework/doc_site/src/views/accessibility/accessibility_example.js index b173c0e593d33..36d446ca32dd0 100644 --- a/ui_framework/doc_site/src/views/accessibility/accessibility_example.js +++ b/ui_framework/doc_site/src/views/accessibility/accessibility_example.js @@ -15,11 +15,11 @@ import { import KeyboardAccessible from './keyboard_accessible'; import ScreenReaderOnly from './screen_reader'; -const keyboardAccessibleSource = require('!!raw!./keyboard_accessible'); +const keyboardAccessibleSource = require('!!raw-loader!./keyboard_accessible'); const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible); const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly); -const screenReaderOnlySource = require('!!raw!./screen_reader'); +const screenReaderOnlySource = require('!!raw-loader!./screen_reader'); export default props => ( diff --git a/ui_framework/doc_site/src/views/action_item/action_item_example.js b/ui_framework/doc_site/src/views/action_item/action_item_example.js index 5c208fe37ac32..a45f886137032 100644 --- a/ui_framework/doc_site/src/views/action_item/action_item_example.js +++ b/ui_framework/doc_site/src/views/action_item/action_item_example.js @@ -11,11 +11,11 @@ import { } from '../../components'; import ActionItem from './action_item'; -const actionItemSource = require('!!raw!./action_item'); +const actionItemSource = require('!!raw-loader!./action_item'); const actionItemHtml = renderToHtml(ActionItem); import ActionItemInMenu from './action_items_in_menu'; -const actionItemInMenuSource = require('!!raw!./action_items_in_menu'); +const actionItemInMenuSource = require('!!raw-loader!./action_items_in_menu'); const actionItemInMenuHtml = renderToHtml(ActionItemInMenu); export default props => ( diff --git a/ui_framework/doc_site/src/views/bar/bar_example.js b/ui_framework/doc_site/src/views/bar/bar_example.js index 381fe747d579b..bb7a709c4cf2b 100644 --- a/ui_framework/doc_site/src/views/bar/bar_example.js +++ b/ui_framework/doc_site/src/views/bar/bar_example.js @@ -10,15 +10,15 @@ import { } from '../../components'; import Bar from './bar'; -const barSource = require('!!raw!./bar'); +const barSource = require('!!raw-loader!./bar'); const barHtml = renderToHtml(Bar); import BarOneSection from './bar_one_section'; -const barOneSectionSource = require('!!raw!./bar_one_section'); +const barOneSectionSource = require('!!raw-loader!./bar_one_section'); const barOneSectionHtml = renderToHtml(BarOneSection); import BarThreeSections from './bar_three_sections'; -const barThreeSectionsSource = require('!!raw!./bar_three_sections'); +const barThreeSectionsSource = require('!!raw-loader!./bar_three_sections'); const barThreeSectionsHtml = renderToHtml(BarThreeSections); export default props => ( diff --git a/ui_framework/doc_site/src/views/button/button_example.js b/ui_framework/doc_site/src/views/button/button_example.js index d95bd37bd1a89..ec8e5464b0971 100644 --- a/ui_framework/doc_site/src/views/button/button_example.js +++ b/ui_framework/doc_site/src/views/button/button_example.js @@ -11,47 +11,47 @@ import { } from '../../components'; import Basic from './button_basic'; -const basicSource = require('!!raw!./button_basic'); +const basicSource = require('!!raw-loader!./button_basic'); const basicHtml = renderToHtml(Basic); import Hollow from './button_hollow'; -const hollowSource = require('!!raw!./button_hollow'); +const hollowSource = require('!!raw-loader!./button_hollow'); const hollowHtml = renderToHtml(Hollow); import Primary from './button_primary'; -const primarySource = require('!!raw!./button_primary'); +const primarySource = require('!!raw-loader!./button_primary'); const primaryHtml = renderToHtml(Primary); import Secondary from './button_secondary'; -const secondarySource = require('!!raw!./button_secondary'); +const secondarySource = require('!!raw-loader!./button_secondary'); const secondaryHtml = renderToHtml(Secondary); import Danger from './button_danger'; -const dangerSource = require('!!raw!./button_danger'); +const dangerSource = require('!!raw-loader!./button_danger'); const dangerHtml = renderToHtml(Danger); import Warning from './button_warning'; -const warningSource = require('!!raw!./button_danger'); +const warningSource = require('!!raw-loader!./button_danger'); const warningHtml = renderToHtml(Warning); import Loading from './button_loading'; -const loadingSource = require('!!raw!./button_loading'); +const loadingSource = require('!!raw-loader!./button_loading'); const loadingHtml = renderToHtml(Loading, { isLoading: true }); import WithIcon from './button_with_icon'; -const withIconSource = require('!!raw!./button_with_icon'); +const withIconSource = require('!!raw-loader!./button_with_icon'); const withIconHtml = renderToHtml(WithIcon); import ButtonGroup from './button_group'; -const buttonGroupSource = require('!!raw!./button_group'); +const buttonGroupSource = require('!!raw-loader!./button_group'); const buttonGroupHtml = renderToHtml(ButtonGroup); import ButtonGroupUnited from './button_group_united'; -const buttonGroupUnitedSource = require('!!raw!./button_group_united'); +const buttonGroupUnitedSource = require('!!raw-loader!./button_group_united'); const buttonGroupUnitedHtml = renderToHtml(ButtonGroupUnited); import Elements from './button_elements'; -const elementsSource = require('!!raw!./button_elements'); +const elementsSource = require('!!raw-loader!./button_elements'); const elementsHtml = renderToHtml(Elements); const sizesHtml = require('./button_sizes.html'); diff --git a/ui_framework/doc_site/src/views/card/card_example.js b/ui_framework/doc_site/src/views/card/card_example.js index 67797bcd837eb..ae8ac815194a5 100644 --- a/ui_framework/doc_site/src/views/card/card_example.js +++ b/ui_framework/doc_site/src/views/card/card_example.js @@ -11,11 +11,11 @@ import { } from '../../components'; import Card from './card'; -const cardSource = require('!!raw!./card'); +const cardSource = require('!!raw-loader!./card'); const cardHtml = renderToHtml(Card); import CardGroup from './card_group'; -const cardGroupSource = require('!!raw!./card_group'); +const cardGroupSource = require('!!raw-loader!./card_group'); const cardGroupHtml = renderToHtml(CardGroup); export default props => ( diff --git a/ui_framework/doc_site/src/views/code_editor/code_editor_example.js b/ui_framework/doc_site/src/views/code_editor/code_editor_example.js index 75f48ea229947..35afd30f04473 100644 --- a/ui_framework/doc_site/src/views/code_editor/code_editor_example.js +++ b/ui_framework/doc_site/src/views/code_editor/code_editor_example.js @@ -9,7 +9,7 @@ import { } from '../../components'; import CodeEditor from './code_editor'; -const codeEditorSource = require('!!raw!./code_editor'); +const codeEditorSource = require('!!raw-loader!./code_editor'); export default props => ( diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js index b075b2de78bec..1898b3987879c 100644 --- a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js +++ b/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js @@ -10,11 +10,11 @@ import { } from '../../components'; import CollapseButton from './collapse_button'; -const collapseButtonSource = require('!!raw!./collapse_button'); +const collapseButtonSource = require('!!raw-loader!./collapse_button'); const collapseButtonHtml = renderToHtml(CollapseButton); import CollapseButtonAria from './collapse_button_aria'; -const collapseButtonAriaSource = require('!!raw!./collapse_button_aria'); +const collapseButtonAriaSource = require('!!raw-loader!./collapse_button_aria'); const collapseButtonAriaHtml = renderToHtml(CollapseButtonAria); export default props => ( diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_example.js b/ui_framework/doc_site/src/views/color_picker/color_picker_example.js index 794af4856b9fe..7ba4cabd6ca58 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker_example.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker_example.js @@ -10,15 +10,15 @@ import { import { renderToHtml } from '../../services'; import { ColorPicker } from './color_picker'; -const colorPickerSource = require('!!raw!./color_picker'); +const colorPickerSource = require('!!raw-loader!./color_picker'); const colorPickerHtml = renderToHtml(ColorPicker); import { ColorPickerLabelAndClear } from './color_picker_clear'; -const colorPickerClearSource = require('!!raw!./color_picker_clear'); +const colorPickerClearSource = require('!!raw-loader!./color_picker_clear'); const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear); import { ColorPickerNoColorLabel } from './color_picker_no_color_label'; -const colorPickerNoColorLabelSource = require('!!raw!./color_picker_no_color_label'); +const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label'); const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel); export default props => ( diff --git a/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js b/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js index 6f76f4a641539..04d88fb8fa51c 100644 --- a/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js +++ b/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js @@ -10,11 +10,11 @@ import { } from '../../components'; import { EmptyTablePrompt } from './empty_table_prompt'; -const emptyTablePromptSource = require('!!raw!./empty_table_prompt'); +const emptyTablePromptSource = require('!!raw-loader!./empty_table_prompt'); const emptyTablePromptHtml = renderToHtml(EmptyTablePrompt); import { ControlledTableWithEmptyPrompt } from './table_with_empty_prompt'; -const tableWithEmptyPromptSource = require('!!raw!./table_with_empty_prompt'); +const tableWithEmptyPromptSource = require('!!raw-loader!./table_with_empty_prompt'); const tableWithEmptyPromptHtml = renderToHtml(ControlledTableWithEmptyPrompt); export default props => ( diff --git a/ui_framework/doc_site/src/views/event/event_example.js b/ui_framework/doc_site/src/views/event/event_example.js index 40f288f5cd2b7..e2400cd703149 100644 --- a/ui_framework/doc_site/src/views/event/event_example.js +++ b/ui_framework/doc_site/src/views/event/event_example.js @@ -10,11 +10,11 @@ import { } from '../../components'; import Event from './event'; -const eventSource = require('!!raw!./event'); +const eventSource = require('!!raw-loader!./event'); const eventHtml = renderToHtml(Event); import EventMenu from './event_menu'; -const eventMenuSource = require('!!raw!./event_menu'); +const eventMenuSource = require('!!raw-loader!./event_menu'); const eventMenuHtml = renderToHtml(EventMenu); export default props => ( diff --git a/ui_framework/doc_site/src/views/event/events_sandbox.js b/ui_framework/doc_site/src/views/event/events_sandbox.js index 367e60a48c065..3e5525cd90dba 100644 --- a/ui_framework/doc_site/src/views/event/events_sandbox.js +++ b/ui_framework/doc_site/src/views/event/events_sandbox.js @@ -9,7 +9,7 @@ import { } from '../../components'; import EventsSandboxContent from './events_sandbox_content'; -const eventsSandboxContentSource = require('!!raw!./events_sandbox_content'); +const eventsSandboxContentSource = require('!!raw-loader!./events_sandbox_content'); const eventsSandboxContentHtml = renderToHtml(EventsSandboxContent); export default props => ( diff --git a/ui_framework/doc_site/src/views/expression/expression_example.js b/ui_framework/doc_site/src/views/expression/expression_example.js index fb60e3bcd29b7..8a1d13302f5ae 100644 --- a/ui_framework/doc_site/src/views/expression/expression_example.js +++ b/ui_framework/doc_site/src/views/expression/expression_example.js @@ -10,7 +10,7 @@ import { } from '../../components'; const Expression = require('./expression'); -const expressionSource = require('!!raw!./expression'); +const expressionSource = require('!!raw-loader!./expression'); const expressionHtml = renderToHtml(Expression, { defaultActiveButton: 'example2' }); export default props => ( diff --git a/ui_framework/doc_site/src/views/form_layout/form_layout_example.js b/ui_framework/doc_site/src/views/form_layout/form_layout_example.js index 9ccf07031ffd4..3703f6a2b16fa 100644 --- a/ui_framework/doc_site/src/views/form_layout/form_layout_example.js +++ b/ui_framework/doc_site/src/views/form_layout/form_layout_example.js @@ -9,7 +9,7 @@ import { } from '../../components'; import FieldGroup from './field_group'; -const fieldGroupSource = require('!!raw!./field_group'); +const fieldGroupSource = require('!!raw-loader!./field_group'); const fieldGroupHtml = renderToHtml(FieldGroup); export default props => ( diff --git a/ui_framework/doc_site/src/views/gallery/gallery_example.js b/ui_framework/doc_site/src/views/gallery/gallery_example.js index 44f13ff24d1ab..dd933e44fec29 100644 --- a/ui_framework/doc_site/src/views/gallery/gallery_example.js +++ b/ui_framework/doc_site/src/views/gallery/gallery_example.js @@ -11,7 +11,7 @@ import { } from '../../components'; import Gallery from './gallery'; -const gallerySource = require('!!raw!./gallery'); +const gallerySource = require('!!raw-loader!./gallery'); const galleryHtml = renderToHtml(Gallery); export default props => ( diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_example.js b/ui_framework/doc_site/src/views/header_bar/header_bar_example.js index 8953daf8f308b..08c121e673e34 100644 --- a/ui_framework/doc_site/src/views/header_bar/header_bar_example.js +++ b/ui_framework/doc_site/src/views/header_bar/header_bar_example.js @@ -9,11 +9,11 @@ import { } from '../../components'; import HeaderBar from './header_bar'; -const headerBarSource = require('!!raw!./header_bar'); +const headerBarSource = require('!!raw-loader!./header_bar'); const headerBarHtml = renderToHtml(HeaderBar); import HeaderBarTwoSections from './header_bar_two_sections'; -const headerBarTwoSectionsSource = require('!!raw!./header_bar_two_sections'); +const headerBarTwoSectionsSource = require('!!raw-loader!./header_bar_two_sections'); const headerBarTwoSectionsHtml = renderToHtml(HeaderBarTwoSections); export default props => ( diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js index 8ee006f919d07..1e129204e0436 100644 --- a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js +++ b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js @@ -9,7 +9,7 @@ import { } from '../../components'; import HeaderBarSandboxContent from './header_bar_sandbox_content'; -const headerBarSandboxContentSource = require('!!raw!./header_bar_sandbox_content'); +const headerBarSandboxContentSource = require('!!raw-loader!./header_bar_sandbox_content'); const headerBarSandboxContentHtml = renderToHtml(HeaderBarSandboxContent); export default props => ( diff --git a/ui_framework/doc_site/src/views/icon/icon_example.js b/ui_framework/doc_site/src/views/icon/icon_example.js index d1244d09a92b7..8ce850459de66 100644 --- a/ui_framework/doc_site/src/views/icon/icon_example.js +++ b/ui_framework/doc_site/src/views/icon/icon_example.js @@ -17,7 +17,7 @@ const warningHtml = require('./icon_warning.html'); const errorHtml = require('./icon_error.html'); const inactiveHtml = require('./icon_inactive.html'); const spinnerHtml = require('./icon_spinner.html'); -const spinnerJs = require('raw!./icon_spinner.js'); +const spinnerJs = require('raw-loader!./icon_spinner.js'); export default props => ( diff --git a/ui_framework/doc_site/src/views/info_button/info_button_example.js b/ui_framework/doc_site/src/views/info_button/info_button_example.js index c1a29a5a2e39c..9e0e55a9414c6 100644 --- a/ui_framework/doc_site/src/views/info_button/info_button_example.js +++ b/ui_framework/doc_site/src/views/info_button/info_button_example.js @@ -12,7 +12,7 @@ import { import Example from './info_button'; -const basicSource = require('!!raw!./info_button'); +const basicSource = require('!!raw-loader!./info_button'); const basicHtml = renderToHtml(Example); export default props => ( diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_example.js b/ui_framework/doc_site/src/views/local_nav/local_nav_example.js index b429fe0d23ac7..e69178aa49238 100644 --- a/ui_framework/doc_site/src/views/local_nav/local_nav_example.js +++ b/ui_framework/doc_site/src/views/local_nav/local_nav_example.js @@ -12,35 +12,35 @@ import { } from '../../components'; import { SimpleLocalNav } from './local_nav_simple'; -import simpleLocalNavSource from '!!raw!./local_nav_simple'; +import simpleLocalNavSource from '!!raw-loader!./local_nav_simple'; const SimpleLocalNavHtml = renderToHtml(SimpleLocalNav); import { LocalNavWithBreadcrumbs } from './local_nav_breadcrumbs'; -import localNavWithBreadcrumbsSource from '!!raw!./local_nav_breadcrumbs'; +import localNavWithBreadcrumbsSource from '!!raw-loader!./local_nav_breadcrumbs'; const localNavWithBreadcrumbsHtml = renderToHtml(LocalNavWithBreadcrumbs); import { LocalNavWithSearch } from './local_nav_search'; -import localNavWithSearchSource from '!!raw!./local_nav_search'; +import localNavWithSearchSource from '!!raw-loader!./local_nav_search'; const localNavWithSearchHtml = renderToHtml(LocalNavWithSearch); import { LocalNavWithSearchError } from './local_nav_search_error'; -import localNavWithSearchErrorSource from '!!raw!./local_nav_search_error'; +import localNavWithSearchErrorSource from '!!raw-loader!./local_nav_search_error'; const localNavWithSearchErrorHtml = renderToHtml(LocalNavWithSearchError); import { LocalNavWithMenuItemStates } from './local_nav_menu_item_states'; -import localNavWithMenuItemStatesSource from '!!raw!./local_nav_menu_item_states'; +import localNavWithMenuItemStatesSource from '!!raw-loader!./local_nav_menu_item_states'; const localNavWithMenuItemStatesHtml = renderToHtml(LocalNavWithMenuItemStates); import { LocalNavWithDropdown } from './local_nav_dropdown'; -import localNavWithDropdownSource from '!!raw!./local_nav_dropdown'; +import localNavWithDropdownSource from '!!raw-loader!./local_nav_dropdown'; const localNavWithDropdownHtml = renderToHtml(LocalNavWithDropdown); import { LocalNavWithDropdownPanels } from './local_nav_dropdown_panels'; -import localNavWithDropdownPanelsSource from '!!raw!./local_nav_dropdown_panels'; +import localNavWithDropdownPanelsSource from '!!raw-loader!./local_nav_dropdown_panels'; const localNavWithDropdownPanelsHtml = renderToHtml(LocalNavWithDropdownPanels); import { LocalNavWithTabs } from './local_nav_tabs'; -import localNavWithTabsSource from '!!raw!./local_nav_tabs'; +import localNavWithTabsSource from '!!raw-loader!./local_nav_tabs'; const localNavWithTabsHtml = renderToHtml(LocalNavWithTabs); const datePickerHtml = require('./local_nav_date_picker.html'); diff --git a/ui_framework/doc_site/src/views/menu/menu_example.js b/ui_framework/doc_site/src/views/menu/menu_example.js index de75293066435..1b54cc0b0e90b 100644 --- a/ui_framework/doc_site/src/views/menu/menu_example.js +++ b/ui_framework/doc_site/src/views/menu/menu_example.js @@ -10,11 +10,11 @@ import { } from '../../components'; import Menu from './menu'; -const menuSource = require('!!raw!./menu'); +const menuSource = require('!!raw-loader!./menu'); const menuHtml = renderToHtml(Menu); import MenuContained from './menu_contained'; -const menuContainedSource = require('!!raw!./menu_contained'); +const menuContainedSource = require('!!raw-loader!./menu_contained'); const menuContainedHtml = renderToHtml(MenuContained); export default props => ( diff --git a/ui_framework/doc_site/src/views/modal/modal_example.js b/ui_framework/doc_site/src/views/modal/modal_example.js index 6d2c674b840a4..2b2667f4330c3 100644 --- a/ui_framework/doc_site/src/views/modal/modal_example.js +++ b/ui_framework/doc_site/src/views/modal/modal_example.js @@ -12,11 +12,11 @@ import { } from '../../components'; import { ModalExample } from './modal'; -const modalSource = require('!!raw!./modal'); +const modalSource = require('!!raw-loader!./modal'); const modalHtml = renderToHtml(ModalExample); import { ConfirmModalExample } from './confirm_modal'; -const confirmModalSource = require('!!raw!./confirm_modal'); +const confirmModalSource = require('!!raw-loader!./confirm_modal'); const confirmModalHtml = renderToHtml(ConfirmModalExample); export default props => ( diff --git a/ui_framework/doc_site/src/views/pager/pager_example.js b/ui_framework/doc_site/src/views/pager/pager_example.js index 9e9101e383b25..2749f8e36038c 100644 --- a/ui_framework/doc_site/src/views/pager/pager_example.js +++ b/ui_framework/doc_site/src/views/pager/pager_example.js @@ -10,11 +10,11 @@ import { } from '../../components'; import { ToolBarPager } from './tool_bar_pager'; -const toolBarPagerSource = require('!!raw!./tool_bar_pager'); +const toolBarPagerSource = require('!!raw-loader!./tool_bar_pager'); const toolBarPagerHtml = renderToHtml(ToolBarPager); import { PagerButtons } from './pager_buttons'; -const pagerButtonsSource = require('!!raw!./pager_buttons'); +const pagerButtonsSource = require('!!raw-loader!./pager_buttons'); const pagerButtonsHtml = renderToHtml(PagerButtons); export default props => ( diff --git a/ui_framework/doc_site/src/views/popover/popover_example.js b/ui_framework/doc_site/src/views/popover/popover_example.js index 3db36825fbca7..dee69a7d069cc 100644 --- a/ui_framework/doc_site/src/views/popover/popover_example.js +++ b/ui_framework/doc_site/src/views/popover/popover_example.js @@ -12,7 +12,7 @@ import { } from '../../components'; import Popover from './popover'; -const popoverSource = require('!!raw!./popover'); +const popoverSource = require('!!raw-loader!./popover'); const popoverHtml = renderToHtml(Popover); import TrapFocus from './trap_focus'; @@ -20,15 +20,15 @@ const trapFocusSource = require('!!raw!./trap_focus'); const trapFocusHtml = renderToHtml(TrapFocus); import PopoverAnchorPosition from './popover_anchor_position'; -const popoverAnchorPositionSource = require('!!raw!./popover_anchor_position'); +const popoverAnchorPositionSource = require('!!raw-loader!./popover_anchor_position'); const popoverAnchorPositionHtml = renderToHtml(PopoverAnchorPosition); import PopoverPanelClassName from './popover_panel_class_name'; -const popoverPanelClassNameSource = require('!!raw!./popover_panel_class_name'); +const popoverPanelClassNameSource = require('!!raw-loader!./popover_panel_class_name'); const popoverPanelClassNameHtml = renderToHtml(PopoverPanelClassName); import PopoverWithTitle from './popover_with_title'; -const popoverWithTitleSource = require('!!raw!./popover_with_title'); +const popoverWithTitleSource = require('!!raw-loader!./popover_with_title'); const popoverWithTitleHtml = renderToHtml(PopoverWithTitle); export default props => ( diff --git a/ui_framework/doc_site/src/views/table/table_example.js b/ui_framework/doc_site/src/views/table/table_example.js index f6d9268a6ad3b..f98b0be2698ee 100644 --- a/ui_framework/doc_site/src/views/table/table_example.js +++ b/ui_framework/doc_site/src/views/table/table_example.js @@ -10,31 +10,31 @@ import { } from '../../components'; import { Table } from './table'; -const tableSource = require('!!raw!./table'); +const tableSource = require('!!raw-loader!./table'); const tableHtml = renderToHtml(Table); import { TableWithMenuButtons } from './table_with_menu_buttons'; -const tableWithMenuButtonsSource = require('!!raw!./table_with_menu_buttons'); +const tableWithMenuButtonsSource = require('!!raw-loader!./table_with_menu_buttons'); const tableWithMenuButtonsHtml = renderToHtml(TableWithMenuButtons); import { FluidTable } from './fluid_table'; -const fluidTableSource = require('!!raw!./fluid_table'); +const fluidTableSource = require('!!raw-loader!./fluid_table'); const fluidTableHtml = renderToHtml(FluidTable); import { ListingTable } from './listing_table'; -const listingTableSource = require('!!raw!./listing_table'); +const listingTableSource = require('!!raw-loader!./listing_table'); const listingTableHtml = renderToHtml(ListingTable); import { ListingTableWithEmptyPrompt } from './listing_table_with_empty_prompt'; -const listingTableWithEmptyPromptSource = require('!!raw!./listing_table_with_empty_prompt'); +const listingTableWithEmptyPromptSource = require('!!raw-loader!./listing_table_with_empty_prompt'); const listingTableWithEmptyPromptHtml = renderToHtml(ListingTableWithEmptyPrompt); import { ListingTableWithNoItems } from './listing_table_with_no_items'; -const listingTableWithNoItemsSource = require('!!raw!./listing_table_with_no_items'); +const listingTableWithNoItemsSource = require('!!raw-loader!./listing_table_with_no_items'); const listingTableWithNoItemsHtml = renderToHtml(ListingTableWithNoItems); import { ListingTableLoadingItems } from './listing_table_loading_items'; -const listingTableLoadingItemsSource = require('!!raw!./listing_table_loading_items'); +const listingTableLoadingItemsSource = require('!!raw-loader!./listing_table_loading_items'); const listingTableLoadingItemsHtml = renderToHtml(ListingTableLoadingItems); export default props => ( diff --git a/ui_framework/doc_site/src/views/tabs/tabs_example.js b/ui_framework/doc_site/src/views/tabs/tabs_example.js index 7097c4a70e109..2809c07127d9e 100644 --- a/ui_framework/doc_site/src/views/tabs/tabs_example.js +++ b/ui_framework/doc_site/src/views/tabs/tabs_example.js @@ -11,7 +11,7 @@ import { } from '../../components'; import Tabs from './tabs'; -const tabsSource = require('!!raw!./tabs'); +const tabsSource = require('!!raw-loader!./tabs'); const tabsHtml = renderToHtml(Tabs); export default props => ( diff --git a/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js b/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js index 11cfc9a375173..0f65d04682240 100644 --- a/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js +++ b/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js @@ -13,10 +13,10 @@ import { } from 'react-router'; const toggleButtonHtml = require('./toggle_button.html'); -const toggleButtonJs = require('raw!./toggle_button.js'); +const toggleButtonJs = require('raw-loader!./toggle_button.js'); const toggleButtonDisabledHtml = require('./toggle_button_disabled.html'); const togglePanelHtml = require('./toggle_panel.html'); -const togglePanelJs = require('raw!./toggle_panel.js'); +const togglePanelJs = require('raw-loader!./toggle_panel.js'); export default props => ( diff --git a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js index b1f6f5c3c1dab..53b4854b3d1cd 100644 --- a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js +++ b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js @@ -10,11 +10,11 @@ import { } from '../../components'; import { ToolBar } from './tool_bar'; -const toolBarSource = require('!!raw!./tool_bar'); +const toolBarSource = require('!!raw-loader!./tool_bar'); const toolBarHtml = renderToHtml(ToolBar); import { ToolBarFooter } from './tool_bar_footer'; -const toolBarFooterSource = require('!!raw!./tool_bar_footer'); +const toolBarFooterSource = require('!!raw-loader!./tool_bar_footer'); const toolBarFooterHtml = renderToHtml(ToolBarFooter); export default props => ( diff --git a/ui_framework/doc_site/webpack.config.js b/ui_framework/doc_site/webpack.config.js index c7121bc524c51..1bfbcfd3508e6 100644 --- a/ui_framework/doc_site/webpack.config.js +++ b/ui_framework/doc_site/webpack.config.js @@ -12,8 +12,9 @@ module.exports = { }, resolve: { - root: [ - path.resolve(__dirname, 'src/ui_framework/doc_site') + modules: [ + path.resolve(__dirname, 'src/ui_framework/doc_site'), + 'node_modules', ] }, @@ -25,12 +26,9 @@ module.exports = { }, module: { - loaders: [{ - test: /\.json$/, - loader: 'json-loader', - }, { + rules: [{ test: /\.js$/, - loader: 'babel', + loader: 'babel-loader', exclude: /node_modules/, query: { presets: [ @@ -39,18 +37,18 @@ module.exports = { }, }, { test: /\.scss$/, - loaders: ['style', 'css', 'postcss', 'sass'], + loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], exclude: /node_modules/ }, { test: /\.html$/, - loader: 'html', + loader: 'html-loader', exclude: /node_modules/ }, { test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, - loader: 'file', + loader: 'file-loader', }, { test: require.resolve('jquery'), - loader: 'expose?jQuery!expose?$' + loader: 'expose-loader?jQuery!expose-loader?$' }] } }; diff --git a/ui_framework/generator-kui/documentation/index.js b/ui_framework/generator-kui/documentation/index.js index ad675ef949d22..f3817761cd0cd 100644 --- a/ui_framework/generator-kui/documentation/index.js +++ b/ui_framework/generator-kui/documentation/index.js @@ -147,7 +147,7 @@ module.exports = class extends Generator { this.log(chalk.white('\n// Import demo into example.')); this.log( `${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(`'./${fileName}'`)};\n` + - `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw!./${fileName}'`)});\n` + + `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw-loader!./${fileName}'`)});\n` + `${chalk.magenta('const')} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});` ); diff --git a/ui_framework/generator-kui/documentation/templates/documentation_page.js b/ui_framework/generator-kui/documentation/templates/documentation_page.js index a1b016a5fb0ef..4dc6a47884b2e 100644 --- a/ui_framework/generator-kui/documentation/templates/documentation_page.js +++ b/ui_framework/generator-kui/documentation/templates/documentation_page.js @@ -12,7 +12,7 @@ import { } from '../../components'; import <%= componentExampleName %> from './<%= fileName %>'; -const <%= componentExamplePrefix %>Source = require('!!raw!./<%= fileName %>'); +const <%= componentExamplePrefix %>Source = require('!!raw-loader!./<%= fileName %>'); const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>); export default props => ( diff --git a/webpackShims/ace.js b/webpackShims/ace.js index 0f49befbeeb28..0386937dacb03 100644 --- a/webpackShims/ace.js +++ b/webpackShims/ace.js @@ -1,6 +1,6 @@ require('brace'); require('brace/mode/json'); -require('node_modules/@elastic/ui-ace/ui-ace'); +require('../node_modules/@elastic/ui-ace/ui-ace'); require('ui/modules').get('kibana', ['ui.ace']); diff --git a/webpackShims/angular.js b/webpackShims/angular.js index 9cc9932944d49..7f175bb86180d 100644 --- a/webpackShims/angular.js +++ b/webpackShims/angular.js @@ -1,8 +1,8 @@ require('jquery'); -require('node_modules/angular/angular'); -require('node_modules/angular-translate'); +require('../node_modules/angular/angular'); +require('../node_modules/angular-translate'); module.exports = window.angular; -require('node_modules/angular-elastic/elastic'); +require('../node_modules/angular-elastic/elastic'); require('ui/modules').get('kibana', ['monospaced.elastic', 'pascalprecht.translate']); diff --git a/webpackShims/jquery.js b/webpackShims/jquery.js index 7e6a2549ffd7a..a0be5a31b83c7 100644 --- a/webpackShims/jquery.js +++ b/webpackShims/jquery.js @@ -1,2 +1,2 @@ -var $ = window.jQuery = window.$ = module.exports = require('node_modules/jquery/dist/jquery'); +var $ = window.jQuery = window.$ = module.exports = require('../node_modules/jquery/dist/jquery'); require('ui/jquery/find_test_subject')($); diff --git a/webpackShims/leaflet.js b/webpackShims/leaflet.js index 757d70973a948..9ac495305345f 100644 --- a/webpackShims/leaflet.js +++ b/webpackShims/leaflet.js @@ -1,12 +1,12 @@ -require('node_modules/leaflet/dist/leaflet.css'); -window.L = module.exports = require('node_modules/leaflet/dist/leaflet'); +require('../node_modules/leaflet/dist/leaflet.css'); +window.L = module.exports = require('../node_modules/leaflet/dist/leaflet'); window.L.Browser.touch = false; window.L.Browser.pointer = false; -require('node_modules/leaflet.heat/dist/leaflet-heat.js'); +require('../node_modules/leaflet.heat/dist/leaflet-heat.js'); -require('node_modules/leaflet-draw/dist/leaflet.draw.css'); -require('node_modules/leaflet-draw/dist/leaflet.draw.js'); +require('../node_modules/leaflet-draw/dist/leaflet.draw.css'); +require('../node_modules/leaflet-draw/dist/leaflet.draw.js'); -require('node_modules/leaflet-responsive-popup/leaflet.responsive.popup.css'); -require('node_modules/leaflet-responsive-popup/leaflet.responsive.popup.js'); +require('../node_modules/leaflet-responsive-popup/leaflet.responsive.popup.css'); +require('../node_modules/leaflet-responsive-popup/leaflet.responsive.popup.js'); diff --git a/webpackShims/lodash.js b/webpackShims/lodash.js index 33c9812b324f2..fe1e6b5fc1ffb 100644 --- a/webpackShims/lodash.js +++ b/webpackShims/lodash.js @@ -5,7 +5,7 @@ * var _ = require('lodash'); */ -var _ = require('node_modules/lodash/index.js').runInContext(); +var _ = require('../node_modules/lodash/index.js').runInContext(); var lodashLangMixin = require('ui/utils/lodash-mixins/lang').lodashLangMixin; var lodashObjectMixin = require('ui/utils/lodash-mixins/object').lodashObjectMixin; var lodashCollectionMixin = require('ui/utils/lodash-mixins/collection').lodashCollectionMixin; diff --git a/webpackShims/sinon.js b/webpackShims/sinon.js index 3bab26d8937d4..9ffc5171cfaa3 100644 --- a/webpackShims/sinon.js +++ b/webpackShims/sinon.js @@ -1,2 +1,2 @@ -require('script!node_modules/sinon/pkg/sinon.js'); +require('script-loader!../node_modules/sinon/pkg/sinon.js'); module.exports = window.sinon;