From 68329543c4f40de32bee82ba189de486fc0131fc Mon Sep 17 00:00:00 2001
From: 7PH <b.raymond@protonmail.com>
Date: Fri, 15 Dec 2023 00:41:32 +0100
Subject: [PATCH] Add an option to only copy non-default PowerGlitch options in
 playground

---
 .eslintrc.yml                                 | 60 ++++++++--------
 docs-src/src/components/ExportPanel.vue       | 69 ++++++++++++++++---
 docs-src/src/components/ImagePreview.vue      |  1 -
 docs/api-docs/functions/mergeOptions.html     |  2 +-
 docs/api-docs/types/GlitchPartialOptions.html |  2 +-
 docs/api-docs/types/GlitchResult.html         |  2 +-
 docs/api-docs/types/GlitchableElement.html    |  2 +-
 docs/api-docs/types/LayerDefinition.html      |  2 +-
 docs/api-docs/types/PlayModes.html            |  2 +-
 docs/api-docs/types/PowerGlitchOptions.html   |  2 +-
 docs/api-docs/types/RecursivePartial.html     |  2 +-
 docs/api-docs/variables/PowerGlitch.html      |  2 +-
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 14 files changed, 102 insertions(+), 48 deletions(-)

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 0f5f0b9..05a0b2e 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -1,35 +1,35 @@
 env:
-    browser: true
-    es2021: true
+  browser: true
+  es2021: true
 extends:
-    - eslint:recommended
-    - plugin:@typescript-eslint/recommended
-    - plugin:vue/vue3-recommended
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:vue/vue3-recommended
 parserOptions:
-    ecmaVersion: latest
-    parser: '@typescript-eslint/parser'
-    sourceType: module
+  ecmaVersion: latest
+  parser: "@typescript-eslint/parser"
+  sourceType: module
 plugins:
-    - vue
-    - '@typescript-eslint'
+  - vue
+  - "@typescript-eslint"
 rules:
-    indent:
-        - error
-        - 4
-        - SwitchCase: 1
-    linebreak-style:
-        - error
-        - unix
-    quotes:
-        - error
-        - single
-    semi:
-        - error
-        - always
-    vue/html-indent:
-        - warn
-        - 4
-    vue/attribute-hyphenation:
-        - off
-    vue/v-on-event-hyphenation:
-        - off
+  indent:
+    - error
+    - 4
+    - SwitchCase: 1
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - single
+  semi:
+    - error
+    - always
+  vue/html-indent:
+    - warn
+    - 4
+  vue/attribute-hyphenation:
+    - off
+  vue/v-on-event-hyphenation:
+    - off
diff --git a/docs-src/src/components/ExportPanel.vue b/docs-src/src/components/ExportPanel.vue
index 89a4c85..a5ef4ea 100644
--- a/docs-src/src/components/ExportPanel.vue
+++ b/docs-src/src/components/ExportPanel.vue
@@ -1,6 +1,9 @@
 <script setup>
-import { ref } from 'vue';
+import { cloneDeep } from 'lodash';
+import { ref, computed } from 'vue';
 import { useAppStore } from '@/stores/app';
+import { PowerGlitch } from '../../../src';
+import BooleanOption from './BooleanOption.vue';
 
 const appStore = useAppStore();
 
@@ -13,6 +16,32 @@ const selectCode = () => {
     document.getSelection().addRange(range);
 };
 
