feat: Added jsdoc comments to module

perf: Optimized logic of src/module.ts
oyedejioyewole · Jan 1, 2024 · 9fa48d4 · 9fa48d4
1 parent 0619e83
commit 9fa48d4
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 132 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 Just a simple integration for [Phosphor Icons](https://phosphoricons.com) in [Nuxt](https://nuxt.com)
 
-- [📜 &nbsp;Changelog](https://nuxt-phosphor-icons.vercel.app/changelog)
+- [✨ &nbsp;Release Notes](https://nuxt-phosphor-icons.vercel.app/release-notes)
 - [🏀 Online playground](https://codesandbox.io/p/github/OyewoleOyedeji/nuxt-phosphor-icons/main?embed=1&file=%2Fplayground%2Fapp.vue&showConsole=true)
 - [📖 &nbsp;Documentation](https://nuxt-phosphor-icons.vercel.app)
 

diff --git a/docs/components/IntroBanner.vue b/docs/components/IntroBanner.vue
@@ -85,7 +85,7 @@ function generateIconNames() {
 
       <NuxtLink
         class="flex w-full items-center justify-center gap-x-2 rounded-full border border-secondary-500 p-3 text-secondary-500 transition hover:bg-secondary-500 hover:text-copy-900 lg:w-[200px] lg:justify-around lg:gap-x-0"
-        to="/changelog"
+        to="/release-notes"
         >Release Notes <LazyPhosphorIconArrowRight size="20"
       /></NuxtLink>
     </div>

diff --git a/docs/content/index.md b/docs/content/index.md
@@ -41,70 +41,45 @@ You can configure the module using the `phosphor` key in the `nuxt.config.ts`
 
 <br>
 
-#### `prefix`
+#### `expose`
 
-1. **Default:** `PhosphorIcon`
-2. **Description:** What should be prefixed to the icon components
-3. **Type:** `String` or `Boolean`
+1. **Default**: `false`
+2. **Description**: Enable to register components globally
+3. **Type**: `Boolean`
 
 ```ts
 export default defineNuxtConfig({
   phosphor: {
-    prefix: "your-prefix", // <YourPrefix.IconName />
+    expose: true,
   },
 });
 ```
 
-**PS:** Please ignore the `.`
-
-**Note:** When using type `Boolean`, if set to `true` the prefix would be the default value, otherwise if set to `false` there won't be a prefix.
-
-Also note, if you have a multi word prefix, you should include a dash (-) between the words
-
 <br>
 
-#### `options`
+#### `prefix`
 
-1. **Default:** `{}`
-2. **Description:** Options to pass to the `@phosphor-icons/vue` module
+1. **Default:** `phosphor-icon` or `PhosphorIcon`
+2. **Description:** The prefix of the component names
+3. **Type:** `String`
 
 ```ts
 export default defineNuxtConfig({
   phosphor: {
-    options: {
-      components: {
-        expose: true,
-        showList: false,
-      },
-    },
+    prefix: "your-prefix", // or YourPrefix
   },
 });
 ```
 
-<br>
-
-#### `options.components`
-
-1. **Default:** `{}`
-2. **Description:** Configure how the components are registered
-3. **Type:** `Object`
+**Note**: if you have a multi word prefix, you should include a &mdash; between the words
 
 <br>
 
-#### `options.components.expose`
+#### `showList`
 
-1. **Default:** `false`
-2. **Description:** Whether to expose the components globally
-3. **Type:** `Boolean`
-
-**Note:** When set to `true` the components will be exposed globally (in turn leading to a larger bundle size), otherwise they will be exposed in the `components` key of the `nuxtContext`
-
-<br>
+1. **Default:** `true`
+2. **Description:** Enable to generate a virtual file with the list of registered components at
 
-#### `options.components.showList`
+   `#build/nuxt-phosphor-icons.json`
 
-1. **Default:** `true`
-2. **Description:** Whether to create a virtual file containing a list of all the available icons
 3. **Type:** `Boolean`
-
-**Note:** If enabled, the virtual file will be available for import at `#build/nuxt-phosphor-icons.mjs`
diff --git a/docs/content/changelog.md → docs/content/release-notes.md b/docs/content/changelog.md → docs/content/release-notes.md
@@ -1,9 +1,9 @@
 ---
-title: Changelog · nuxt-phosphor-icons
+title: Release Notes · nuxt-phosphor-icons
 description: Release notes for nuxt-phosphor-icons
 ---
 
-# Changelog
+# Release Notes
 
 ## v1.1.5
 

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -26,11 +26,8 @@ export default defineNuxtConfig({
     "@vueuse/nuxt",
   ],
   phosphor: {
-    options: {
-      components: {
-        expose: true,
-      },
-    },
+    expose: true,
+    showList: true,
   },
   routeRules: {
     "/**": { isr: true },

diff --git a/docs/package.json b/docs/package.json
@@ -11,7 +11,6 @@
   "devDependencies": {
     "@formkit/auto-animate": "^0.8.1",
     "@nuxt/content": "^2.10.0",
-    "@nuxt/devtools": "latest",
     "@nuxtjs/google-fonts": "^3.1.3",
     "@nuxtjs/tailwindcss": "^6.10.3",
     "@vueuse/core": "^10.7.1",

diff --git a/docs/pages/changelog.vue → docs/pages/release-notes.vue b/docs/pages/changelog.vue → docs/pages/release-notes.vue
@@ -2,7 +2,7 @@
 defineOgImageComponent(
   "Page",
   {
-    title: "Changelog",
+    title: "Release Notes",
     description: "Release notes",
   },
   { fonts: ["Lora:700", "Open Sans:400"] },
@@ -20,14 +20,14 @@ defineOgImageComponent(
     </div>
     <ContentDoc
       class="mx-auto min-h-screen w-[90%] space-y-8 lg:w-1/2"
-      id="changelog"
-      path="/changelog"
+      id="release-notes"
+      path="/release-notes"
     />
   </main>
 </template>
 
 <style lang="scss">
-#changelog {
+#release-notes {
   a {
     @apply text-accent-500 hover:underline;
   }

diff --git a/package.json b/package.json
@@ -21,17 +21,17 @@
     "dist"
   ],
   "scripts": {
-    "lint": "eslint . --fix",
     "docs:build": "pnpm --filter docs build",
     "docs:dev": "pnpm --filter docs dev",
+    "lint": "eslint . --fix",
     "playground:build": "pnpm --filter playground build",
     "playground:dev": "pnpm --filter playground dev",
     "playground:generate": "pnpm --filter playground generate",
     "postinstall": "nuxt-module-build build --stub && nuxt-module-build prepare",
     "prepack": "nuxt-module-build build",
-    "release:major": "pnpm lint && pnpm prepack && changelogen --release --major --output docs/content/changelog.md && git push --follow-tags",
-    "release:minor": "pnpm lint && pnpm prepack && changelogen --release --minor --output docs/content/changelog.md && git push --follow-tags",
-    "release:patch": "pnpm lint && pnpm prepack && changelogen --release --patch --output docs/content/changelog.md && git push --follow-tags"
+    "release:major": "pnpm lint && pnpm prepack && changelogen --release --major --output docs/content/release-notes.md && git push --follow-tags",
+    "release:minor": "pnpm lint && pnpm prepack && changelogen --release --minor --output docs/content/release-notes.md && git push --follow-tags",
+    "release:patch": "pnpm lint && pnpm prepack && changelogen --release --patch --output docs/content/release-notes.md && git push --follow-tags"
   },
   "dependencies": {
     "@nuxt/kit": "^3.9.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,3 @@
 packages:
-  - playground
   - docs
+  - playground
diff --git a/src/module.ts b/src/module.ts
@@ -3,19 +3,34 @@ import {
   addTemplate,
   createResolver,
   defineNuxtModule,
+  type AddComponentOptions,
 } from "@nuxt/kit";
 import { readdirSync } from "fs";
 import { join } from "path";
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
-  prefix: string | boolean;
-  options: Partial<{
-    components: Partial<{
-      expose: boolean;
-      showList: boolean;
-    }>;
-  }>;
+  /**
+   * Enable to register components globally
+   *
+   * @default false
+   */
+  expose: boolean;
+
+  /**
+   * The prefix of the component names
+   *
+   * @default "phosphor-icon" or "PhosphorIcon"
+   */
+  prefix: string;
+
+  /**
+   * Enable to generate a virtual file with the list
+   * of registered components at `#build/nuxt-phosphor-icons.json`
+   *
+   * @default false
+   */
+  showList: boolean;
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -28,87 +43,59 @@ export default defineNuxtModule<ModuleOptions>({
   },
   // Default configuration options of the Nuxt module
   defaults: {
-    prefix: "PhosphorIcon",
-    options: {
-      components: {
-        showList: true,
-      },
-    },
+    expose: false,
+    prefix: "phosphor-icon",
+    showList: false,
   },
-  async setup({ prefix, options }) {
+  async setup(options) {
     const { resolvePath } = createResolver(import.meta.url);
 
-    const entrypoint = await resolvePath("@phosphor-icons/vue");
-    const iconsPath = join(entrypoint, "../icons");
+    const source = join(await resolvePath("@phosphor-icons/vue"), "../icons");
 
-    const components = readdirSync(iconsPath).filter((file) =>
+    const compatibleComponents = readdirSync(source).filter((file) =>
       file.endsWith(".vue.mjs"),
     );
 
-    const componentChunks = [] as Array<{
-      name: string;
-      filePath: string;
-      chunkName: string;
-    }>;
-
-    // Generate the component chunks
-    for (const component of components) {
-      let name = component.split(".").at(0);
+    // Convert prefix to PascalCase
+    let _prefix: string;
 
-      if (!name) continue;
+    if (options.prefix) {
+      if (options.prefix.includes("-"))
+        _prefix = options.prefix
+          .split("-")
+          .map((word) => word[0].toUpperCase() + word.slice(1))
+          .join("");
+      else
+        _prefix = options.prefix.at(0)?.toUpperCase() + options.prefix.slice(1);
+    }
 
-      /**
-       * If prefix is true, use default prefix
-       * If prefix is string, use prefix, replacing dashes with PascalCase
-       * If prefix is false, remove prefix
-       */
-      if (prefix === true) {
-        name.replace("Ph", "PhosphorIcon");
-      } else if (typeof prefix === "string") {
-        if (prefix.includes("-")) {
-          name = name.replace(
-            "Ph",
-            prefix
-              .split("-")
-              .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-              .join(""),
-          );
-        } else {
-          name = name.replace(
-            "Ph",
-            `${prefix.charAt(0).toUpperCase()}${prefix.slice(1)}`,
-          );
-        }
-      } else {
-        name = name.replace("Ph", "");
-      }
+    // Generate the component chunks
+    const chunks = compatibleComponents.map((component) => {
+      const componentName = component
+        .replace(".vue.mjs", "")
+        .replace("Ph", _prefix);
 
-      componentChunks.push({
-        name,
-        filePath: join(iconsPath, component),
-        chunkName: `phosphor-icons/${component.split(".")[0].toLowerCase()}`,
-      });
-    }
+      return {
+        name: componentName,
+        filePath: join(source, component),
+        global: options.expose,
+      } satisfies AddComponentOptions;
+    });
 
     // Register the components
-    for (const { name, filePath, chunkName } of componentChunks) {
+    for (const chunk of chunks) {
       addComponent({
-        chunkName,
-        filePath,
-        global: options.components?.expose ?? false,
-        name,
+        ...chunk,
       });
     }
 
-    // Show registered components as a virtual file (advanced usage)
-    if (options.components?.showList)
+    // Register template .json file (advanced usage)
+    if (options.showList) {
       addTemplate({
+        filename: "nuxt-phosphor-icons.json",
+        getContents: () => JSON.stringify(chunks.map((chunk) => chunk.name)),
         write: true,
-        filename: "nuxt-phosphor-icons.mjs",
-        getContents: () =>
-          `export default ${JSON.stringify(
-            componentChunks.map(({ name }) => name),
-          )}`,
       });
+    }
   },
 });