release(v2.0.0-rc1) -- adds React JSX support

Author: Ændrew Rininsland

get-offline.js

@@ -3,41 +3,42 @@
  * Offline support
  */
 
-import Axios from "axios";
-import path from "path";
-import { createWriteStream } from "fs";
-import modules from "./modules";
+import Axios from 'axios';
+import path from 'path';
+import { createWriteStream } from 'fs';
+import modules from './modules';
 
 Promise.all(Object.entries(modules).map(item => downloadDependency(...item)))
-  .then(() => console.log("Done!"))
+  .then(() => console.log('Done!'))
   .catch(console.error);
 
-async function downloadDependency(pkg, url) {
+async function downloadDependency(pkg, origUrl) {
+  const url = origUrl.replace('npm:', 'https://unpkg.com/');
   const pkgName = /d3js\.org\/d3\./.test(url)
-    ? "d3"
+    ? 'd3'
     : /^@/.test(pkg)
-    ? pkg.slice(pkg.indexOf("/") + 1)
+    ? pkg.slice(pkg.indexOf('/') + 1)
     : pkg;
-  const outFile = path.resolve(__dirname, "offline", `${pkgName}.js`);
+  const outFile = path.resolve(__dirname, 'offline', `${pkgName}.js`);
   console.log(pkgName, url);
 
   // axios image download with response type "stream"
   const response = await Axios({
-    method: "GET",
-    url: url,
-    responseType: "stream"
+    method: 'GET',
+    url,
+    responseType: 'stream',
   });
 
   // pipe the result stream into a file on disc
   response.data.pipe(createWriteStream(outFile));
 
   // return a promise and resolve when download finishes
   return new Promise((resolve, reject) => {
-    response.data.on("end", () => {
+    response.data.on('end', () => {
       resolve();
     });
 
-    response.data.on("error", () => {
+    response.data.on('error', () => {
       reject();
     });
   });

index.js

@@ -9,15 +9,18 @@
  * in-browser tool for creating static print visualisations).
  */
 
-import SystemJS from "systemjs";
-import modules from "./modules.js";
+import SystemJS from 'systemjs';
+import modules from './modules.js';
 
 var config = {
+  paths: {
+    'npm:': 'https://unpkg.com/',
+  },
   map: Object.assign({}, modules, window.D3_BOOTLOADER_MODULES),
-  meta: { "*.json": { loader: "plugin-json" } },
-  transpiler: "plugin-babel"
+  meta: { '*.json': { loader: 'plugin-json' } },
+  transpiler: 'plugin-babel',
 };
 
 SystemJS.config(config);
 
-export default SystemJS.import("./index.js");
+export default SystemJS.import('./index.js');

modules.js

@@ -1,7 +1,6 @@
 export default {
-  '@financial-times/load-data':
-    'https://unpkg.com/@financial-times/load-data@^1.0.2/dist/loadData.dist.min.js',
-  'bertha-client': 'https://unpkg.com/[email protected]/dist/index.js',
+  '@financial-times/load-data': 'npm:@financial-times/load-data@^1.0.2/dist/loadData.dist.min.js',
+  'bertha-client': 'npm:[email protected]/dist/index.js',
   d3: 'https://d3js.org/d3.v4.js',
   'd3-array': 'https://d3js.org/d3.v4.js',
   'd3-axis': 'https://d3js.org/d3.v4.js',
@@ -24,9 +23,9 @@ export default {
   'd3-queue': 'https://d3js.org/d3.v4.js',
   'd3-random': 'https://d3js.org/d3.v4.js',
   'd3-request': 'https://d3js.org/d3.v4.js',
-  'd3-sankey': 'https://unpkg.com/[email protected]/build/d3-sankey.js',
+  'd3-sankey': 'npm:[email protected]/build/d3-sankey.js',
   'd3-scale': 'https://d3js.org/d3.v4.js',
-  'd3-selection-multi': 'https://unpkg.com/[email protected]/build/d3-selection-multi.js',
+  'd3-selection-multi': 'npm:[email protected]/build/d3-selection-multi.js',
   'd3-selection': 'https://d3js.org/d3.v4.js',
   'd3-shape': 'https://d3js.org/d3.v4.js',
   'd3-time-format': 'https://d3js.org/d3.v4.js',
@@ -35,19 +34,22 @@ export default {
   'd3-transition': 'https://d3js.org/d3.v4.js',
   'd3-voronoi': 'https://d3js.org/d3.v4.js',
   'd3-zoom': 'https://d3js.org/d3.v4.js',
-  'g-annotations': 'https://unpkg.com/g-annotations@^1/build/g-annotations.js',
-  'g-axis': 'https://unpkg.com/g-axis@^1/build/g-axis.js',
-  'g-chartcolour': 'https://unpkg.com/[email protected]/build/g-chartcolour.js',
-  'g-chartframe': 'https://unpkg.com/g-chartframe@^5/build/g-chartframe.js',
-  'g-legend': 'https://unpkg.com/g-legend@^1/build/g-legend.js',
-  'g-xaxisdate': 'https://unpkg.com/g-axis@^1/build/g-axis.js',
-  'g-yaxislinear': 'https://unpkg.com/g-axis@^1/build/g-axis.js',
-  'plugin-babel': 'https://unpkg.com/systemjs-plugin-babel/plugin-babel.js',
-  'plugin-json': 'https://unpkg.com/[email protected]/json.js',
-  'save-svg-as-png': 'https://unpkg.com/[email protected]/lib/saveSvgAsPng.js',
-  'simple-statistics': 'https://unpkg.com/[email protected]/dist/simple-statistics.js',
-  'systemjs-babel-build':
-    'https://unpkg.com/[email protected]/systemjs-babel-browser.js',
-  'topojson-client': 'https://unpkg.com/[email protected]/dist/topojson-client.js',
+  'g-annotations': 'npm:g-annotations@^1/build/g-annotations.js',
+  'g-axis': 'npm:g-axis@^1/build/g-axis.js',
+  'g-chartcolour': 'npm:[email protected]/build/g-chartcolour.js',
+  'g-chartframe': 'npm:g-chartframe@^5/build/g-chartframe.js',
+  'g-legend': 'npm:g-legend@^1/build/g-legend.js',
+  'g-xaxisdate': 'npm:g-axis@^1/build/g-axis.js',
+  'g-yaxislinear': 'npm:g-axis@^1/build/g-axis.js',
+  'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
+  'plugin-json': 'npm:[email protected]/json.js',
+  'save-svg-as-png': 'npm:[email protected]/lib/saveSvgAsPng.js',
+  'simple-statistics': 'npm:[email protected]/dist/simple-statistics.js',
+  'systemjs-babel-build': 'npm:[email protected]/systemjs-babel-browser.js',
+  'topojson-client': 'npm:[email protected]/dist/topojson-client.js',
+  '@financial-times/g-components': 'npm:object-assign@^2',
+  react: 'npm:react@^16.8',
+  'react-dom': 'npm:react-dom@^16.8',
+  'prop-types': 'npm:prop-types@^15',
   chai: 'https://www.chaijs.com/chai.js',
-};
+};

offline/index.js

@@ -24,7 +24,14 @@ const offlineModules = Object.entries(modules).reduce(
 
 const config = {
   map: offlineModules,
-  meta: { '*.json': { loader: 'plugin-json' } },
+  meta: {
+    '*.json': { loader: 'plugin-json' },
+    '*.js': {
+      babelOptions: {
+        react: true,
+      },
+    },
+  },
   transpiler: 'plugin-babel',
 };