Refactor to use textContent, add default listener for 'reprocess' event, simplify <style> writing logic

Author: tomhodgins

README.md

@@ -14,7 +14,7 @@ You can download jsincss and add it to your codebase manually, or download it wi
 npm install jsincss
 ```
 
-> Another option that works for building or testing, that isn't ideal for production use, is linking to the module directly from a CDN like unpkg:
+Another option that works for building or testing, that isn't ideal for production use, is linking to the module directly from a CDN like unpkg:
 
 ```html
 <script type=module>
@@ -29,10 +29,10 @@ You can import the plugin into your own JavaScript modules in a couple of ways.
 The first way is using the native [`import` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) in JavaScript. Here you can assign any name you want to the function you are importing, and you only need to provide a path to the plugin's `index.vanilla.js` file:
 
 ```js
-import jsincss from './node_modules/jsincss/index.vanilla.js'
+import jsincss from './index.vanilla.js'
 ```
 
-You can also use `require` to load this plugin instead with a bundler like Webpack or Parcel:
+You can also use `require()` to load this plugin instead with a bundler like Webpack or Parcel:
 
 ```js
 const jsincss = require('jsincss')

index.browser.js

@@ -1,59 +1,56 @@
-function registerEvent(target, event, id, stylesheet) {
+function jsincss(
+  stylesheet = '',
+  selector = window,
+  events = ['load', 'resize', 'input', 'click', 'reprocess']
+) {
 
-  return target.addEventListener(event, e => populateStylesheet(id, stylesheet))
+  function registerEvent(target, event, id, stylesheet) {
 
-}
+    return target.addEventListener(
+      event,
+      e => populateStylesheet(id, stylesheet)
+    )
 
-function populateStylesheet(id, stylesheet) {
+  }
 
-  let tag = document.querySelector(`#jsincss-${id}`)
+  function populateStylesheet(id, stylesheet) {
 
-  if (!tag) {
+    let tag = document.querySelector(`#jsincss-${id}`)
 
-    tag = document.createElement('style')
-    tag.id = `jsincss-${id}`
-    document.head.appendChild(tag)
+    if (!tag) {
 
-  }
+      tag = document.createElement('style')
+      tag.id = `jsincss-${id}`
+      document.head.appendChild(tag)
 
-  const generatedStyles = stylesheet()
-  const currentStyles = tag.innerHTML
+    }
 
-  if (!currentStyles
-       || (currentStyles && generatedStyles !== currentStyles)) {
+    const currentStyles = tag.textContent
+    const generatedStyles = stylesheet()
 
-    return tag.innerHTML = generatedStyles
+    if (!currentStyles || (generatedStyles !== currentStyles)) {
 
-  }
+      return tag.textContent = generatedStyles
 
-}
+    }
 
-function jsincss(stylesheet, selector, events) {
+  }
 
   let id = Date.now() + Math.floor(Math.random() * 100)
 
-  selector = selector || window
-  events = events || ['load', 'resize', 'input', 'click']
-
   if (selector === window) {
 
-    events.forEach(event => {
-
+    return events.forEach(event =>
       registerEvent(window, event, id, stylesheet)
-
-    })
+    )
 
   } else {
 
-    document.querySelectorAll(selector).forEach(tag => {
-
-      events.forEach(event => {
-
+    return document.querySelectorAll(selector).forEach(tag =>
+      events.forEach(event =>
         registerEvent(tag, event, id, stylesheet)
-
-      })
-
-    })
+      )
+    )
 
   }
 

index.js

