// If this module depends on other JS modules, add any static imports here:
import someFunction from './someModule.js';

// Define variables available to this module's scope at the top:
const SOME_IMPORTANT_CONSTANT = 'messing with me may break things.';

function someInternalTask(param) {
  // Code related to this small task
  someFunction(param);
}

function myDefaultExportFunction() {
  // More function calls and code for this module ...
  someInternalTask(SOME_IMPORTANT_CONSTANT);
  // ...
}

export default myDefaultExportFunction;

export default function myDefaultExportFunction() {
  // More JS ...
}

const MY_CONST = 'some important string.';
const myRandomTest = (MY_CONST.search(/important\sstring\./g) !== -1);
let param = undefined;

if ( myRandomTest ) {
  import('./myModule').then((module) => {
    const defaultFunction = module.default; // Define the modules default func

    defaultFunction(param);
  });
}

window.addEventListener('load', () => {
  import('./myModule').then(({default: defaultFn}) => { // Much more concise
    // More code ...
    defaultFn();
  });
});

// Custom Webpack plugin to output the hash into a file.
// Filename/location: `./builtools/WebpackHashFilePlugin.js`
 
// 1.) Require any dependencies here:
const fs = require('fs'); // Built into Nodejs - no installation needed
const path = require('path'); // Built into Nodejs - no installation needed

// 2.) Create the plugins' class constructor and default options:
// Webpack 5 plugins require a class method with a constructor and options for setting defaults
class WebpackHashFilePlugin{ // Class constructor
  constructor (options){
    // 3.) Assign some default options which can be overridden when the plugin is initiated.
    this.options = Object.assign({}, {
      fileName: 'hash',
      path: '../_data.yml'
    }, options)
  }

  // 3.) The Webpack plugins' class needs an `apply(compiler)` method to hook into the `compiler`
  apply(compiler) {
    const options = this.options;
    // 4.) Here we add a 'hook' to 'tap' into the webpack-compiler's `stats` object. Pretty standard Webpack plugin code.
    compiler.hooks.done.tap("WebpackHashFilePlugin", stats => {
      // 5.) Setup some variables for accessing the plugins' options.
      const content = stats.hash; // The string held within this `const` will become the contents of the written file.
      const outputPath = options.path; // String representing the path to create the file (relative to plugin files' location, e.g. '../data/`.)
      const fileName = options.fileName; // String for the filename + extension (e.g. 'hash.yml').
      // 6. Uses Nodejs builtin `path` method to resolve the filename and location.
      const output = path.resolve(__dirname, outputPath, fileName);
      // 7. Use the Nodejs builtin `fs.writeFile()` to write the hash file containing the bundle's hash.
      fs.writeFile(output, content, (err) => { // `fs.writeFile()` takes 3 params: path containing the filename/extension/location, contents, and an error callback-function
        if (err) {
          console.error(err)
          return
        }
        // Log some info if the file is written successfully
        console.log(`Plugin: {WebpackHashFilePlugin} created: ${output}`);
        console.log(`Hash: ${content}`);
      });
   });
  }
};
// 8.) Export the plugins class
module.exports = WebpackHashFilePlugin;

const config = {
  output: {
    filename: '[name].[fullhash].js',
  },
  // More configuration below...
}

module.exports = config;

// Filename/location: `./webpack.config.js` file for Webpack v5
// 1.) Require the plugin:
const WebpackHashFilePlugin = require('./buildtools/WebpackHashFilePlugin'); // Our custom plugin found in `/buildtools`

// 2.) Add the plugin to your plugins array:
const plugins = [
  new WebpackHashFilePlugin({ // Initialize our custom plugin
    path: '../_data/',
    fileName: 'hash',    // Remove the '.yml' extension from fileName.
    fileExtension: 'yml' // Add a fileExtension option
  }),
];

const config = {
  plugins, // 3.) Reference the plugins array in the config
  entry: {
    'main': './assets/js/src/main.js',
  },
  // More Webpack configuration code here ...
}

module.exports = config;

fetch('/hash.json').then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
}).then((json) => {
  const hash = json.hash; // The hash is stored under the JSON object's hash key

  // Use the Webpack hash here
  console.log(hash);
  // Expected logged result: 'c1ffa09121e3327be06c' (or similar random string of the same length)
})

