[webpack] break CSS and JS files while webpackin' (#3262)

* [webpack] break CSS and JS files while webpackin'

* cleaning up some templates

* Fix pylint issue

superset/__init__.py

@@ -32,19 +32,21 @@ app = Flask(__name__)
 app.config.from_object(CONFIG_MODULE)
 conf = app.config
 
+# Handling manifest file logic at app start
+MANIFEST_FILE = APP_DIR + '/static/assets/dist/manifest.json'
+get_manifest_file = lambda x: x
+manifest = {}
+try:
+    with open(MANIFEST_FILE, 'r') as f:
+        manifest = json.load(f)
+    get_manifest_file = lambda x: '/static/assets/dist/' + manifest.get(x, '')
+except Exception:
+    print("no manifest file found at " + MANIFEST_FILE)
+
 
 @app.context_processor
 def get_js_manifest():
-    manifest = {}
-    try:
-        with open(APP_DIR + '/static/assets/dist/manifest.json', 'r') as f:
-            manifest = json.load(f)
-    except Exception as e:
-        print(
-            "no manifest file found at " +
-            APP_DIR + "/static/assets/dist/manifest.json"
-        )
-    return dict(js_manifest=manifest)
+    return dict(js_manifest=get_manifest_file)
 
 
 for bp in conf.get('BLUEPRINTS'):

superset/assets/javascripts/SqlLab/index.jsx

@@ -10,7 +10,7 @@ import { initJQueryAjax } from '../modules/utils';
 import App from './components/App';
 import { appSetup } from '../common';
 
-import './main.css';
+import './main.less';
 import '../../stylesheets/reactable-pagination.css';
 import '../components/FilterableTable/FilterableTableStyles.css';
 

superset/assets/javascripts/SqlLab/main.less

@@ -161,7 +161,6 @@ div.Workspace {
     margin: 0px;
     border: none;
     font-size: 12px;
-    line-height: @line-height-base;
     background-color: transparent !important;
 }
 

superset/assets/javascripts/explore/index.jsx

@@ -19,7 +19,7 @@ import '../../stylesheets/reactable-pagination.css';
 appSetup();
 initJQueryAjax();
 
-const exploreViewContainer = document.getElementById('js-explore-view-container');
+const exploreViewContainer = document.getElementById('app');
 const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstrap'));
 const controls = getControlsState(bootstrapData, bootstrapData.form_data);
 delete bootstrapData.form_data;

superset/assets/javascripts/theme.js

@@ -1,2 +1,3 @@
 import '../stylesheets/less/index.less';
 import '../stylesheets/react-select/select.less';
+import '../stylesheets/superset.less';

superset/assets/package.json

@@ -108,6 +108,7 @@
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-react": "^7.0.1",
     "exports-loader": "^0.6.3",
+    "extract-text-webpack-plugin": "2.1.2",
     "file-loader": "^0.11.1",
     "github-changes": "^1.0.4",
     "ignore-styles": "^5.0.1",

superset/assets/webpack.config.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const path = require('path');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 // input dir
 const APP_DIR = path.resolve(__dirname, './');
