Replace node-fetch usages by native fetch

Author: gnbm

package-lock.json

@@ -1,5 +1,3 @@
-const fetch = require('node-fetch');
-
 module.exports = function (context, options) {
   return {
     name: 'docusaurus-plugin-ionic-component-api',
@@ -18,30 +16,40 @@ module.exports = function (context, options) {
        * @param {*} isCurrentVersion Whether or not this is the current version of the docs
        */
       const generateMarkdownForVersion = async (version, npmTag, isCurrentVersion) => {
-        let COMPONENT_LINK_REGEXP;
-        const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
-        const { components } = await response.json();
-
-        const names = components.map((component) => component.tag.slice(4));
-        // matches all relative markdown links to a component, e.g. (../button)
-        COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
-
-        components.forEach((comp) => {
-          const compTag = comp.tag.slice(4);
-          const outDir = getDirectoryPath(compTag, version, isCurrentVersion);
-
-          data.push({
-            outDir,
-            componentTag: compTag,
-            version,
-            props: renderProperties(comp),
-            events: renderEvents(comp),
-            methods: renderMethods(comp),
-            parts: renderParts(comp),
-            customProps: renderCustomProps(comp),
-            slots: renderSlots(comp),
+        try {
+          let COMPONENT_LINK_REGEXP;
+          const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
+          
+          if (!response.ok) {
+            console.error(`Failed to fetch component data for ${npmTag}: ${response.status}`);
+            return;
+          }
+          
+          const { components } = await response.json();
+
+          const names = components.map((component) => component.tag.slice(4));
+          // matches all relative markdown links to a component, e.g. (../button)
+          COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
+
+          components.forEach((comp) => {
+            const compTag = comp.tag.slice(4);
+            const outDir = getDirectoryPath(compTag, version, isCurrentVersion);
+
+            data.push({
+              outDir,
+              componentTag: compTag,
+              version,
+              props: renderProperties(comp),
+              events: renderEvents(comp),
+              methods: renderMethods(comp),
+              parts: renderParts(comp),
+              customProps: renderCustomProps(comp),
+              slots: renderSlots(comp),
+            });
           });
-        });
+        } catch (error) {
+          console.error(`Error generating markdown for version ${version}:`, error.message);
+        }
       };
 
       for (const version of options.versions) {
@@ -234,63 +242,4 @@ function renderCustomProps({ styles: customProps }) {
   const mdProps = customProps.filter((prop) => prop.mode === 'md');
 
   const renderTable = (props) => {
-    if (props.length === 0) {
-      return 'No CSS custom properties available for this component.';
-    }
-
-    return `
-    | Name | Description |
-  | --- | --- |
-  ${props.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-  `;
-  };
-
-  if (iosProps.length > 0 || mdProps.length > 0) {
-    // If the component has mode-specific custom props, render them in tabs for iOS and MD
-    return `
-import Tabs from '@theme/Tabs';
-
-import TabItem from '@theme/TabItem';
-
-\`\`\`\`mdx-code-block
-<Tabs
-  groupId="mode"
-  defaultValue="ios"
-  values={[
-    { value: 'ios', label: 'iOS' },
-    { value: 'md', label: 'MD' },
-  ]
-}>
-<TabItem value="ios">
-
-${renderTable(iosProps)}
-
-</TabItem>
-
-<TabItem value="md">
-
-${renderTable(mdProps)}
-
-</TabItem>
-</Tabs>
-
-\`\`\`\`
-
-`;
-  }
-  // Otherwise render the custom props without the tabs for iOS and MD
-  return renderTable(customProps);
-}
-
-function renderSlots({ slots }) {
-  if (slots.length === 0) {
-    return 'No slots available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
-
-`;
-}
+    if

plugins/docusaurus-plugin-ionic-component-api/index.js

@@ -1,4 +1,3 @@
-const fetch = require('node-fetch');
 const fs = require('fs');
 const path = require('path');
 const { api: apiOverrides } = require('./data/meta-override.json');
@@ -8,16 +7,26 @@ const DEMOS_PATH = path.resolve('static/demos');
 let COMPONENT_LINK_REGEXP;
 
 (async function () {
-  const response = await fetch(
-    'https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json'
-  );
-  const { components } = await response.json();
+  try {
+    const response = await fetch(
+      'https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json'
+    );
 
-  const names = components.map((component) => component.tag.slice(4));
-  // matches all relative markdown links to a component, e.g. (../button)
-  COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
+    if (!response.ok) {
+      console.error(`Failed to fetch translated API data: ${response.status}`);
+      return;
+    }
 
-  components.map(writePage);
+    const { components } = await response.json();
+
+    const names = components.map((component) => component.tag.slice(4));
+    // matches all relative markdown links to a component, e.g. (../button)
+    COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
+
+    components.map(writePage);
+  } catch (error) {
+    console.error('Error in api-ja script:', error.message);
+  }
 })();
 
 function writePage(page) {
@@ -36,8 +45,8 @@ function writePage(page) {
   // fix relative links, e.g. (../button) -> (button.md)
   data = data.replace(COMPONENT_LINK_REGEXP, '($1.md$2)');
 
-  const path = `i18n/ja/docusaurus-plugin-content-docs/current/api/${page.tag.slice(4)}.md`;
-  fs.writeFileSync(path, data);
+  const filePath = `i18n/ja/docusaurus-plugin-content-docs/current/api/${page.tag.slice(4)}.md`;
+  fs.writeFileSync(filePath, data);
 }
 
 function renderFrontmatter({ tag }) {
@@ -65,7 +74,6 @@ ${utils.getHeadTag(apiOverrides[tag])}
 
 function renderReadme({ readme, encapsulation }) {
   const endIndex = readme.indexOf('\n');
-
   const title = readme.substring(0, endIndex);
   const rest = readme.substring(endIndex);
 
@@ -77,7 +85,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ${encapsulation !== 'none' ? `<EncapsulationPill type="${encapsulation}" />` : ''}
 
-
 ${addAdmonitions(rest)}
   `;
 }
@@ -128,7 +135,6 @@ function renderProperties({ props: properties }) {
     return '';
   }
 
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
   return `
 ## Properties
 
@@ -141,7 +147,7 @@ ${properties
 | --- | --- |
 | **Description** | ${prop.docs.split('\n').join('<br />')} |
 | **Attribute** | \`${prop.attr}\` |
-| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
+| **Type** | \`${prop.type.replace(/\|/g, '\\|')}\` |
 | **Default** | \`${prop.default}\` |
 
 `
@@ -170,7 +176,6 @@ function renderMethods({ methods }) {
     return '';
   }
 
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
   return `
 ## Methods
 
@@ -182,7 +187,7 @@ ${methods
 | | |
 | --- | --- |
 | **Description** | ${method.docs.split('\n').join('<br />')} |
-| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
+| **Signature** | \`${method.signature.replace(/\|/g, '\\|')}\` |
 `
   )
   .join('\n')}

scripts/api-ja.js

@@ -1,11 +1,15 @@
 import dotenv from 'dotenv';
 import { outputJson } from 'fs-extra';
-import fetch from 'node-fetch';
-import { resolve } from 'path';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
 import url from 'url';
 
 dotenv.config();
 
+// Fix for __dirname in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 const OUTPUT_PATH = resolve(
   __dirname,
   '../data/github-commits.json'
@@ -24,7 +28,8 @@ export default {
 const getAllGHCommits = async (task: any, page = 1) => {
   try {
     task.output = `Getting commits: ${page * 100 - 99} - ${page * 100}`;
-    const request = await fetch(
+    
+    const response = await fetch(
       url.format({
         protocol: 'https',
         hostname: 'api.github.com',
@@ -35,27 +40,35 @@ const getAllGHCommits = async (task: any, page = 1) => {
         }
       }), {
         headers: {
-          'Authorization': process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : ''
+          'Authorization': process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '',
+          'User-Agent': 'ionic-docs'
         }
       }
     );
 
-    let commits = await request.json().then(list => list.reduce((obj: any, commit: any) => {
+    if (!response.ok) {
+      console.error(`GitHub API responded with status: ${response.status}`);
+      return {};
+    }
+
+    const list = await response.json();
+    let commits = list.reduce((obj: any, commit: any) => {
       obj[commit.sha] = {
         id: commit.author.login,
         avatar: commit.author.avatar_url,
         time: commit.commit.committer.date
       };
       return obj;
-    }, {}));
+    }, {});
 
     // recursively get more commits if there are more to get, limit 2k
     if (Object.keys(commits).length === 100 && page < 20) {
       commits = { ...commits, ...await getAllGHCommits(task, page + 1) };
     }
 
     return commits;
-  } catch {
+  } catch (error) {
+    console.error('Error fetching commits:', error.message);
     return {};
   }
 };