Update Build Workflow

vanillawc · Jun 30, 2020 · 25617e1 · 25617e1
1 parent d3afaba
commit 25617e1
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 39 deletions.
diff --git a/.config/main.config.js b/.config/main.config.js
diff --git a/.config/min.config.js b/.config/min.config.js
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,3 @@
-.config/
 .github/
 .vscode/
 dev/

diff --git a/index.js b/index.js
@@ -1,20 +1,18 @@
-/* eslint no-undef: 0 */
+// src/wc-bullet-chain.js
 class WCBulletChain extends HTMLElement {
-  constructor () {
+  constructor() {
     super();
-    const template = document.createElement('template');
+    const template = document.createElement("template");
     template.innerHTML = WCBulletChain.template();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({mode: "open"});
     this.shadowRoot.appendChild(document.importNode(template.content, true));
   }
-
-  async connectedCallback () {
-    const ul = this.shadowRoot.querySelector('ul');
+  async connectedCallback() {
+    const ul = this.shadowRoot.querySelector("ul");
     ul.innerHTML = this.innerHTML;
-    this.innerHTML = '';
+    this.innerHTML = "";
   }
-
-  static template () {
+  static template() {
     return `
       <style>
       /* No normal bullets please */
@@ -74,10 +72,10 @@ class WCBulletChain extends HTMLElement {
     </style>
     <ul>
     </ul>
-    `
+    `;
   }
 }
-
-customElements.define('wc-bullet-chain', WCBulletChain);
-
-export { WCBulletChain };
+customElements.define("wc-bullet-chain", WCBulletChain);
+export {
+  WCBulletChain
+};
diff --git a/index.min.js b/index.min.js
@@ -1 +1,60 @@
-class e extends HTMLElement{constructor(){super();const t=document.createElement("template");t.innerHTML=e.template(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(t.content,!0))}async connectedCallback(){this.shadowRoot.querySelector("ul").innerHTML=this.innerHTML,this.innerHTML=""}static template(){return"\n      <style>\n      /* No normal bullets please */\n      ul {\n        list-style-type: none;\n      }\n    \n      li {\n        color:blue;\n        /* You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page */\n        position: relative;\n        /* Use padding to space things out rather than margins as the line would get broken up otherwise */\n        margin: 0;\n        padding-bottom: 1em;\n        padding-left: 20px;\n      }\n    \n      /* The actual line being placed before each list item, tweak width and color as appropriate */\n      li:before {\n        background-color: #c00;\n        width: 2px;\n        content: '';\n        position: absolute;\n        top: 0px;\n        bottom: 0px;\n        left: 5px;\n      }\n    \n      /* Small bullets for normal list items */\n      li::after {\n        content: '';\n        position: absolute;\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E\");\n        background-repeat: no-repeat;\n        background-size: contain;\n        left: 0;\n        top: 2px;\n        width: 12px;\n        height: 12px;\n      }\n    \n      /* Large bullet for the first list item */\n      li:first-child::after {\n        content: '';\n        width: 16px;\n        height: 16px;\n        left: -2px;\n        top: 0;\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Cpath d='M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z' fill='%23c00'%3E%3C/path%3E%3Ccircle fill='%23c00' cx='16' cy='16' r='6'%3E%3C/circle%3E%3C/svg%3E\");\n      }\n    \n      /* Start the line further down on the first list item */\n      li:first-child:before { top: 15px;  }\n    \n      /* Stop the line short on the final list item */\n      li:last-child:before { height: 6px; }\n    </style>\n    <ul>\n    </ul>\n    "}}customElements.define("wc-bullet-chain",e);export{e as WCBulletChain};
+class b extends HTMLElement{constructor(){super();const a=document.createElement("template");a.innerHTML=b.template(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(a.content,!0))}async connectedCallback(){const a=this.shadowRoot.querySelector("ul");a.innerHTML=this.innerHTML,this.innerHTML=""}static template(){return`
+      <style>
+      /* No normal bullets please */
+      ul {
+        list-style-type: none;
+      }
+    
+      li {
+        color:blue;
+        /* You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page */
+        position: relative;
+        /* Use padding to space things out rather than margins as the line would get broken up otherwise */
+        margin: 0;
+        padding-bottom: 1em;
+        padding-left: 20px;
+      }
+    
+      /* The actual line being placed before each list item, tweak width and color as appropriate */
+      li:before {
+        background-color: #c00;
+        width: 2px;
+        content: '';
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        left: 5px;
+      }
+    
+      /* Small bullets for normal list items */
+      li::after {
+        content: '';
+        position: absolute;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-size: contain;
+        left: 0;
+        top: 2px;
+        width: 12px;
+        height: 12px;
+      }
+    
+      /* Large bullet for the first list item */
+      li:first-child::after {
+        content: '';
+        width: 16px;
+        height: 16px;
+        left: -2px;
+        top: 0;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Cpath d='M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z' fill='%23c00'%3E%3C/path%3E%3Ccircle fill='%23c00' cx='16' cy='16' r='6'%3E%3C/circle%3E%3C/svg%3E");
+      }
+    
+      /* Start the line further down on the first list item */
+      li:first-child:before { top: 15px;  }
+    
+      /* Stop the line short on the final list item */
+      li:last-child:before { height: 6px; }
+    </style>
+    <ul>
+    </ul>
+    `}}customElements.define("wc-bullet-chain",b);export{b as WCBulletChain};
diff --git a/package.json b/package.json
@@ -14,16 +14,15 @@
   "scripts": {
     "start": "npx live-server --no-browser --port=5500 --open=dev",
     "lint": "esmtk lint",
-    "build": "npm run build:main && npm run build:min",
-    "build:main": "npx rollup --config .config/main.config.js",
-    "build:min": "npx rollup --config .config/min.config.js",
+    "build": "npm run bundle && npm run minify",
+    "bundle": "esmtk bundle src/wc-bullet-chain.js index.js",
+    "minify": "esmtk minify src/wc-bullet-chain.js index.min.js",
     "package": "npx rimraf package && npm pack | tail -n 1 | xargs tar -xf",
     "preversion": "npm run lint",
     "postversion": "git push --follow-tags"
   },
   "devDependencies": {
-    "esmtk": "^0.1.1",
-    "rollup-plugin-terser": "^5.2.0"
+    "esmtk": "^0.4.0"
   },
   "standard": {
     "ignore": [