-
Notifications
You must be signed in to change notification settings - Fork 779
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: ability to add external libs (axios) #990
Changes from all commits
8c4e7eb
770a386
d3137c0
55dbe8b
baf804d
0c5be83
c2fe01b
6e45ec0
d18d42b
216a2fc
629d0cd
1905cbd
18afbf4
e7bb4a2
38b9e85
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
build/tasks/generate-imports.js | ||
!lib/core/imports/index.js | ||
lib/core/imports/*.js | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
/*eslint-env node */ | ||
const UglifyJS = require('uglify-js'); | ||
|
||
module.exports = grunt => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is going to be difficult to maintain without tests preventing regression. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are tests validating axios in umd integration tests. As we add multiple libraries, we can enhance the tests around each library. |
||
grunt.registerMultiTask( | ||
'generate-imports', | ||
'Task for generating an axe.imports module with external dependencies.', | ||
function() { | ||
// Convenience method that utilises uglifyjs tree-transformer to unwrap umd module resolver | ||
const removeUMD = new UglifyJS.TreeTransformer(node => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should consider moving this to something like Babel (in the long-term). No need to change now. |
||
if (node.body[0].body.args.length <= 0) { | ||
throw new Error('Not a UMD wrapper as arguments are missing.'); | ||
} | ||
|
||
// the last (or only) argument in umd resolver is the factory to be mounted | ||
const umdFactory = | ||
node.body[0].body.args[node.body[0].body.args.length - 1]; | ||
const funcCall = new UglifyJS.AST_Call({ | ||
expression: umdFactory, | ||
args: umdFactory.argnames // pass arguments into self invoking func | ||
}); | ||
const statement = new UglifyJS.AST_SimpleStatement({ | ||
body: funcCall, | ||
start: { | ||
comments_before: node.start.comments_before // bring over comments | ||
} | ||
}); | ||
return new UglifyJS.AST_Toplevel({ body: [statement] }); | ||
}); | ||
|
||
// Convenience method that uses uglifyjs to parse a given code and run a transformer | ||
const unwrappedCode = (sourceCode, cb) => { | ||
try { | ||
const unWrappedCode = UglifyJS.parse(sourceCode) | ||
.transform(removeUMD) | ||
.print_to_string({ comments: true }); | ||
cb(null, unWrappedCode); | ||
} catch (e) { | ||
cb(e, null); | ||
} | ||
}; | ||
|
||
const hasUmdWrapper = sourceCode => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is a little scary and seems brittle. I think it's fine for now, since we know Axios has a UMD wrapper, but before we start adding more "imports", we may want to revisit this. |
||
return ( | ||
/typeof exports/.test(sourceCode) && | ||
/typeof define/.test(sourceCode) && | ||
/typeof module/.test(sourceCode) | ||
); | ||
}; | ||
|
||
const writeLibrary = (libName, factory) => { | ||
const lib = `axe.imports["${libName}"] = ${factory}`; | ||
const location = `./lib/core/imports/${libName}.js`; | ||
grunt.file.write(location, lib); | ||
}; | ||
|
||
/** | ||
* Process a given library to unwrapped UMD module if exists, and return the factory | ||
* @param {string} libName name of the library | ||
* @param {string} sourceUrl path to the distributable of the library | ||
*/ | ||
const processImport = (libName, sourceUrl) => { | ||
const sourceCode = grunt.file.read(sourceUrl); | ||
if (hasUmdWrapper(sourceCode)) { | ||
unwrappedCode(sourceCode, (err, factory) => { | ||
if (err) { | ||
// running uglifyjs transform in a try block, this is to catch any errors from the transform. | ||
throw new Error(err); | ||
} | ||
writeLibrary(libName, factory); | ||
}); | ||
} else { | ||
// assumption is that the library returns an IIFE | ||
writeLibrary(libName, sourceCode); | ||
} | ||
}; | ||
|
||
// Iterate through each library to import and process the code | ||
Object.keys(this.data).forEach(key => { | ||
processImport(key, this.data[key]); | ||
}); | ||
} | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/** | ||
* Namespace for imports which holds globals of external dependencies. | ||
* @namespace imports | ||
* @memberof axe | ||
*/ | ||
|
||
axe.imports = {}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,23 @@ | ||
describe('UMD window', function() { | ||
'use strict'; | ||
|
||
it('exposes axe as a property of window', function() { | ||
assert.strictEqual(window.axe, axe); | ||
it('should expose axe as a property of window', function() { | ||
assert.property(window, 'axe'); | ||
}); | ||
|
||
it('should ensure axe has prototype chained keys', function() { | ||
assert.hasAnyKeys(axe, ['utils', 'commons', 'core']); | ||
}); | ||
|
||
it('should expose not expose axios as a property of window', function() { | ||
assert.notProperty(window, 'axios'); | ||
}); | ||
|
||
it('should ensure axios is a mounted to axe.imports', function() { | ||
assert.hasAnyKeys(axe.imports, ['axios']); | ||
}); | ||
|
||
it('should ensure axios has prototype chained keys', function() { | ||
assert.hasAnyKeys(axe.imports.axios, ['get', 'request', 'options', 'post']); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You'll need to add this to gitignore as well.