Added compression variants comprasion

.github/workflows/pages.yml

@@ -1,5 +1,6 @@
 name: GitHub Pages
 
+
 on:
   push:
     branches: master
@@ -17,13 +18,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version: 16
 
       - name: Setup Pages
-        uses: actions/configure-pages@v1
+        uses: actions/configure-pages@v4
 
       - name: Install dependencies
         run: npm ci
@@ -35,7 +36,7 @@ jobs:
         run: npm run build:docs
 
       - name: Upload build artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: './demo/build'
 
@@ -50,4 +51,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

demo/defaultOptions.js

@@ -0,0 +1,238 @@
+export default [
+  {
+    id: 'compressionLevels',
+    type: 'text',
+    label: 'Compression levels',
+    helpText: 'Comma-delimited string corresponding to compression levels. (e.g. <code>0-9</code>)',
+    value: '4,6,9'
+  }, {
+    id: 'compressionAlgorithms',
+    type: 'text',
+    label: 'Compression algorithms',
+    helpText: 'Comma-delimited string corresponding to compression algorithms. (e.g. <code>gzip,deflate</code>)',
+    value: 'gzip,deflate'
+  },
+  {
+    id: 'caseSensitive',
+    type: 'checkbox',
+    label: 'Case-sensitive',
+    helpText: 'Treat attributes in case sensitive manner (useful for custom HTML tags)'
+  },
+  {
+    id: 'collapseBooleanAttributes',
+    type: 'checkbox',
+    label: 'Collapse boolean attributes',
+    helpText: 'Omit attribute values from boolean attributes',
+    checked: true
+  },
+  {
+    id: 'collapseInlineTagWhitespace',
+    type: 'checkbox',
+    label: 'Collapse inline tag whitespace',
+    helpText: `Don't leave any spaces between <code/>display:inline;</code> elements when collapsing.
+    Must be used in conjunction with <code>collapseWhitespace=true</code>`,
+    unsafe: true
+  },
+  {
+    id: 'collapseWhitespace',
+    type: 'checkbox',
+    label: 'Collapse whitespace',
+    helpText: 'Collapse white space that contributes to text nodes in a document tree',
+    checked: true
+  },
+  {
+    id: 'conservativeCollapse',
+    type: 'checkbox',
+    label: 'Conservative collapse',
+    helpText: `Always collapse to 1 space (never remove it entirely).
+    Must be used in conjunction with <code>collapseWhitespace=true</code>`
+  },
+  {
+    id: 'decodeEntities',
+    type: 'checkbox',
+    label: 'Decode Entity Characters',
+    helpText: 'Use direct Unicode characters whenever possible',
+    checked: true
+  },
+  {
+    id: 'html5',
+    type: 'checkbox',
+    label: 'HTML5',
+    helpText: 'Parse input according to HTML5 specifications',
+    checked: true
+  },
+  {
+    id: 'includeAutoGeneratedTags',
+    type: 'checkbox',
+    label: 'Include auto-generated tags',
+    helpText: 'Insert tags generated by HTML parser'
+  },
+  {
+    id: 'keepClosingSlash',
+    type: 'checkbox',
+    label: 'Keep closing slash',
+    helpText: 'Keep the trailing slash on singleton elements'
+  },
+  {
+    id: 'maxLineLength',
+    type: 'number',
+    label: 'Max. line length',
+    helpText: 'Specify a maximum line length. Compressed output will be split by newlines at valid HTML split-points'
+  },
+  {
+    id: 'minifyCSS',
+    type: 'checkbox',
+    label: 'Minify CSS',
+    helpText: 'Minify CSS in style elements and style attributes (uses <code>clean-css</code>)',
+    checked: true
+  },
+  {
+    id: 'minifyJS',
+    type: 'checkbox',
+    label: 'Minify JavaScript',
+    helpText: 'Minify JavaScript in script elements and event attributes (uses <code>Terser</code>)',
+    checked: true
+  },
+  {
+    id: 'minifyURLs',
+    type: 'checkbox',
+    label: 'Minify URLs',
+    helpText: 'Minify URLs in various attributes (uses <code>relateurl</code>)'
+  },
+  {
+    id: 'noNewlinesBeforeTagClose',
+    type: 'checkbox',
+    label: 'No newline before Tag Close',
+    helpText: 'Never add a newline before a tag that closes an element'
+  },
+  {
+    id: 'preserveLineBreaks',
+    type: 'checkbox',
+    label: 'Preserve line-breaks',
+    helpText: `Always collapse to 1 line break (never remove it entirely) when whitespace between tags include a line break.
+    Must be used in conjunction with <code>collapseWhitespace=true</code>`
+  },
+  {
+    id: 'preventAttributesEscaping',
+    type: 'checkbox',
+    label: 'Prevent attributes escaping',
+    helpText: 'Prevents the escaping of the values of attributes',
+    unsafe: true
+  },
+  {
+    id: 'processConditionalComments',
+    type: 'checkbox',
+    label: 'Process conditional comments',
+    helpText: 'Process contents of conditional comments through minifier',
+    checked: true
+  },
+  {
+    id: 'processScripts',
+    type: 'text',
+    label: 'Process scripts',
+    helpText: 'Comma-delimited string corresponding to types of script elements to process through minifier (e.g. <code>text/ng-template, text/x-handlebars-template</code>)',
+    value: 'text/html'
+  },
+  {
+    id: 'quoteCharacter',
+    type: 'text',
+    label: 'Quote character',
+    helpText: 'Type of quote to use for attribute values (<code>\'</code> or <code>"</code>)'
+  },
+  {
+    id: 'removeAttributeQuotes',
+    type: 'checkbox',
+    label: 'Remove attribute quotes',
+    helpText: 'Remove quotes around attributes when possible',
+    checked: true
+  },
+  {
+    id: 'removeComments',
+    type: 'checkbox',
+    label: 'Remove comments',
+    helpText: 'Strip HTML comments',
+    checked: true
+  },
+  {
+    id: 'removeEmptyAttributes',
+    type: 'checkbox',
+    label: 'Remove empty attributes',
+    helpText: 'Remove all attributes with whitespace-only values',
+    checked: true
+  },
+  {
+    id: 'removeEmptyElements',
+    type: 'checkbox',
+    label: 'Remove empty elements',
+    helpText: 'Remove all elements with empty contents',
+    unsafe: true
+  },
+  {
+    id: 'removeOptionalTags',
+    type: 'checkbox',
+    label: 'Remove optional tags',
+    checked: true
+  },
+  {
+    id: 'removeRedundantAttributes',
+    type: 'checkbox',
+    label: 'Remove redundant attributes',
+    helpText: 'Remove attributes when value matches default.',
+    checked: true
+  },
+  {
+    id: 'removeScriptTypeAttributes',
+    type: 'checkbox',
+    label: 'Remove script type attributes',
+    helpText: `Remove <code>type="text/javascript"</code> from <code>script</code> tags.
+    Other <code>type</code> attribute values are left intact`,
+    checked: true
+  },
+  {
+    id: 'removeStyleLinkTypeAttributes',
+    type: 'checkbox',
+    label: 'Remove style link type attributes',
+    helpText: `Remove <code>type="text/css"</code> from <code>style</code> and <code>link</code> tags.
+    Other <code>type</code> attribute values are left intact`,
+    checked: true
+  },
+  {
+    id: 'removeTagWhitespace',
+    type: 'checkbox',
+    label: 'Remove tag whitespace',
+    helpText: `Remove space between attributes whenever possible.
+    <em>Note that this will result in invalid HTML!</em>`,
+    checked: true,
+    unsafe: true
+  },
+  {
+    id: 'sortAttributes',
+    type: 'checkbox',
+    label: 'Sort attributes',
+    helpText: 'Sort attributes by frequency',
+    checked: true,
+    unsafe: true
+  },
+  {
+    id: 'sortClassName',
+    type: 'checkbox',
+    label: 'Sort class name',
+    helpText: 'Sort style classes by frequency',
+    checked: true,
+    unsafe: true
+  },
+  {
+    id: 'trimCustomFragments',
+    type: 'checkbox',
+    label: 'Trim white space around custom fragments',
+    helpText: 'Trim white space around <code>ignoreCustomFragments</code>.',
+    checked: true
+  },
+  {
+    id: 'useShortDoctype',
+    type: 'checkbox',
+    label: 'Use short doctype',
+    helpText: 'Replaces the <code>doctype</code> with the short (HTML5) <code>doctype</code>',
+    checked: true
+  }
+];

