Refactor wrapify() completely without jQuery

_js/wrapify/__tests__/__snapshots__/index.test.js.snap

@@ -22,17 +22,17 @@ exports[`h3 with class 1`] = `
         <div
           class="body -hello"
         >
+          
+    
           <p>
             (install)
           </p>
+          
+  
         </div>
       </div>
     </div>
   </div>
-  
-    
-  
-  
 </div>
 `;
 
@@ -72,9 +72,14 @@ exports[`multiple h2s 1`] = `
         <div
           class="body"
         >
+          
+    
           <p>
             (install)
           </p>
+          
+
+    
         </div>
       </div>
       <div
@@ -86,23 +91,18 @@ exports[`multiple h2s 1`] = `
         <div
           class="body"
         >
+          
+    
           <p>
             (usage)
           </p>
+          
+
+    
         </div>
       </div>
     </div>
   </div>
-  
-    
-  
-
-    
-  
-    
-  
-
-    
   <div
     class="h2-section"
   >
@@ -135,9 +135,14 @@ exports[`multiple h2s 1`] = `
         <div
           class="body"
         >
+          
+    
           <p>
             (first)
           </p>
+          
+
+    
         </div>
       </div>
       <div
@@ -149,22 +154,17 @@ exports[`multiple h2s 1`] = `
         <div
           class="body"
         >
+          
+    
           <p>
             (second)
           </p>
+          
+  
         </div>
       </div>
     </div>
   </div>
-  
-    
-  
-
-    
-  
-    
-  
-  
 </div>
 `;
 
@@ -204,9 +204,14 @@ exports[`simple usage 1`] = `
         <div
           class="body"
         >
+          
+    
           <p>
             (install)
           </p>
+          
+
+    
         </div>
       </div>
       <div
@@ -218,21 +223,16 @@ exports[`simple usage 1`] = `
         <div
           class="body"
         >
+          
+    
           <p>
             (usage)
           </p>
+          
+  
         </div>
       </div>
     </div>
   </div>
-  
-    
-  
-
-    
-  
-    
-  
-  
 </div>
 `;

_js/wrapify/dom_helpers.js

@@ -0,0 +1,61 @@
+import matches from 'dom101/matches'
+
+/*
+ * Just like jQuery.append
+ */
+
+export function appendMany (el, children) {
+  children.forEach(child => { el.appendChild(child) })
+}
+
+/*
+ * Just like jQuery.nextUntil
+ */
+
+export function nextUntil (el, selector) {
+  const nextEl = el.nextSibling
+  return nextUntilTick(nextEl, selector, [])
+}
+
+function nextUntilTick (el, selector, acc) {
+  if (!el) return acc
+
+  const isMatch = matches(el, selector)
+  if (isMatch) return acc
+
+  return nextUntilTick(el.nextSibling, selector, [ ...acc, el ])
+}
+
+/*
+ * Just like jQuery.before
+ */
+
+export function before (reference, newNode) {
+  reference.parentNode.insertBefore(newNode, reference)
+}
+
+/*
+ * Like jQuery.children('selector')
+ */
+
+export function findChildren (el, selector) {
+  return [].slice.call(el.children)
+    .filter(child => matches(child, selector))
+}
+
+/**
+ * Creates a div
+ * @private
+ *
+ * @example
+ *
+ *     createDiv({ class: 'foo' })
+ */
+
+export function createDiv (props) {
+  const d = document.createElement('div')
+  Object.keys(props).forEach(key => {
+    d.setAttribute(key, props[key])
+  })
+  return d
+}

_js/wrapify/index.js

@@ -1,63 +1,84 @@
-import $ from 'jquery'
 import matches from 'dom101/matches'
 import addClass from 'dom101/add-class'
+import { appendMany, nextUntil, before, findChildren, createDiv } from './dom_helpers'
 
