Create JS resource with unique ID (#62)

* Do not emit a source map

* Create JS resource with unique ID

* Update automatically the page template

* Review template generation

* Clean up and refactor

- move static directory inside browser module
- update tests

src/collective/lazysizes/browser/__init__.py

@@ -1,10 +1,6 @@
 # -*- coding: utf-8 -*-
-from collective.lazysizes.config import JS
 from plone.app.layout.viewlets import ViewletBase
 
 
 class ResourcesViewlet(ViewletBase):
     """This viewlet inserts static resources on page header."""
-
-    def js(self):
-        return self.site_url + '/' + JS

src/collective/lazysizes/browser/configure.zcml

@@ -3,11 +3,17 @@
     xmlns:browser="http://namespaces.zope.org/browser"
     i18n_domain="collective.lazysizes">
 
+  <browser:resourceDirectory
+      name="collective.lazysizes"
+      directory="static"
+      layer="collective.lazysizes.interfaces.ILazySizesLayer"
+      />
+
   <browser:viewlet
       name="collective.lazysizes.resources"
       manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
       class=".ResourcesViewlet"
-      template="resources.pt"
+      template="static/resources.pt"
       permission="zope2.Public"
       />
 

src/collective/lazysizes/config.py

@@ -4,6 +4,4 @@
 
 PROJECTNAME = 'collective.lazysizes'
 
-JS = '++resource++collective.lazysizes/lazysizes.js'
-
 IS_PLONE_5 = api.env.plone_version().startswith('5')

src/collective/lazysizes/configure.zcml

@@ -24,12 +24,6 @@
       permission="collective.lazysizes.Setup"
       />
 
-  <browser:resourceDirectory
-      name="collective.lazysizes"
-      directory="static"
-      layer="collective.lazysizes.interfaces.ILazySizesLayer"
-      />
-
   <adapter
       for="* .interfaces.ILazySizesLayer"
       name="collective.lazysizes"

src/collective/lazysizes/tests/test_resources_viewlet.py

@@ -33,9 +33,9 @@ def get_viewlet(self, context, name='collective.lazysizes.resources'):
         return viewlet[0]
 
     def test_viewlet(self):
-        from collective.lazysizes.config import JS
         html = etree.HTML(self.viewlet())
         self.assertIn('async', html.xpath('//script')[0].attrib)
-        self.assertTrue(
-            html.xpath('//script')[0].attrib['src'],
-            'http://nohost/plone/' + JS)
+        # script name must include the hash of latest git commit
+        regexp = r'lazysizes-[\da-f]{7}\.js$'
+        self.assertRegexpMatches(
+            html.xpath('//script')[0].attrib['src'], regexp)

webpack/app/resources.pt

@@ -0,0 +1,3 @@
+<% for (let js in htmlWebpackPlugin.files.js) { %>
+  <script async tal:attributes="src <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.js[js] %>" />
+<% } %>

webpack/webpack.config.js

@@ -1,13 +1,24 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// get partial prefix of latest commit in webpack directory
+const childProcess = require('child_process');
+const gitCmd = 'git rev-list -1 HEAD --abbrev-commit $(pwd)'
+const gitHash = childProcess.execSync(gitCmd).toString().substring(0, 7);
+
+// clean up old script
+const path = `${__dirname}/../src/collective/lazysizes/browser/static`
+childProcess.execSync(`rm -f ${path}/lazysizes-*`);
+
 module.exports = {
   entry: [
     './app/lazysizes-icon.png',
     './app/lazysizes.js',
   ],
   output: {
-    filename: 'lazysizes.js',
+    filename: `lazysizes-${gitHash}.js`,
     library: 'lazysizes',
     libraryTarget: 'umd',
-    path: `${__dirname}/../src/collective/lazysizes/static`,
+    path: path,
     publicPath: '++resource++collective.lazysizes/',
   },
   module: {
@@ -46,5 +57,11 @@ module.exports = {
       ]
     }]
   },
-  devtool: 'source-map',
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: false,
+      filename: 'resources.pt',
+      template: 'app/resources.pt',
+    })
+  ]
 }