allow the el option to accept an HTMLElement instance

docs/configuration.md

@@ -32,8 +32,8 @@ The config can also be defined as a function, in which case the first argument i
 
 ## el
 
-- Type: `String`
-- Default: `#app`
+- Type: `String | HTMLElement`
+- Default: `"#app"`
 
 The DOM element to be mounted on initialization. It can be a CSS selector string or an actual [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
 
@@ -43,6 +43,16 @@ window.$docsify = {
 };
 ```
 
+or
+
+```js
+const someElement = document.querySelector('#someElement');
+
+window.$docsify = {
+  el: someElement,
+};
+```
+
 ## repo
 
 - Type: `String`

src/core/util/dom.js

@@ -29,15 +29,30 @@ export const head = inBrowser && $.head;
 
 /**
  * Find elements
- * @param {String|Element} el The root element where to perform the search from
- * @param {Element} node The query
- * @returns {Element} The found DOM element
+ * @param {String|Element} elOrQuery The query to use on document, or the root element on which to use a query.
+ * @param {Element} query The query to use on elOrQuery if elOrQuery is an element.
+ * @returns {Element} If elOrQuery is an element and query is not provided, elOrQuery is returned. Otherwise, the found DOM element is returned.
  * @example
  * find('nav') => document.querySelector('nav')
  * find(nav, 'a') => nav.querySelector('a')
  */
-export function find(el, node) {
-  return node ? el.querySelector(node) : $.querySelector(el);
+export function find(elOrQuery, query) {
+  let root;
+
+  // f.e. dom.find('#foo') or dom.find(el)
+  if (arguments.length === 1) {
+    if (elOrQuery instanceof Element) {
+      return elOrQuery;
+    }
+    root = $;
+    query = elOrQuery;
+  }
+  // f.e. dom.find(el, "#foo")
+  else if (arguments.length === 2) {
+    root = elOrQuery;
+  }
+
+  return root.querySelector(query);
 }
 
 /**

test/integration/docsify.test.js

@@ -1,25 +1,48 @@
 const docsifyInit = require('../helpers/docsify-init');
 
-// Suite
-// -----------------------------------------------------------------------------
 describe('Docsify', function() {
-  // Tests
-  // ---------------------------------------------------------------------------
-  test('allows $docsify configuration to be a function', async () => {
-    const testConfig = jest.fn(vm => {
-      expect(vm).toBeInstanceOf(Object);
-      expect(vm.constructor.name).toEqual('Docsify');
-      expect(vm.$fetch).toBeInstanceOf(Function);
-      expect(vm.$resetEvents).toBeInstanceOf(Function);
-      expect(vm.route).toBeInstanceOf(Object);
-    });
+  describe('config options', () => {
+    test('allows $docsify configuration to be a function', async () => {
+      const testConfig = jest.fn(vm => {
+        expect(vm).toBeInstanceOf(Object);
+        expect(vm.constructor.name).toEqual('Docsify');
+        expect(vm.$fetch).toBeInstanceOf(Function);
+        expect(vm.$resetEvents).toBeInstanceOf(Function);
+        expect(vm.route).toBeInstanceOf(Object);
+      });
 
-    await docsifyInit({
-      config: testConfig,
+      await docsifyInit({
+        config: testConfig,
+      });
+
+      expect(typeof Docsify).toEqual('object');
+      expect(testConfig).toHaveBeenCalled();
     });
 
-    expect(typeof Docsify).toEqual('object');
-    expect(testConfig).toHaveBeenCalled();
+    describe('config.el', () => {
+      it('accepts an element instance', async () => {
+        const config = jest.fn(() => {
+          const app = document.querySelector('#app');
+          expect(app).toBeInstanceOf(HTMLElement);
+
+          return {
+            basePath: `${TEST_HOST}/docs/index.html#/`,
+            el: app,
+          };
+        });
+
+        await docsifyInit({
+          config,
+          testURL: `${TEST_HOST}/docs/index.html#/`,
+        });
+
+        expect(config).toHaveBeenCalled();
+
+        expect(document.querySelector('#main').textContent).toContain(
+          'A magical documentation site generator.'
+        );
+      });
+    });
   });
 
   test('provides the hooks and vm API to plugins', async () => {