WIP: Migrate to webpack

MaayanLab · Mar 25, 2022 · 91dabfb · 91dabfb
1 parent 573a4a5
commit 91dabfb
Show file tree

Hide file tree

Showing 78 changed files with 155,708 additions and 5,622 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ appyter-*
 build
 data
 dist
-venv
+venv
+*.map
diff --git a/appyter/profiles/biojupies/templates/biojupies/base.j2 b/appyter/profiles/biojupies/templates/biojupies/base.j2
@@ -12,7 +12,7 @@
 <script>
   require.config({
     paths: {
-      'bootstrap': {{ url_for('static', filename='js/lib/bootstrap/bootstrap.bundle.min')|jsonify }},
+      'bootstrap': {{ url_for('static', filename='js/lib/bootstrap')|jsonify }},
     },
     shim: {
       'bootstrap': ['jquery'],

diff --git a/appyter/profiles/biojupies/templates/biojupies/form.j2 b/appyter/profiles/biojupies/templates/biojupies/form.j2
@@ -1,16 +1,8 @@
 {% extends "default/form.j2" %}
 
 {% block body %}
-<div id="_content" class="container loading">
-  <div class="text-center"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>
-  <script>
-    require(['svelte'], function(svelte) {
-      svelte.render(
-        document.getElementById("_content"),
-        '{{ url_for('static', filename='js/form.js') }}',
-        JSON.parse(atob('{{ ({ 'fields': _fields, 'extras': _config.EXTRAS, 'debug': _config.DEBUG })|jsonify|btoa }}'))
-      )
-    })
-  </script>
+<div id="_content" class="svelte container loading">
+  {% include "fragments/loader.j2" %}
+  <script type="application/json">{{ dict(fields=_fields, js_url=url_for('static', filename='js/form.js'))|jsonify }}</script>
 </div>
 {% endblock %}
diff --git a/appyter/profiles/default/templates/default/base.j2 b/appyter/profiles/default/templates/default/base.j2
@@ -8,63 +8,14 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}" />
   {% endblock %}
   {% block script_head %}
-    <script>
-      window._config = {
-        STATIC_URL: {{ url_for('static', filename='')|jsonify }},
-        {% if 'catalog-integration' in _config.EXTRAS %}
-        keycloak: {
-          {# TODO: parameterize #}
-          params: {
-            url: 'https://keycloak.maayanlab.cloud/auth/',
-            realm: 'appyter',
-            clientId: 'appyter-library',
-          },
-          init: {
-            onLoad: 'check-sso',
-            silentCheckSsoRedirectUri: window.location.origin + {{ url_for('static', filename='silent-check-sso.html')|jsonify }}`,
-          },
-        },
-        {% endif %}
-      }
-    </script>
-    <script src="{{ url_for('static', filename='js/lib/requirejs/require.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/lib/require.js') }}"></script>
     <script>
       require.config({
         paths: {
-          'jquery': {{ url_for('static', filename='js/lib/jquery/jquery.min')|jsonify }},
-          'socketio': {{ url_for('static', filename='js/lib/socket.io/socket.io.min')|jsonify }},
-        },
-        shim: {
-          'socketio': {
-            exports: 'io'
-          },
+          'jquery': {{ url_for('static', filename='js/lib/jquery')|jsonify }},
         },
         waitSeconds: 200,
       })
-      define('socket', ['socketio'], function (io) {
-        return io({ path: {{ join_routes(_config.PREFIX, 'socket.io')|jsonify }} })
-      })
-      define('svelte', function () {
-        return {
-          render: function (self, file, props) {
-            require([file], function (Component) {
-              Object.assign(props, { window: window })
-              while (self.children.length > 0) self.children[0].remove()
-              var component = new Component.default({
-                target: self,
-                props: props,
-              })
-              self.classList.remove('loading')
-            }, function (err) {
-              while (self.children.length > 0) self.children[0].remove()
-              var el = document.createElement('div')
-              el.setAttribute('class', 'alert alert-danger')
-              el.textContent = err.toString()
-              self.append(el)
-            })
-          }
-        }
-      })
     </script>
   {% endblock %}
 </head>
@@ -73,25 +24,28 @@
   {% block body %}{% endblock %}
   {% block footer %}{% endblock %}
   {% block script %}
-    {% if _config.DEBUG %}
     <script>
-      require(['socket'], function (socket) {
-        var first_connect = true
-        socket.on('connect', function () {
-          if (first_connect === true) {
-            console.debug('connected')
-            first_connect = false
-          } else {
-            window.location.reload()
-          }
-        })
-        socket.on('livereload', function (data) {
-          console.debug('livereload')
-          window.location.reload()
+      require([{{ url_for('static', filename='js/index.js')|jsonify }}], function (appyter) {
+        appyter.init(window, {
+          DEBUG: {{ _config.DEBUG|jsonify }},
+          PROFILE: {{ _config.PROFILE|jsonify }},
+          EXTRAS: {{ _config.EXTRAS|jsonify }},
+          {% if 'catalog-integration' in _config.EXTRAS %}
+          keycloak: {
+            params: {
+              url: 'https://keycloak.maayanlab.cloud/auth/',
+              realm: 'appyter',
+              clientId: 'appyter-library',
+            },
+            init: {
+              onLoad: 'check-sso',
+              silentCheckSsoRedirectUri: window.location.origin + {{ url_for('static', filename='silent-check-sso.html')|jsonify }}`,
+            },
+          },
+          {% endif %}
         })
       })
     </script>
