Merge pull request #85 from viljamis/feature/static-html

Render static html and show it together with Vue markup

README.md

@@ -50,7 +50,7 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http
 
 ## Changelog
 
-- `3.1.0` is the latest release.
+- `3.2.0` is the latest release.
 - See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
 
 ## Need more help?

config/docs.config.js

@@ -18,6 +18,7 @@ module.exports = {
       monospace: ["Consolas", "'Liberation Mono'", "Menlo", "monospace"],
     },
   },
+  renderRootJsx: path.join(__dirname, "../docs/components/Preview.js"),
   /**
    * Define a custom code highlighting theme.
    */

docs/components/Preview.js

@@ -0,0 +1,78 @@
+import CodeMirror from "codemirror"
+import CodeTabs from "../utils/tabs.js"
+
+function format(node, level) {
+  const indentBefore = new Array(level++ + 1).join("  ")
+  const indentAfter = new Array(level - 1).join("  ")
+  let textNode
+
+  for (let i = 0; i < node.children.length; i++) {
+    textNode = document.createTextNode("\n" + indentBefore)
+    node.insertBefore(textNode, node.children[i])
+
+    format(node.children[i], level)
+
+    if (node.lastElementChild == node.children[i]) {
+      textNode = document.createTextNode("\n" + indentAfter)
+      node.appendChild(textNode)
+    }
+  }
+
+  return node
+}
+
+export default previewComponent => {
+  // https://vuejs.org/v2/guide/render-function.html
+  return {
+    render(createElement) {
+      return createElement(previewComponent)
+    },
+    mounted() {
+      CodeTabs.clean()
+      const tabs = CodeTabs.create()
+      const strDiv = this.$el.innerHTML.replace(/<!---->/g, "").replace(/data-v-\w*=""/g, "")
+      const div = document.createElement("div")
+      div.innerHTML =
+        "<" +
+        this.$el.localName +
+        " class='" +
+        this.$el.className +
+        "'>" +
+        strDiv.trim() +
+        "</" +
+        this.$el.localName +
+        ">"
+
+      const elemText = format(div, 0).innerHTML.replace(/ class=""/g, "")
+      const elem = document.createElement("div")
+      const pre = document.createElement("pre")
+      const parent = document.querySelector("article div[class^='rsg--tab']")
+      pre.appendChild(document.createTextNode(elemText.trim()))
+      elem.appendChild(pre)
+      if (parent) {
+        // Allow some time to pass to make sure codemirror is visible first
+        setTimeout(() => {
+          parent.appendChild(elem)
+          parent.appendChild(tabs)
+
+          CodeMirror(
+            function(code) {
+              elem.parentNode.replaceChild(code, elem)
+              code.className += " vueds-html vueds-hidden"
+            },
+            {
+              value: pre.innerText || pre.textContent,
+              mode: "jsx",
+              lineNumbers: false,
+              readOnly: true,
+              dragDrop: false,
+              theme: "night",
+            }
+          )
+
+          CodeTabs.init()
+        }, 300)
+      }
+    },
+  }
+}

docs/docs.styles.scss

@@ -377,23 +377,87 @@ thead[class^="rsg--tableHead"] {
 }
 
 // Codemirror
+.vueds-html.cm-s-night.CodeMirror,
 .react-codemirror2 .CodeMirror.CodeMirror {
   background: mix($color-bleu-de-france, $color-rich-black, 10%);
   border-bottom-left-radius: $border-radius-default;
   border-bottom-right-radius: $border-radius-default;
+  box-sizing: border-box;
+  height: auto;
+  border: 0;
+  font-family: Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: $font-size-small;
+  margin: 0;
+  min-height: $space-xx-large / 1.5;
   margin-bottom: $space-base;
+  color: $color-white;
   padding: $space-base;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+// Code tabs
+div[class^="rsg--tab"] {
+  position: relative;
+  .vueds-tabs {
+    z-index: 5;
+    border-radius: $border-radius-default;
+    box-shadow: 0 2px 8px rgba($color-rich-black, 0.8);
+    overflow: hidden;
+    position: absolute;
+    top: $space-base;
+    right: $space-base;
+    .vueds-tab {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      border: 0;
+      margin: 0;
+      letter-spacing: $letter-spacing-large;
+      font-size: $font-size-small;
+      font-weight: $font-weight-semi-bold;
+      font-family: $font-family-text;
+      line-height: $line-height-small;
+      @include inset-squish-space($space-small);
+      cursor: pointer;
+      background: mix($color-bleu-de-france, $color-rich-black, 50%);
+      color: $color-white;
+      &:active {
+        background: mix($color-bleu-de-france, $color-rich-black, 45%);
+      }
+      &:focus {
+        outline: none;
+      }
+      &--active {
+        background: mix($color-bleu-de-france, $color-rich-black, 40%);
+        box-shadow: inset 0 2px 8px rgba($color-rich-black, 0.2);
+      }
+    }
+  }
+}
+
+.vueds-hidden {
+  opacity: 0;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  visibility: hidden;
 }
 
 .CodeMirror-scroll.CodeMirror-scroll {
   overflow: hidden !important;
 }
 
+.cm-s-night span.cm-variable,
 .cm-s-night span.cm-variable-2,
 .cm-s-night span.cm-bracket,
 .cm-s-night span.cm-tag {
   color: $color-bleu-de-france-light !important;
 }
+.cm-s-night span.cm-operator,
 .cm-s-night span.cm-number,
 .cm-s-night span.cm-attribute {
   color: $color-ucla-gold-light !important;

docs/utils/tabs.js

@@ -0,0 +1,42 @@
+/**
+ * This is Vue Design System’s helper util for code tabs
+ */
+
+export default {
+  clean() {
+    const oldElem = document.querySelector(".vueds-html")
+    const oldTabs = document.querySelector(".vueds-tabs")
+    if (oldElem) {
+      oldElem.parentNode.removeChild(oldElem)
+    }
+    if (oldTabs) {
+      oldTabs.parentNode.removeChild(oldTabs)
+    }
+  },
+  create() {
+    const tabs = document.createElement("div")
+    tabs.className = "vueds-tabs"
+    tabs.innerHTML =
+      "<button class='vueds-tab vue vueds-tab--active'>VUE</button><button class='vueds-tab html'>HTML</button>"
+    return tabs
+  },
+  init() {
+    const tabs = document.querySelectorAll(".vueds-tab")
+    if (tabs) {
+      tabs.forEach(function(element) {
+        element.addEventListener("click", event => {
+          event.preventDefault()
+          document.querySelector(".vueds-tab--active").classList.remove("vueds-tab--active")
+          element.classList.add("vueds-tab--active")
+          document.querySelector(".vueds-hidden").classList.remove("vueds-hidden")
+          if (event.target.classList.contains("html")) {
+            const container = document.querySelector("article div[class^='rsg--tab']")
+            container.querySelector("div").classList.add("vueds-hidden")
+          } else {
+            document.querySelector(".vueds-html").classList.add("vueds-hidden")
+          }
+        })
+      })
+    }
+  },
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-design-system",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Vue Design System is an open-source tool for building Design Systems with Vue.js",
   "author": "viljamis <[email protected]>",
   "main": "dist/system/system.js",

test/unit/jest.conf.js

@@ -24,5 +24,7 @@ module.exports = {
     "!<rootDir>/src/system.js",
     "!<rootDir>/docs/docs.helper.js",
     "!<rootDir>/docs/components/status/*",
+    "!<rootDir>/docs/components/Preview.js",
+    "!<rootDir>/docs/utils/tabs.js",
   ],
 }