Moving to mixin-macros source code

Author: tomhodgins

README.md

@@ -8,7 +8,7 @@ This plugin is a JavaScript module that works with [JS-in-CSS stylesheets](https
 
 ## Downloading
 
-You can download `index.js` and add it to your codebase, or download it with npm:
+You can download jsincss-element-query and add it to your codebase manually, or download it with npm:
 
 ```bash
 npm install jsincss-element-query
@@ -18,26 +18,26 @@ Another option that works for building or testing, that isn't ideal for producti
 
 ```html
 <script type=module>
-  import element from 'https://unpkg.com/jsincss-element-query/index.js'
+  import element from 'https://unpkg.com/jsincss-element-query/index.vanilla.js'
 </script>
 ```
 
 ## Importing
 
-You can import the plugin into your own JavaScript modules in a couple of ways.
+This plugin exists in three different formats:
 
-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.js` file:
+- CommonJS module: [index.js](index.js)
+- Vanilla JS module: [index.vanilla.js](index.vanilla.js)
+- Browser function: [index.browser.js](index.browser.js)
 
-```js
-import element from './node_modules/jsincss-element-query/index.js'
-```
-
-If you want to use `require` to load this plugin instead, and use a bundler like Webpack or Parcel, make sure to add `.default` as you require it:
+You can import this plugin using the native [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) statement 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
-const element = require('jsincss-element-query').default
+import element from './index.vanilla.js'
 ```
 
+You can also use the CommonJS-formatted module located at [index.js](index.js) with `require()` for use with bundlers that don't use vanilla JS modules.
+
 Once you have imported this plugin into your module, you can use the plugin as `element()`
 
 ## Using JS-in-CSS Stylesheets
@@ -78,8 +78,8 @@ This example will use the `jsincss` plugin to load a JS-in-CSS stylesheet making
 
 ```html
 <script type=module>
-  import jsincss from 'https://unpkg.com/jsincss/index.js'
-  import element from 'https://unpkg.com/jsincss-element-query/index.js'
+  import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
+  import element from 'https://unpkg.com/jsincss-element-query/index.vanilla.js'
 
   jsincss(() => `
 
@@ -96,7 +96,7 @@ This example will use the `jsincss` plugin to load a JS-in-CSS stylesheet making
 It's also possible to write your stylesheets as a separate JavaScript module like this, where you import any helper plugins at the top of the stylesheet:
 
 ```js
-import element from 'https://unpkg.com/jsincss-element-query/index.js'
+import element from 'https://unpkg.com/jsincss-element-query/index.vanilla.js'
 
 export default () => `
 
@@ -112,7 +112,7 @@ export default () => `
 And then import both the `jsincss` plugin and the stylesheet into your code and run them like this, suppling any `selector` or `events` list the `jsincss` plugin might need to apply the stylesheet only the the element(s) and event(s) you require, depending on what you're doing:
 
 ```js
-import jsincss from 'https://unpkg.com/jsincss/index.js'
+import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
 import stylesheet from './path/to/stylesheet.js'
 
 jsincss(stylesheet)
@@ -121,7 +121,7 @@ jsincss(stylesheet)
 For a more advanced example, check out the [test](https://tomhodgins.github.io/jsincss-element-query/test/index) file which includes [element-query.js](test/element-query.js) and [element-query-scroll.js](test/element-query-scroll.js) and includes them in a module like this:
 
 ```javascript
-import jsincss from '//unpkg.com/jsincss/index.js'
+import jsincss from '//unpkg.com/jsincss/index.vanilla.js'
 import stylesheet from './element-query-test.js'
 import scrollStyles from './element-query-scroll-test.js'
 

index.browser.js

@@ -0,0 +1,58 @@
+function element(selector, conditions, stylesheet) {
+
+  const features = {
+     minWidth: (el, number) => number <= el.offsetWidth,
+     maxWidth: (el, number) => number >= el.offsetWidth,
+     minHeight: (el, number) => number <= el.offsetHeight,
+     maxHeight: (el, number) => number >= el.offsetHeight,
+     minChildren: (el, number) => number <= el.children.length,
+     children: (el, number) => number === el.children.length,
+     maxChildren: (el, number) => number >= el.children.length,
+     minCharacters: (el, number) => number <= ((el.value && el.value.length) || el.textContent.length),
+     characters: (el, number) => number === ((el.value && el.value.length) || el.textContent.length),
+     maxCharacters: (el, number) => number >= ((el.value && el.value.length) || el.textContent.length),
+     minScrollX: (el, number) => number <= el.scrollLeft,
+     maxScrollX: (el, number) => number >= el.scrollLeft,
+     minScrollY: (el, number) => number <= el.scrollTop,
+     maxScrollY: (el, number) => number >= el.scrollTop,
+     minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
+     maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
+     orientation: (el, string) => {
+       switch (string) {
+         case 'portrait': return el.offsetWidth < el.offsetHeight
+         case 'square': return el.offsetWidth === el.offsetHeight
+         case 'landscape': return el.offsetWidth > el.offsetHeight
+       }
+     }
+   }
+
+  return Array.from(document.querySelectorAll(selector))
+
+    .reduce((styles, tag, count) => {
+
+      const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
+
+      if (
+         Object.entries(conditions).every(test =>
+           features[test[0]](tag, test[1])
+         )
+       ) {
+
+        tag.setAttribute(`data-element-${attr}`, count)
+        styles += stylesheet.replace(
+          /:self|\$this/g,
+          `[data-element-${attr}="${count}"]`
+        )
+        count++
+
+      } else {
+
+        tag.setAttribute(`data-element-${attr}`, '')
+
+      }
+
+      return styles
+
+    }, '')
+
+}

index.js

@@ -1,62 +1,58 @@
-export default (selector, conditions, stylesheet) => {
+module.exports = (selector, conditions, stylesheet) => {
 
   const features = {
-    minWidth: (el, number) => number <= el.offsetWidth,
-    maxWidth: (el, number) => number >= el.offsetWidth,
-    minHeight: (el, number) => number <= el.offsetHeight,
-    maxHeight: (el, number) => number >= el.offsetHeight,
-    minChildren: (el, number) => number <= el.children.length,
-    children: (el, number) => number === el.children.length,
-    maxChildren: (el, number) => number >= el.children.length,
-    minCharacters: (el, number) => number <= ((el.value && el.value.length) || el.textContent.length),
-    characters: (el, number) => number === ((el.value && el.value.length) || el.textContent.length),
-    maxCharacters: (el, number) => number >= ((el.value && el.value.length) || el.textContent.length),
-    minScrollX: (el, number) => number <= el.scrollLeft,
-    maxScrollX: (el, number) => number >= el.scrollLeft,
-    minScrollY: (el, number) => number <= el.scrollTop,
-    maxScrollY: (el, number) => number >= el.scrollTop,
-    minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
-    maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
-    orientation: (el, string) => {
-      switch (string) {
-        case 'portrait': return el.offsetWidth < el.offsetHeight
-        case 'square': return el.offsetWidth === el.offsetHeight
-        case 'landscape': return el.offsetWidth > el.offsetHeight
-      }
-    }
-  }
+     minWidth: (el, number) => number <= el.offsetWidth,
+     maxWidth: (el, number) => number >= el.offsetWidth,
+     minHeight: (el, number) => number <= el.offsetHeight,
+     maxHeight: (el, number) => number >= el.offsetHeight,
+     minChildren: (el, number) => number <= el.children.length,
+     children: (el, number) => number === el.children.length,
+     maxChildren: (el, number) => number >= el.children.length,
+     minCharacters: (el, number) => number <= ((el.value && el.value.length) || el.textContent.length),
+     characters: (el, number) => number === ((el.value && el.value.length) || el.textContent.length),
+     maxCharacters: (el, number) => number >= ((el.value && el.value.length) || el.textContent.length),
+     minScrollX: (el, number) => number <= el.scrollLeft,
+     maxScrollX: (el, number) => number >= el.scrollLeft,
+     minScrollY: (el, number) => number <= el.scrollTop,
+     maxScrollY: (el, number) => number >= el.scrollTop,
+     minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
+     maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
+     orientation: (el, string) => {
+       switch (string) {
+         case 'portrait': return el.offsetWidth < el.offsetHeight
+         case 'square': return el.offsetWidth === el.offsetHeight
+         case 'landscape': return el.offsetWidth > el.offsetHeight
+       }
+     }
+   }
 
   return Array.from(document.querySelectorAll(selector))
 
     .reduce((styles, tag, count) => {
 
-      const identifier = (
-        selector
-        + Object.keys(conditions)
-        + Object.values(conditions)
-      ).replace(/\W/g, '')
+      const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
 
       if (
-        Object.entries(conditions).every(test =>
-          features[test[0]](tag, test[1])
-        )
-      ) {
+         Object.entries(conditions).every(test =>
+           features[test[0]](tag, test[1])
+         )
+       ) {
 
-        tag.setAttribute(`data-${identifier}`, count)
+        tag.setAttribute(`data-element-${attr}`, count)
         styles += stylesheet.replace(
           /:self|\$this/g,
-          `[data-${identifier}="${count}"]`
+          `[data-element-${attr}="${count}"]`
         )
         count++
 
       } else {
 
-        tag.setAttribute(`data-${identifier}`, '')
+        tag.setAttribute(`data-element-${attr}`, '')
 
       }
 
       return styles
 
     }, '')
 
-}
+}

index.vanilla.js

@@ -0,0 +1,58 @@
+export default (selector, conditions, stylesheet) => {
+
+  const features = {
+     minWidth: (el, number) => number <= el.offsetWidth,
+     maxWidth: (el, number) => number >= el.offsetWidth,
+     minHeight: (el, number) => number <= el.offsetHeight,
+     maxHeight: (el, number) => number >= el.offsetHeight,
+     minChildren: (el, number) => number <= el.children.length,
+     children: (el, number) => number === el.children.length,
+     maxChildren: (el, number) => number >= el.children.length,
+     minCharacters: (el, number) => number <= ((el.value && el.value.length) || el.textContent.length),
+     characters: (el, number) => number === ((el.value && el.value.length) || el.textContent.length),
+     maxCharacters: (el, number) => number >= ((el.value && el.value.length) || el.textContent.length),
+     minScrollX: (el, number) => number <= el.scrollLeft,
+     maxScrollX: (el, number) => number >= el.scrollLeft,
+     minScrollY: (el, number) => number <= el.scrollTop,
+     maxScrollY: (el, number) => number >= el.scrollTop,
+     minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
+     maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
+     orientation: (el, string) => {
+       switch (string) {
+         case 'portrait': return el.offsetWidth < el.offsetHeight
+         case 'square': return el.offsetWidth === el.offsetHeight
+         case 'landscape': return el.offsetWidth > el.offsetHeight
+       }
+     }
+   }
+
+  return Array.from(document.querySelectorAll(selector))
+
+    .reduce((styles, tag, count) => {
+
+      const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
+
+      if (
+         Object.entries(conditions).every(test =>
+           features[test[0]](tag, test[1])
+         )
+       ) {
+
+        tag.setAttribute(`data-element-${attr}`, count)
+        styles += stylesheet.replace(
+          /:self|\$this/g,
+          `[data-element-${attr}="${count}"]`
+        )
+        count++
+
+      } else {
+
+        tag.setAttribute(`data-element-${attr}`, '')
+
+      }
+
+      return styles
+
+    }, '')
+
+}

package.json

@@ -3,6 +3,7 @@
   "version": "1.1.2",
   "description": "An element query plugin for jsincss",
   "main": "index.js",
+  "module": "index.vanilla.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -11,6 +12,8 @@
     "url": "git+https://github.com/tomhodgins/jsincss-element-query.git"
   },
   "keywords": [
+    "jsincss",
+    "js-in-css",
     "element",
     "query",
     "container",

source/element.sexp

@@ -0,0 +1,36 @@
+mixin('element', ['selector', 'conditions', 'stylesheet'],
+  prelude('  const features = {\n\
+    minWidth: (el, number) => number <= el.offsetWidth,\n\
+    maxWidth: (el, number) => number >= el.offsetWidth,\n\
+    minHeight: (el, number) => number <= el.offsetHeight,\n\
+    maxHeight: (el, number) => number >= el.offsetHeight,\n\
+    minChildren: (el, number) => number <= el.children.length,\n\
+    children: (el, number) => number === el.children.length,\n\
+    maxChildren: (el, number) => number >= el.children.length,\n\
+    minCharacters: (el, number) => number <= ((el.value && el.value.length) || el.textContent.length),\n\
+    characters: (el, number) => number === ((el.value && el.value.length) || el.textContent.length),\n\
+    maxCharacters: (el, number) => number >= ((el.value && el.value.length) || el.textContent.length),\n\
+    minScrollX: (el, number) => number <= el.scrollLeft,\n\
+    maxScrollX: (el, number) => number >= el.scrollLeft,\n\
+    minScrollY: (el, number) => number <= el.scrollTop,\n\
+    maxScrollY: (el, number) => number >= el.scrollTop,\n\
+    minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,\n\
+    maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,\n\
+    orientation: (el, string) => {\n\
+      switch (string) {\n\
+        case \'portrait\': return el.offsetWidth < el.offsetHeight\n\
+        case \'square\': return el.offsetWidth === el.offsetHeight\n\
+        case \'landscape\': return el.offsetWidth > el.offsetHeight\n\
+      }\n\
+    }\n\
+  }\n\n',
+    returnValue('Array.from(document.querySelectorAll(selector))',
+      plainReduce(
+        createAttribute(['selector', 'Object.keys(conditions)', 'Object.values(conditions)'],
+          ifElseReset('\n\
+        Object.entries(conditions).every(test =>\n\
+          features[test[0]](tag, test[1])\n\
+        )\n\
+      ',
+            'tag',
+            'element'))))))

test/element-query-scroll.js

@@ -1,4 +1,4 @@
-import element from '../index.js'
+import element from '../index.vanilla.js'
 
 export default () => `
 

test/element-query.js

@@ -1,4 +1,4 @@
-import element from '../index.js'
+import element from '../index.vanilla.js'
 
 export default () => `
 

test/index.html

@@ -201,11 +201,11 @@ <h3>max-aspect-ratio</h3>
 <div class=maxaspectratio data-drag=both>class="maxaspectratio"</div>
 
 <script type=module>
-  import jsincss from 'https://unpkg.com/jsincss/index.js'
+  import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
   import stylesheet from './element-query.js'
   import scrollStyles from './element-query-scroll.js'
 
-  jsincss(stylesheet)
+  jsincss(stylesheet, window, ['load', 'resize', 'input', 'click', 'mouseup'])
   jsincss(scrollStyles, window, ['load'])
   jsincss(scrollStyles, '[class*="-scroll-"]', ['scroll'])
 </script>