-    {% endif %}
   {% endblock %}
 </body>
 </html>
diff --git a/appyter/profiles/default/templates/default/landing.j2 b/appyter/profiles/default/templates/default/landing.j2
@@ -6,17 +6,9 @@
   <div class="col-sm-12">
     {% include "fragments/jupyter.j2" %}
 
-    <div id="_content" class="container loading">
-      <div class="text-center"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>
-      <script>
-        require(['svelte'], function(svelte) {
-          svelte.render(
-            document.getElementById("_content"),
-            '{{ url_for('static', filename='js/landing.js') }}',
-            JSON.parse(atob('{{ ({'nbdownload': _nb, 'extras': _config.EXTRAS, 'debug': _config.DEBUG })|jsonify|btoa }}'))
-          )
-        })
-      </script>
+    <div id="_content" class="svelte container loading">
+      {% include "fragments/loader.j2" %}
+      <script type="application/json">{{ dict(nbdownload=_nb, js_url='js/landing.js')|jsonify }}</script>
     </div>
   </div>
 </div>

diff --git a/appyter/profiles/default/templates/fragments/loader.j2 b/appyter/profiles/default/templates/fragments/loader.j2
@@ -0,0 +1 @@
+<div class="text-center"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>
diff --git a/appyter/profiles/default/templates/fragments/svelte-field.j2 b/appyter/profiles/default/templates/fragments/svelte-field.j2
@@ -1,12 +1,4 @@
-<div id={{ this.args.name|jsonify }} class="loading">
-  <div class="text-center"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>
-  <script>
-    require(['svelte'], function(svelte) {
-      svelte.render(
-        document.getElementById({{ this.args.name|jsonify }}),
-        {{ this.js_url|jsonify }},
-        JSON.parse(atob('{{ this|jsonify|btoa }}'))
-      )
-    })
-  </script>
+<div id={{ this.args.name|jsonify }} class="svelte loading">
+  {% include "fragments/loader.j2" %}
+  <script type="application/json">{{ dict(this, js_url=this.js_url)|jsonify }}</script>
 </div>
diff --git a/appyter/render/flask_app/static.py b/appyter/render/flask_app/static.py
@@ -38,11 +38,14 @@ def static(filename):
   static = get_static_fs()
   if static.exists(filename):
     return send_file(static.open(filename, 'rb'), attachment_filename=filename)
-  #
+    #
   try:
-    return send_from_directory(get_appyter_directory(f"profiles/{current_app.config['PROFILE']}/static"), path=filename)
-  except NotFound:
-    return send_from_directory(get_appyter_directory('profiles/default/static'), path=filename)
+    return send_from_directory(get_appyter_directory('static'), path=filename)
+  except:
+    try:
+      return send_from_directory(get_appyter_directory(f"static/profiles/{current_app.config['PROFILE']}"), path=filename)
+    except NotFound:
+      return send_from_directory(get_appyter_directory('static/profiles/default'), path=filename)
 
 @route_join_with_or_without_slash(core, '<path:path>', methods=['GET'])
 def data_files(path):
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,5 @@ appyter-* @@
     build
     data
     dist
-    venv
+    venv
+    *.map
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div class="text-center"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>