feat: code-snippet prop passed to Example is now an Object instead of an Array

more code snippets can be passed as children of the Example component
but only the snippet passed as the code-snippet prop will be reactive

Author: igorMSoares

docs/.vitepress/components/Example.vue

@@ -1,24 +1,38 @@
 <script setup>
+  /// <reference lib="es2021" />
   import Container from './Container.vue';
   import Button from './Button.vue';
   import Content from './Content.vue';
   import AnimationForm from './AnimationForm.vue';
   import CodeSnippet from './CodeSnippet.vue';
   import { onMounted, ref } from 'vue';
 
-  const props = defineProps({
-    animationApi: Function,
-    animationFn: Function,
-    animationName: String,
-    title: String,
-    btnList: Array,
-    contentList: Array,
-    animOpts: Object,
-    fieldsList: Array,
-    codeSnippet: Array,
-  });
-
-  const codeSnippetRef = ref(props.codeSnippet?.at(0));
+  /**
+   * @type {{
+   *  animationApi?: Function,
+   *  animationFn?: Function,
+   *  animationName?: String,
+   *  title?: String,
+   *  btnList?: Array.<{text: string[], class: string, targetSelector: string}>,
+   *  contentList?: Object[],
+   *  animOpts?: Object,
+   *  fieldsList?: string[],
+   *  codeSnippet?: Object
+   * }}
+   */
+  const props = defineProps([
+    'animationApi',
+    'animationFn',
+    'animationName',
+    'title',
+    'btnList',
+    'contentList',
+    'animOpts',
+    'fieldsList',
+    'codeSnippet',
+  ]);
+
+  const codeSnippetRef = ref(props.codeSnippet);
   const codeSnippetKey = ref(`${props.animationName}-0`);
 
   onMounted(() => {
@@ -43,6 +57,8 @@
       const keyId = +(codeSnippetKey.value.match(/(\d+)$/g)?.at(0) ?? '0') + 1;
       codeSnippetKey.value = codeSnippetKey.value.replace(/\d+$/, `${keyId}`);
     };
+    /** @type {Object} */
+    const codeSnippetRefVal = codeSnippetRef.value;
 
     if (opts[fieldLabel] !== '') {
       const newValue =
@@ -62,7 +78,7 @@
 
         let newSnippet = '';
         let match = false;
-        for (const str of codeSnippetRef.value.code.split(/\n/)) {
+        for (const str of codeSnippetRefVal.code.split(/\n/)) {
           if (str.match(fieldLabel)) {
             newSnippet += newField;
             match = true;
@@ -73,10 +89,10 @@
             newSnippet += `${str}\n`;
           }
         }
-        codeSnippetRef.value.code = newSnippet;
+        codeSnippetRefVal.code = newSnippet;
         reloadSnippet();
       } else {
-        codeSnippetRef.value.code = codeSnippetRef.value.code.replaceAll(
+        codeSnippetRefVal.code = codeSnippetRefVal.code.replaceAll(
           new RegExp(`\n.+${fieldLabel}:.+\n`, 'g'),
           '\n'
         );
@@ -91,7 +107,7 @@
             defaultValue,
           });
         } else if (
-          codeSnippetRef.value.code.match('dimensionsTransition: false')
+          codeSnippetRefVal.code.match('dimensionsTransition: false')
         ) {
           updateSnippet({
             opts: { dimensionsTransition: true },
@@ -100,7 +116,7 @@
           });
         }
       }
-    } else if (codeSnippetRef.value.code.match(fieldLabel)) {
+    } else if (codeSnippetRefVal.code.match(fieldLabel)) {
       updateSnippet({
         opts: { [fieldLabel]: defaultValue[fieldLabel] },
         fieldLabel,
@@ -148,13 +164,12 @@
     <section>
       <CodeSnippet
         v-if="codeSnippet"
-        v-for="(snippet, i) in codeSnippet"
         :key="codeSnippetKey"
-        :snippet-id="`code-snippet__${animationName}-${i}`"
-        :code="codeSnippetRef.code"
-        :highlight="snippet.highlight"
-        :langs="snippet.langs"
-        :lang="snippet.lang"
+        :snippet-id="`code-snippet__${animationName}-0`"
+        :code="codeSnippetRef?.code"
+        :highlight="codeSnippet.highlight"
+        :langs="codeSnippet.langs"
+        :lang="codeSnippet.lang"
       />
       <slot />
     </section>

docs/examples/index.md

@@ -132,7 +132,7 @@ aside: false
 :anim-opts="{}"
 @reset-animation="(opts) => {resetAnimation('slide', opts);}"
 :fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden']"
-:code-snippet="[{
+:code-snippet="{
 code: `jsCssAnimations.init.slideUp({
   trigger: '.slide-up--btn',
   targetSelector: '.example__slide',
@@ -151,7 +151,7 @@ jsCssAnimations.init.slideRight({
   targetSelector: '.example__slide',
 });`,
 highlight: [4]
-}]"
+}"
 />
 
 <Example
@@ -164,14 +164,14 @@ highlight: [4]
 :anim-opts="fadeOpts"
 :fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'blur', 'dimensionsTransition', 'iteration', 'direction']"
 @reset-animation="(opts) => {resetAnimation('fade', opts);}"
-:code-snippet="[{
+:code-snippet="{
 code: `// When 'trigger' option is omitted, .init will look for
 // any element(s) that have the 'js-anim--trigger' class
 jsCssAnimations.init.fade({
   maintainSpace: true,
 });`,
 highlight: [4],
-}]">
+}">
 
 ```html{1}
 <button class="js-anim--trigger" target-selector=".fade__example">
@@ -192,15 +192,15 @@ highlight: [4],
 :anim-opts="collapseOpts"
 :fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'transfOrigin']"
 @reset-animation="(opts) => {resetAnimation('collapse', opts);}"
-:code-snippet="[{
+:code-snippet="{
 code: `jsCssAnimations.init.collapse({
   trigger: '.collapse--btn',
   targetSelector: '.example__collapse',
   staggerDelay: 500, // '0.5s' or '500ms' would also work
 });
 `,
 highlight: [4]
-}]"/>
+}"/>
 
 <style>
 </style>