// class WebpackHashFilePlugin{
//    constructor (options){
        this.options = Object.assign({}, {
          fileName: 'hash',
          path: '../_data', // Remove the file-extension from path
          fileExtension: 'yml' // Add a `fileExtension` key with a value set to the file's extension (e.g. 'yml')
       }, options)
//   }

//  apply(compiler) {
//    const options = this.options;
//    compiler.hooks.done.tap("WebpackHashFilePlugin", stats => {

      let content; // Define content as an undefined `let` instead of a `const`.

      if (options.fileExtension == 'json') { // If the `fileExtension` option is set to 'json' ...
        content = `{\n  "hash": "${stats.hash}"\n}`; // ... Wrap the hash in an object with a `"hash"` key set to the hash.
      }

      if (options.fileExtension == 'yml') { // If the `fileExtension` option is 'yml' ...
        content = stats.hash; // ... Set the file contents to the hash itself.
      }

//    const outputPath = options.path;
//    const fileName = options.fileName;
      const extension = options.fileExtension;
      const output = path.resolve(__dirname, outputPath, `${fileName}.${extension}`); // Add the fileExtension - `${fileName}.${extension}`
//    fs.writeFile(output, content, (err) => {
//      if (err) {
//        console.error(err)
//        return
//      }
        // File written successfully
//      console.log(`Plugin: {WebpackHashFilePlugin} created ${output}`);
//      console.log(`Hash: ${content}`);
//      });
//   });
//  }
// };

// module.exports = WebpackHashFilePlugin;

// File: `./buildtools/WebpackHashFilePlugin.js`
// Save this file in the project's `./buildtools/` directory as `WebpackHashFilePlugin.js`

const fs = require('fs');
const path = require('path');

class WebpackHashFilePlugin {
  constructor (options){
    this.options = Object.assign({}, {
      fileName: 'hash',
      path: '../_data',
      fileExtension: 'yml'
   }, options)
  }

  apply(compiler) {
    const options = this.options;
    
    compiler.hooks.done.tap("WebpackHashFilePlugin", stats => {
      let content;

      if (options.fileExtension == 'json') {
        content = `{\n  "hash": "${stats.hash}"\n}`;
      }
      if (options.fileExtension == 'yml') {
        content = stats.hash;
      }

      const outputPath = options.path;
      const fileName = options.fileName;
      const extension = options.fileExtension;
      const output = path.resolve(__dirname, outputPath, `${fileName}.${extension}`);
      
      fs.writeFile(output, content, (err) => {
        if (err) {
          console.error(err)
          return
        }
        console.log(`Plugin: {WebpackHashFilePlugin} created ${output}`);
        console.log(`Hash: ${content}`);
      });
    });
  }
};

module.exports = WebpackHashFilePlugin;

// Filename/location: `./webpack.config.js` file for Webpack v5
// 1.) Require the plugin:
const WebpackHashFilePlugin = require('./buildtools/WebpackHashFilePlugin'); // Our custom plugin found in `/buildtools`

// 2.) Add the plugin to your plugins array:
const plugins = [
  new WebpackHashFilePlugin({ // One instance of the plugin for the YAML file
    path: '../_data/',
    fileName: 'hash',    // Remove the '.yml' extension from fileName.
    fileExtension: 'yml' // Add a fileExtension option
  }),
  new WebpackHashFilePlugin({ // Another instance of the plugin for the JSON file
    path: '../',
    fileName: 'hash',     // Remove the '.yml' extension from fileName.
    fileExtension: 'json' // Add a fileExtension option
  }),
];

const config = {
  plugins, // 3.) Reference the plugins array in the config
  entry: {
    'main': './assets/js/src/main.js',
  },
  // More Webpack configuration code here ...
}

module.exports = config;

function registerServiceWorker () {

}

export default registerServiceWorker;

// File: `./assets/js/src/registerServiceWorker.js`