+const showAllOptions = ref(false);
+
+function deleteSimilarRecursive(obj1, obj2) {
+    for (const key in obj1) {
+        if (typeof obj1[key] === 'object') {
+            deleteSimilarRecursive(obj1[key], obj2[key]);
+            if (Object.keys(obj1[key]).length === 0) {
+                delete obj1[key];
+            }
+        } else if (obj1[key] === obj2[key]) {
+            delete obj1[key];
+        }
+    }
+}
+
+const nonDefaultOptions = computed(() => {
+    const options = cloneDeep(appStore.powerGlitchOptions);
+    const { playMode } = options;
+    const defaultOptions = PowerGlitch.getDefaultOptions(playMode);
+    deleteSimilarRecursive(options, defaultOptions);
+    if (Object.keys(options).length <= 1) {
+        return null;
+    }
+    return options;
+});
+
 const replacer = (key, value) => {
     if (key === 'iterations' && value === Infinity) {
         return undefined;
@@ -26,12 +55,36 @@ const replacer = (key, value) => {
 
 <template>
     <div class="px-4">
-        <p>Copy the options object below in your app</p>
-        <pre
-            ref="preRef"
-            class="bg-white p-4 rounded shadow overflow-auto"
-            @click="selectCode"
-            v-text="JSON.stringify(appStore.powerGlitchOptions, replacer, 2)"
-        />
+        <p class="mb-2">
+            Copy the options object below in your app
+        </p>
+
+        <template v-if="showAllOptions">
+            <pre
+                ref="preRef"
+                class="bg-white p-4 rounded shadow overflow-auto"
+                @click="selectCode"
+                v-text="JSON.stringify(appStore.powerGlitchOptions, replacer, 2)"
+            />
+        </template>
+        <template v-else>
+            <pre 
+                v-if="nonDefaultOptions === null"
+                class="bg-white p-4 rounded shadow overflow-auto"
+            >You are using the default options
+You do not need to pass any options</pre>
+            <pre
+                v-else
+                ref="preRef"
+                class="bg-white p-4 rounded shadow overflow-auto"
+                @click="selectCode"
+                v-text="JSON.stringify(nonDefaultOptions, replacer, 2)"
+            />
+        </template>
+        
+        <div class="flex mt-4">
+            Show all options
+            <BooleanOption v-model="showAllOptions" />
+        </div>
     </div>
 </template>
diff --git a/docs-src/src/components/ImagePreview.vue b/docs-src/src/components/ImagePreview.vue
index 30e13f1..05263bf 100644
--- a/docs-src/src/components/ImagePreview.vue
+++ b/docs-src/src/components/ImagePreview.vue
@@ -2,7 +2,6 @@
 import { ref, watch, onMounted } from 'vue';
 import { useAppStore } from '@/stores/app';
 import { PowerGlitch } from '../../../src/index';
-import defaultImage from '@/assets/default.png';
 
 const appStore = useAppStore();
 
diff --git a/docs/api-docs/functions/mergeOptions.html b/docs/api-docs/functions/mergeOptions.html
index 7f3a705..d230db3 100644
--- a/docs/api-docs/functions/mergeOptions.html
+++ b/docs/api-docs/functions/mergeOptions.html
@@ -33,7 +33,7 @@ <h5><code class="tsd-tag ts-flagRest">Rest</code> <span class="tsd-signature-sym
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L348">index.ts:348</a></li></ul></aside></li></ul></section></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L348">index.ts:348</a></li></ul></aside></li></ul></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/GlitchPartialOptions.html b/docs/api-docs/types/GlitchPartialOptions.html
index ae5a3da..e495b6d 100644
--- a/docs/api-docs/types/GlitchPartialOptions.html
+++ b/docs/api-docs/types/GlitchPartialOptions.html
@@ -19,7 +19,7 @@ <h1>Type alias GlitchPartialOptions</h1></div>
 <div class="tsd-comment tsd-typography"><p>Options given to the glitch method</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L514">index.ts:514</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L514">index.ts:514</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/GlitchResult.html b/docs/api-docs/types/GlitchResult.html
index 580c33d..da4f21d 100644
--- a/docs/api-docs/types/GlitchResult.html
+++ b/docs/api-docs/types/GlitchResult.html
@@ -46,7 +46,7 @@ <h5>stop<wbr/>Glitch<span class="tsd-signature-symbol">: </span><span class="tsd
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L524">index.ts:524</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L524">index.ts:524</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/GlitchableElement.html b/docs/api-docs/types/GlitchableElement.html
index ff8804b..ceeda97 100644
--- a/docs/api-docs/types/GlitchableElement.html
+++ b/docs/api-docs/types/GlitchableElement.html
@@ -19,7 +19,7 @@ <h1>Type alias GlitchableElement</h1></div>
 <div class="tsd-comment tsd-typography"><p>Specifies what to glitch. Query selector, html element, list of html elements or NodeList.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L519">index.ts:519</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L519">index.ts:519</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/LayerDefinition.html b/docs/api-docs/types/LayerDefinition.html
index 09fe86d..aa1d78f 100644
--- a/docs/api-docs/types/LayerDefinition.html
+++ b/docs/api-docs/types/LayerDefinition.html
@@ -31,7 +31,7 @@ <h5>timing<span class="tsd-signature-symbol">: </span><span class="tsd-signature
 <h3>See</h3><p><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#parameters">https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#parameters</a></p>
 </div></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L155">index.ts:155</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L155">index.ts:155</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/PlayModes.html b/docs/api-docs/types/PlayModes.html
index 8e3530f..7e312f7 100644
--- a/docs/api-docs/types/PlayModes.html
+++ b/docs/api-docs/types/PlayModes.html
@@ -26,7 +26,7 @@ <h3>Remarks</h3><ul>
 </ul>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L9">index.ts:9</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L9">index.ts:9</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/PowerGlitchOptions.html b/docs/api-docs/types/PowerGlitchOptions.html
index e09fe02..f48b3cf 100644
--- a/docs/api-docs/types/PowerGlitchOptions.html
+++ b/docs/api-docs/types/PowerGlitchOptions.html
@@ -114,7 +114,7 @@ <h5>pulse<span class="tsd-signature-symbol">: </span><span class="tsd-signature-
 <div class="tsd-comment tsd-typography"><p>Pulse layer adds a pulsing effect to the glitch.</p>
 </div></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L14">index.ts:14</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L14">index.ts:14</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/types/RecursivePartial.html b/docs/api-docs/types/RecursivePartial.html
index f82001b..6b41ff1 100644
--- a/docs/api-docs/types/RecursivePartial.html
+++ b/docs/api-docs/types/RecursivePartial.html
@@ -24,7 +24,7 @@ <h4>Type Parameters</h4>
 <li>
 <h4>T</h4></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L507">index.ts:507</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L507">index.ts:507</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/api-docs/variables/PowerGlitch.html b/docs/api-docs/variables/PowerGlitch.html
index d93ecbb..dfcbb85 100644
--- a/docs/api-docs/variables/PowerGlitch.html
+++ b/docs/api-docs/variables/PowerGlitch.html
@@ -71,7 +71,7 @@ <h4 class="tsd-parameters-title">Parameters</h4>
 <h5>playMode: <a href="../types/PlayModes.html" class="tsd-signature-type" data-tsd-kind="Type alias">PlayModes</a><span class="tsd-signature-symbol"> = &#39;always&#39;</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <a href="../types/PowerGlitchOptions.html" class="tsd-signature-type" data-tsd-kind="Type alias">PowerGlitchOptions</a></h4></li></ul></li></ul></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L577">index.ts:577</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L577">index.ts:577</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/package-lock.json b/package-lock.json
index ff5b8a0..cb5e11f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
                 "jest": "^29.3.1",
                 "jest-environment-jsdom": "^29.3.1",
                 "jsdom-testing-mocks": "^1.7.0",
+                "lodash": "^4.17.21",
                 "pinia": "^2.0.29",
                 "postcss": "^8.4.21",
                 "rollup": "^3.10.1",
diff --git a/package.json b/package.json
index efb127b..18bf96d 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
         "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "jsdom-testing-mocks": "^1.7.0",
+        "lodash": "^4.17.21",
         "pinia": "^2.0.29",
         "postcss": "^8.4.21",
         "rollup": "^3.10.1",