Skip to content

Commit 53b275c

Browse files
daveseahdaveseah
committed
add D3 library for both SimpleHTML and View types according to technical requirements
1 parent 7b4294a commit 53b275c

File tree

5 files changed

+303
-15
lines changed

5 files changed

+303
-15
lines changed

‎build/app/assets/htmldemos/simple/simple.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<title>SimpleHTML</title>
55
<script src="/scripts/netc-lib.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
67
<script src="/scripts/netc-app.js"></script>
78
<link rel="stylesheet" href="/styles/netc-app.css" type="text/css">
9+
810
</head>
911
<style>
1012
body {
@@ -22,6 +24,8 @@ <h2>Simple HTML in an IFRAME</h2>
2224
STORE.Initialize();
2325
STORE.Increment();
2426
const $ = require('jquery');
25-
$('body').append('<p>JQUERY ADDED THIS</p>');
27+
$('body').append('<p>JQUERY ADDED THIS. Now D3 will turn me red.</p>');
28+
// d3 is loaded
29+
d3.select("body").style("background-color", "red");
2630
</script>
2731
</html>

‎build/app/view/AppDefault.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
const React = require('react');
2+
const D3 = require('d3');
23

34
module.exports = class AppDefault extends React.Component {
45
render() {
56
return (
67
<p>AppDefault component</p>
78
);
89
}
10+
componentDidMount () {
11+
console.log('D3',D3);
12+
}
913
}
1014

11-

‎build/docs/dev_log.md‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,31 @@
1-
DEV LOG
1+
DEV LOG for WEEK STARTING FEB 26 2018
2+
3+
Q. Can I easily add D3 to our framework?
4+
A. The Brunch way says just NPM it. This works within the view modules, but not in simplehtml.
5+
For that, load the library from CDN.
6+
7+
8+
DEV LOG for WEEK STARTING FEB 19 2018
29

310
Q: Now that I have the module stuff figured out, can I load hyperapp merely by importing it?
4-
A: No, hyperapp has some weird dependency on babel. there are no docs on brunch+hyperapp, and it looks like hyperapp may not even support JSX in future.
11+
A: No, hyperapp has some weird dependency on babel. there are no docs on brunch+hyperapp, and it looks like hyperapp may not even support JSX in future.
512

613
Q: Adding bootstrap 4. Instead of installing it into the dev environment, I'm copying bootstrap, jquery3.2.1, and popper.js into the vendor directory.
14+
A: After figuring out how to modify brunch-config.js, I put this back into the package.json itself. Everything now runs cleanly on install.
15+
16+
Q: Let's add ReactBootstrap
17+
A: Added reactstrap for 4.0.0, which adds react-popper and react-transition
18+
Have to convert AppContainer to use the new reactstrap stuff
19+
20+
Q: Let's add Routing through ReactRouter
21+
A: ReactRouter has issues loading as an 'import' compatible library
22+
A: Changed all source to use CommonJS 'require'
23+
24+
Now that routing and components are available, can start to lay D3 into it. However, it would be nice to also just jump to a plain html file.
725

826

927
- - -
10-
BRUNCH BASICS
28+
NOTE: BRUNCH BASICS
1129

1230
* modular code is in app/, but module names do not include app in the path
1331
* the app/assets directory is special; it's copied as-is (without processing) to the root level of the public folder
@@ -23,21 +41,20 @@ note: had to install babel, babel-brunch, and then also configure babel through
2341

2442
npm install --save-dev auto-reload-brunch
2543

26-
27-
NOTE:
28-
29-
COMMONJS BASICS
44+
- - -
45+
NOTE: COMMONJS BASICS
3046

3147
Set module.exports to an object. The module object is set up by the loader I think and passed to our module code as it executes
3248
from: https://stackoverflow.com/questions/16383795
49+
3350
"module is a plain JavaScript object with an exports property. exports is a plain JavaScript variable that happens to be set to module.exports. At the end of your file, node.js will basically 'return' module.exports to the require function. A simplified way to view a JS file in Node could be this:"
3451

35-
Note that require() is a CommonJS function that loads CommonJS modules. The ES6 module command is import(). We can use both formats in brunch, but sometimes the browser seems to get confused and need to launch a new tab to clear state (???)
52+
Note that require() is a CommonJS function that loads CommonJS modules which is BRUNCH STANDARD. The ES6 module command is import() and is used by tools like Webpack. We can use both formats in brunch, but sometimes the browser seems to get confused and need to launch a new tab to clear state (???). Standardizing on Brunch's require() approach.
3653

3754
BRUNCH CONFIG
3855

39-
files.javascripts - 'joinTo' combines source files to designated destination file
40-
files.stylesheets - 'joinTo' combines css files to designated destination file
56+
files.javascripts - 'joinTo' combines source files to designated destination file
57+
files.stylesheets - 'joinTo' combines css files to designated destination file
4158
files.templates - 'joinTo' combines template to destination (???)
4259

4360
paths.public - where to put compiled output files (default 'public')

0 commit comments

Comments
 (0)