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
Possibility to add babel plugins via registry #42
Conversation
mind adding a test of some kind? |
@pangratz - This looks good. |
index.js
Outdated
// add babel-plugins from the registry to the options.plugins | ||
var pluginWrappers = addonContext.registry.load('babel-plugin'); | ||
var babelPlugins = pluginWrappers.map(function(wrapper) { | ||
return wrapper.plugin; |
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.
Should the property under which the transformer is looked up be changed to transformer
? I copied this from the ember-cli-htmlbars
addon, where AST plugins are added like this ...
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.
I think they are called plugins in babel speak also, right?
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.
https://babeljs.io/docs/usage/plugins/ yep, I think it's ok then
done |
Do NOT merge yet, I have to check if the plugin lookup works as expected ... |
index.js
Outdated
@@ -52,6 +52,15 @@ function getOptions(addonContext) { | |||
} | |||
} | |||
|
|||
// add babel-plugins from the registry to the options.plugins | |||
var pluginWrappers = addonContext.registry.load('babel-plugin'); |
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.
Am I right that using addonContext.registry
only looks up plugins registered within this addon, aka in-repo-addon
s? Because if I'm using this in ember-cli-htmlbars-inline-precompile
and register a babel-plugin
it won't be picked up. Using addonContext.app.registry
instead correctly picks up the plugins registered in other addons. @rwjblue can you confirm this?
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 want addonContext.parent.registry
(addonContext.app
is not always available).
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.
Hmm, using addonContext.parent.registry.load('babel-plugin')
gives me a Cannot read property 'load' of undefined
.
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.
Would something like currently used to get the options be ok?
var registry = (addonContext.parent && addonContext.parent.registry) || (addonContext.app && addonContext.app.registry);
var pluginWrappers = registry.load('babel-plugin');
...
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.
I would prefer that we stash the registry instance we are passed for parent
in the setupPreprocessorRegistry
hook.
Something like:
setupPreprocessorRegistry: function(type, registry) {
if (type === 'parent') {
this.parentRegistry = registry;
}
}
Then you should be able to call addonContext.parentRegistry.load
without issue (or hacks).
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.
Nice!
Ok, so from my side this is good to go. I tested this within another addon and adding |
WOOT |
@stefanpenner - Any additional feedback / tweaks? |
I'll take a thorough look today. On my way to work now |
@stefanpenner - Any concerns after your review? |
have not had time to review. |
Since babel is moving so fast and features are added on an hourly basis, should there be some kind of check if the currently installed babel version satisfies the needs of the specific plugin? Something like: registry.add('babel-plugin', {
name: 'my-addon-using-babel-transformer',
plugin: BabelTransformerPlugin,
babelVersion: '5.2.10'
}); Where the required babel version might also be extractable from the addons' Currently all registered plugins of |
Having the allowed babel version range be required sounds nice. We could then use the Though, I think that could be done in a follow-up PR if @stefanpenner has had a chance to review this and is OK with it landing... |
👍 |
@stefanpenner - Ping |
I spoke with @stefanpenner about this at our last face to face meeting. We need an example app that has addons with differing versions of ember-cli-babel and using different plugins to make sure everything is handled correctly. Double checking that things are not shared is the main blocker for this PR. @pangratz - Do you think that you might be able to put together a demo app like that? |
I'm on it |
@rwjblue @stefanpenner I created a sample app at https://github.com/pangratz/ember-cli-babel-plugins-sample, which uses the
The sample app has a test case, which can only succeed when both plugins work (the first plugin replaces As the Travis run shows, everything works as expected... |
@pangratz this is a great start, thank you. The test case should at the very least, include another level of addons.
|
Do you have an idea how to check that options enabled in |
one idea, is to disable something like arrow functions in the parent, but enable them in one of the children. This idea should translate to babel-plugins as well. Two children addons, should be able to have deps on the same babel-plugin, but configure them differently. |
😳 I think I need help on how to set/overwrite the ember-cli-babel options from inside an addon. Where is the right place for that? |
I am pressed for time today, if you can put together an app that has the 3 layers described. (even if the options stuff doesn't work yet) I will attempt to dedicate some hours this weekend to it :) Once that lands, we can guage our current state. There may be a scenario, where we do a two step release. Releasing the more complex scenario later, I would prefer we don't though. If we must, i would like to have a clear path set. |
Ok, I gave it a try and removed the The The sample app uses I hope I understood you correctly regarding setup up the hierarchy and gave you both access to the relevant repos so you can check around if you have time ... |
@pangratz I will confirm, but I believe this is the scenario I was concerned this PR missed. |
there is a path, where we merge this in early. ANd explicity disallow the addon case, or hard-wire some of the common plugins we want. |
Let's just have a separate PR explicitly add the inline precompiler for now. I want to unblock the component integration test situation.... |
👍 |
Will create such a PR tomorrow ... |
Instead of creating a new PR I've updated this one by only adding whitelisted If you guys are ok with updating this PR, I will update the README accordingly and squash the commits. |
@rwjblue r? |
@rwjblue did you have time to think about the proposed interim solution in this PR? |
I haven't followed the latest developments in ember-cli, but have there been any changes regarding the addon-dependency-situation? |
Very interested by this PR... what's the status? |
This allows Ember-CLI addons to add custom babel transformations to the ember-cli-babel pipeline by registering a plugin using the `babel-plugin` type: ``` javascript // my-addon/index.js module.exports = { name: 'my-addon-using-babel-transformer', setupPreprocessorRegistry: function(type, registry) { var BabelTransformerPlugin = require('./babel-transformer-plugin'); registry.add('babel-plugin', { name: 'my-addon-using-babel-transformer', plugin: BabelTransformerPlugin }); } } // my-addon/babel-transformer-plugin.js module.exports = function(babel) { var t = babel.types; return new babel.Transformer('troll-transformer', { Literal: function(node) { if (node.value === true) { return t.literal(false); } else if (node.value === false) { return t.literal(true); } } }); } ```
In the previous commit a babel-plugin registered on the registry is added to the transformation pipeline. Since this doesn't work as expected for the case where an addon depends on such a babel-plugin but the app which uses the addon doesn't include the babel-plugin, we currently only support a whitelist of specific plugins until this is figured out and eventually work. This commit adds `ember-cli-htmlbars-inline-precompile` to the whitelisted plugins and adds a test that other registered plugins are not added to the transformation pipeline.
same question as above. |
What's the status? I would like to integrate babel-plugin-typecheck to my Ember apps and allowing for custom babel plugins is the only option I'm aware of. |
+1 |
I'm also interested in the status of this pull request :) |
An update on this would be great! 😄 |
I would really need an update on this issue. Because if it is not going to happen in the near future I'll have to rearrange my work packages. It is no problem but I just need to know. Thanks :) |
@mguida22 @lucasm-iRonin @Cryrivers @ffaubry @Iftahh what I ended up doing is the following: I created an in-repo-addon and applied my babel-transformations after the ember-cli-babel plugin and before ember-cli-uglify. For me this works fine, maybe this is a solution for you as well |
Going to close this for now... |
add tests for plugin options
This allows Ember-CLI addons to add custom babel transformations to the
ember-cli-babel pipeline by registering a plugin using the
babel-plugin
type:I will add a section to the README if this is accepted.
This addresses ember-cli/ember-cli-htmlbars-inline-precompile#7