[wip] Use yarn to manage frontend dependencies

.gitignore

@@ -72,3 +72,9 @@ player/static/mfr/*
 !.gitkeep
 
 .cache
+
+# JS
+#######################
+
+node_modules
+node_modules/*

AUTHORS.rst

@@ -33,3 +33,4 @@ Contributors
 - Addison Schiller `@AddisonSchiller <https://github.com/AddisonSchiller>`_
 - Longze Chen `@cslzchen https://github.com/cslzchen`_
 - Jonathon Love `@jonathon-love https://github.com/jonathon-love`_
+- Joshua Bird `@birdbrained https://github.com/birdbrained`_

Dockerfile

@@ -64,6 +64,10 @@ ENV GIT_COMMIT ${GIT_COMMIT}
 
 RUN python setup.py develop
 
+RUN apt-get install nodejs \
+    apt-get install npm \
+    && npm run build
+
 EXPOSE 7778
 
 CMD ["gosu", "www-data", "invoke", "server"]

README.md

@@ -47,6 +47,14 @@ invoke install
 invoke server
 ```
 
+Also set up node for frontend packages. The recommended package manager is `yarn`.
+Webpack is used to build the packages. A script is included in `package.json` for convenience.
+
+```bash
+yarn
+yarn build
+```
+
 ### Configuring
 
 MFR configuration is done through a JSON file (`mfr-test.json`) that lives in the `.cos` directory of your home directory.  If this is your first time setting up MFR or its sister project, [WaterButler](https://github.com/CenterForOpenScience/waterbutler/), you probably do not have this directory and will need to create it:

bla

@@ -0,0 +1,92 @@
+/* Copyright 2017 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+(function () {
+  var baseLocation;
+  if (typeof document !== 'undefined') {
+    baseLocation = new URL('./', document.currentScript.src);
+  } else if (typeof location !== 'undefined') {
+    // Probably worker -- walking subfolders until we will reach root.
+    baseLocation = location;
+    while (baseLocation.href.includes('/src/')) {
+      baseLocation = new URL('..', baseLocation);
+    }
+  } else {
+    throw new Error('Cannot configure SystemJS');
+  }
+
+  var PluginBabelPath = 'node_modules/systemjs-plugin-babel/plugin-babel.js';
+  var SystemJSPluginBabelPath =
+    'node_modules/systemjs-plugin-babel/systemjs-babel-browser.js';
+  var PluginBabelCachePath = 'external/systemjs/plugin-babel-cached.js';
+
+  var isCachingPossible = typeof indexedDB !== 'undefined' &&
+                          typeof TextEncoder !== 'undefined' &&
+                          typeof crypto !== 'undefined' &&
+                          typeof crypto.subtle !== 'undefined';
+
+  // When we create a bundle, webpack is run on the source and it will replace
+  // require with __webpack_require__. When we want to use the real require,
+  // __non_webpack_require__ has to be used.
+  // In this target, we don't create a bundle, so we have to replace the
+  // occurences of __non_webpack_require__ ourselves.
+  function babelPluginReplaceNonWebPackRequire(babel) {
+    return {
+      visitor: {
+        Identifier(path, state) {
+          if (path.node.name === '__non_webpack_require__') {
+            path.replaceWith(babel.types.identifier('require'));
+          }
+        },
+      },
+    };
+  }
+
+  SystemJS.config({
+    packages: {
+      '': {
+        defaultExtension: 'js',
+      },
+    },
+    paths: {
+      'pdfjs': new URL('src', baseLocation).href,
+      'pdfjs-web': new URL('web', baseLocation).href,
+      'pdfjs-test': new URL('test', baseLocation).href,
+      'pdfjs-lib': new URL('src/pdf', baseLocation).href,
+      'core-js': new URL('node_modules/core-js', baseLocation).href,
+    },
+    meta: {
+      '*': {
+        scriptLoad: false,
+        esModule: true,
+        babelOptions: {
+          env: false,
+          plugins: [babelPluginReplaceNonWebPackRequire],
+        },
+      },
+    },
+    map: {
+      'plugin-babel': new URL(PluginBabelPath, baseLocation).href,
+      'systemjs-babel-build':
+        new URL(SystemJSPluginBabelPath, baseLocation).href,
+      'plugin-babel-cached': new URL(PluginBabelCachePath, baseLocation).href,
+    },
+    transpiler: isCachingPossible ? 'plugin-babel-cached' : 'plugin-babel',
+  });
+})();
+
+

mfr/extensions/audio/templates/viewer.mako

@@ -3,5 +3,4 @@
     Your browser does not support the audio tag.
 </audio>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/codepygments/static/css/default.css

@@ -66,7 +66,7 @@ pre {
     overflow: auto;
     display: block;
     padding: 9.5px;
-    margin: 0px 0px 10px;
+    margin: 0px 0px 0px 0px;
     font-size: 13px;
     line-height: 1.42857;
     background-color: #F5F5F5;
@@ -80,4 +80,4 @@ code, kbd, pre, samp {
 
 * {
     box-sizing: border-box;
-}
+}

mfr/extensions/codepygments/templates/viewer.mako

@@ -1,8 +1,7 @@
-<link rel="stylesheet" href="${base}/css/default.css">
+<script src="/assets/codepygments.js"></script>
 
 <div style="word-wrap: break-word;" class="mfrViewer">
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/docx/templates/viewer.mako

@@ -2,5 +2,4 @@
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/image/templates/viewer.mako

@@ -1,4 +1,3 @@
 <img style="max-width: 100%;" src="${url}">
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/ipynb/templates/viewer.mako

@@ -1,5 +1,5 @@
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="${base}/css/ipynb.css">
+<link rel="stylesheet" href="/assets/ipynb.css">
 <link rel="stylesheet" href="${base}/css/pygments.css">
 <link rel="stylesheet" href="/static/css/default.css">
 
@@ -8,8 +8,7 @@
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>
 <script>
     (function () {
         MathJax.Hub.Config({

mfr/extensions/jamovi/templates/viewer.mako

@@ -2,5 +2,4 @@
   ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/jasp/templates/viewer.mako

@@ -2,5 +2,4 @@
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/jsc3d/templates/viewer.mako

@@ -16,8 +16,7 @@
    <img src="${base}/images/question-circle.png">
 </a>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>
 
 <!--[if !IE]><!-->
 <script type="text/javascript" src="${base}/js/jsc3d.js"></script>

mfr/extensions/md/templates/viewer.mako

@@ -4,5 +4,4 @@
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/pdb/templates/viewer.mako

@@ -1,7 +1,6 @@
 <div id="mfrViewer"></div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>
 <script>
     window.pymChild.sendMessage('embed', 'embed-responsive-16by9');
 </script>