Export "webpack helper" function to aid usage in downstream Webpack projects by waxlamp · Pull Request #473 · Kitware/candela

waxlamp · 2016-12-23T21:01:43Z

Publishes a function in candela/webpack.js to aid in adding loaders and other peculiar-to-Candela configuration to a downstream project's Webpack configuration in a black-box way
Moves source files from src/candela into the top level of the repo - this makes it easier for downstreams to include Candela sources in their projects:

import LineChart from 'candela/components/LineChart';

instead of

import LineChart from 'candela/src/candela/components/LineChart';

Updates the LineUp and UpSet dependencies to versions that don't cause problems when Candela is used downstream this way

TODO:

Generate new LineUp image test after verifying that the component is behaving properly
Adjust .npmignore to restrict what gets published to NPM
Update documentation

This is listed as a "feature" because it will make it easier for users of the library to use require() or import statements to include specific files in their own projects.

…ting config

waxlamp · 2016-12-23T21:02:28Z

@mgrauer, we can use this branch to try out importing Candela piecemeal into TrackerDash.

mgrauer · 2016-12-24T01:04:26Z

Is this ready for me to try, or would it be better to debug it together?

I've got in my downstream

import 'nvd3/build/nv.d3.min.css';
import './main.styl';
import candela from 'candela';
  
window.TrackerDash = candela.components.TrackerDash;

should that change?

☃️

waxlamp · 2016-12-27T15:29:00Z

You should be able to try it yourself, though I assume we will need to follow up with some debugging (either together or just me). Here are the steps to try it out:

Change your Candela dependency in package.json to "git+ssh://git@github.com/kitware/candela.git#webpack-helper".
Remove node_modules/candela.
Run npm prune if you like.
Run npm install.

Change the Candela import statement to

import TrackerDash from 'candela/components/TrackerDash';

and the next line to

window.TrackerDash = TrackerDash;

Rebuild the project.
Call/email/text/telegraph Roni with the list of errors.

jeffbaumes · 2017-01-03T14:32:44Z

Interesting. So this removes src and puts the components dir at the top level?

waxlamp · 2017-01-03T14:54:26Z

Yes, and also the VisComponents and util directories (essentially, everything "top-level"). It makes for a bit of an uglier codebase, which is the cost of a smoother downstream experience.

This also removes font-awesome from the dependencies list; it doesn't seem to be necessary.

… Webpack 2.x

…ounding it

…ame clash bug

…nfusion between import styles i.e. the following line ````javascript import candela from 'candela'; ```` will import the UMD bundle, while ````javascript import candela from 'candela/candela'; ```` will import the top-level file directly (allowing downstream Webpack to build it into something probably similar to the original bundle).

…candela

…not already

…arge test bundles

waxlamp · 2017-01-09T20:19:47Z

This is ready for review.

codecov-io · 2017-01-10T00:56:09Z

Codecov Report

Merging #473 into master will increase coverage by 0.28%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #473      +/-   ##
==========================================
+ Coverage   40.38%   40.66%   +0.28%     
==========================================
  Files          38       36       -2     
  Lines        1263     1237      -26     
==========================================
- Hits          510      503       -7     
+ Misses        753      734      -19

Impacted Files	Coverage Δ
components/TrackerDash/StatusBarWidget.js	`23.52% <ø> (ø)`
components/TrackerDash/colors.js	`100% <ø> (ø)`
components/OnSet/index.js	`13.63% <ø> (ø)`
components/ScatterPlot/index.js	`80% <ø> (ø)`
util/index.js	`73.33% <ø> (ø)`
components/index.js	`100% <ø> (ø)`
components/Histogram/index.js	`80% <ø> (ø)`
VisComponent/mixin/InitSize.js	`50% <ø> (ø)`
util/vega/index.js	`70.56% <ø> (ø)`
components/Geo/index.js	`20% <ø> (ø)`
... and 26 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4d1aa12...ad864f2. Read the comment docs.

jeffbaumes · 2017-02-03T11:56:23Z

When building from scratch just now, the Resize and Serialization examples give a Uncaught SyntaxError: Unexpected token import. Also, OnSet has an error saying $ is not found.

jeffbaumes · 2017-02-08T17:56:07Z

I pushed a fix for the Resize and Serialization examples. It was because candela.js was not going through Babel. I'm ok with the OnSet error getting offloaded to another issue that we solve separately.

jeffbaumes

This has been out there a while and its working to use this branch externally with a prototype Girder plugin, so LGTM.

waxlamp · 2017-02-08T18:30:38Z

Thanks Jeff. I notice that in addition to the undefined-$ problem, the resize examples don't actually resize. We can address that separately as well.

waxlamp added 11 commits December 16, 2016 13:43

refactor: Remove default.nix file

53cf491

feat(ParallelCoordinates): remove ParallelCoordinates component

220b40a

feat: Move all Candela source files down two levels (to top-level)

07b4517