@@ -1,59 +1,56 @@
-function registerEvent(target, event, id, stylesheet) {
+module.exports = function(
+  stylesheet = '',
+  selector = window,
+  events = ['load', 'resize', 'input', 'click', 'reprocess']
+) {
 
-  return target.addEventListener(event, e => populateStylesheet(id, stylesheet))
+  function registerEvent(target, event, id, stylesheet) {
 
-}
+    return target.addEventListener(
+      event,
+      e => populateStylesheet(id, stylesheet)
+    )
 
-function populateStylesheet(id, stylesheet) {
+  }
 
-  let tag = document.querySelector(`#jsincss-${id}`)
+  function populateStylesheet(id, stylesheet) {
 
-  if (!tag) {
+    let tag = document.querySelector(`#jsincss-${id}`)
 
-    tag = document.createElement('style')
-    tag.id = `jsincss-${id}`
-    document.head.appendChild(tag)
+    if (!tag) {
 
-  }
+      tag = document.createElement('style')
+      tag.id = `jsincss-${id}`
+      document.head.appendChild(tag)
 
-  const generatedStyles = stylesheet()
-  const currentStyles = tag.innerHTML
+    }
 
-  if (!currentStyles
-       || (currentStyles && generatedStyles !== currentStyles)) {
+    const currentStyles = tag.textContent
+    const generatedStyles = stylesheet()
 
-    return tag.innerHTML = generatedStyles
+    if (!currentStyles || (generatedStyles !== currentStyles)) {
 
-  }
+      return tag.textContent = generatedStyles
 
-}
+    }
 
-module.exports = (stylesheet, selector, events) => {
+  }
 
   let id = Date.now() + Math.floor(Math.random() * 100)
 
-  selector = selector || window
-  events = events || ['load', 'resize', 'input', 'click']
-
   if (selector === window) {
 
-    events.forEach(event => {
-
+    return events.forEach(event =>
       registerEvent(window, event, id, stylesheet)
-
-    })
+    )
 
   } else {
 
-    document.querySelectorAll(selector).forEach(tag => {
-
-      events.forEach(event => {
-
+    return document.querySelectorAll(selector).forEach(tag =>
+      events.forEach(event =>
         registerEvent(tag, event, id, stylesheet)
-
-      })
-
-    })
+      )
+    )
 
   }
 

index.vanilla.js

@@ -1,59 +1,56 @@
-function registerEvent(target, event, id, stylesheet) {
+export default function(
+  stylesheet = '',
+  selector = window,
+  events = ['load', 'resize', 'input', 'click', 'reprocess']
+) {
 
-  return target.addEventListener(event, e => populateStylesheet(id, stylesheet))
+  function registerEvent(target, event, id, stylesheet) {
 
-}
+    return target.addEventListener(
+      event,
+      e => populateStylesheet(id, stylesheet)
+    )
 
-function populateStylesheet(id, stylesheet) {
+  }
 
-  let tag = document.querySelector(`#jsincss-${id}`)
+  function populateStylesheet(id, stylesheet) {
 
-  if (!tag) {
+    let tag = document.querySelector(`#jsincss-${id}`)
 
-    tag = document.createElement('style')
-    tag.id = `jsincss-${id}`
-    document.head.appendChild(tag)
+    if (!tag) {
 
-  }
+      tag = document.createElement('style')
+      tag.id = `jsincss-${id}`
+      document.head.appendChild(tag)
 
-  const generatedStyles = stylesheet()
-  const currentStyles = tag.innerHTML
+    }
 
-  if (!currentStyles
-       || (currentStyles && generatedStyles !== currentStyles)) {
+    const currentStyles = tag.textContent
+    const generatedStyles = stylesheet()
 
-    return tag.innerHTML = generatedStyles
+    if (!currentStyles || (generatedStyles !== currentStyles)) {
 
-  }
+      return tag.textContent = generatedStyles
 
-}
+    }
 
-export default (stylesheet, selector, events) => {
+  }
 
   let id = Date.now() + Math.floor(Math.random() * 100)
 
-  selector = selector || window
-  events = events || ['load', 'resize', 'input', 'click']
-
   if (selector === window) {
 
-    events.forEach(event => {
-
+    return events.forEach(event =>
       registerEvent(window, event, id, stylesheet)
-
-    })
+    )
 
   } else {
 
-    document.querySelectorAll(selector).forEach(tag => {
-
-      events.forEach(event => {
-
+    return document.querySelectorAll(selector).forEach(tag =>
+      events.forEach(event =>
         registerEvent(tag, event, id, stylesheet)
-
-      })
-
-    })
+      )
+    )
 
   }
 

package.json

@@ -17,7 +17,6 @@
     "JIC",
     "css",
     "reprocessor",
-    "reprocessor",
     "stylesheet",
     "loader"
   ],