Move shopify dev renderer into own folder, begin to componentize

Author: iainmcampbell

scripts/typedoc/index.ts

@@ -1 +1 @@
-export {renderForShopifyDev} from './typedoc';
+export {renderForShopifyDev} from './shopify-dev-renderer';

scripts/typedoc/shopify-dev-renderer/extension-points.ts

@@ -0,0 +1,75 @@
+import {resolve} from 'path';
+import * as fs from 'fs';
+
+import type {
+  Paths,
+  InterfaceType,
+} from '../types';
+
+import {createDependencyGraph} from '../utilities/dependency-graph';
+import {renderYamlFrontMatter, findUuid, dedupe, propsTable} from './shared';
+import type {Node} from './shared';
+
+const additionalPropsTables: string[] = [];
+
+export async function extensionPoints(paths: Paths) {
+  const extensionsIndex = resolve(`${paths.inputRoot}/src/index.ts`);
+
+  const graph = await createDependencyGraph(extensionsIndex);
+
+  const allInterfaces: InterfaceType[] = [];
+
+  for (const value of graph.values()) {
+    const localValues = [...value.locals.values()];
+    allInterfaces.push(
+      ...(localValues.filter(
+        ({kind}) => kind === 'InterfaceType',
+      ) as InterfaceType[]),
+    );
+  }
+
+  const nodes: Node[] = [];
+
+  graph.forEach((value) => {
+    value.locals.forEach((value: any, key) => {
+      if (value.kind !== 'Imported') {
+        if (value.name == null) {
+          value.name = key;
+        }
+        nodes.push({value, module: undefined});
+      }
+    });
+  });
+
+  const interfaceEntryPoints = ['ExtensionPoints'];
+
+  const interfaces = allInterfaces.filter(({name}) =>
+    interfaceEntryPoints.includes(name),
+  );
+
+  const apiFile = resolve(`${paths.outputRoot}/extension-points/api.md`);
+  const folder = resolve(`${paths.outputRoot}/extension-points`);
+
+  if (!fs.existsSync(folder)) {
+    fs.mkdirSync(folder);
+  }
+
+  let markdown = renderYamlFrontMatter({
+    gid: findUuid(apiFile),
+    url: `${paths.shopifyDevUrl}/extension-points/api`,
+    title: 'Extension points API',
+    hidden: true,
+  });
+
+  interfaces.forEach(({name, docs, properties}) => {
+    markdown += propsTable(name, docs, properties, nodes, extensionsIndex, additionalPropsTables);
+  });
+
+  markdown += dedupe(additionalPropsTables).reverse().join('');
+
+  fs.writeFile(apiFile, markdown, function (err) {
+    if (err) throw err;
+  });
+
+  additionalPropsTables.length = 0;
+}

scripts/typedoc/shopify-dev-renderer/getting-started.ts

@@ -0,0 +1,62 @@
+import {resolve} from 'path';
+import * as fs from 'fs';
+
+import type {Paths} from '../types';
+
+import {renderYamlFrontMatter, findUuid} from './shared';
+
+export function gettingStarted(paths: Paths) {
+  const outputRoot = resolve(paths.outputRoot);
+  const extensionPointsDocsPath = resolve(
+    `${paths.outputRoot}/extension-points`,
+  );
+
+  if (!fs.existsSync(outputRoot)) {
+    fs.mkdirSync(outputRoot);
+  }
+
+  if (!fs.existsSync(extensionPointsDocsPath)) {
+    fs.mkdirSync(extensionPointsDocsPath);
+  }
+
+  const indexFile = resolve(`${extensionPointsDocsPath}/index.md`);
+
+  let markdown = renderYamlFrontMatter({
+    gid: findUuid(indexFile),
+    url: `${paths.shopifyDevUrl}/extension-points/index`,
+    title: 'Checkout extensions API reference',
+    description:
+      'API reference for Checkout extension points. Learn about global objects, rendering, components, and how you’ll interact with them.',
+    hidden: true,
+  });
+
+  const docsInputPath = resolve(`${paths.inputRoot}/documentation`);
+
+  const files = ['extension-points.md', 'globals.md', 'rendering.md'];
+
+  if (fs.existsSync(docsInputPath)) {
+    files.forEach((file) => {
+      markdown += `${fs.readFileSync(`${docsInputPath}/${file}`, 'utf8')}\n`;
+    });
+  }
+
+  // Demote each heading
+  markdown = markdown.replace(/# /g, '## ');
+  // Replace github links to in-page anchors
+  markdown = markdown.replace(/\.\/([\w-]+)\.md/g, '#$1');
+  // Add a link to the extension points API
+  markdown = markdown.replace(
+    ' `Checkout::Feature::Render`',
+    ` [\`Checkout::Feature::Render\`](${paths.shopifyDevUrl}/extension-points/api)`,
+  );
+  markdown = markdown.replace(
+    '#components',
+    `${paths.shopifyDevUrl}/components`,
+  );
+
+  fs.writeFile(indexFile, markdown, function (err) {
+    if (err) throw err;
+  });
+
+  return markdown;
+}

scripts/typedoc/shopify-dev-renderer/index.ts

@@ -0,0 +1,10 @@
+import {Paths} from '../types';
+
+import {gettingStarted} from './getting-started';
+import {extensionPoints, components} from './typedoc';
+
+export function renderForShopifyDev(paths: Paths) {
+  extensionPoints(paths);
+  components(paths);
+  gettingStarted(paths);
+}