This is listed as a "feature" because it will make it easier for users of the library to use require() or import statements to include specific files in their own projects.

test(unit): Make unit tests work with restructured source code

8366672

test(image): Make image tests work with restructured source code

2004d08

test: Fix exports test to point to proper built file

f6f583d

test: fix preloader paths for coverage tests

0d50f38

build(webpack): remove unnecessary resolve aliases and ProvidePlugin

364d565

build(webpack): Abstract loader paths into a variable

974fd99

build(webpack): remove CleanPlugin and restricted loader paths in tes…

12ef579

…ting config

build(webpack): abstract loader configuration into a standalone function

5ce898d

waxlamp changed the title ~~Export "webpack helper" function to aid usage in downstream Webpack projects~~ [WIP] Export "webpack helper" function to aid usage in downstream Webpack projects Dec 23, 2016

waxlamp force-pushed the webpack-helper branch from 682e463 to e9db735 Compare December 23, 2016 21:23

waxlamp added 7 commits January 5, 2017 13:33

build(npm): Move substantive dependencies to dependencies object

497065d

This also removes font-awesome from the dependencies list; it doesn't seem to be necessary.

build(webpack): shim the importing of font-awesome so it will work in…

ac704ce

… Webpack 2.x

feat(LineUp): Upgrade LineUp to 1.0.0 and simplify build process surr…

6d8f73d

…ounding it

test(unit): make VisComponent events tests more robust

cada74c

fix(npm): Change UpSet dependency to a PR branch with a fix for Set n…

5dbc193

…ame clash bug

build(webpack): exclude existing loaders from affecting node_modules/…

020a92c

…candela

waxlamp force-pushed the webpack-helper branch from 25bb0f3 to f9ef3ba Compare January 5, 2017 18:35

build(webpack): wrap existing loaders' exclude property in list if …

6248a22

…not already

waxlamp force-pushed the webpack-helper branch from f9ef3ba to 6248a22 Compare January 5, 2017 22:18

waxlamp added 2 commits January 9, 2017 13:22

test(image): directly supply components to showComponent() to avoid l…

5b1ce4e

…arge test bundles

test(LineUp): update LineUp test baseline image

fac205f

waxlamp added 4 commits January 9, 2017 13:45

build(npm): add several unnecessary source files to npmignore file

512b989

docs: fix a typo (missing period)

bdc5bba

style: bring code up to linting standard

cb7e344

docs: explain usage of candela/webpack.js helper function

b1ffa27

waxlamp changed the title ~~[WIP] Export "webpack helper" function to aid usage in downstream Webpack projects~~ Export "webpack helper" function to aid usage in downstream Webpack projects Jan 9, 2017

waxlamp requested a review from jeffbaumes January 9, 2017 20:20

Fix examples webpack

eff29dc

jeffbaumes approved these changes Feb 8, 2017

View reviewed changes

waxlamp added 2 commits February 13, 2017 11:32

build(webpack): replace font-awesome-webpack shim with direct dependency

04b13c3

style: remove unnecessary path import

ad864f2

waxlamp merged commit 2339d4b into master Feb 13, 2017

waxlamp deleted the webpack-helper branch February 13, 2017 18:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Export "webpack helper" function to aid usage in downstream Webpack projects#473

Export "webpack helper" function to aid usage in downstream Webpack projects#473
waxlamp merged 28 commits intomasterfrom
webpack-helper

waxlamp commented Dec 23, 2016 •

edited

Loading

Uh oh!

waxlamp commented Dec 23, 2016

Uh oh!

mgrauer commented Dec 24, 2016

Uh oh!

waxlamp commented Dec 27, 2016

Uh oh!

jeffbaumes commented Jan 3, 2017

Uh oh!

waxlamp commented Jan 3, 2017

Uh oh!

waxlamp commented Jan 9, 2017

Uh oh!

codecov-io commented Jan 10, 2017 •

edited

Loading

Uh oh!

jeffbaumes commented Feb 3, 2017

Uh oh!

jeffbaumes commented Feb 8, 2017

Uh oh!

jeffbaumes left a comment

Uh oh!

waxlamp commented Feb 8, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

waxlamp commented Dec 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

waxlamp commented Dec 23, 2016

Uh oh!

mgrauer commented Dec 24, 2016

Uh oh!

waxlamp commented Dec 27, 2016

Uh oh!

jeffbaumes commented Jan 3, 2017

Uh oh!

waxlamp commented Jan 3, 2017

Uh oh!

waxlamp commented Jan 9, 2017

Uh oh!

codecov-io commented Jan 10, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jeffbaumes commented Feb 3, 2017

Uh oh!

jeffbaumes commented Feb 8, 2017

Uh oh!

jeffbaumes left a comment

Choose a reason for hiding this comment

Uh oh!

waxlamp commented Feb 8, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

waxlamp commented Dec 23, 2016 •

edited

Loading

codecov-io commented Jan 10, 2017 •

edited

Loading