Skip to content
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

bower to npm - angular-patternfly & dependencies #4641

Merged
merged 12 commits into from
Sep 25, 2018
Merged

bower to npm - angular-patternfly & dependencies #4641

merged 12 commits into from
Sep 25, 2018

Conversation

himdel
Copy link
Contributor

@himdel himdel commented Sep 11, 2018

Moving angular-patternfly to npm.

Issue #3734


This PR affects the following extra dependencies (moved from bower to npm, or from asset pipeline to webpack) - names and how to test each:

  • angular-bootstrap-switch - (load /network_router/new, see the "Administrative State" field)
  • angular-patternfly - angular.element('.ng-scope').injector().get('Notifications')
  • angular-ui-bootstrap - angular.element('.ng-scope').injector().get('$uibTooltip')
  • bootstrap - $.fn.modal
  • bootstrap-datepicker - $.fn.datepicker
  • bootstrap-select - $.fn.selectpicker
  • bootstrap-switch - $.fn.bootstrapSwitch
  • bootstrap-touchspin - $.fn.TouchSpin
  • c3 - window.c3
  • d3 - window.d3
  • eonasdan-bootstrap-datetimepicker - $.fn.datetimepicker
  • font-awesome - (menu icons work)
  • patternfly - (the page doesn't look weird)

(you can use bower prune to ensure these no longer exist in bower_components)


This will cause a console warning:

WARNING: Tried to load angular more than once.

That's inevitable until we upgrade angular-patternfly to a newer version - the current one depends on angular 1.5 exactly, but we're using 1.6 already.

(1.6 gets loaded first, then angular-patternfly tries to load 1.5 which outputs the warning and stops, so 1.6 does end up being used anyway)

@himdel
Copy link
Contributor Author

himdel commented Sep 11, 2018

bower prune removes the following additional packages, need to go through application* to move each => wip

@miq-bot
Copy link
Member

miq-bot commented Sep 12, 2018

This pull request is not mergeable. Please rebase and repush.

@himdel
Copy link
Contributor Author

himdel commented Sep 13, 2018

(current state: done, but $(..).selectpicker is missing, and possibly more - go through the list of affected packages and test each)

@himdel
Copy link
Contributor Author

himdel commented Sep 17, 2018

Looks like both bootstrap-datepicker and bootstrap-select end up getting their own copy of jquery under their own nested node_modules.

According to yarnpkg/yarn#3951, the problem is with the modules, they should mention jQuery as a peerDependency, not dependency.

We still can't use provide plugin to override the jquery version being used as long as there are any asset pipeline dependencies, trying to use imports-loader to do the right thing.

EDIT: seems to work, updated desciption 👍

@himdel
Copy link
Contributor Author

himdel commented Sep 17, 2018

@miq-bot remove_label wip

@miq-bot miq-bot changed the title [WIP] bower to npm - angular-patternfly & dependencies bower to npm - angular-patternfly & dependencies Sep 17, 2018
@miq-bot miq-bot removed the wip label Sep 17, 2018
@miq-bot
Copy link
Member

miq-bot commented Sep 18, 2018

This pull request is not mergeable. Please rebase and repush.

@himdel
Copy link
Contributor Author

himdel commented Sep 18, 2018

@miq-bot add_label wip

Back to wip :/

Looks like imports-loader gets ignored when babel-loader gets used.
So this only works when running webpcak with WEBPACK_EXCLUDE_NODE_MODULES=1

@miq-bot miq-bot changed the title bower to npm - angular-patternfly & dependencies [WIP] bower to npm - angular-patternfly & dependencies Sep 18, 2018
@miq-bot miq-bot added the wip label Sep 18, 2018
same version

this one is special because it brings a lot of dependencies
angular-patternfly depended on angular-bootstrap, thus moving the require to webpack-land, to pick the new recursive dependency

also moving patternfly itself, because related
not needed now that patternfly brings its own
moving bootstrap and all remaining bootstrap plugins to npm
(all of these are angular-patternfly deps)

also moving angular-bootstrap-switch because bootstrap-switch was moved
even though patternfly (or angular-patternfly) depend on these packages,
for some reason they end up installed *under* patternfly/node_modules

so only patternfly can require those
=> adding as an explicit dep so that we can too
no longer needed, we literally have only 2 bower deps remaining
both of these modules are missing jquery in peerDependencies, causing yarn to provide a separate copy of jquery in nested node_modules

that means they register themselves on the wrong jquery instance and are not available

overriding the exports shim to cause these to always use window.jQuery
for some packages, we need to disable their amd/commonjs boilerplate
we're using imports-loader to do that

but without WEBPACK_EXCLUDE_NODE_MODULES=1, this would not work because babel-loader would remove the changes

this makes it possible for babel-loader and imports-loader to coexist,
fixes bootstrap-select & bootstrap-datepicker
@himdel
Copy link
Contributor Author

himdel commented Sep 19, 2018

Moved imports-loader to loaders, so the two packages are fixed..

Still wip:

d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined
    at d3.js:8
    at Object../node_modules/d3/d3.js (d3.js:1)
    at __webpack_require__ (bootstrap:78)
    at Object../app/javascript/packs/globals.js (globals.js:37)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at globals-5c5fbcf….js:1
miq_formatters.self-…adf71.js?body=1:305 Uncaught ReferenceError: moment is not defined
    at miq_formatters.self-…adf71.js?body=1:305
config.js:75 Uncaught TypeError: Cannot read property 'time' of undefined
    at Object.<anonymous> (config.js:75)
    at e (bootstrap 61e4d3b…:19)
    at Object.<anonymous> (timeline.js:4)
    at e (bootstrap 61e4d3b…:19)
    at Object.<anonymous> (timeline.js:57)
    at e (bootstrap 61e4d3b…:19)
    at bootstrap 61e4d3b…:39
    at bootstrap 61e4d3b…:39
    at universalModuleDefinition:9
    at universalModuleDefinition:9
miq_application.self…21d46.js?body=1:197 Uncaught ReferenceError: moment is not defined
    at miqGetTZO (miq_application.self…21d46.js?body=1:197)
    at (index):405

@himdel
Copy link
Contributor Author

himdel commented Sep 20, 2018

Fixed d3 by skipping babel-loader, and added specs just to be sure.

when run under babel-loader, `(function() {})()` gets {} as this, instead of window
working around that
added the problematic modules to a spec, to prevent webpack-related regressions
@miq-bot
Copy link
Member

miq-bot commented Sep 20, 2018

Checked commits https://github.com/himdel/manageiq-ui-classic/compare/8cb0164256223017fc5ff00c189a0d6378a82a98~...81478bbd0440bab09b33a00a11649386529d158e with ruby 2.3.3, rubocop 0.52.1, haml-lint 0.20.0, and yamllint 1.10.0
0 files checked, 0 offenses detected
Everything looks fine. 🏆

@himdel
Copy link
Contributor Author

himdel commented Sep 20, 2018

@miq-bot remove_label wip

I hope :)