demo/index.html

@@ -20,8 +20,49 @@ <h1 class="header">HTML Minifier <span id='minifer-version'></span></h1>
     <div class="main" x-data="minifier" x-cloak>
       <div class="workspace">
         <textarea rows="8" cols="40" class="input-content" x-model="input"></textarea>
-        <div class="mr-1"><button type="button" @click="minify()">Minify</button></div>
+        <div class="mr-1">
+          <button type="button" @click="minifyInput()">Minify</button>
+          <template x-if="support.fileReader">
+            <input type="file" x-ref="file" multiple @change="selectFile">
+          </template>
+          <template x-if="selectedVariant">
+            <a :href="dataUrl()" :download="selectedVariant.name">
+              Download
+            </a>
+          </template>
+        </div>
         <textarea rows="8" cols="40" class="output-content" readonly x-model="output"></textarea>
+        <template x-if="stats.variants.length != 0">
+          <table width="100%" cellpadding="5" border="1">
+            <thead>
+              <tr>
+                <th>Title</th>
+                <th colspan="2">Size (bytes / percentage)</th>
+                <th colspan="2">Elapsed (ms / percentage)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template x-for="variant in stats.variants">
+                <tr @click="selectVariant(variant)"
+                  :style="variant.title == selectedVariant.title ? 'border-bottom: 1px solid black' : ''">
+                  <td x-text="variant.title"></td>
+                  <td align="right">
+                    <span x-text="variant.compression.size"></span>
+                  </td>
+                  <td align="right">
+                    <span x-text="variant.ratio.size"></span>%
+                  </td>
+                  <td align="right">
+                    <span x-text="variant.compression.elapsed"></span>
+                  </td>
+                  <td align="right">
+                    <span x-text="variant.ratio.elapsed"></span>%
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </template>
         <p x-text="stats.text" :class="stats.result"></p>
       </div>
       <div class="options">
@@ -80,4 +121,4 @@ <h1 class="header">HTML Minifier <span id='minifer-version'></span></h1>
   <script src="./main.js" type="module"></script>
 </body>
 
-</html>
+</html>