-/*
+/**
  * Wraps h2 sections into h2-section.
  * Wraps h3 sections into h3-section.
+ *
+ * @private
  */
 
 export default function wrapify (root) {
-  const $root = $(root)
+  // These are your H2 sections. Returns a list of .h2-section nodes.
+  const sections = wrapifyH2(root)
 
-  const $h2sections = groupify(root, {
+  // For each h2 section, wrap the H3's in them
+  sections.forEach(section => {
+    const bodies = findChildren(section, '[data-js-h3-section-list]')
+    bodies.forEach(body => { wrapifyH3(body) })
+  })
+}
+
+/**
+ * Wraps h2 sections into h2-section.
+ * Creates and HTML structure like so:
+ *
+ *     .h2-section
+ *       h2.
+ *         (title)
+ *       .body.h3-section-list.
+ *         (body goes here)
+ *
+ * @private
+ */
+
+function wrapifyH2 (root) {
+  return groupify(root, {
     tag: 'h2',
-    wrapper: '<div class="h2-section">',
+    wrapperFn: () => createDiv({ class: 'h2-section' }),
-    wrapperFn: () => {
+    bodyFn: () => createDiv({
-      const d = document.createElement('div')
+      class: 'body h3-section-list',
-      d.className = 'h2-section'
+      'data-js-h3-section-list': ''
-      return d
-    },
-    bodyFn: () => {
-      const d = document.createElement('div')
-      d.className = 'body h3-section-list'
-      d.setAttribute('data-js-h3-section-list', '')
-      return d
-    }
     })
+  })
+}
 
-  $($h2sections).each(function () {
+/**
-    const $body = $(this).children('[data-js-h3-section-list]')
+ * Wraps h3 sections into h3-section.
+ * Creates and HTML structure like so:
+ *
+ *     .h3-section
+ *       h3.
+ *         (title)
+ *       .body.
+ *         (body goes here)
+ *
+ * @private
+ */
 
-    groupify($body[0], {
+function wrapifyH3 (root) {
+  return groupify(root, {
     tag: 'h3',
-      wrapperFn: () => {
+    wrapperFn: () => createDiv({ class: 'h3-section' }),
-        const d = document.createElement('div')
+    bodyFn: () => createDiv({ class: 'body' })
-        d.className = 'h3-section'
-        return d
-      },
-      bodyFn: () => {
-        const d = document.createElement('div')
-        d.className = 'body'
-        return d
-      }
-    })
   })
 }
 
-/*
+/**
- * Groups stuff
+ * Groups all headings (a `tag` selector) under wrappers like `.h2-section`
+ * (build by `wrapperFn()`).
+ * @private
  */
 
 export function groupify (el, { tag, wrapperFn, bodyFn }) {
   const first = el.children[0]
-  const $first = $(first)
   let result = []
 
   // Handle the markup before the first h2
   if (first && !matches(first, tag)) {
     const sibs = nextUntil(first, tag)
-    result.push(wrap(first, null, [ $first[0], ...sibs ]))
+    result.push(wrap(first, null, [ first, ...sibs ]))
   }
 
   // Find all h3's inside it
@@ -87,47 +108,3 @@ export function groupify (el, { tag, wrapperFn, bodyFn }) {
     return wrap
   }
 }
-
-/*
- * Just like jQuery.append
- */
-
-function appendMany (el, children) {
-  children.forEach(child => { el.appendChild(child) })
-}
-
-/*
- * Just like jQuery.nextUntil
- */
-
-function nextUntil (el, selector) {
-  const nextEl = el.nextSibling
-  return nextUntilTick(nextEl, selector, [])
-}
-
-function nextUntilTick (el, selector, acc) {
-  if (!el) return acc
-
-  const isMatch = matches(el, selector)
-  if (isMatch) return acc
-
-  return nextUntilTick(el.nextSibling, selector, [ ...acc, el ])
-}
-
-/*
- * Just like jQuery.before
- */
-
-function before (reference, newNode) {
-  reference.parentNode.insertBefore(newNode, reference)
-}
-
-/*
- * Like jQuery.children('selector')
- */
-
-function findChildren (el, selector) {
-  return [].slice.call(el.children)
-    .filter(child => matches(child, selector))
-}
-

_support/webpack.config.js

@@ -8,7 +8,6 @@ module.exports = {
     app: './_js/app.js',
     vendor: [
       // Large 3rd-party libs
-      'jquery',
       'prismjs',
 
       // Prism plugins