Build system refactor (#8140)
* build - start static asset task cleanup * build - simplify manifest tasks * build - refactor + rename some tasks * build - various cleanups * manifest - fix ref from controller * build - drop gulp for simple async tasks * build - breakout gulpfile into multiple files * build - rename some tasks * build - use task fn refs instead of string names * build - bundle all scripts first, except for contentscript * build - improve task timeline * deps - update lock * build - improve task time printout * build/scripts - remove intermediate named task * build - use 'yarn build' for task entry points * build - properly run tasks via runTask for timeline display * development/announcer - fix manifest path + clean * build - lint fix * build - make all defined tasks possible entry points * build/task - properly report errors during task * ci - fix sesify/lavamoat-viz build command * build/scripts - run each bundle in separate processes * lint fix * build - forward childProcess logs to console * build/task - fix parallel/series stream end event * build/scripts refactor contentscript+inpage into a single task * build/static - use the fs for 150x speedup zomg * lint fix * build/static - fix css copy * Update development/build/scripts.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/scripts.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/index.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * deps - remove redundant mkdirp * deps - remove unused pumpify * deps - remove redundant merge-deep * deps - prefer is-stream of isstream * deps - remove clone for lodash.cloneDeep * clean - remove commented code * build/static - use fs.copy + fast-glob instead of linux cp for better platform support * build/manifest - standardize task naming * build/display - clean - remove unused code * bugfix - fix fs.promises import * build - create "clean" as named task for use as entrypoint * build/static - fix for copying dirs * Update development/build/task.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/display.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/display.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/display.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * build - use task refs, tasks only return promises not streams, etc * lint fi bad merge + lint * build - one last cleanup + refactor * build - add comments introducing file * build/manifest - fix bug + subtasks dont beed to be named * Update package.json Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * build/task - remove unused fn * Update package.json Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/styles.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Update development/build/styles.js Co-Authored-By: Mark Stacey <markjstacey@gmail.com> Co-authored-by: Mark Stacey <markjstacey@gmail.com>feature/default_network_editable
kumavis
5 years ago
committed by
GitHub
parent
2df8b85c5f
commit
7686edadb0
@ -0,0 +1 @@ |
||||
{} |
||||
@ -0,0 +1,3 @@ |
||||
{ |
||||
"minimum_chrome_version": "58" |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
{ |
||||
"applications": { |
||||
"gecko": { |
||||
"id": "webextension@metamask.io", |
||||
"strict_min_version": "56.0" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
{ |
||||
"permissions": [ |
||||
"storage", |
||||
"tabs", |
||||
"clipboardWrite", |
||||
"clipboardRead", |
||||
"http://localhost:8545/" |
||||
] |
||||
} |
||||
@ -1,14 +1,10 @@ |
||||
const manifest = require('../app/manifest.json') |
||||
|
||||
const version = manifest.version |
||||
|
||||
const fs = require('fs') |
||||
const path = require('path') |
||||
const { version } = require('../app/manifest/_base.json') |
||||
|
||||
const changelog = fs.readFileSync(path.join(__dirname, '..', 'CHANGELOG.md')).toString() |
||||
const changelog = fs.readFileSync(path.join(__dirname, '..', 'CHANGELOG.md'), 'utf8') |
||||
|
||||
const log = changelog.split(version)[1].split('##')[0].trim() |
||||
|
||||
const msg = `*MetaMask ${version}* now published! It should auto-update soon!\n${log}` |
||||
|
||||
console.log(msg) |
||||
|
||||
@ -0,0 +1,150 @@ |
||||
const randomColor = require('randomcolor') |
||||
const chalk = require('chalk') |
||||
|
||||
module.exports = { setupTaskDisplay, displayChart } |
||||
|
||||
const SYMBOLS = { |
||||
Empty: '', |
||||
Space: ' ', |
||||
Full: '█', |
||||
SevenEighths: '▉', |
||||
ThreeQuarters: '▊', |
||||
FiveEighths: '▋', |
||||
Half: '▌', |
||||
ThreeEighths: '▍', |
||||
Quarter: '▎', |
||||
Eighth: '▏', |
||||
RightHalf: '▐', |
||||
RightEigth: '▕', |
||||
} |
||||
|
||||
function setupTaskDisplay (taskEvents) { |
||||
const taskData = [] |
||||
taskEvents.on('start', ([name]) => { |
||||
console.log(`Starting '${name}'...`) |
||||
}) |
||||
taskEvents.on('end', ([name, start, end]) => { |
||||
taskData.push([name, start, end]) |
||||
console.log(`Finished '${name}'`) |
||||
}) |
||||
taskEvents.on('complete', () => { |
||||
displayChart(taskData) |
||||
}) |
||||
} |
||||
|
||||
function displayChart (data) { |
||||
// sort tasks by start time
|
||||
data.sort((a, b,) => a[1] - b[1]) |
||||
|
||||
// get bounds
|
||||
const first = Math.min(...data.map((entry) => entry[1])) |
||||
const last = Math.max(...data.map((entry) => entry[2])) |
||||
|
||||
// get colors
|
||||
const colors = randomColor({ count: data.length }) |
||||
|
||||
// some heading before the bars
|
||||
console.log(`\nbuild completed. task timeline:`) |
||||
|
||||
// build bars for bounds
|
||||
data.map((entry, index) => { |
||||
const [label, start, end] = entry |
||||
const [start2, end2] = [start, end].map((value) => adjust(value, first, last, 40)) |
||||
const barString = barBuilder(start2, end2) |
||||
const color = colors[index] |
||||
const coloredBarString = colorize(color, barString) |
||||
const duration = ((end - start) / 1e3).toFixed(1) |
||||
console.log(coloredBarString, `${label} ${duration}s`) |
||||
}) |
||||
|
||||
} |
||||
|
||||
function colorize (color, string) { |
||||
const colorizer = (typeof chalk[color] === 'function') ? chalk[color] : chalk.hex(color) |
||||
return colorizer(string) |
||||
} |
||||
|
||||
// scale number within bounds
|
||||
function adjust (value, first, last, size) { |
||||
const length = last - first |
||||
const result = (value - first) / length * size |
||||
return result |
||||
} |
||||
|
||||
// draw bars
|
||||
function barBuilder (start, end) { |
||||
const [spaceInt, spaceRest] = splitNumber(start) |
||||
const barBodyLength = end - spaceInt |
||||
let [barInt, barRest] = splitNumber(barBodyLength) |
||||
// We are handling zero value as a special case
|
||||
// to print at least something on the screen
|
||||
if (barInt === 0 && barRest === 0) { |
||||
barInt = 0 |
||||
barRest = 0.001 |
||||
} |
||||
|
||||
const spaceFull = SYMBOLS.Space.repeat(spaceInt) |
||||
const spacePartial = getSymbolNormalRight(spaceRest) |
||||
const barFull = SYMBOLS.Full.repeat(barInt) |
||||
const barPartial = getSymbolNormal(barRest) |
||||
|
||||
return `${spaceFull}${spacePartial}${barFull}${barPartial}` |
||||
} |
||||
|
||||
// get integer and remainder
|
||||
function splitNumber (value = 0) { |
||||
const [int, rest = '0'] = value.toString().split('.') |
||||
const int2 = parseInt(int, 10) |
||||
const rest2 = parseInt(rest, 10) / Math.pow(10, rest.length) |
||||
return [int2, rest2] |
||||
} |
||||
|
||||
// get partial block char for value (left-adjusted)
|
||||
function getSymbolNormal (value) { |
||||
// round to closest supported value
|
||||
const possibleValues = [0, 1 / 8, 1 / 4, 3 / 8, 1 / 2, 5 / 8, 3 / 4, 7 / 8, 1] |
||||
const rounded = possibleValues.reduce((prev, curr) => { |
||||
return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev) |
||||
}) |
||||
|
||||
if (rounded === 0) { |
||||
return SYMBOLS.Empty |
||||
} else if (rounded === 1 / 8) { |
||||
return SYMBOLS.Eighth |
||||
} else if (rounded === 1 / 4) { |
||||
return SYMBOLS.Quarter |
||||
} else if (rounded === 3 / 8) { |
||||
return SYMBOLS.ThreeEighths |
||||
} else if (rounded === 1 / 2) { |
||||
return SYMBOLS.Half |
||||
} else if (rounded === 5 / 8) { |
||||
return SYMBOLS.FiveEighths |
||||
} else if (rounded === 3 / 4) { |
||||
return SYMBOLS.ThreeQuarters |
||||
} else if (rounded === 7 / 8) { |
||||
return SYMBOLS.SevenEighths |
||||
} else { |
||||
return SYMBOLS.Full |
||||
} |
||||
} |
||||
|
||||
// get partial block char for value (right-adjusted)
|
||||
function getSymbolNormalRight (value) { |
||||
// round to closest supported value (not much :/)
|
||||
const possibleValues = [0, 1 / 2, 7 / 8, 1] |
||||
const rounded = possibleValues.reduce((prev, curr) => { |
||||
return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev) |
||||
}) |
||||
|
||||
if (rounded === 0) { |
||||
return SYMBOLS.Full |
||||
} else if (rounded === 1 / 2) { |
||||
return SYMBOLS.RightHalf |
||||
} else if (rounded === 7 / 8) { |
||||
return SYMBOLS.RightEigth |
||||
} else if (rounded === 1) { |
||||
return SYMBOLS.Space |
||||
} else { |
||||
throw new Error('getSymbolNormalRight got unexpected result') |
||||
} |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
const gulp = require('gulp') |
||||
const gulpZip = require('gulp-zip') |
||||
const del = require('del') |
||||
const { promises: fs } = require('fs') |
||||
const pify = require('pify') |
||||
const pump = pify(require('pump')) |
||||
const baseManifest = require('../../app/manifest/_base.json') |
||||
const { createTask, composeParallel } = require('./task') |
||||
|
||||
module.exports = createEtcTasks |
||||
|
||||
|
||||
function createEtcTasks ({ browserPlatforms, livereload }) { |
||||
|
||||
const clean = createTask('clean', async function clean () { |
||||
await del(['./dist/*']) |
||||
await Promise.all(browserPlatforms.map(async (platform) => { |
||||
await fs.mkdir(`./dist/${platform}`, { recursive: true }) |
||||
})) |
||||
}) |
||||
|
||||
const reload = createTask('reload', function devReload () { |
||||
livereload.listen({ port: 35729 }) |
||||
}) |
||||
|
||||
// zip tasks for distribution
|
||||
const zip = createTask('zip', composeParallel( |
||||
...browserPlatforms.map((platform) => createZipTask(platform)) |
||||
)) |
||||
|
||||
return { clean, reload, zip } |
||||
} |
||||
|
||||
function createZipTask (target) { |
||||
return async () => { |
||||
await pump( |
||||
gulp.src(`dist/${target}/**`), |
||||
gulpZip(`metamask-${target}-${baseManifest.version}.zip`), |
||||
gulp.dest('builds'), |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1,91 @@ |
||||
//
|
||||
// build task definitions
|
||||
//
|
||||
// run any task with "yarn build ${taskName}"
|
||||
//
|
||||
|
||||
const livereload = require('gulp-livereload') |
||||
const { createTask, composeSeries, composeParallel, detectAndRunEntryTask } = require('./task') |
||||
const createManifestTasks = require('./manifest') |
||||
const createScriptTasks = require('./scripts') |
||||
const createStyleTasks = require('./styles') |
||||
const createStaticAssetTasks = require('./static') |
||||
const createEtcTasks = require('./etc') |
||||
|
||||
const browserPlatforms = [ |
||||
'firefox', |
||||
'chrome', |
||||
'brave', |
||||
'opera', |
||||
] |
||||
|
||||
defineAllTasks() |
||||
detectAndRunEntryTask() |
||||
|
||||
function defineAllTasks () { |
||||
|
||||
const staticTasks = createStaticAssetTasks({ livereload, browserPlatforms }) |
||||
const manifestTasks = createManifestTasks({ browserPlatforms }) |
||||
const styleTasks = createStyleTasks({ livereload }) |
||||
const scriptTasks = createScriptTasks({ livereload, browserPlatforms }) |
||||
const { clean, reload, zip } = createEtcTasks({ livereload, browserPlatforms }) |
||||
|
||||
// build for development (livereload)
|
||||
createTask('dev', |
||||
composeSeries( |
||||
clean, |
||||
styleTasks.dev, |
||||
composeParallel( |
||||
scriptTasks.dev, |
||||
staticTasks.dev, |
||||
manifestTasks.dev, |
||||
reload |
||||
) |
||||
) |
||||
) |
||||
|
||||
// build for test development (livereload)
|
||||
createTask('testDev', |
||||
composeSeries( |
||||
clean, |
||||
styleTasks.dev, |
||||
composeParallel( |
||||
scriptTasks.testDev, |
||||
staticTasks.dev, |
||||
manifestTasks.testDev, |
||||
reload |
||||
) |
||||
) |
||||
) |
||||
|
||||
// build for prod release
|
||||
createTask('prod', |
||||
composeSeries( |
||||
clean, |
||||
styleTasks.prod, |
||||
composeParallel( |
||||
scriptTasks.prod, |
||||
staticTasks.prod, |
||||
manifestTasks.prod, |
||||
), |
||||
zip, |
||||
) |
||||
) |
||||
|
||||
// build for CI testing
|
||||
createTask('test', |
||||
composeSeries( |
||||
clean, |
||||
styleTasks.prod, |
||||
composeParallel( |
||||
scriptTasks.test, |
||||
staticTasks.prod, |
||||
manifestTasks.test, |
||||
), |
||||
) |
||||
) |
||||
|
||||
// special build for minimal CI testing
|
||||
createTask('styles', styleTasks.prod) |
||||
|
||||
} |
||||
@ -0,0 +1,97 @@ |
||||
const { promises: fs } = require('fs') |
||||
const { merge, cloneDeep } = require('lodash') |
||||
|
||||
const baseManifest = require('../../app/manifest/_base.json') |
||||
|
||||
const { createTask, composeSeries } = require('./task') |
||||
|
||||
module.exports = createManifestTasks |
||||
|
||||
|
||||
const scriptsToExcludeFromBackgroundDevBuild = { |
||||
'bg-libs.js': true, |
||||
} |
||||
|
||||
function createManifestTasks ({ browserPlatforms }) { |
||||
|
||||
// merge base manifest with per-platform manifests
|
||||
const prepPlatforms = async () => { |
||||
return Promise.all(browserPlatforms.map(async (platform) => { |
||||
const platformModifications = await readJson(`${__dirname}/../../app/manifest/${platform}.json`) |
||||
const result = merge(cloneDeep(baseManifest), platformModifications) |
||||
const dir = `./dist/${platform}` |
||||
await fs.mkdir(dir, { recursive: true }) |
||||
await writeJson(result, `${dir}/manifest.json`) |
||||
})) |
||||
} |
||||
|
||||
// dev: remove bg-libs, add chromereload, add perms
|
||||
const envDev = createTaskForModifyManifestForEnvironment((manifest) => { |
||||
const scripts = manifest.background.scripts.filter((scriptName) => !scriptsToExcludeFromBackgroundDevBuild[scriptName]) |
||||
scripts.push('chromereload.js') |
||||
manifest.background = { |
||||
...manifest.background, |
||||
scripts, |
||||
} |
||||
manifest.permissions = [...manifest.permissions, 'webRequestBlocking'] |
||||
}) |
||||
|
||||
// testDev: remove bg-libs, add perms
|
||||
const envTestDev = createTaskForModifyManifestForEnvironment((manifest) => { |
||||
const scripts = manifest.background.scripts.filter((scriptName) => !scriptsToExcludeFromBackgroundDevBuild[scriptName]) |
||||
scripts.push('chromereload.js') |
||||
manifest.background = { |
||||
...manifest.background, |
||||
scripts, |
||||
} |
||||
manifest.permissions = [...manifest.permissions, 'webRequestBlocking', 'http://localhost/*'] |
||||
}) |
||||
|
||||
// test: add permissions
|
||||
const envTest = createTaskForModifyManifestForEnvironment((manifest) => { |
||||
manifest.permissions = [...manifest.permissions, 'webRequestBlocking', 'http://localhost/*'] |
||||
}) |
||||
|
||||
// high level manifest tasks
|
||||
const dev = createTask('manifest:dev', composeSeries( |
||||
prepPlatforms, |
||||
envDev, |
||||
)) |
||||
|
||||
const testDev = createTask('manifest:testDev', composeSeries( |
||||
prepPlatforms, |
||||
envTestDev, |
||||
)) |
||||
|
||||
const test = createTask('manifest:test', composeSeries( |
||||
prepPlatforms, |
||||
envTest, |
||||
)) |
||||
|
||||
const prod = createTask('manifest:prod', prepPlatforms) |
||||
|
||||
return { prod, dev, testDev, test } |
||||
|
||||
// helper for modifying each platform's manifest.json in place
|
||||
function createTaskForModifyManifestForEnvironment (transformFn) { |
||||
return () => { |
||||
return Promise.all(browserPlatforms.map(async (platform) => { |
||||
const path = `./dist/${platform}/manifest.json` |
||||
const manifest = await readJson(path) |
||||
transformFn(manifest) |
||||
await writeJson(manifest, path) |
||||
})) |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
// helper for reading and deserializing json from fs
|
||||
async function readJson (path) { |
||||
return JSON.parse(await fs.readFile(path, 'utf8')) |
||||
} |
||||
|
||||
// helper for serializing and writing json to fs
|
||||
async function writeJson (obj, path) { |
||||
return fs.writeFile(path, JSON.stringify(obj, null, 2)) |
||||
} |
||||
@ -0,0 +1,362 @@ |
||||
const fs = require('fs') |
||||
const gulp = require('gulp') |
||||
const watch = require('gulp-watch') |
||||
const source = require('vinyl-source-stream') |
||||
const buffer = require('vinyl-buffer') |
||||
const log = require('fancy-log') |
||||
const { assign } = require('lodash') |
||||
const watchify = require('watchify') |
||||
const browserify = require('browserify') |
||||
const envify = require('envify/custom') |
||||
const sourcemaps = require('gulp-sourcemaps') |
||||
const sesify = require('sesify') |
||||
const terser = require('gulp-terser-js') |
||||
const pify = require('pify') |
||||
const endOfStream = pify(require('end-of-stream')) |
||||
const { makeStringTransform } = require('browserify-transform-tools') |
||||
|
||||
|
||||
const { createTask, composeParallel, composeSeries, runInChildProcess } = require('./task') |
||||
const packageJSON = require('../../package.json') |
||||
|
||||
module.exports = createScriptTasks |
||||
|
||||
|
||||
const dependencies = Object.keys((packageJSON && packageJSON.dependencies) || {}) |
||||
const materialUIDependencies = ['@material-ui/core'] |
||||
const reactDepenendencies = dependencies.filter((dep) => dep.match(/react/)) |
||||
const d3Dependencies = ['c3', 'd3'] |
||||
|
||||
const externalDependenciesMap = { |
||||
background: [ |
||||
'3box', |
||||
], |
||||
ui: [ |
||||
...materialUIDependencies, ...reactDepenendencies, ...d3Dependencies, |
||||
], |
||||
} |
||||
|
||||
function createScriptTasks ({ browserPlatforms, livereload }) { |
||||
|
||||
// internal tasks
|
||||
const core = { |
||||
// dev tasks (live reload)
|
||||
dev: createTasksForBuildJsExtension({ taskPrefix: 'scripts:core:dev', devMode: true }), |
||||
testDev: createTasksForBuildJsExtension({ taskPrefix: 'scripts:core:test-live', devMode: true, testing: true }), |
||||
// built for CI tests
|
||||
test: createTasksForBuildJsExtension({ taskPrefix: 'scripts:core:test', testing: true }), |
||||
// production
|
||||
prod: createTasksForBuildJsExtension({ taskPrefix: 'scripts:core:prod' }), |
||||
} |
||||
const deps = { |
||||
background: createTasksForBuildJsDeps({ filename: 'bg-libs', key: 'background' }), |
||||
ui: createTasksForBuildJsDeps({ filename: 'ui-libs', key: 'ui' }), |
||||
} |
||||
|
||||
// high level tasks
|
||||
|
||||
const prod = composeParallel( |
||||
deps.background, |
||||
deps.ui, |
||||
core.prod, |
||||
) |
||||
|
||||
const dev = core.dev |
||||
const testDev = core.testDev |
||||
|
||||
const test = composeParallel( |
||||
deps.background, |
||||
deps.ui, |
||||
core.test, |
||||
) |
||||
|
||||
return { prod, dev, testDev, test } |
||||
|
||||
|
||||
function createTasksForBuildJsDeps ({ key, filename }) { |
||||
return createTask(`scripts:deps:${key}`, bundleTask({ |
||||
label: filename, |
||||
filename: `${filename}.js`, |
||||
buildLib: true, |
||||
dependenciesToBundle: externalDependenciesMap[key], |
||||
devMode: false, |
||||
})) |
||||
} |
||||
|
||||
|
||||
function createTasksForBuildJsExtension ({ taskPrefix, devMode, testing }) { |
||||
const standardBundles = [ |
||||
'background', |
||||
'ui', |
||||
'phishing-detect', |
||||
] |
||||
|
||||
const standardSubtasks = standardBundles.map((filename) => { |
||||
return createTask(`${taskPrefix}:${filename}`, |
||||
createBundleTaskForBuildJsExtensionNormal({ filename, devMode, testing }) |
||||
) |
||||
}) |
||||
// inpage must be built before contentscript
|
||||
// because inpage bundle result is included inside contentscript
|
||||
const contentscriptSubtask = createTask(`${taskPrefix}:contentscript`, |
||||
createTaskForBuildJsExtensionContentscript({ devMode, testing }) |
||||
) |
||||
|
||||
// task for initiating livereload
|
||||
const initiateLiveReload = async () => { |
||||
if (devMode) { |
||||
// trigger live reload when the bundles are updated
|
||||
// this is not ideal, but overcomes the limitations:
|
||||
// - run from the main process (not child process tasks)
|
||||
// - after the first build has completed (thus the timeout)
|
||||
// - build tasks never "complete" when run with livereload + child process
|
||||
setTimeout(() => { |
||||
watch('./dist/*/*.js', (event) => { |
||||
livereload.changed(event.path) |
||||
}) |
||||
}, 75e3) |
||||
} |
||||
} |
||||
|
||||
// make each bundle run in a separate process
|
||||
const allSubtasks = [...standardSubtasks, contentscriptSubtask].map((subtask) => runInChildProcess(subtask)) |
||||
// const allSubtasks = [...standardSubtasks, contentscriptSubtask].map(subtask => (subtask))
|
||||
// make a parent task that runs each task in a child thread
|
||||
return composeParallel(initiateLiveReload, ...allSubtasks) |
||||
} |
||||
|
||||
function createBundleTaskForBuildJsExtensionNormal ({ filename, devMode, testing }) { |
||||
return bundleTask({ |
||||
label: filename, |
||||
filename: `${filename}.js`, |
||||
filepath: `./app/scripts/${filename}.js`, |
||||
externalDependencies: devMode ? undefined : externalDependenciesMap[filename], |
||||
devMode, |
||||
testing, |
||||
}) |
||||
} |
||||
|
||||
function createTaskForBuildJsExtensionContentscript ({ devMode, testing }) { |
||||
const inpage = 'inpage' |
||||
const contentscript = 'contentscript' |
||||
return composeSeries( |
||||
bundleTask({ |
||||
label: inpage, |
||||
filename: `${inpage}.js`, |
||||
filepath: `./app/scripts/${inpage}.js`, |
||||
externalDependencies: devMode ? undefined : externalDependenciesMap[inpage], |
||||
devMode, |
||||
testing, |
||||
}), |
||||
bundleTask({ |
||||
label: contentscript, |
||||
filename: `${contentscript}.js`, |
||||
filepath: `./app/scripts/${contentscript}.js`, |
||||
externalDependencies: devMode ? undefined : externalDependenciesMap[contentscript], |
||||
devMode, |
||||
testing, |
||||
}) |
||||
) |
||||
} |
||||
|
||||
|
||||
function bundleTask (opts) { |
||||
let bundler |
||||
|
||||
return performBundle |
||||
|
||||
async function performBundle () { |
||||
// initialize bundler if not available yet
|
||||
// dont create bundler until task is actually run
|
||||
if (!bundler) { |
||||
bundler = generateBundler(opts, performBundle) |
||||
// output build logs to terminal
|
||||
bundler.on('log', log) |
||||
} |
||||
|
||||
let buildStream = bundler.bundle() |
||||
|
||||
// handle errors
|
||||
buildStream.on('error', (err) => { |
||||
beep() |
||||
if (opts.devMode) { |
||||
console.warn(err.stack) |
||||
} else { |
||||
throw err |
||||
} |
||||
}) |
||||
|
||||
// process bundles
|
||||
buildStream = buildStream |
||||
// convert bundle stream to gulp vinyl stream
|
||||
.pipe(source(opts.filename)) |
||||
// buffer file contents (?)
|
||||
.pipe(buffer()) |
||||
|
||||
// Initialize Source Maps
|
||||
buildStream = buildStream |
||||
// loads map from browserify file
|
||||
.pipe(sourcemaps.init({ loadMaps: true })) |
||||
|
||||
// Minification
|
||||
if (!opts.devMode) { |
||||
buildStream = buildStream |
||||
.pipe(terser({ |
||||
mangle: { |
||||
reserved: [ 'MetamaskInpageProvider' ], |
||||
}, |
||||
})) |
||||
} |
||||
|
||||
// Finalize Source Maps
|
||||
if (opts.devMode) { |
||||
// Use inline source maps for development due to Chrome DevTools bug
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=931675
|
||||
buildStream = buildStream |
||||
.pipe(sourcemaps.write()) |
||||
} else { |
||||
buildStream = buildStream |
||||
.pipe(sourcemaps.write('../sourcemaps')) |
||||
} |
||||
|
||||
// write completed bundles
|
||||
browserPlatforms.forEach((platform) => { |
||||
const dest = `./dist/${platform}` |
||||
buildStream = buildStream.pipe(gulp.dest(dest)) |
||||
}) |
||||
|
||||
await endOfStream(buildStream) |
||||
} |
||||
} |
||||
|
||||
function configureBundleForSesify ({ |
||||
browserifyOpts, |
||||
bundleName, |
||||
}) { |
||||
// add in sesify args for better globalRef usage detection
|
||||
Object.assign(browserifyOpts, sesify.args) |
||||
|
||||
// ensure browserify uses full paths
|
||||
browserifyOpts.fullPaths = true |
||||
|
||||
// record dependencies used in bundle
|
||||
fs.mkdirSync('./sesify', { recursive: true }) |
||||
browserifyOpts.plugin.push(['deps-dump', { |
||||
filename: `./sesify/deps-${bundleName}.json`, |
||||
}]) |
||||
|
||||
const sesifyConfigPath = `./sesify/${bundleName}.json` |
||||
|
||||
// add sesify plugin
|
||||
browserifyOpts.plugin.push([sesify, { |
||||
writeAutoConfig: sesifyConfigPath, |
||||
}]) |
||||
|
||||
// remove html comments that SES is alergic to
|
||||
const removeHtmlComment = makeStringTransform('remove-html-comment', { excludeExtension: ['.json'] }, (content, _, cb) => { |
||||
const result = content.split('-->').join('-- >') |
||||
cb(null, result) |
||||
}) |
||||
browserifyOpts.transform.push([removeHtmlComment, { global: true }]) |
||||
} |
||||
|
||||
function generateBundler (opts, performBundle) { |
||||
const browserifyOpts = assign({}, watchify.args, { |
||||
plugin: [], |
||||
transform: [], |
||||
debug: true, |
||||
fullPaths: opts.devMode, |
||||
}) |
||||
|
||||
const bundleName = opts.filename.split('.')[0] |
||||
|
||||
// activate sesify
|
||||
const activateAutoConfig = Boolean(process.env.SESIFY_AUTOGEN) |
||||
// const activateSesify = activateAutoConfig
|
||||
const activateSesify = activateAutoConfig && ['background'].includes(bundleName) |
||||
if (activateSesify) { |
||||
configureBundleForSesify({ browserifyOpts, bundleName }) |
||||
} |
||||
|
||||
if (!activateSesify) { |
||||
browserifyOpts.plugin.push('browserify-derequire') |
||||
} |
||||
|
||||
if (!opts.buildLib) { |
||||
if (opts.devMode && opts.filename === 'ui.js') { |
||||
browserifyOpts['entries'] = ['./development/require-react-devtools.js', opts.filepath] |
||||
} else { |
||||
browserifyOpts['entries'] = [opts.filepath] |
||||
} |
||||
} |
||||
|
||||
let bundler = browserify(browserifyOpts) |
||||
.transform('babelify') |
||||
// Transpile any dependencies using the object spread/rest operator
|
||||
// because it is incompatible with `esprima`, which is used by `envify`
|
||||
// See https://github.com/jquery/esprima/issues/1927
|
||||
.transform('babelify', { |
||||
only: [ |
||||
'./**/node_modules/libp2p', |
||||
], |
||||
global: true, |
||||
plugins: ['@babel/plugin-proposal-object-rest-spread'], |
||||
}) |
||||
.transform('brfs') |
||||
|
||||
if (opts.buildLib) { |
||||
bundler = bundler.require(opts.dependenciesToBundle) |
||||
} |
||||
|
||||
if (opts.externalDependencies) { |
||||
bundler = bundler.external(opts.externalDependencies) |
||||
} |
||||
|
||||
let environment |
||||
if (opts.devMode) { |
||||
environment = 'development' |
||||
} else if (opts.testing) { |
||||
environment = 'testing' |
||||
} else if (process.env.CIRCLE_BRANCH === 'master') { |
||||
environment = 'production' |
||||
} else if (/^Version-v(\d+)[.](\d+)[.](\d+)/.test(process.env.CIRCLE_BRANCH)) { |
||||
environment = 'release-candidate' |
||||
} else if (process.env.CIRCLE_BRANCH === 'develop') { |
||||
environment = 'staging' |
||||
} else if (process.env.CIRCLE_PULL_REQUEST) { |
||||
environment = 'pull-request' |
||||
} else { |
||||
environment = 'other' |
||||
} |
||||
|
||||
// Inject variables into bundle
|
||||
bundler.transform(envify({ |
||||
METAMASK_DEBUG: opts.devMode, |
||||
METAMASK_ENVIRONMENT: environment, |
||||
NODE_ENV: opts.devMode ? 'development' : 'production', |
||||
IN_TEST: opts.testing ? 'true' : false, |
||||
PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '', |
||||
PUBNUB_PUB_KEY: process.env.PUBNUB_PUB_KEY || '', |
||||
}), { |
||||
global: true, |
||||
}) |
||||
|
||||
// Live reload - minimal rebundle on change
|
||||
if (opts.devMode) { |
||||
bundler = watchify(bundler) |
||||
// on any file update, re-runs the bundler
|
||||
bundler.on('update', () => { |
||||
performBundle() |
||||
}) |
||||
} |
||||
|
||||
return bundler |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
function beep () { |
||||
process.stdout.write('\x07') |
||||
} |
||||
@ -0,0 +1,95 @@ |
||||
const fs = require('fs-extra') |
||||
const path = require('path') |
||||
const watch = require('gulp-watch') |
||||
const glob = require('fast-glob') |
||||
|
||||
const { createTask, composeSeries } = require('./task') |
||||
|
||||
module.exports = createStaticAssetTasks |
||||
|
||||
|
||||
const copyTargets = [ |
||||
{ |
||||
src: `./app/_locales/`, |
||||
dest: `_locales`, |
||||
}, |
||||
{ |
||||
src: `./app/images/`, |
||||
dest: `images`, |
||||
}, |
||||
{ |
||||
src: `./node_modules/eth-contract-metadata/images/`, |
||||
dest: `images/contract`, |
||||
}, |
||||
{ |
||||
src: `./app/fonts/`, |
||||
dest: `fonts`, |
||||
}, |
||||
{ |
||||
src: `./app/vendor/`, |
||||
dest: `vendor`, |
||||
}, |
||||
{ |
||||
src: `./ui/app/css/output/`, |
||||
pattern: `*.css`, |
||||
dest: ``, |
||||
}, |
||||
{ |
||||
src: `./app/`, |
||||
pattern: `*.html`, |
||||
dest: ``, |
||||
}, |
||||
] |
||||
|
||||
const copyTargetsDev = [ |
||||
...copyTargets, |
||||
{ |
||||
src: './app/scripts/', |
||||
pattern: '/chromereload.js', |
||||
dest: ``, |
||||
}, |
||||
] |
||||
|
||||
function createStaticAssetTasks ({ livereload, browserPlatforms }) { |
||||
|
||||
const prod = createTask('static:prod', composeSeries(...copyTargets.map((target) => { |
||||
return async function copyStaticAssets () { |
||||
await performCopy(target) |
||||
} |
||||
}))) |
||||
const dev = createTask('static:dev', composeSeries(...copyTargetsDev.map((target) => { |
||||
return async function copyStaticAssets () { |
||||
await setupLiveCopy(target) |
||||
} |
||||
}))) |
||||
|
||||
return { dev, prod } |
||||
|
||||
async function setupLiveCopy (target) { |
||||
const pattern = target.pattern || '/**/*' |
||||
watch(target.src + pattern, (event) => { |
||||
livereload.changed(event.path) |
||||
performCopy(target) |
||||
}) |
||||
await performCopy(target) |
||||
} |
||||
|
||||
async function performCopy (target) { |
||||
await Promise.all(browserPlatforms.map(async (platform) => { |
||||
if (target.pattern) { |
||||
await copyGlob(target.src, `${target.src}${target.pattern}`, `./dist/${platform}/${target.dest}`) |
||||
} else { |
||||
await copyGlob(target.src, `${target.src}`, `./dist/${platform}/${target.dest}`) |
||||
} |
||||
})) |
||||
} |
||||
|
||||
async function copyGlob (baseDir, srcGlob, dest) { |
||||
const sources = await glob(srcGlob, { onlyFiles: false }) |
||||
await Promise.all(sources.map(async (src) => { |
||||
const relativePath = path.relative(baseDir, src) |
||||
await fs.copy(src, `${dest}${relativePath}`) |
||||
})) |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,79 @@ |
||||
const pify = require('pify') |
||||
const gulp = require('gulp') |
||||
const sass = require('gulp-sass') |
||||
sass.compiler = require('node-sass') |
||||
const autoprefixer = require('gulp-autoprefixer') |
||||
const gulpStylelint = require('gulp-stylelint') |
||||
const watch = require('gulp-watch') |
||||
const sourcemaps = require('gulp-sourcemaps') |
||||
const rtlcss = require('gulp-rtlcss') |
||||
const rename = require('gulp-rename') |
||||
const pump = pify(require('pump')) |
||||
const { createTask } = require('./task') |
||||
|
||||
|
||||
// scss compilation and autoprefixing tasks
|
||||
module.exports = createStyleTasks |
||||
|
||||
|
||||
function createStyleTasks ({ livereload }) { |
||||
|
||||
const prod = createTask('styles:prod', createScssBuildTask({ |
||||
src: 'ui/app/css/index.scss', |
||||
dest: 'ui/app/css/output', |
||||
devMode: false, |
||||
})) |
||||
|
||||
const dev = createTask('styles:dev', createScssBuildTask({ |
||||
src: 'ui/app/css/index.scss', |
||||
dest: 'ui/app/css/output', |
||||
devMode: true, |
||||
pattern: 'ui/app/**/*.scss', |
||||
})) |
||||
|
||||
const lint = createTask('lint-scss', function () { |
||||
return gulp |
||||
.src('ui/app/css/itcss/**/*.scss') |
||||
.pipe(gulpStylelint({ |
||||
reporters: [ |
||||
{ formatter: 'string', console: true }, |
||||
], |
||||
fix: true, |
||||
})) |
||||
}) |
||||
|
||||
return { prod, dev, lint } |
||||
|
||||
|
||||
function createScssBuildTask ({ src, dest, devMode, pattern }) { |
||||
return async function () { |
||||
if (devMode) { |
||||
watch(pattern, async (event) => { |
||||
await buildScss(devMode) |
||||
livereload.changed(event.path) |
||||
}) |
||||
} |
||||
await buildScss(devMode) |
||||
} |
||||
|
||||
async function buildScss (devMode) { |
||||
await pump(...[ |
||||
// pre-process
|
||||
gulp.src(src), |
||||
devMode && sourcemaps.init(), |
||||
sass().on('error', sass.logError), |
||||
devMode && sourcemaps.write(), |
||||
autoprefixer(), |
||||
// standard
|
||||
gulp.dest(dest), |
||||
// right-to-left
|
||||
rtlcss(), |
||||
rename({ suffix: '-rtl' }), |
||||
devMode && sourcemaps.write(), |
||||
gulp.dest(dest), |
||||
].filter(Boolean)) |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,101 @@ |
||||
const EventEmitter = require('events') |
||||
const { spawn } = require('child_process') |
||||
|
||||
const tasks = {} |
||||
const taskEvents = new EventEmitter() |
||||
|
||||
module.exports = { detectAndRunEntryTask, tasks, taskEvents, createTask, runTask, composeSeries, composeParallel, runInChildProcess } |
||||
|
||||
const { setupTaskDisplay } = require('./display') |
||||
|
||||
|
||||
function detectAndRunEntryTask () { |
||||
// get requested task name and execute
|
||||
const taskName = process.argv[2] |
||||
if (!taskName) { |
||||
throw new Error(`MetaMask build: No task name specified`) |
||||
} |
||||
const skipStats = process.argv[3] === '--skip-stats' |
||||
|
||||
runTask(taskName, { skipStats }) |
||||
} |
||||
|
||||
async function runTask (taskName, { skipStats } = {}) { |
||||
if (!(taskName in tasks)) { |
||||
throw new Error(`MetaMask build: Unrecognized task name "${taskName}"`) |
||||
} |
||||
if (!skipStats) { |
||||
setupTaskDisplay(taskEvents) |
||||
console.log(`running task "${taskName}"...`) |
||||
} |
||||
try { |
||||
await tasks[taskName]() |
||||
} catch (err) { |
||||
console.error(`MetaMask build: Encountered an error while running task "${taskName}".`) |
||||
console.error(err) |
||||
process.exit(1) |
||||
} |
||||
taskEvents.emit('complete') |
||||
} |
||||
|
||||
function createTask (taskName, taskFn) { |
||||
if (taskName in tasks) { |
||||
throw new Error(`MetaMask build: task "${taskName}" already exists. Refusing to redefine`) |
||||
} |
||||
const task = instrumentForTaskStats(taskName, taskFn) |
||||
task.taskName = taskName |
||||
tasks[taskName] = task |
||||
return task |
||||
} |
||||
|
||||
function runInChildProcess (task) { |
||||
const taskName = typeof task === 'string' ? task : task.taskName |
||||
if (!taskName) { |
||||
throw new Error(`MetaMask build: runInChildProcess unable to identify task name`) |
||||
} |
||||
return instrumentForTaskStats(taskName, async () => { |
||||
const childProcess = spawn('yarn', ['build', taskName, '--skip-stats']) |
||||
// forward logs to main process
|
||||
// skip the first stdout event (announcing the process command)
|
||||
childProcess.stdout.once('data', () => { |
||||
childProcess.stdout.on('data', (data) => process.stdout.write(`${taskName}: ${data}`)) |
||||
}) |
||||
childProcess.stderr.on('data', (data) => process.stderr.write(`${taskName}: ${data}`)) |
||||
// await end of process
|
||||
await new Promise((resolve, reject) => { |
||||
childProcess.once('close', (errCode) => { |
||||
if (errCode !== 0) { |
||||
reject(new Error(`MetaMask build: runInChildProcess for task "${taskName}" encountered an error`)) |
||||
return |
||||
} |
||||
resolve() |
||||
}) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
function instrumentForTaskStats (taskName, asyncFn) { |
||||
return async () => { |
||||
const start = Date.now() |
||||
taskEvents.emit('start', [taskName, start]) |
||||
await asyncFn() |
||||
const end = Date.now() |
||||
taskEvents.emit('end', [taskName, start, end]) |
||||
} |
||||
} |
||||
|
||||
function composeSeries (...subtasks) { |
||||
return async () => { |
||||
const realTasks = subtasks |
||||
for (const subtask of realTasks) { |
||||
await subtask() |
||||
} |
||||
} |
||||
} |
||||
|
||||
function composeParallel (...subtasks) { |
||||
return async () => { |
||||
const realTasks = subtasks |
||||
await Promise.all(realTasks.map((subtask) => subtask())) |
||||
} |
||||
} |
||||
@ -1,724 +0,0 @@ |
||||
const fs = require('fs') |
||||
const watchify = require('watchify') |
||||
const browserify = require('browserify') |
||||
const envify = require('envify/custom') |
||||
const gulp = require('gulp') |
||||
const source = require('vinyl-source-stream') |
||||
const buffer = require('vinyl-buffer') |
||||
const log = require('fancy-log') |
||||
const watch = require('gulp-watch') |
||||
const sourcemaps = require('gulp-sourcemaps') |
||||
const jsoneditor = require('gulp-json-editor') |
||||
const zip = require('gulp-zip') |
||||
const { assign } = require('lodash') |
||||
const livereload = require('gulp-livereload') |
||||
const del = require('del') |
||||
const manifest = require('./app/manifest.json') |
||||
const sass = require('gulp-sass') |
||||
const autoprefixer = require('gulp-autoprefixer') |
||||
const gulpStylelint = require('gulp-stylelint') |
||||
const terser = require('gulp-terser-js') |
||||
const pify = require('pify') |
||||
const rtlcss = require('gulp-rtlcss') |
||||
const rename = require('gulp-rename') |
||||
const gulpMultiProcess = require('gulp-multi-process') |
||||
const endOfStream = pify(require('end-of-stream')) |
||||
const sesify = require('sesify') |
||||
const imagemin = require('gulp-imagemin') |
||||
const { makeStringTransform } = require('browserify-transform-tools') |
||||
|
||||
const packageJSON = require('./package.json') |
||||
|
||||
sass.compiler = require('node-sass') |
||||
|
||||
const dependencies = Object.keys((packageJSON && packageJSON.dependencies) || {}) |
||||
const materialUIDependencies = ['@material-ui/core'] |
||||
const reactDepenendencies = dependencies.filter((dep) => dep.match(/react/)) |
||||
const d3Dependencies = ['c3', 'd3'] |
||||
|
||||
const externalDependenciesMap = { |
||||
background: [ |
||||
'3box', |
||||
], |
||||
ui: [ |
||||
...materialUIDependencies, ...reactDepenendencies, ...d3Dependencies, |
||||
], |
||||
} |
||||
|
||||
function gulpParallel (...args) { |
||||
return function spawnGulpChildProcess (cb) { |
||||
return gulpMultiProcess(args, cb, true) |
||||
} |
||||
} |
||||
|
||||
const browserPlatforms = [ |
||||
'firefox', |
||||
'chrome', |
||||
'brave', |
||||
'opera', |
||||
] |
||||
const commonPlatforms = [ |
||||
// browser extensions
|
||||
...browserPlatforms, |
||||
] |
||||
|
||||
// browser reload
|
||||
|
||||
gulp.task('dev:reload', function () { |
||||
livereload.listen({ |
||||
port: 35729, |
||||
}) |
||||
}) |
||||
|
||||
// copy universal
|
||||
|
||||
const copyTaskNames = [] |
||||
const copyDevTaskNames = [] |
||||
|
||||
createCopyTasks('locales', { |
||||
source: './app/_locales/', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}/_locales`), |
||||
}) |
||||
createCopyTasks('images', { |
||||
source: './app/images/', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}/images`), |
||||
}) |
||||
createCopyTasks('contractImages', { |
||||
source: './node_modules/eth-contract-metadata/images/', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}/images/contract`), |
||||
}) |
||||
createCopyTasks('fonts', { |
||||
source: './app/fonts/', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}/fonts`), |
||||
}) |
||||
createCopyTasks('vendor', { |
||||
source: './app/vendor/', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}/vendor`), |
||||
}) |
||||
createCopyTasks('css', { |
||||
source: './ui/app/css/output/', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}`), |
||||
}) |
||||
createCopyTasks('reload', { |
||||
devOnly: true, |
||||
source: './app/scripts/', |
||||
pattern: '/chromereload.js', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}`), |
||||
}) |
||||
createCopyTasks('html', { |
||||
source: './app/', |
||||
pattern: '/*.html', |
||||
destinations: commonPlatforms.map((platform) => `./dist/${platform}`), |
||||
}) |
||||
|
||||
// copy extension
|
||||
|
||||
createCopyTasks('manifest', { |
||||
source: './app/', |
||||
pattern: '/*.json', |
||||
destinations: browserPlatforms.map((platform) => `./dist/${platform}`), |
||||
}) |
||||
|
||||
function createCopyTasks (label, opts) { |
||||
if (!opts.devOnly) { |
||||
const copyTaskName = `copy:${label}` |
||||
copyTask(copyTaskName, opts) |
||||
copyTaskNames.push(copyTaskName) |
||||
} |
||||
const copyDevTaskName = `dev:copy:${label}` |
||||
copyTask(copyDevTaskName, Object.assign({ devMode: true }, opts)) |
||||
copyDevTaskNames.push(copyDevTaskName) |
||||
} |
||||
|
||||
function copyTask (taskName, opts) { |
||||
const source = opts.source |
||||
const destination = opts.destination |
||||
const destinations = opts.destinations || [destination] |
||||
const pattern = opts.pattern || '/**/*' |
||||
const devMode = opts.devMode |
||||
|
||||
return gulp.task(taskName, function () { |
||||
if (devMode) { |
||||
watch(source + pattern, (event) => { |
||||
livereload.changed(event.path) |
||||
performCopy() |
||||
}) |
||||
} |
||||
|
||||
return performCopy() |
||||
}) |
||||
|
||||
function performCopy () { |
||||
// stream from source
|
||||
let stream = gulp.src(source + pattern, { base: source }) |
||||
|
||||
// copy to destinations
|
||||
destinations.forEach(function (destination) { |
||||
stream = stream.pipe(gulp.dest(destination)) |
||||
}) |
||||
|
||||
return stream |
||||
} |
||||
} |
||||
|
||||
// manifest tinkering
|
||||
|
||||
gulp.task('manifest:chrome', function () { |
||||
return gulp.src('./dist/chrome/manifest.json') |
||||
.pipe(jsoneditor(function (json) { |
||||
delete json.applications |
||||
json.minimum_chrome_version = '58' |
||||
return json |
||||
})) |
||||
.pipe(gulp.dest('./dist/chrome', { overwrite: true })) |
||||
}) |
||||
|
||||
gulp.task('manifest:opera', function () { |
||||
return gulp.src('./dist/opera/manifest.json') |
||||
.pipe(jsoneditor(function (json) { |
||||
json.permissions = [ |
||||
'storage', |
||||
'tabs', |
||||
'clipboardWrite', |
||||
'clipboardRead', |
||||
'http://localhost:8545/', |
||||
] |
||||
return json |
||||
})) |
||||
.pipe(gulp.dest('./dist/opera', { overwrite: true })) |
||||
}) |
||||
|
||||
gulp.task('manifest:production', function () { |
||||
return gulp.src([ |
||||
'./dist/firefox/manifest.json', |
||||
'./dist/chrome/manifest.json', |
||||
'./dist/brave/manifest.json', |
||||
'./dist/opera/manifest.json', |
||||
], { base: './dist/' }) |
||||
|
||||
// Exclude chromereload script in production:
|
||||
.pipe(jsoneditor(function (json) { |
||||
json.background.scripts = json.background.scripts.filter((script) => { |
||||
return !script.includes('chromereload') |
||||
}) |
||||
return json |
||||
})) |
||||
|
||||
.pipe(gulp.dest('./dist/', { overwrite: true })) |
||||
}) |
||||
|
||||
gulp.task('manifest:testing', function () { |
||||
return gulp.src([ |
||||
'./dist/firefox/manifest.json', |
||||
'./dist/chrome/manifest.json', |
||||
], { base: './dist/' }) |
||||
|
||||
// Exclude chromereload script in production:
|
||||
.pipe(jsoneditor(function (json) { |
||||
json.permissions = [...json.permissions, 'webRequestBlocking', 'http://localhost/*'] |
||||
return json |
||||
})) |
||||
|
||||
.pipe(gulp.dest('./dist/', { overwrite: true })) |
||||
}) |
||||
|
||||
const scriptsToExcludeFromBackgroundDevBuild = { |
||||
'bg-libs.js': true, |
||||
} |
||||
|
||||
gulp.task('manifest:testing-local', function () { |
||||
return gulp.src([ |
||||
'./dist/firefox/manifest.json', |
||||
'./dist/chrome/manifest.json', |
||||
], { base: './dist/' }) |
||||
|
||||
.pipe(jsoneditor(function (json) { |
||||
json.background = { |
||||
...json.background, |
||||
scripts: json.background.scripts.filter((scriptName) => !scriptsToExcludeFromBackgroundDevBuild[scriptName]), |
||||
} |
||||
json.permissions = [...json.permissions, 'webRequestBlocking', 'http://localhost/*'] |
||||
return json |
||||
})) |
||||
|
||||
.pipe(gulp.dest('./dist/', { overwrite: true })) |
||||
}) |
||||
|
||||
|
||||
gulp.task('manifest:dev', function () { |
||||
return gulp.src([ |
||||
'./dist/firefox/manifest.json', |
||||
'./dist/chrome/manifest.json', |
||||
], { base: './dist/' }) |
||||
|
||||
.pipe(jsoneditor(function (json) { |
||||
json.background = { |
||||
...json.background, |
||||
scripts: json.background.scripts.filter((scriptName) => !scriptsToExcludeFromBackgroundDevBuild[scriptName]), |
||||
} |
||||
json.permissions = [...json.permissions, 'webRequestBlocking'] |
||||
return json |
||||
})) |
||||
|
||||
.pipe(gulp.dest('./dist/', { overwrite: true })) |
||||
}) |
||||
|
||||
gulp.task('optimize:images', function () { |
||||
return gulp.src('./dist/**/images/**', { base: './dist/' }) |
||||
.pipe(imagemin()) |
||||
.pipe(gulp.dest('./dist/', { overwrite: true })) |
||||
}) |
||||
|
||||
gulp.task('copy', |
||||
gulp.series( |
||||
gulp.parallel(...copyTaskNames), |
||||
'manifest:production', |
||||
'manifest:chrome', |
||||
'manifest:opera' |
||||
) |
||||
) |
||||
|
||||
gulp.task('dev:copy', |
||||
gulp.series( |
||||
gulp.parallel(...copyDevTaskNames), |
||||
'manifest:dev', |
||||
'manifest:chrome', |
||||
'manifest:opera' |
||||
) |
||||
) |
||||
|
||||
gulp.task('test:copy', |
||||
gulp.series( |
||||
gulp.parallel(...copyDevTaskNames), |
||||
'manifest:chrome', |
||||
'manifest:opera', |
||||
'manifest:testing-local' |
||||
) |
||||
) |
||||
|
||||
// scss compilation and autoprefixing tasks
|
||||
|
||||
gulp.task('build:scss', createScssBuildTask({ |
||||
src: 'ui/app/css/index.scss', |
||||
dest: 'ui/app/css/output', |
||||
devMode: false, |
||||
})) |
||||
|
||||
gulp.task('dev:scss', createScssBuildTask({ |
||||
src: 'ui/app/css/index.scss', |
||||
dest: 'ui/app/css/output', |
||||
devMode: true, |
||||
pattern: 'ui/app/**/*.scss', |
||||
})) |
||||
|
||||
function createScssBuildTask ({ src, dest, devMode, pattern }) { |
||||
return function () { |
||||
if (devMode) { |
||||
watch(pattern, async (event) => { |
||||
const stream = buildScss() |
||||
await endOfStream(stream) |
||||
livereload.changed(event.path) |
||||
}) |
||||
return buildScssWithSourceMaps() |
||||
} |
||||
return buildScss() |
||||
} |
||||
|
||||
function buildScssWithSourceMaps () { |
||||
return gulp.src(src) |
||||
.pipe(sourcemaps.init()) |
||||
.pipe(sass().on('error', sass.logError)) |
||||
.pipe(sourcemaps.write()) |
||||
.pipe(autoprefixer()) |
||||
.pipe(gulp.dest(dest)) |
||||
.pipe(rtlcss()) |
||||
.pipe(rename({ suffix: '-rtl' })) |
||||
.pipe(sourcemaps.write()) |
||||
.pipe(gulp.dest(dest)) |
||||
} |
||||
|
||||
function buildScss () { |
||||
return gulp.src(src) |
||||
.pipe(sass().on('error', sass.logError)) |
||||
.pipe(autoprefixer()) |
||||
.pipe(gulp.dest(dest)) |
||||
.pipe(rtlcss()) |
||||
.pipe(rename({ suffix: '-rtl' })) |
||||
.pipe(gulp.dest(dest)) |
||||
} |
||||
} |
||||
|
||||
gulp.task('lint-scss', function () { |
||||
return gulp |
||||
.src('ui/app/css/itcss/**/*.scss') |
||||
.pipe(gulpStylelint({ |
||||
reporters: [ |
||||
{ formatter: 'string', console: true }, |
||||
], |
||||
fix: true, |
||||
})) |
||||
}) |
||||
|
||||
// build js
|
||||
|
||||
const buildJsFiles = [ |
||||
'inpage', |
||||
'contentscript', |
||||
'background', |
||||
'ui', |
||||
'phishing-detect', |
||||
] |
||||
|
||||
// bundle tasks
|
||||
createTasksForBuildJsDeps({ filename: 'bg-libs', key: 'background' }) |
||||
createTasksForBuildJsDeps({ filename: 'ui-libs', key: 'ui' }) |
||||
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true }) |
||||
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:test-extension:js', devMode: true, testing: 'true' }) |
||||
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js' }) |
||||
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:test:extension:js', testing: 'true' }) |
||||
|
||||
function createTasksForBuildJsDeps ({ key, filename }) { |
||||
const destinations = browserPlatforms.map((platform) => `./dist/${platform}`) |
||||
|
||||
const bundleTaskOpts = Object.assign({ |
||||
buildSourceMaps: true, |
||||
sourceMapDir: '../sourcemaps', |
||||
minifyBuild: true, |
||||
devMode: false, |
||||
}) |
||||
|
||||
gulp.task(`build:extension:js:deps:${key}`, bundleTask(Object.assign({ |
||||
label: filename, |
||||
filename: `${filename}.js`, |
||||
destinations, |
||||
buildLib: true, |
||||
dependenciesToBundle: externalDependenciesMap[key], |
||||
}, bundleTaskOpts))) |
||||
} |
||||
|
||||
|
||||
function createTasksForBuildJsExtension ({ buildJsFiles, taskPrefix, devMode, testing, bundleTaskOpts = {} }) { |
||||
// inpage must be built before all other scripts:
|
||||
const rootDir = './app/scripts' |
||||
const nonInpageFiles = buildJsFiles.filter((file) => file !== 'inpage') |
||||
const buildPhase1 = ['inpage'] |
||||
const buildPhase2 = nonInpageFiles |
||||
const destinations = browserPlatforms.map((platform) => `./dist/${platform}`) |
||||
bundleTaskOpts = Object.assign({ |
||||
buildSourceMaps: true, |
||||
sourceMapDir: '../sourcemaps', |
||||
minifyBuild: !devMode, |
||||
buildWithFullPaths: devMode, |
||||
watch: devMode, |
||||
devMode, |
||||
testing, |
||||
}, bundleTaskOpts) |
||||
createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1, buildPhase2 }) |
||||
} |
||||
|
||||
function createTasksForBuildJs ({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) { |
||||
// bundle task for each file
|
||||
const jsFiles = [].concat(buildPhase1, buildPhase2) |
||||
jsFiles.forEach((jsFile) => { |
||||
gulp.task(`${taskPrefix}:${jsFile}`, bundleTask(Object.assign({ |
||||
label: jsFile, |
||||
filename: `${jsFile}.js`, |
||||
filepath: `${rootDir}/${jsFile}.js`, |
||||
externalDependencies: bundleTaskOpts.devMode ? undefined : externalDependenciesMap[jsFile], |
||||
destinations, |
||||
}, bundleTaskOpts))) |
||||
}) |
||||
// compose into larger task
|
||||
const subtasks = [] |
||||
subtasks.push(gulp.parallel(buildPhase1.map((file) => `${taskPrefix}:${file}`))) |
||||
if (buildPhase2.length) { |
||||
subtasks.push(gulp.parallel(buildPhase2.map((file) => `${taskPrefix}:${file}`))) |
||||
} |
||||
|
||||
gulp.task(taskPrefix, gulp.series(subtasks)) |
||||
} |
||||
|
||||
// clean dist
|
||||
|
||||
gulp.task('clean', function clean () { |
||||
return del(['./dist/*']) |
||||
}) |
||||
|
||||
// zip tasks for distribution
|
||||
gulp.task('zip:chrome', zipTask('chrome')) |
||||
gulp.task('zip:firefox', zipTask('firefox')) |
||||
gulp.task('zip:opera', zipTask('opera')) |
||||
gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:opera')) |
||||
|
||||
// high level tasks
|
||||
|
||||
gulp.task('dev:test', |
||||
gulp.series( |
||||
'clean', |
||||
'dev:scss', |
||||
gulp.parallel( |
||||
'dev:test-extension:js', |
||||
'test:copy', |
||||
'dev:reload' |
||||
) |
||||
) |
||||
) |
||||
|
||||
gulp.task('dev:extension', |
||||
gulp.series( |
||||
'clean', |
||||
'dev:scss', |
||||
gulp.parallel( |
||||
'dev:extension:js', |
||||
'dev:copy', |
||||
'dev:reload' |
||||
) |
||||
) |
||||
) |
||||
|
||||
gulp.task('build', |
||||
gulp.series( |
||||
'clean', |
||||
'build:scss', |
||||
gulpParallel( |
||||
'build:extension:js:deps:background', |
||||
'build:extension:js:deps:ui', |
||||
'build:extension:js', |
||||
'copy' |
||||
), |
||||
'optimize:images' |
||||
) |
||||
) |
||||
|
||||
gulp.task('build:test', |
||||
gulp.series( |
||||
'clean', |
||||
'build:scss', |
||||
gulpParallel( |
||||
'build:extension:js:deps:background', |
||||
'build:extension:js:deps:ui', |
||||
'build:test:extension:js', |
||||
'copy' |
||||
), |
||||
'manifest:testing' |
||||
) |
||||
) |
||||
|
||||
gulp.task('dist', |
||||
gulp.series( |
||||
'build', |
||||
'zip' |
||||
) |
||||
) |
||||
|
||||
// task generators
|
||||
|
||||
function zipTask (target) { |
||||
return () => { |
||||
return gulp.src(`dist/${target}/**`) |
||||
.pipe(zip(`metamask-${target}-${manifest.version}.zip`)) |
||||
.pipe(gulp.dest('builds')) |
||||
} |
||||
} |
||||
|
||||
function generateBundler (opts, performBundle) { |
||||
const browserifyOpts = assign({}, watchify.args, { |
||||
plugin: [], |
||||
transform: [], |
||||
debug: opts.buildSourceMaps, |
||||
fullPaths: opts.buildWithFullPaths, |
||||
}) |
||||
|
||||
const bundleName = opts.filename.split('.')[0] |
||||
|
||||
// activate sesify
|
||||
const activateAutoConfig = Boolean(process.env.SESIFY_AUTOGEN) |
||||
// const activateSesify = activateAutoConfig
|
||||
const activateSesify = activateAutoConfig && ['background'].includes(bundleName) |
||||
if (activateSesify) { |
||||
configureBundleForSesify({ browserifyOpts, bundleName }) |
||||
} |
||||
|
||||
if (!activateSesify) { |
||||
browserifyOpts.plugin.push('browserify-derequire') |
||||
} |
||||
|
||||
if (!opts.buildLib) { |
||||
if (opts.devMode && opts.filename === 'ui.js') { |
||||
browserifyOpts['entries'] = ['./development/require-react-devtools.js', opts.filepath] |
||||
} else { |
||||
browserifyOpts['entries'] = [opts.filepath] |
||||
} |
||||
} |
||||
|
||||
let bundler = browserify(browserifyOpts) |
||||
.transform('babelify') |
||||
// Transpile any dependencies using the object spread/rest operator
|
||||
// because it is incompatible with `esprima`, which is used by `envify`
|
||||
// See https://github.com/jquery/esprima/issues/1927
|
||||
.transform('babelify', { |
||||
only: [ |
||||
'./**/node_modules/libp2p', |
||||
], |
||||
global: true, |
||||
plugins: ['@babel/plugin-proposal-object-rest-spread'], |
||||
}) |
||||
.transform('brfs') |
||||
|
||||
if (opts.buildLib) { |
||||
bundler = bundler.require(opts.dependenciesToBundle) |
||||
} |
||||
|
||||
if (opts.externalDependencies) { |
||||
bundler = bundler.external(opts.externalDependencies) |
||||
} |
||||
|
||||
let environment |
||||
if (opts.devMode) { |
||||
environment = 'development' |
||||
} else if (opts.testing) { |
||||
environment = 'testing' |
||||
} else if (process.env.CIRCLE_BRANCH === 'master') { |
||||
environment = 'production' |
||||
} else if (/^Version-v(\d+)[.](\d+)[.](\d+)/.test(process.env.CIRCLE_BRANCH)) { |
||||
environment = 'release-candidate' |
||||
} else if (process.env.CIRCLE_BRANCH === 'develop') { |
||||
environment = 'staging' |
||||
} else if (process.env.CIRCLE_PULL_REQUEST) { |
||||
environment = 'pull-request' |
||||
} else { |
||||
environment = 'other' |
||||
} |
||||
|
||||
// Inject variables into bundle
|
||||
bundler.transform(envify({ |
||||
METAMASK_DEBUG: opts.devMode, |
||||
METAMASK_ENVIRONMENT: environment, |
||||
NODE_ENV: opts.devMode ? 'development' : 'production', |
||||
IN_TEST: opts.testing, |
||||
PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '', |
||||
PUBNUB_PUB_KEY: process.env.PUBNUB_PUB_KEY || '', |
||||
}), { |
||||
global: true, |
||||
}) |
||||
|
||||
if (opts.watch) { |
||||
bundler = watchify(bundler) |
||||
// on any file update, re-runs the bundler
|
||||
bundler.on('update', async (ids) => { |
||||
const stream = performBundle() |
||||
await endOfStream(stream) |
||||
livereload.changed(`${ids}`) |
||||
}) |
||||
} |
||||
|
||||
return bundler |
||||
} |
||||
|
||||
function bundleTask (opts) { |
||||
let bundler |
||||
|
||||
return performBundle |
||||
|
||||
function performBundle () { |
||||
// initialize bundler if not available yet
|
||||
// dont create bundler until task is actually run
|
||||
if (!bundler) { |
||||
bundler = generateBundler(opts, performBundle) |
||||
// output build logs to terminal
|
||||
bundler.on('log', log) |
||||
} |
||||
|
||||
let buildStream = bundler.bundle() |
||||
|
||||
// handle errors
|
||||
buildStream.on('error', (err) => { |
||||
beep() |
||||
if (opts.watch) { |
||||
console.warn(err.stack) |
||||
} else { |
||||
throw err |
||||
} |
||||
}) |
||||
|
||||
// process bundles
|
||||
buildStream = buildStream |
||||
// convert bundle stream to gulp vinyl stream
|
||||
.pipe(source(opts.filename)) |
||||
// buffer file contents (?)
|
||||
.pipe(buffer()) |
||||
|
||||
// Initialize Source Maps
|
||||
if (opts.buildSourceMaps) { |
||||
buildStream = buildStream |
||||
// loads map from browserify file
|
||||
.pipe(sourcemaps.init({ loadMaps: true })) |
||||
} |
||||
|
||||
// Minification
|
||||
if (opts.minifyBuild) { |
||||
buildStream = buildStream |
||||
.pipe(terser({ |
||||
mangle: { |
||||
reserved: [ 'MetamaskInpageProvider' ], |
||||
}, |
||||
})) |
||||
} |
||||
|
||||
// Finalize Source Maps
|
||||
if (opts.buildSourceMaps) { |
||||
if (opts.devMode) { |
||||
// Use inline source maps for development due to Chrome DevTools bug
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=931675
|
||||
buildStream = buildStream |
||||
.pipe(sourcemaps.write()) |
||||
} else { |
||||
buildStream = buildStream |
||||
.pipe(sourcemaps.write(opts.sourceMapDir)) |
||||
} |
||||
} |
||||
|
||||
// write completed bundles
|
||||
opts.destinations.forEach((dest) => { |
||||
buildStream = buildStream.pipe(gulp.dest(dest)) |
||||
}) |
||||
|
||||
return buildStream |
||||
|
||||
} |
||||
} |
||||
|
||||
function configureBundleForSesify ({ |
||||
browserifyOpts, |
||||
bundleName, |
||||
}) { |
||||
// add in sesify args for better globalRef usage detection
|
||||
Object.assign(browserifyOpts, sesify.args) |
||||
|
||||
// ensure browserify uses full paths
|
||||
browserifyOpts.fullPaths = true |
||||
|
||||
// record dependencies used in bundle
|
||||
fs.mkdirSync('./sesify', { recursive: true }) |
||||
browserifyOpts.plugin.push(['deps-dump', { |
||||
filename: `./sesify/deps-${bundleName}.json`, |
||||
}]) |
||||
|
||||
const sesifyConfigPath = `./sesify/${bundleName}.json` |
||||
|
||||
// add sesify plugin
|
||||
browserifyOpts.plugin.push([sesify, { |
||||
writeAutoConfig: sesifyConfigPath, |
||||
}]) |
||||
|
||||
// remove html comments that SES is alergic to
|
||||
const removeHtmlComment = makeStringTransform('remove-html-comment', { excludeExtension: ['.json'] }, (content, _, cb) => { |
||||
const result = content.split('-->').join('-- >') |
||||
cb(null, result) |
||||
}) |
||||
browserifyOpts.transform.push([removeHtmlComment, { global: true }]) |
||||
} |
||||
|
||||
function beep () { |
||||
process.stdout.write('\x07') |
||||
} |
||||
Loading…
Reference in new issue