scoobie 17.0.0 → 17.1.0

package/README.md

@@ -194,6 +194,24 @@ sequenceDiagram
 ```
 ````
 
+Some Mermaid diagrams allow for YAML frontmatter. Scoobie has extended this by allowing a deep merge of the Mermaid configuration
+with a special `overrides` key in the frontmatter. This could be useful for diagram-specific configuration that is not otherwise easy to set.
+
+````markdown
+```mermaid
+---
+overrides:
+  gantt:
+    useWidth: 500
+---
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+```
+````
+
 [mermaid live editor]: https://mermaidjs.github.io/mermaid-live-editor
 
 ### Headings

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "17.0.0",
+  "version": "17.1.0",
   "dependencies": {
     "@capsizecss/core": "^4.0.0",
     "@mdx-js/react": "^1.6.22",
@@ -13,6 +13,7 @@
     "@vanilla-extract/css-utils": "^0.1.1",
     "babel-loader": "^9.0.0",
     "clsx": "^2.0.0",
+    "deepmerge-ts": "^7.1.0",
     "find-up": "^5.0.0",
     "fs-extra": "^11.0.0",
     "jsonc-parser": "^3.0.0",
@@ -26,7 +27,8 @@
     "unist-util-visit": "^2.0.3",
     "unist-util-visit-parents": "^3.1.1",
     "webpack-merge": "^6.0.0",
-    "which": "^4.0.0"
+    "which": "^4.0.0",
+    "yaml": "^2.5.0"
   },
   "devDependencies": {
     "@changesets/cli": "2.27.7",

package/remark/mermaid/utils.js

@@ -4,9 +4,11 @@
 const crypto = require('crypto');
 const path = require('path');
 
+const { deepmerge } = require('deepmerge-ts');
 const fs = require('fs-extra');
 const mermaidIsomorphic = require('mermaid-isomorphic');
 const { optimize } = require('svgo');
+const YAML = require('yaml');
 
 const { MERMAID_DIR, PLUGIN_NAME } = require('./constants');
 
@@ -70,16 +72,28 @@ const generateFilePaths = (rootDir, data) => {
 function createMermaidRenderer(options) {
   const renderer = mermaidIsomorphic.createMermaidRenderer(options);
 
-  return async (nodes) => {
+  async function renderNodes(nodes) {
     const mapped = nodes.map((node) => {
       const paths = generateFilePaths(options.rootDir, node.value);
+      const frontmatter = node.value.startsWith('---')
+        ? YAML.parse(node.value.match(/---([\s\S]*?)---/)[1]) ?? {}
+        : {};
+
       return {
         ...paths,
         value: node.value,
+        frontmatter,
         exists: fs.existsSync(paths.svgPath),
       };
     });
 
+    if (mapped.length > 1 && mapped.some((n) => n.frontmatter.overrides)) {
+      // If any node has an override, render all nodes separately because we pass config globally
+      return await Promise.all(
+        nodes.map(async (node) => (await renderNodes([node]))[0]),
+      );
+    }
+
     if (mapped.every(({ exists }) => exists)) {
       return mapped.map(({ svgNodeUrl }) => ({
         status: 'fulfilled',
@@ -93,7 +107,13 @@ function createMermaidRenderer(options) {
 
     const results = await renderer(
       toRender.map(({ value }) => value),
-      { ...options, mermaidConfig },
+      {
+        ...options,
+        mermaidConfig: deepmerge(
+          mermaidConfig,
+          ...toRender.map(({ frontmatter }) => frontmatter.overrides),
+        ),
+      },
     );
 
     const errorResults = new Map();
@@ -120,12 +140,13 @@ function createMermaidRenderer(options) {
       }
     });
 
-    return mapped.map(({ svgNodeUrl }, i) =>
-      errorResults.has(i)
-        ? errorResults.get(i)
-        : { status: 'fulfilled', value: { svgNodeUrl } },
+    return mapped.map(
+      ({ svgNodeUrl }, i) =>
+        errorResults.get(i) ?? { status: 'fulfilled', value: { svgNodeUrl } },
     );
-  };
+  }
+
+  return renderNodes;
 }
 
 module.exports = {

package/src/components/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { Box, Stack, Text, TextLinkButton } from 'braid-design-system';
 import { parse } from 'jsonc-parser';
 import { Highlight } from 'prism-react-renderer';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Prism, themes } from '../private/Prism';
 import { ScrollableInline } from '../private/ScrollableInline';
@@ -23,6 +23,7 @@ import * as styles from './CodeBlock.css';
 interface Props {
   children: readonly CodeChildProps[] | string;
   graphqlPlayground?: string;
+  initialIndex?: number;
   label?: string;
   language?: string;
   size?: Size;
@@ -31,9 +32,10 @@ interface Props {
 
 export const CodeBlock = ({
   children: rawChildren,
+  graphqlPlayground,
+  initialIndex = 0,
   label: rawLabel,
   language: rawLanguage,
-  graphqlPlayground,
   size = DEFAULT_SIZE,
   trim = true,
 }: Props) => {
@@ -53,9 +55,14 @@ export const CodeBlock = ({
   const smallerSize = SIZE_TO_SMALLER[size];
   const tablePadding = SIZE_TO_TABLE_PADDING[size];
 
-  const [index, setIndex] = useState(0);
+  const [index, setIndex] = useState({ dirty: false, value: initialIndex });
+
+  useEffect(
+    () => setIndex((i) => (i.dirty ? i : { ...i, value: initialIndex })),
+    [initialIndex],
+  );
 
-  const child = children[index];
+  const child = children[index.value] ?? children[0];
 
   const jsoncVariables =
     children[0].language === 'graphql' && children[1]?.label === 'Variables'
@@ -90,13 +97,17 @@ export const CodeBlock = ({
               >
                 <Text
                   size={smallerSize}
-                  tone={index === labelIndex ? 'secondary' : undefined}
+                  tone={index.value === labelIndex ? 'secondary' : undefined}
                   weight="medium"
                 >
-                  {children.length === 1 || index === labelIndex ? (
+                  {children.length === 1 || index.value === labelIndex ? (
                     label
                   ) : (
-                    <TextLinkButton onClick={() => setIndex(labelIndex)}>
+                    <TextLinkButton
+                      onClick={() =>
+                        setIndex({ dirty: true, value: labelIndex })
+                      }
+                    >
                       {label}
                     </TextLinkButton>
                   )}

package/src/private/MdxCodeBlock.tsx

@@ -6,7 +6,13 @@ import type { CodeChildProps } from '../components/CodeBlock/CodeChild';
 import { useGraphQLPlayground } from './hooks/graphqlPlayground';
 import type { Size } from './size';
 
-const toLabel = (meta?: string) => meta?.match(/label="([^"]+)"/)?.[1];
+const LABEL_REGEX = /label="([^"]+)"/;
+
+const toDefault = (meta?: string): boolean =>
+  Boolean(meta?.replace(LABEL_REGEX, '').match(/(^|\s)default(\s|$)/));
+
+const toLabel = (meta?: string): string | undefined =>
+  meta?.match(LABEL_REGEX)?.[1];
 
 /**
  * MDAST node as passed through by the `mergeCodeBlocks` Remark plugin.
@@ -39,8 +45,18 @@ export const createMdxCodeBlock =
     if (className === 'language-scoobie-merged-code' && metastring) {
       const data = JSON.parse(metastring) as MdastCode[];
 
+      const firstDefaultIndex = data.findIndex((child) =>
+        toDefault(child.meta),
+      );
+
+      const initialIndex = firstDefaultIndex === -1 ? 0 : firstDefaultIndex;
+
       return (
-        <CodeBlock graphqlPlayground={graphqlPlayground} size={size}>
+        <CodeBlock
+          graphqlPlayground={graphqlPlayground}
+          initialIndex={initialIndex}
+          size={size}
+        >
           {data.map(toCodeChildProps)}
         </CodeBlock>
       );