@@ -14,7 +15,7 @@ const config = {
     fs: 'empty',
   },
   entry: {
-    'css-theme': APP_DIR + '/javascripts/css-theme.js',
+    theme: APP_DIR + '/javascripts/theme.js',
     common: APP_DIR + '/javascripts/common.js',
     addSlice: ['babel-polyfill', APP_DIR + '/javascripts/addSlice/index.jsx'],
     dashboard: ['babel-polyfill', APP_DIR + '/javascripts/dashboard/Dashboard.jsx'],
@@ -64,11 +65,24 @@ const config = {
         include: APP_DIR + '/node_modules/mapbox-gl/js',
         loader: 'babel-loader',
       },
-      /* for require('*.css') */
+      // Extract css files
       {
         test: /\.css$/,
         include: APP_DIR,
-        loader: 'style-loader!css-loader',
+        loader: ExtractTextPlugin.extract({
+          use: ['css-loader'],
+          fallback: 'style-loader',
+        }),
+      },
+      // Optionally extract less files
+      // or any other compile-to-css language
+      {
+        test: /\.less$/,
+        include: APP_DIR,
+        loader: ExtractTextPlugin.extract({
+          use: ['css-loader', 'less-loader'],
+          fallback: 'style-loader',
+        }),
       },
       /* for css linking images */
       {
@@ -92,12 +106,6 @@ const config = {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'file-loader',
       },
-      /* for require('*.less') */
-      {
-        test: /\.less$/,
-        include: APP_DIR,
-        loader: 'style-loader!css-loader!less-loader',
-      },
       /* for mapbox */
       {
         test: /\.json$/,
@@ -123,6 +131,7 @@ const config = {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
       },
     }),
+    new ExtractTextPlugin('[name].[chunkhash].css'),
   ],
 };
 if (process.env.NODE_ENV === 'production') {

superset/templates/superset/base.html

@@ -1,21 +1,12 @@
 {% extends "appbuilder/baselayout.html" %}
 
   {% block head_css %}
+    {{super()}}
     <link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
-    <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/superset.css" />
-    {{super()}}
-  {% endblock %}
-
-  {% block head_js %}
-    {{super()}}
-    {% with filename="css-theme" %}
-      {% include "superset/partials/_script_tag.html" %}
-    {% endwith %}
+    <link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
   {% endblock %}
 
   {% block tail_js %}
     {{super()}}
-    {% with filename="common" %}
-      {% include "superset/partials/_script_tag.html" %}
-    {% endwith %}
+    <script src="{{ js_manifest('common.js') }}"></script>
   {% endblock %}

superset/templates/superset/basic.html

@@ -12,15 +12,16 @@
     </title>
     {% block head_meta %}{% endblock %}
     {% block head_css %}
-      <link rel="stylesheet" type="text/css" href="/static/appbuilder/css/font-awesome.min.css" />
-      <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/superset.css" />
-      <link rel="stylesheet" type="text/css" href="/static/appbuilder/css/flags/flags16.css" />
       <link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
+      <link rel="stylesheet" type="text/css" href="/static/appbuilder/css/flags/flags16.css" />
+      <link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
+      <link rel="stylesheet" type="text/css" href="/static/appbuilder/css/font-awesome.min.css">
+      {% if entry %}
+        <link rel="stylesheet" type="text/css" href="{{ js_manifest(entry + '.css') }}" />
+      {% endif %}
     {% endblock %}
     {% block head_js %}
-      {% with filename="css-theme" %}
-        {% include "superset/partials/_script_tag.html" %}
-      {% endwith %}
+      <script src="{{ js_manifest('common.js') }}"></script>
     {% endblock %}
     <input
       type="hidden"
@@ -65,6 +66,9 @@
       </div>
     </div>
     {% block tail_js %}
+      {% if entry %}
+        <script src="{{ js_manifest(entry + '.js') }}"></script>
+      {% endif %}
     {% endblock %}
   </body>
 </html>

superset/templates/superset/dashboard.html

@@ -1,14 +1,6 @@
 {% extends "superset/basic.html" %}
 
-{% block head_js %}
-  {{ super() }}
-  {% with filename="dashboard" %}
-    {% include "superset/partials/_script_tag.html" %}
-  {% endwith %}
-{% endblock %}
-{% block title %}[dashboard] {{ dashboard_title }}{% endblock %}
 {% block body %}
-
 <div
   class="dashboard container-fluid"
   data-bootstrap="{{ bootstrap_data }}"

superset/templates/superset/explore.html

@@ -1,23 +0,0 @@
-{% extends "superset/basic.html" %}
-
-{% block title %}
-  {% if slc %}
-    [slice] {{ slc.slice_name }}
-  {% else %}
-    [explore] {{ table_name }}
-  {% endif %}
-{% endblock %}
-
-{% block body %}
-  <div
-    id="js-explore-view-container"
-    data-bootstrap="{{ bootstrap_data }}"
-  ></div>
-{% endblock %}
-
-{% block tail_js %}
-  {{ super() }}
-  {% with filename="explore" %}
-    {% include "superset/partials/_script_tag.html" %}
-  {% endwith %}
-{% endblock %}

superset/templates/superset/index.html

@@ -1,6 +0,0 @@
-{% extends "superset/basic.html" %}
-
-{% block tail_js %}
-  {{ super() }}
-  <script src="/static/assets/dist/index.entry.js"></script>
-{% endblock %}

superset/templates/superset/partials/_script_tag.html

@@ -1,5 +1,5 @@
 {% block tail_js %}
   <script
-    src="{{ '/static/assets/dist/' + js_manifest.get(filename + '.js', '') }}">
+    src="{{ js_manifest(filename + '.js') }}">
   </script>
 {% endblock %}

superset/templates/superset/profile.html

@@ -1,8 +0,0 @@
-{% extends "superset/basic.html" %}
-
-{% block tail_js %}
-  {{ super() }}
-  {% with filename="profile" %}
-    {% include "superset/partials/_script_tag.html" %}
-  {% endwith %}
-{% endblock %}

superset/templates/superset/sqllab.html

@@ -1,8 +0,0 @@
-{% extends "superset/basic.html" %}
-
-{% block tail_js %}
-  {{ super() }}
-  {% with filename="sqllab" %}
-    {% include "superset/partials/_script_tag.html" %}
-  {% endwith %}
-{% endblock %}

superset/templates/superset/welcome.html

@@ -1,12 +1,5 @@
 {% extends "superset/basic.html" %}
 
-{% block head_js %}
-  {{ super() }}
-  {% with filename="welcome" %}
-    {% include "superset/partials/_script_tag.html" %}
-  {% endwith %}
-{% endblock %}
-
 {% block title %}{{ _("Welcome!") }}{% endblock %}
 
 {% block body %}

superset/views/core.py

@@ -1093,12 +1093,16 @@ class Superset(BaseSupersetView):
         table_name = datasource.table_name \
             if datasource_type == 'table' \
             else datasource.datasource_name
+        if slc:
+            title = "[slice] " + slc.slice_name
+        else:
+            title = "[explore] " + table_name
         return self.render_template(
-            "superset/explore.html",
+            "superset/basic.html",
             bootstrap_data=json.dumps(bootstrap_data),
-            slice=slc,
-            standalone_mode=standalone,
-            table_name=table_name)
+            entry='explore',
+            title=title,
+            standalone_mode=standalone)
 
     @api
     @has_access_api
@@ -1723,7 +1727,8 @@ class Superset(BaseSupersetView):
 
         return self.render_template(
             "superset/dashboard.html",
-            dashboard_title=dash.dashboard_title,
+            entry='dashboard',
+            title='[dashboard] ' + dash.dashboard_title,
             bootstrap_data=json.dumps(bootstrap_data),
         )
 
@@ -2232,7 +2237,8 @@ class Superset(BaseSupersetView):
         """Personalized welcome page"""
         if not g.user or not g.user.get_id():
             return redirect(appbuilder.get_url_for_login)
-        return self.render_template('superset/welcome.html', utils=utils)
+        return self.render_template(
+            'superset/welcome.html', entry='welcome', utils=utils)
 
     @has_access
     @expose("/profile/<username>/")
@@ -2273,9 +2279,10 @@ class Superset(BaseSupersetView):
             }
         }
         return self.render_template(
-            'superset/profile.html',
+            'superset/basic.html',
             title=user.username + "'s profile",
             navbar_container=True,
+            entry='profile',
             bootstrap_data=json.dumps(payload, default=utils.json_iso_dttm_ser)
         )
 
@@ -2287,7 +2294,8 @@ class Superset(BaseSupersetView):
             'defaultDbId': config.get('SQLLAB_DEFAULT_DBID'),
         }
         return self.render_template(
-            'superset/sqllab.html',
+            'superset/basic.html',
+            entry='sqllab',
             bootstrap_data=json.dumps(d, default=utils.json_iso_dttm_ser)
         )
 appbuilder.add_view_no_menu(Superset)