docs: use defineProps deconstruction (#3090)

faker-js · Sep 16, 2024 · 48f171e · 48f171e
1 parent 3e47ee7
commit 48f171e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/docs/.vitepress/components/Banner.vue b/docs/.vitepress/components/Banner.vue
@@ -2,7 +2,7 @@
 import { useElementSize } from '@vueuse/core';
 import { ref, watchEffect } from 'vue';
 
-defineProps<{
+const { version } = defineProps<{
   version: string;
 }>();
 

diff --git a/docs/.vitepress/components/api-docs/method-parameters.vue b/docs/.vitepress/components/api-docs/method-parameters.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ApiDocsMethodParameter } from './method';
 
-const props = defineProps<{ parameters: ApiDocsMethodParameter[] }>();
+const { parameters } = defineProps<{ parameters: ApiDocsMethodParameter[] }>();
 </script>
 
 <template>
@@ -18,19 +18,22 @@ const props = defineProps<{ parameters: ApiDocsMethodParameter[] }>();
         </tr>
       </thead>
       <tbody>
-        <tr v-for="parameter of props.parameters" :key="parameter.name">
+        <tr
+          v-for="{ name, description, type, default: def } of parameters"
+          :key="name"
+        >
           <td
             :class="{
-              deprecated: parameter.description.includes('DEPRECATED'),
+              deprecated: description.includes('DEPRECATED'),
             }"
           >
-            {{ parameter.name }}
+            {{ name }}
           </td>
-          <td>{{ parameter.type }}</td>
+          <td>{{ type }}</td>
           <td>
-            <code v-if="parameter.default">{{ parameter.default }}</code>
+            <code v-if="def">{{ def }}</code>
           </td>
-          <td v-html="parameter.description"></td>
+          <td v-html="description"></td>
         </tr>
       </tbody>
     </table>

diff --git a/docs/.vitepress/components/api-docs/method.vue b/docs/.vitepress/components/api-docs/method.vue
@@ -4,51 +4,60 @@ import { slugify } from '../../shared/utils/slugify';
 import type { ApiDocsMethod } from './method';
 import MethodParameters from './method-parameters.vue';
 
-const props = defineProps<{ method: ApiDocsMethod }>();
+const { method } = defineProps<{ method: ApiDocsMethod }>();
+const {
+  deprecated,
+  description,
+  since,
+  parameters,
+  returns,
+  throws,
+  signature,
+  examples,
+  seeAlsos,
+  sourcePath,
+} = method;
 
 function seeAlsoToUrl(see: string): string {
-  const [, module, method] = see.replace(/\(.*/, '').split('\.');
-  if (!method) {
-    return 'faker.html#' + slugify(module);
+  const [, module, methodName] = see.replace(/\(.*/, '').split('\.');
+
+  if (!methodName) {
+    return `faker.html#${slugify(module)}`;
   }
-  return module + '.html#' + slugify(method);
+
+  return `${module}.html#${slugify(methodName)}`;
 }
 </script>
 
 <template>
   <div>
-    <div v-if="props.method.deprecated" class="warning custom-block">
+    <div v-if="deprecated" class="warning custom-block">
       <p class="custom-block-title">Deprecated</p>
       <p>This method is deprecated and will be removed in a future version.</p>
-      <span v-html="props.method.deprecated" />
+      <span v-html="deprecated" />
     </div>
 
-    <div v-html="props.method.description"></div>
+    <div v-html="description"></div>
 
-    <p v-if="props.method.since">
-      <em>Available since v{{ props.method.since }}</em>
+    <p v-if="since">
+      <em>Available since v{{ since }}</em>
     </p>
 
-    <MethodParameters
-      v-if="props.method.parameters.length > 0"
-      :parameters="props.method.parameters"
-    />
+    <MethodParameters v-if="parameters.length > 0" :parameters="parameters" />
 
-    <p><strong>Returns:</strong> {{ props.method.returns }}</p>
+    <p><strong>Returns:</strong> {{ returns }}</p>
 
-    <p v-if="props.method.throws">
-      <strong>Throws:</strong> <span v-html="props.method.throws" />
-    </p>
+    <p v-if="throws"><strong>Throws:</strong> <span v-html="throws" /></p>
 
-    <div v-html="props.method.signature" />
+    <div v-html="signature" />
 
     <h3>Examples</h3>
-    <div v-html="props.method.examples" />
+    <div v-html="examples" />
 
-    <div v-if="props.method.seeAlsos.length > 0">
+    <div v-if="seeAlsos.length > 0">
       <h3>See Also</h3>
       <ul>
-        <li v-for="seeAlso of props.method.seeAlsos" :key="seeAlso">
+        <li v-for="seeAlso of seeAlsos" :key="seeAlso">
           <a
             v-if="seeAlso.startsWith('faker.')"
             :href="seeAlsoToUrl(seeAlso)"
@@ -59,12 +68,12 @@ function seeAlsoToUrl(see: string): string {
       </ul>
     </div>
 
-    <div v-if="props.method.sourcePath">
+    <div v-if="sourcePath">
       <h3>Source</h3>
       <ul>
         <li>
           <a
-            :href="sourceBaseUrl + props.method.sourcePath"
+            :href="sourceBaseUrl + sourcePath"
             target="_blank"
             class="source-link"
           >