@miq-bot miq-bot changed the title [WIP] bower to npm - angular-patternfly & dependencies bower to npm - angular-patternfly & dependencies Sep 20, 2018
@miq-bot miq-bot removed the wip label Sep 20, 2018
@ZitaNemeckova
Copy link
Contributor

ZitaNemeckova commented Sep 24, 2018

Tested as said in description:

  • angular-bootstrap-switch - (load /network_router/new, see the "Administrative State" field)
  • angular-patternfly - angular.element('.ng-scope').injector().get('Notifications') - defined
  • angular-ui-bootstrap - angular.element('.ng-scope').injector().get('$uibTooltip') - defined
  • bootstrap - $.fn.modal - defined
  • bootstrap-datepicker - $.fn.datepicker - defined
  • bootstrap-select - $.fn.selectpicker - defined
  • bootstrap-switch - $.fn.bootstrapSwitch - defined
  • bootstrap-touchspin - $.fn.TouchSpin - defined
  • c3 - window.c3 - defined
  • d3 - window.d3 - defined
  • eonasdan-bootstrap-datetimepicker - $.fn.datetimepicker - defined
  • font-awesome - (menu icons work)
  • patternfly - (the page doesn't look weird)

LGTM 👍 I didn't find anything broken or errors in console.

@martinpovolny martinpovolny merged commit 0c8e6ba into ManageIQ:master Sep 25, 2018
@martinpovolny martinpovolny modified the milestones: Sprint 95 Ending Sep 24, 2018, Sprint 96 Ending Oct 8, 2018 Sep 25, 2018
@martinpovolny martinpovolny self-assigned this Sep 25, 2018
@himdel himdel deleted the bower-angular-patternfly branch September 25, 2018 13:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants