Use webpack (#826)

* Add changelog

* Move static files to webpack

* Review resources registry

* Review compose view

* Review content chooser

* Test fixes

* Initialize carousel tile after drop content

* Move static files to viewlet

* Move unload code into webpack

* Fix layout preview

* Add upgrade step

* Fix tests

* Review static resources for Plone 5

* Code review

* Update docs

* Code review

.gitignore

@@ -28,3 +28,4 @@ parts/
 report.html
 selenium*
 var/
+src/collective/cover/browser/static/

CHANGES.rst

@@ -6,7 +6,12 @@ There's a frood who really knows where his towel is.
 2.1b3 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
-- Nothing changed yet.
+- Deprecate resource registries; instead, we now use a viewlet in plone.htmlhead to load JavaScript code.
+  This simplifies maintainance of the add-on among multiple Plone versions.
+  [rodfersou]
+
+- Process static resources using webpack.
+  [rodfersou]
 
 
 2.1b2 (2018-10-04)

README.rst

@@ -153,6 +153,42 @@ Check the box next to ``collective.cover`` and click the 'Activate' button.
     You may have to empty your browser cache and save your resource registries
     in order to see the effects of the product installation.
 
+Development
+-----------
+
+We use `webpack <https://webpack.js.org/>`_ to process static resources on this package.
+`webpack`_ processes SCSS and JS files, minifies the resulting CSS and JS, and optimizes all images.
+
+To contribute, you should start the instance in one shell and start webpack watcher on another with the following command:
+
+.. code-block:: console
+
+    $ bin/watch-cover
+
+Then go to ``webpack/app`` folder and edit SCSS and JS files;
+`webpack`_ watcher will automatically create the final resources in the right place.
+
+There are also other commands added to handle more complex scenarios.
+
+The following command will set the buildout node installation in the system PATH,
+this way you can use `webpack`_ as described on their documentation.
+
+.. code-block:: console
+
+    $ bin/env-cover
+
+The following command generates JS and CSS without the minify step (it can be used to check the code being generated in a human readable way).
+
+.. code-block:: console
+
+    $ bin/debug-cover
+
+The following command rebuilds static files and exit (insted of keep watching the changes):
+
+.. code-block:: console
+
+    $ bin/build-cover
+
 Upgrading from 1.x to 2.x
 ^^^^^^^^^^^^^^^^^^^^^^^^^
 

buildout.cfg

@@ -17,6 +17,7 @@ parts +=
     pylint
     rebuild_i18n-sh
     robot
+    staticresources
 
 [checkversions]
 recipe = zc.recipe.egg
@@ -26,14 +27,10 @@ eggs = z3c.checkversions [buildout]
 recipe = plone.recipe.codeanalysis[recommended]
 directory = ${buildout:directory}/src/collective/cover
 clean-lines = True
-clean-lines-exclude = ${buildout:directory}/src/collective/cover/static/js/vendor/
-csslint = True
-csslint-bin = bin/csslint
+clean-lines-exclude = ${:directory}/browser/static
 debug-statements = True
 flake8-ignore = B901,D001,E501,P001,T000
 flake8-max-complexity = 12
-jshint = True
-jshint-bin = bin/jshint
 multiprocessing = True
 pre-commit-hook = True
 prefer-single-quotes = True
@@ -70,3 +67,17 @@ eggs =
 scripts =
     robot-server
     robot
+
+[node]
+recipe = gp.recipe.node
+version = 8.11.2
+npms = npm yarn
+scripts = npm yarn
+
+[staticresources]
+recipe = sc.recipe.staticresources
+name = collective.cover
+short_name = cover
+
+[versions]
+sc.recipe.staticresources = 1.1b5

src/collective/cover/browser/__init__.py

@@ -1 +1,6 @@
 # -*- coding: utf-8 -*-
+from plone.app.layout.viewlets import ViewletBase
+
+
+class ResourcesViewlet(ViewletBase):
+    """This viewlet inserts static resources on page header."""

src/collective/cover/browser/configure.zcml

@@ -154,4 +154,19 @@
       permission="zope2.View"
       />
 
+  <browser:resourceDirectory
+      name="collective.cover"
+      directory="static"
+      />
+
+  <browser:viewlet
+      name="collective.cover.resources"
+      for="..interfaces.ICover"
+      manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
+      class=".ResourcesViewlet"
+      template="static/resources.pt"
+      permission="zope2.Public"
+      layer="collective.cover.interfaces.ICoverLayer"
+      />
+
 </configure>

src/collective/cover/browser/static/README.rst

@@ -0,0 +1,3 @@
+.. note::
+    Content on this folder is generated automatically by `webpack <https://webpack.js.org/>`_.
+    Check package documentation for more information.

src/collective/cover/browser/templates/compose.pt

@@ -7,28 +7,6 @@
       i18n:domain="collective.cover">
 <body>
 
-<metal:js fill-slot="javascript_head_slot">
-    <script type="application/javascript"
-        tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-        tal:attributes="src string:${navroot}/++resource++collective.cover/js/compose.js">
-    </script>
-
-    <script type="application/javascript">
-      jQuery(document).ready(function() {
-        if (typeof(plone) !== 'undefined') {
-          jQuery(window).unload(plone.UnlockHandler.execute);
-        }
-      });
-    </script>
-</metal:js>
-
-<metal:styles fill-slot="style_slot">
-    <link rel="stylesheet" type="text/css" media="screen" href=""
-          tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-          tal:attributes="href string:${navroot}/++resource++collective.cover/css/cover.css"
-          />
-</metal:styles>
-
 <metal:main fill-slot="main">
     <div tal:define="layout nocall:context/@@layout"
         tal:replace="structure layout/render_compose" />

src/collective/cover/browser/templates/layoutedit.pt

@@ -6,28 +6,6 @@
       metal:use-macro="context/main_template/macros/master"
       i18n:domain="collective.cover">
     <body>
-        <metal:js fill-slot="javascript_head_slot">
-            <script type="application/javascript"
-                    tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                    tal:attributes="src string:${navroot}/++resource++collective.cover/js/vendor/jss.min.js">
-            </script>
-            <script type="application/javascript"
-                    tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                    tal:attributes="src string:${navroot}/++resource++collective.cover/js/layout_base.js">
-            </script>
-            <script type="application/javascript">
-            jQuery(document).ready(function() {
-                if (typeof(plone) !== 'undefined') {
-                    jQuery(window).unload(plone.UnlockHandler.execute);
-                }
-            });
-            </script>
-        </metal:js>
-        <metal:styles fill-slot="style_slot">
-            <link rel="stylesheet" type="text/css" media="screen" href=""
-                  tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                  tal:attributes="href string:${navroot}/++resource++collective.cover/css/layout_edit_201806251610.css" />
-        </metal:styles>
         <metal:main fill-slot="main">
             <tal:block tal:define="can_export_layout view/can_export_layout">
                 <div id="sidebar">

src/collective/cover/configure.zcml

@@ -33,11 +33,6 @@
   <include package=".tiles" />
   <include package=".upgrades" />
 
-  <browser:resourceDirectory
-      name="collective.cover"
-      directory="static"
-      />
-
   <class class=".widgets.selectpreview.SelectPreviewWidget">
     <require
         permission="zope.Public"

src/collective/cover/profiles/default/jsregistry.xml

@@ -1,18 +1,6 @@
 <?xml version="1.0"?>
 <object name="portal_javascripts">
-  <javascript id="++resource++collective.cover/js/contentchooser.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="True" />
   <javascript id="++resource++collective.js.bootstrap/js/bootstrap.min.js"
       cacheable="True" compression="none" cookable="True" enabled="True"
       expression="" inline="False" />
-  <javascript id="++resource++collective.cover/js/vendor/jquery.endless-scroll.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="True" />
-  <javascript id="++resource++collective.cover/js/layout_edit.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="True" />
-  <javascript id="++resource++collective.cover/js/main.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="False" />
 </object>

src/collective/cover/profiles/default/metadata.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <metadata>
-  <version>23</version>
+  <version>24</version>
   <dependencies>
     <dependency>profile-collective.js.galleria:default</dependency>
     <dependency>profile-collective.js.jqueryui:default</dependency>