Add an option to only copy non-default PowerGlitch options in playground

.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

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>

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();
 

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">

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">

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">

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">

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">

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">

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">

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">

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">

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",