function registerServiceWorker () {
  // 1.) Check if the browser supports service worker:
  if ('serviceWorker' in navigator) {
    // 2. Register the worker:
    // We can omit the optional scope parameter, it will default to a scope matching the worker's parent folder (and any sub-folders.)
    navigator.serviceWorker.register('./serviceworker.js')
    .then((reg) => {
      // registration worked
      console.log('Registration succeeded. Scope is ' + reg.scope);
    }).catch((error) => {
      // registration failed
      console.log('Registration failed with ' + error);
    });
  }
}

export default registerServiceWorker;

// File/location: `assets/js/src/main.js`
import '../../scss/main.scss';

document.addEventListener('DOMContentLoaded', () => {
  // Do not run service workers (or our module) inside of a 'DOMContentLoaded' listener!!
  // Essential JS ...
});

window.addEventListener('load', () => {
  // Load the service worker's module after page load with the ES6 `import()` method.
  import('./registerServiceWorker')
    .then( ({default: registerServiceWorker}) => registerServiceWorker() ) // Define modules' default and execute right away
    .catch( (err) => console.error('Error loading module', err) )
});

// Module that registers the service worker:
// File/location: `assets/js/src/registerServiceWorker.js`

function registerServiceWorker () {
  // Removed the: `if ( 'serviceWorker' in navigator )` check.
  navigator.serviceWorker.register('./serviceworker.js')
  .then((reg) => {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch((error) => {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

export default registerServiceWorker;

// Main entrypoint for JS bundle:
// File/location: `assets/js/src/main.js`

import '../../scss/main.scss';

window.addEventListener('load', () => {
  // Check for service worker compatibility so that users who don't need it...
  // won't unnecessarily import the module.
  if ('serviceWorker' in navigator) {
    import('./registerServiceWorker')
      .then(({ default: registerServiceWorker}) => registerServiceWorker())
      .catch((err) => console.error('Error loading module', err))
  }
});

// 1.) Create an event listener for the install event:
self.addEventListener('install', (event) => {
  // 2.) Use the `ExtendableEvent.waitUntil({ //... })` method to do some caching after installation:
  event.waitUntil(
    // 3.) Open a cache (or create if non-existing) and give it a version name:
    caches.open('v1').then((cache) => {
      // 4.) Use `cache.addAll([...])` method and pass it an array of 
      //     origin-relative URLs of the resources to cache:
      return cache.addAll([
        './index.html',
        './404.html',
        './sitemap.xml'
        // More items to cache ...
      ]);
    });
  );
});

// 6.) Create a fetch event-listener to intercept any network requests:
self.addEventListener('fetch', (event) => {
  // 7.) Use `events.responsdWith()` to "hijack" the network requests
  event.respondWith(
    // 8.) Check the cache for a key matching the request
    caches.match(event.request).then((resp) => {
      // 9.) Return the cached item if it exists, otherwise use a normal fetch() call to get the request from the network
      return resp || fetch(event.request).then((response) => {
        // 10.) After a fetch() call, for any items not in the cache, open the cache and add the missing item
        return caches.open('v1').then((cache) => {
          cache.put(event.request, response.clone());
          // 11.) Finally, hand off the response to be used by the document
          return response;
        });
      });
    })
  );
});

// 1.) Create an event listener for the install event:
self.addEventListener('install', (event) => {
  // 2.) Use the `ExtendableEvent.waitUntil({ //... })` method to 
  event.waitUntil(
    fetch('/hash.json').then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then((obj) => {
      const hash = obj.hash;
      console.log('Hash log 1: ' + hash);
      caches.open('v1').then((cache) => {
        return cache.addAll([
          './index.html',
          './404.html',
          `./assets/js/dist/main.${hash}.js`,
          `./assets/js/dist/main.${hash}.css`,
          `./assets/js/dist/29.${hash}.js`,
          `./assets/js/dist/314.${hash}.js`,
          `./assets/js/dist/671.${hash}.js`,
          `./assets/js/dist/909.${hash}.js`,
        ]);
      });
    })
    .catch((err) => {
      console.error(`Error in service worker's pre-install tasks: \n${err}`, err);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((resp) => {
      return resp || fetch(event.request).then((response) => {
        return caches.open('v1').then((cache) => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

self.addEventListener('activate', (event) => {
  const cacheKeeplist = ['v2']; // Caches that should NOT be deleted

  event.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (cacheKeeplist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});