@readme/markdown 15.4.0 → 15.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Accordion/index.tsx +5 -1
- package/components/Tabs/index.tsx +9 -1
- package/dist/hooks/useRestartAnimatedImages/index.d.ts +14 -0
- package/dist/lib/utils/mdxish/mdxish-expression.d.ts +7 -0
- package/dist/lib/utils/mdxish/mdxish-get-component-name.d.ts +2 -0
- package/dist/main.js +233 -215
- package/dist/main.node.js +233 -215
- package/dist/main.node.js.map +1 -1
- package/dist/processor/compile/list-item.d.ts +2 -2
- package/dist/processor/compile/table-cell-block-markers.d.ts +11 -0
- package/dist/processor/compile/text.d.ts +3 -2
- package/dist/processor/transform/mdxish/evaluate-expressions.d.ts +11 -5
- package/dist/render-fixture.node.js +233 -215
- package/dist/render-fixture.node.js.map +1 -1
- package/package.json +1 -1
- package/dist/processor/transform/mdxish/components/self-closing-blocks.d.ts +0 -21
- package/dist/processor/transform/mdxish/components/snake-case-components.d.ts +0 -28
- package/dist/processor/transform/mdxish/restore-snake-case-component-name.d.ts +0 -12
package/dist/main.node.js
CHANGED
|
@@ -19045,7 +19045,7 @@ module.exports = function () {
|
|
|
19045
19045
|
|
|
19046
19046
|
/***/ },
|
|
19047
19047
|
|
|
19048
|
-
/***/
|
|
19048
|
+
/***/ 8719
|
|
19049
19049
|
(module, __webpack_exports__, __webpack_require__) {
|
|
19050
19050
|
|
|
19051
19051
|
"use strict";
|
|
@@ -19186,6 +19186,63 @@ __webpack_require__.d(util_types_namespaceObject, {
|
|
|
19186
19186
|
// EXTERNAL MODULE: external "react"
|
|
19187
19187
|
var external_react_ = __webpack_require__(4953);
|
|
19188
19188
|
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
|
|
19189
|
+
;// ./hooks/useRestartAnimatedImages/index.tsx
|
|
19190
|
+
|
|
19191
|
+
/**
|
|
19192
|
+
* GIF is the one extension that implies animation. `.webp` and `.png` (the extension an APNG
|
|
19193
|
+
* ships under) are overwhelmingly static, so matching them would reload far more images than
|
|
19194
|
+
* it rewinds; telling those apart needs the bytes, not the URL.
|
|
19195
|
+
*/
|
|
19196
|
+
const ANIMATED_IMAGE_SRC = /\.gif(\?|#|$)/i;
|
|
19197
|
+
const restartAnimatedImages = (root) => {
|
|
19198
|
+
root?.querySelectorAll('img').forEach(img => {
|
|
19199
|
+
if (!ANIMATED_IMAGE_SRC.test(img.src))
|
|
19200
|
+
return;
|
|
19201
|
+
const { src } = img;
|
|
19202
|
+
// There's no seek API for animated images; reassigning `src` is the only reset
|
|
19203
|
+
img.src = '';
|
|
19204
|
+
img.src = src;
|
|
19205
|
+
});
|
|
19206
|
+
};
|
|
19207
|
+
const useRestartAfterFirstPaint = (revealKey, restart) => {
|
|
19208
|
+
const isFirstRender = (0,external_react_.useRef)(true);
|
|
19209
|
+
const latestRestart = (0,external_react_.useRef)(restart);
|
|
19210
|
+
latestRestart.current = restart;
|
|
19211
|
+
(0,external_react_.useEffect)(() => {
|
|
19212
|
+
if (isFirstRender.current) {
|
|
19213
|
+
isFirstRender.current = false;
|
|
19214
|
+
return;
|
|
19215
|
+
}
|
|
19216
|
+
latestRestart.current();
|
|
19217
|
+
}, [revealKey]);
|
|
19218
|
+
};
|
|
19219
|
+
/**
|
|
19220
|
+
* Restarts GIF playback inside the panel that just became active.
|
|
19221
|
+
*
|
|
19222
|
+
* Tabs keep every panel mounted, so an <img> is never re-created and a GIF is
|
|
19223
|
+
* shown mid-loop (or frozen on its last frame) when its tab is re-selected.
|
|
19224
|
+
*
|
|
19225
|
+
* @returns a ref to attach to each panel element, indexed by tab.
|
|
19226
|
+
*/
|
|
19227
|
+
function useRestartAnimatedImages(activeIndex) {
|
|
19228
|
+
const panelRefs = (0,external_react_.useRef)([]);
|
|
19229
|
+
useRestartAfterFirstPaint(activeIndex, () => restartAnimatedImages(panelRefs.current[activeIndex]));
|
|
19230
|
+
return panelRefs;
|
|
19231
|
+
}
|
|
19232
|
+
/**
|
|
19233
|
+
* Restarts GIF playback inside an element that has just been revealed after being hidden —
|
|
19234
|
+
* a collapsed <details>, whose images have been animating out of sight since page load.
|
|
19235
|
+
*/
|
|
19236
|
+
function useRestartAnimatedImagesOnReveal(isRevealed) {
|
|
19237
|
+
const contentRef = (0,external_react_.useRef)(null);
|
|
19238
|
+
useRestartAfterFirstPaint(isRevealed, () => {
|
|
19239
|
+
// Rewinding content the reader just hid would be wasted work
|
|
19240
|
+
if (isRevealed)
|
|
19241
|
+
restartAnimatedImages(contentRef.current);
|
|
19242
|
+
});
|
|
19243
|
+
return contentRef;
|
|
19244
|
+
}
|
|
19245
|
+
|
|
19189
19246
|
;// ./components/Icon/index.tsx
|
|
19190
19247
|
|
|
19191
19248
|
/** @see https://docs-v5.fontawesome.com/web/reference-icons */
|
|
@@ -19210,14 +19267,16 @@ const Icon = ({ className, faClassName, icon, iconColor }) => {
|
|
|
19210
19267
|
|
|
19211
19268
|
|
|
19212
19269
|
|
|
19270
|
+
|
|
19213
19271
|
const Accordion = ({ children, icon, iconColor, title }) => {
|
|
19214
19272
|
const [isOpen, setIsOpen] = (0,external_react_.useState)(false);
|
|
19273
|
+
const contentRef = useRestartAnimatedImagesOnReveal(isOpen);
|
|
19215
19274
|
return (external_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
|
|
19216
19275
|
external_react_default().createElement("summary", { className: "Accordion-title" },
|
|
19217
19276
|
external_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-regular fa-chevron-right` }),
|
|
19218
19277
|
icon && external_react_default().createElement(components_Icon, { className: "Accordion-icon", icon: icon, iconColor: iconColor }),
|
|
19219
19278
|
title),
|
|
19220
|
-
external_react_default().createElement("div", { className: "Accordion-content" }, children)));
|
|
19279
|
+
external_react_default().createElement("div", { ref: contentRef, className: "Accordion-content" }, children)));
|
|
19221
19280
|
};
|
|
19222
19281
|
/* harmony default export */ const components_Accordion = (Accordion);
|
|
19223
19282
|
|
|
@@ -25080,11 +25139,13 @@ function TableOfContents({ children }) {
|
|
|
25080
25139
|
|
|
25081
25140
|
|
|
25082
25141
|
|
|
25142
|
+
|
|
25083
25143
|
const Tab = ({ children }) => {
|
|
25084
25144
|
return external_react_default().createElement("div", { className: "TabContent" }, children);
|
|
25085
25145
|
};
|
|
25086
25146
|
const Tabs = ({ children }) => {
|
|
25087
25147
|
const [activeTab, setActiveTab] = (0,external_react_.useState)(0);
|
|
25148
|
+
const panelRefs = useRestartAnimatedImages(activeTab);
|
|
25088
25149
|
// React passes `children` as a single element when there's only one child, so normalize.
|
|
25089
25150
|
const tabs = external_react_default().Children.toArray(children);
|
|
25090
25151
|
return (external_react_default().createElement("div", { className: "TabGroup" },
|
|
@@ -25092,7 +25153,9 @@ const Tabs = ({ children }) => {
|
|
|
25092
25153
|
external_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_react_default().createElement("button", { key: tab.key, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
|
|
25093
25154
|
tab.props.icon && (external_react_default().createElement(components_Icon, { className: "TabGroup-icon", icon: tab.props.icon, iconColor: tab.props.iconColor })),
|
|
25094
25155
|
tab.props.title))))),
|
|
25095
|
-
external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key,
|
|
25156
|
+
external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key, ref: el => {
|
|
25157
|
+
panelRefs.current[index] = el;
|
|
25158
|
+
}, hidden: index !== activeTab }, tab))))));
|
|
25096
25159
|
};
|
|
25097
25160
|
/* harmony default export */ const components_Tabs = (Tabs);
|
|
25098
25161
|
|
|
@@ -96573,6 +96636,10 @@ function syntax_createTokenize(mode) {
|
|
|
96573
96636
|
effects.consume(code);
|
|
96574
96637
|
return inBraceExpr;
|
|
96575
96638
|
}
|
|
96639
|
+
// A raw `<` can't sit in an opening tag (quotes/braces are handled above);
|
|
96640
|
+
// bailing bounds each attempt to the next `<` instead of rescanning the line.
|
|
96641
|
+
if (code === codes.lessThan)
|
|
96642
|
+
return nok(code);
|
|
96576
96643
|
effects.consume(code);
|
|
96577
96644
|
return afterOpenTagName;
|
|
96578
96645
|
}
|
|
@@ -121779,7 +121846,7 @@ const listMarkerRegex = /^(?:[*+-]|\d+[.)])(?:([\r\n]| {1,3})|$)/;
|
|
|
121779
121846
|
* with their checkbox intact (for example, `- [ ]`) instead of dropping it
|
|
121780
121847
|
* We can add more adjustments if needed
|
|
121781
121848
|
*/
|
|
121782
|
-
const compile_list_item_listItem = (node, parent, state, info) => {
|
|
121849
|
+
const compile_list_item_listItem = ((node, parent, state, info) => {
|
|
121783
121850
|
const head = node.children[0];
|
|
121784
121851
|
const isCheckbox = typeof node.checked === 'boolean' && head && head.type === 'paragraph';
|
|
121785
121852
|
if (!isCheckbox) {
|
|
@@ -121803,15 +121870,47 @@ const compile_list_item_listItem = (node, parent, state, info) => {
|
|
|
121803
121870
|
return `${marker}${actualSeparator}${checkbox}`;
|
|
121804
121871
|
});
|
|
121805
121872
|
return value;
|
|
121806
|
-
};
|
|
121873
|
+
});
|
|
121807
121874
|
/* harmony default export */ const list_item = (compile_list_item_listItem);
|
|
121808
121875
|
|
|
121809
121876
|
;// ./processor/compile/plain.ts
|
|
121810
121877
|
const plain_plain = (node) => node.value;
|
|
121811
121878
|
/* harmony default export */ const compile_plain = (plain_plain);
|
|
121812
121879
|
|
|
121880
|
+
;// ./processor/compile/table-cell-block-markers.ts
|
|
121881
|
+
const CELL_START_BLOCK_MARKER = /^(?:[-+](?=\s|$)|#{1,6}(?=\s|$)|>)/;
|
|
121882
|
+
const BR_HTML = /^\s*<br\s*\/?>\s*$/i;
|
|
121883
|
+
const isLineBreak = (node) => {
|
|
121884
|
+
if (node.type === 'break')
|
|
121885
|
+
return true;
|
|
121886
|
+
if (node.type === 'html')
|
|
121887
|
+
return BR_HTML.test(node.value);
|
|
121888
|
+
return node.type === 'mdxJsxTextElement' && 'name' in node && node.name?.toLowerCase() === 'br';
|
|
121889
|
+
};
|
|
121890
|
+
const followsLineBreak = (node, parent) => {
|
|
121891
|
+
const siblings = (parent?.children ?? []);
|
|
121892
|
+
const previous = siblings[siblings.indexOf(node) - 1];
|
|
121893
|
+
return !!previous && isLineBreak(previous);
|
|
121894
|
+
};
|
|
121895
|
+
/**
|
|
121896
|
+
* Re-escapes a leading block marker (`-`, `+`, `#`, `>`) at the start of a table cell, or
|
|
121897
|
+
* after a `<br />` within one.
|
|
121898
|
+
*
|
|
121899
|
+
* A cell is serialized mid-line, so the `atBreak` patterns that escape these characters
|
|
121900
|
+
* never fire and an author's `| \- one |` round trips to `| - one |` (RM-17203). Cells are
|
|
121901
|
+
* serialized as `containerPhrasing(cell, { before: '|' })`, so `|` marks the cell start.
|
|
121902
|
+
*/
|
|
121903
|
+
const escapeCellStartBlockMarker = (serialized, node, parent, state, info) => {
|
|
121904
|
+
if (serialized.startsWith('\\') || !CELL_START_BLOCK_MARKER.test(serialized))
|
|
121905
|
+
return serialized;
|
|
121906
|
+
if (!state.stack.includes('tableCell') || !(info.before === '|' || followsLineBreak(node, parent)))
|
|
121907
|
+
return serialized;
|
|
121908
|
+
return `\\${serialized}`;
|
|
121909
|
+
};
|
|
121910
|
+
|
|
121813
121911
|
;// ./processor/compile/text.ts
|
|
121814
121912
|
|
|
121913
|
+
|
|
121815
121914
|
// A `_` flanked by word characters can never open or close emphasis under
|
|
121816
121915
|
// CommonMark's flanking rules, so the escape mdast-util-to-markdown adds to
|
|
121817
121916
|
// intraword underscores is unnecessary and only produces noisy `\_` diffs.
|
|
@@ -121819,9 +121918,10 @@ const plain_plain = (node) => node.value;
|
|
|
121819
121918
|
const INTRAWORD_UNDERSCORE_ESCAPE = /(?<=[\p{L}\p{N}_])\\_(?=[\p{L}\p{N}_]|\\_)/gu;
|
|
121820
121919
|
const compile_text_text = (node, parent, state, info) => {
|
|
121821
121920
|
const serialized = handle.text(node, parent, state, info);
|
|
121822
|
-
return serialized
|
|
121921
|
+
return escapeCellStartBlockMarker(serialized, node, parent, state, info);
|
|
121823
121922
|
};
|
|
121824
|
-
|
|
121923
|
+
const mdxishText = (node, parent, state, info) => compile_text_text(node, parent, state, info).replace(INTRAWORD_UNDERSCORE_ESCAPE, '_');
|
|
121924
|
+
/* harmony default export */ const compile_text = (mdxishText);
|
|
121825
121925
|
|
|
121826
121926
|
;// ./processor/compile/index.ts
|
|
121827
121927
|
|
|
@@ -121853,6 +121953,7 @@ function compilers(mdxish = false) {
|
|
|
121853
121953
|
html: compile_compatibility,
|
|
121854
121954
|
i: compile_compatibility,
|
|
121855
121955
|
plain: compile_plain,
|
|
121956
|
+
text: compile_text_text,
|
|
121856
121957
|
yaml: compile_compatibility,
|
|
121857
121958
|
// needed only for mdxish
|
|
121858
121959
|
...(mdxish && { list: compile_list }),
|
|
@@ -123921,13 +124022,14 @@ function restoreCodeBlocks(content, protectedCode) {
|
|
|
123921
124022
|
*
|
|
123922
124023
|
* The attribute portion skips over quoted strings (`"..."` and `'...'`) so that
|
|
123923
124024
|
* a `/>` inside an attribute value (e.g. `title="use /> here"`) does not cause
|
|
123924
|
-
* a premature match
|
|
124025
|
+
* a premature match, and stops at an unquoted `<` so a stray `<x` in prose
|
|
124026
|
+
* doesn't scan to the end of the document (quadratic).
|
|
123925
124027
|
*
|
|
123926
124028
|
* Only matches lowercase tag names to avoid interfering with PascalCase
|
|
123927
124029
|
* JSX custom components (e.g. `<MyComponent />`), which are handled
|
|
123928
124030
|
* separately by components/mdx-blocks.
|
|
123929
124031
|
*/
|
|
123930
|
-
const SELF_CLOSING_TAG_RE = /<([a-z][a-z0-9-]*)((?:\s+(?:[
|
|
124032
|
+
const SELF_CLOSING_TAG_RE = /<([a-z][a-z0-9-]*)((?:\s+(?:[^<>"']*(?:"[^"]*"|'[^']*'))*[^<>"']*)?)?\s*\/>/g;
|
|
123931
124033
|
/**
|
|
123932
124034
|
* String-level preprocessor that converts self-closing non-void HTML tags
|
|
123933
124035
|
* into explicitly closed tags.
|
|
@@ -124592,8 +124694,9 @@ function terminateHtmlFlowBlocks(content) {
|
|
|
124592
124694
|
|
|
124593
124695
|
|
|
124594
124696
|
|
|
124595
|
-
// Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string.
|
|
124596
|
-
|
|
124697
|
+
// Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. One name
|
|
124698
|
+
// char suffices for existence — `[\w-]+` backtracked quadratically over huge attributes.
|
|
124699
|
+
const NESTED_ATTR_EXPRESSION_RE = /[\w-]\s*=\s*\{/;
|
|
124597
124700
|
// Name shape mirrors `componentTagPattern`; the lookbehind skips the inner tag
|
|
124598
124701
|
// of a legacy `<<VARIABLE>>`.
|
|
124599
124702
|
const NESTED_COMPONENT_TAG_RE = /(?<!<)<([A-Z][A-Za-z0-9_]*)[\s/>]/g;
|
|
@@ -124892,150 +124995,6 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
|
|
|
124892
124995
|
};
|
|
124893
124996
|
/* harmony default export */ const mdx_blocks = (mdxishMdxComponentBlocks);
|
|
124894
124997
|
|
|
124895
|
-
;// ./processor/transform/mdxish/components/self-closing-blocks.ts
|
|
124896
|
-
|
|
124897
|
-
|
|
124898
|
-
/**
|
|
124899
|
-
* Tags to process as self-closing blocks.
|
|
124900
|
-
* These components use simple string attributes (no JSX expressions like `data={[...]}`).
|
|
124901
|
-
* Components with JSX expression attributes should NOT be added here as parseAttributes
|
|
124902
|
-
* cannot handle them correctly.
|
|
124903
|
-
*/
|
|
124904
|
-
const SELF_CLOSING_BLOCK_TAGS = new Set(['Embed', 'Recipe']);
|
|
124905
|
-
// Regex to match self-closing PascalCase tags (handles multi-line)
|
|
124906
|
-
const selfClosingTagPattern = /^<([A-Z][A-Za-z0-9_]*)([\s\S]*?)\/>$/;
|
|
124907
|
-
/**
|
|
124908
|
-
* Try to convert a paragraph node containing a self-closing JSX component into an mdxJsxFlowElement.
|
|
124909
|
-
* Returns the new node if conversion succeeded, or null if the node doesn't match.
|
|
124910
|
-
*/
|
|
124911
|
-
const tryConvertToMdxNode = (node) => {
|
|
124912
|
-
if (node.children.length !== 1)
|
|
124913
|
-
return null;
|
|
124914
|
-
const child = node.children[0];
|
|
124915
|
-
if (child.type !== 'html')
|
|
124916
|
-
return null;
|
|
124917
|
-
const value = child.value?.trim();
|
|
124918
|
-
if (!value)
|
|
124919
|
-
return null;
|
|
124920
|
-
const match = value.match(selfClosingTagPattern);
|
|
124921
|
-
if (!match)
|
|
124922
|
-
return null;
|
|
124923
|
-
const [, tag, attrString] = match;
|
|
124924
|
-
if (!SELF_CLOSING_BLOCK_TAGS.has(tag))
|
|
124925
|
-
return null;
|
|
124926
|
-
return {
|
|
124927
|
-
type: 'mdxJsxFlowElement',
|
|
124928
|
-
name: tag,
|
|
124929
|
-
attributes: parseAttributes(attrString),
|
|
124930
|
-
children: [],
|
|
124931
|
-
position: node.position,
|
|
124932
|
-
};
|
|
124933
|
-
};
|
|
124934
|
-
/**
|
|
124935
|
-
* Transform paragraph-wrapped self-closing JSX components into mdxJsxFlowElement nodes.
|
|
124936
|
-
*
|
|
124937
|
-
* CommonMark wraps multi-line JSX in paragraphs when the opening tag isn't complete
|
|
124938
|
-
* on one line. This plugin detects these structures and unwraps them for components
|
|
124939
|
-
* in the SELF_CLOSING_BLOCK_TAGS allowlist.
|
|
124940
|
-
*
|
|
124941
|
-
* Input structure:
|
|
124942
|
-
* ```
|
|
124943
|
-
* paragraph > html: "<Embed\n typeOfEmbed=\"youtube\"\n/>"
|
|
124944
|
-
* ```
|
|
124945
|
-
*
|
|
124946
|
-
* Output structure:
|
|
124947
|
-
* ```
|
|
124948
|
-
* mdxJsxFlowElement: { name: "Embed", attributes: [...], children: [] }
|
|
124949
|
-
* ```
|
|
124950
|
-
*/
|
|
124951
|
-
const mdxishSelfClosingBlocks = () => tree => {
|
|
124952
|
-
visit(tree, 'paragraph', (node, index, parent) => {
|
|
124953
|
-
if (index === undefined || !parent)
|
|
124954
|
-
return;
|
|
124955
|
-
const mdxNode = tryConvertToMdxNode(node);
|
|
124956
|
-
if (mdxNode) {
|
|
124957
|
-
parent.children.splice(index, 1, mdxNode);
|
|
124958
|
-
}
|
|
124959
|
-
});
|
|
124960
|
-
};
|
|
124961
|
-
/* harmony default export */ const self_closing_blocks = (mdxishSelfClosingBlocks);
|
|
124962
|
-
|
|
124963
|
-
;// ./processor/transform/mdxish/components/snake-case-components.ts
|
|
124964
|
-
|
|
124965
|
-
|
|
124966
|
-
/**
|
|
124967
|
-
* Replaces snake_case component names with valid HTML placeholders.
|
|
124968
|
-
* Required because remark-parse rejects tags with underscores.
|
|
124969
|
-
* Example: `<Snake_case />` → `<MDXishSnakeCase0 />`
|
|
124970
|
-
*
|
|
124971
|
-
* Code blocks and inline code are protected and will not be transformed.
|
|
124972
|
-
*
|
|
124973
|
-
* @param content - The markdown content to process
|
|
124974
|
-
* @param options - Options including knownComponents to filter by
|
|
124975
|
-
*/
|
|
124976
|
-
function processSnakeCaseComponent(content, options = {}) {
|
|
124977
|
-
const { knownComponents } = options;
|
|
124978
|
-
// Early exit if no potential snake_case components
|
|
124979
|
-
if (!/[A-Z][A-Za-z0-9]*_[A-Za-z0-9_]*/.test(content)) {
|
|
124980
|
-
return { content, mapping: {} };
|
|
124981
|
-
}
|
|
124982
|
-
// Step 1: Extract code blocks to protect them from transformation
|
|
124983
|
-
const { protectedCode, protectedContent } = protectCodeBlocks(content);
|
|
124984
|
-
// Find the highest existing placeholder number to avoid collisions
|
|
124985
|
-
// e.g., if content has <MDXishSnakeCase0 />, start counter from 1
|
|
124986
|
-
const placeholderPattern = /MDXishSnakeCase(\d+)/g;
|
|
124987
|
-
let startCounter = 0;
|
|
124988
|
-
let placeholderMatch;
|
|
124989
|
-
while ((placeholderMatch = placeholderPattern.exec(content)) !== null) {
|
|
124990
|
-
const num = parseInt(placeholderMatch[1], 10);
|
|
124991
|
-
if (num >= startCounter) {
|
|
124992
|
-
startCounter = num + 1;
|
|
124993
|
-
}
|
|
124994
|
-
}
|
|
124995
|
-
const mapping = {};
|
|
124996
|
-
const reverseMap = new Map();
|
|
124997
|
-
let counter = startCounter;
|
|
124998
|
-
// Step 2: Transform snake_case components in non-code content
|
|
124999
|
-
const processedContent = protectedContent.replace(componentTagPattern, (match, tagName, attrs, selfClosing) => {
|
|
125000
|
-
if (!tagName.includes('_')) {
|
|
125001
|
-
return match;
|
|
125002
|
-
}
|
|
125003
|
-
const isClosing = tagName.startsWith('/');
|
|
125004
|
-
const cleanTagName = isClosing ? tagName.slice(1) : tagName;
|
|
125005
|
-
// Only transform if it's a known component (or if no filter is provided)
|
|
125006
|
-
if (knownComponents && !knownComponents.has(cleanTagName)) {
|
|
125007
|
-
return match;
|
|
125008
|
-
}
|
|
125009
|
-
let placeholder = reverseMap.get(cleanTagName);
|
|
125010
|
-
if (!placeholder) {
|
|
125011
|
-
// eslint-disable-next-line no-plusplus
|
|
125012
|
-
placeholder = `MDXishSnakeCase${counter++}`;
|
|
125013
|
-
mapping[placeholder] = cleanTagName;
|
|
125014
|
-
reverseMap.set(cleanTagName, placeholder);
|
|
125015
|
-
}
|
|
125016
|
-
const processedTagName = isClosing ? `/${placeholder}` : placeholder;
|
|
125017
|
-
return `<${processedTagName}${attrs}${selfClosing}>`;
|
|
125018
|
-
});
|
|
125019
|
-
// Step 3: Restore code blocks (untouched)
|
|
125020
|
-
const finalContent = restoreCodeBlocks(processedContent, protectedCode);
|
|
125021
|
-
return {
|
|
125022
|
-
content: finalContent,
|
|
125023
|
-
mapping,
|
|
125024
|
-
};
|
|
125025
|
-
}
|
|
125026
|
-
/**
|
|
125027
|
-
* Restores placeholder name to original snake_case name.
|
|
125028
|
-
* Uses case-insensitive matching since HTML parsers normalize to lowercase.
|
|
125029
|
-
*/
|
|
125030
|
-
function restoreSnakeCase(placeholderName, mapping) {
|
|
125031
|
-
if (mapping[placeholderName]) {
|
|
125032
|
-
return mapping[placeholderName];
|
|
125033
|
-
}
|
|
125034
|
-
const lowerName = placeholderName.toLowerCase();
|
|
125035
|
-
const matchingKey = Object.keys(mapping).find(key => key.toLowerCase() === lowerName);
|
|
125036
|
-
return matchingKey ? mapping[matchingKey] : placeholderName;
|
|
125037
|
-
}
|
|
125038
|
-
|
|
125039
124998
|
;// ./processor/transform/mdxish/resolve-esm-imports.ts
|
|
125040
124999
|
|
|
125041
125000
|
// We provide React as a default module so that components can use hooks
|
|
@@ -125220,6 +125179,54 @@ const containsJsxNode = (value) => {
|
|
|
125220
125179
|
return true;
|
|
125221
125180
|
return Object.values(value).some(containsJsxNode);
|
|
125222
125181
|
};
|
|
125182
|
+
/** Read the component name off a JSX element name node (`Foo`, `Foo.Bar`, `foo:Bar`). */
|
|
125183
|
+
const jsxElementName = (name) => {
|
|
125184
|
+
if (name === null || typeof name !== 'object')
|
|
125185
|
+
return undefined;
|
|
125186
|
+
const node = name;
|
|
125187
|
+
if (node.type === 'JSXIdentifier')
|
|
125188
|
+
return typeof node.name === 'string' ? node.name : undefined;
|
|
125189
|
+
// `<Foo.Bar/>` and `<foo:Bar/>` resolve through their leftmost part.
|
|
125190
|
+
if (node.type === 'JSXMemberExpression')
|
|
125191
|
+
return jsxElementName(node.object);
|
|
125192
|
+
if (node.type === 'JSXNamespacedName')
|
|
125193
|
+
return jsxElementName(node.namespace);
|
|
125194
|
+
return undefined;
|
|
125195
|
+
};
|
|
125196
|
+
/**
|
|
125197
|
+
* Collect the capitalized names an expression uses as JSX tags. Parsed rather than pattern
|
|
125198
|
+
* matched: `{count < Max ? <Foo/> : <Bar/>}` puts a capitalized name straight after a `<` without
|
|
125199
|
+
* it being a tag, and only the parser can tell the two apart. Unparseable input yields nothing —
|
|
125200
|
+
* evaluation is about to throw on it anyway.
|
|
125201
|
+
*/
|
|
125202
|
+
const jsxComponentNames = (expression) => {
|
|
125203
|
+
let program;
|
|
125204
|
+
try {
|
|
125205
|
+
program = parseExpression(expression);
|
|
125206
|
+
}
|
|
125207
|
+
catch {
|
|
125208
|
+
return [];
|
|
125209
|
+
}
|
|
125210
|
+
const names = new Set();
|
|
125211
|
+
const walk = (value) => {
|
|
125212
|
+
if (Array.isArray(value)) {
|
|
125213
|
+
value.forEach(walk);
|
|
125214
|
+
return;
|
|
125215
|
+
}
|
|
125216
|
+
if (value === null || typeof value !== 'object')
|
|
125217
|
+
return;
|
|
125218
|
+
const node = value;
|
|
125219
|
+
if (node.type === 'JSXOpeningElement') {
|
|
125220
|
+
const name = jsxElementName(node.name);
|
|
125221
|
+
// Lowercase tags compile to a string type, never a variable reference.
|
|
125222
|
+
if (name && /^[A-Z]/.test(name))
|
|
125223
|
+
names.add(name);
|
|
125224
|
+
}
|
|
125225
|
+
Object.values(node).forEach(walk);
|
|
125226
|
+
};
|
|
125227
|
+
walk(program);
|
|
125228
|
+
return Array.from(names);
|
|
125229
|
+
};
|
|
125223
125230
|
/** Convert a program's JSX into `React.createElement` calls and evaluate it. `scope` must provide `React`. */
|
|
125224
125231
|
const evalJsxProgram = (program, scope) => {
|
|
125225
125232
|
buildJsx(program, { runtime: 'classic', pragma: 'React.createElement', pragmaFrag: 'React.Fragment' });
|
|
@@ -125425,6 +125432,28 @@ function reactElementToHast(node) {
|
|
|
125425
125432
|
|
|
125426
125433
|
|
|
125427
125434
|
|
|
125435
|
+
|
|
125436
|
+
|
|
125437
|
+
|
|
125438
|
+
|
|
125439
|
+
/**
|
|
125440
|
+
* Bind the components a given expression actually uses as tags. Scoped per expression on purpose:
|
|
125441
|
+
* binding the whole hash would shadow same-named globals (a `math` component would break
|
|
125442
|
+
* `{Math.max(1, 2)}`) and pad `evaluate`'s `new Function` parameter list. Resolution defers to
|
|
125443
|
+
* `getComponentName` so an expression and a plain tag always reach the same component.
|
|
125444
|
+
*/
|
|
125445
|
+
const componentScope = (expression, components) => {
|
|
125446
|
+
const scope = {};
|
|
125447
|
+
jsxComponentNames(expression).forEach(name => {
|
|
125448
|
+
// `getComponentName` normalizes the tag, never the key, so it can't match `<MyBlock/>` to a
|
|
125449
|
+
// `my_block` entry; compare the key's PascalCase form for that direction.
|
|
125450
|
+
const tagName = getComponentName(name, components) ?? Object.keys(components).find(k => toPascalCase(k) === name);
|
|
125451
|
+
if (!tagName)
|
|
125452
|
+
return;
|
|
125453
|
+
scope[name] = (props) => external_react_default().createElement(tagName, props);
|
|
125454
|
+
});
|
|
125455
|
+
return scope;
|
|
125456
|
+
};
|
|
125428
125457
|
/**
|
|
125429
125458
|
* We divide the result of an expression into two categories:
|
|
125430
125459
|
* 1. Renderable values: HTML, JSX, e.g. .map() returning JSX
|
|
@@ -125435,6 +125464,17 @@ const isRenderable = (value) => {
|
|
|
125435
125464
|
return true;
|
|
125436
125465
|
return Array.isArray(value) && value.some(isRenderable);
|
|
125437
125466
|
};
|
|
125467
|
+
/**
|
|
125468
|
+
* Whether an expression evaluated to block-level content. Components count as block-level
|
|
125469
|
+
* unless they're on the inline list, matching the assumption the rest of the component
|
|
125470
|
+
* pipeline makes.
|
|
125471
|
+
*/
|
|
125472
|
+
const isBlockResult = (children) => children.some(child => {
|
|
125473
|
+
if (child.type !== 'element' && child.type !== 'mdx-jsx')
|
|
125474
|
+
return false;
|
|
125475
|
+
const { tagName } = child;
|
|
125476
|
+
return !STANDARD_HTML_TAGS.has(tagName.toLowerCase()) && !INLINE_COMPONENT_TAGS.has(tagName);
|
|
125477
|
+
});
|
|
125438
125478
|
/** Turn a non-renderable evaluation result into a text node. */
|
|
125439
125479
|
const createTextNode = (result, position) => {
|
|
125440
125480
|
if (result === null || result === undefined)
|
|
@@ -125446,13 +125486,22 @@ const createTextNode = (result, position) => {
|
|
|
125446
125486
|
/**
|
|
125447
125487
|
* AST transformer to evaluate MDX expressions.
|
|
125448
125488
|
* Replaces mdxFlowExpression and mdxTextExpression nodes with their evaluated values.
|
|
125449
|
-
* Self-contained expressions resolve directly (e.g. `{1+1}`); expressions that
|
|
125450
|
-
*
|
|
125451
|
-
* earlier `export const/function` (collected onto
|
|
125452
|
-
* Anything else falls through to the error branch and is kept as
|
|
125453
|
-
|
|
125454
|
-
|
|
125455
|
-
|
|
125489
|
+
* Self-contained expressions resolve directly (e.g. `{1+1}`); expressions that reference
|
|
125490
|
+
* identifiers can resolve if those identifiers are a custom component, the `user` variables
|
|
125491
|
+
* object, or were introduced by an earlier `export const/function` (collected onto
|
|
125492
|
+
* `file.data.mdxishScope`). Anything else falls through to the error branch and is kept as
|
|
125493
|
+
* literal `{...}` text.
|
|
125494
|
+
*/
|
|
125495
|
+
const evaluateExpressions = ({ components, variables } = {}) => (tree, file) => {
|
|
125496
|
+
const baseScope = {
|
|
125497
|
+
// `User` matches the fallback the MDX path binds in `run.tsx`. Only when variables were
|
|
125498
|
+
// supplied: the proxy never throws, so an unconditional bind would resolve `user.*` on
|
|
125499
|
+
// surfaces that render without them instead of leaving literal text.
|
|
125500
|
+
...(variables ? { user: user(variables) } : {}),
|
|
125501
|
+
// In-document exports win, matching `renderMdxish`.
|
|
125502
|
+
...file.data.mdxishScope,
|
|
125503
|
+
React: (external_react_default()),
|
|
125504
|
+
};
|
|
125456
125505
|
visit(tree, ['mdxFlowExpression', 'mdxTextExpression'], (node, index, parent) => {
|
|
125457
125506
|
if (!parent || index === null || index === undefined)
|
|
125458
125507
|
return;
|
|
@@ -125462,6 +125511,7 @@ const evaluateExpressions = () => (tree, file) => {
|
|
|
125462
125511
|
if (!expression)
|
|
125463
125512
|
return;
|
|
125464
125513
|
try {
|
|
125514
|
+
const scope = { ...componentScope(expression, components ?? {}), ...baseScope };
|
|
125465
125515
|
const result = evalExpression(expression, scope);
|
|
125466
125516
|
if (isRenderable(result)) {
|
|
125467
125517
|
// Stash hast built straight from the React tree; `mdxExpressionHandler` emits it and it
|
|
@@ -125482,6 +125532,22 @@ const evaluateExpressions = () => (tree, file) => {
|
|
|
125482
125532
|
parent.children.splice(index, 1, { type: 'text', value: `{${processed}}`, position });
|
|
125483
125533
|
}
|
|
125484
125534
|
});
|
|
125535
|
+
// A text expression is parsed inside a paragraph, but its result can be block content: a
|
|
125536
|
+
// `<Tabs>` renders a `<div>`, and a browser closes the `<p>` before it, so the DOM it builds
|
|
125537
|
+
// no longer matches what was rendered and hydration fails. Lift the expression out when
|
|
125538
|
+
// that's all the paragraph holds.
|
|
125539
|
+
visit(tree, 'paragraph', (node, index, parent) => {
|
|
125540
|
+
if (!parent || index === null || index === undefined)
|
|
125541
|
+
return;
|
|
125542
|
+
const meaningful = node.children.filter(child => !(child.type === 'text' && !child.value.trim()));
|
|
125543
|
+
const [only] = meaningful;
|
|
125544
|
+
if (meaningful.length !== 1 || only.type !== 'mdxTextExpression')
|
|
125545
|
+
return;
|
|
125546
|
+
const hChildren = only.data?.hChildren;
|
|
125547
|
+
if (!hChildren || !isBlockResult(hChildren))
|
|
125548
|
+
return;
|
|
125549
|
+
parent.children.splice(index, 1, only);
|
|
125550
|
+
});
|
|
125485
125551
|
return tree;
|
|
125486
125552
|
};
|
|
125487
125553
|
/* harmony default export */ const evaluate_expressions = (evaluateExpressions);
|
|
@@ -127289,45 +127355,6 @@ const resolveDeferredAttributeExpressionProps = () => (tree, file) => {
|
|
|
127289
127355
|
};
|
|
127290
127356
|
/* harmony default export */ const resolve_deferred_attribute_expression_props = (resolveDeferredAttributeExpressionProps);
|
|
127291
127357
|
|
|
127292
|
-
;// ./processor/transform/mdxish/restore-snake-case-component-name.ts
|
|
127293
|
-
|
|
127294
|
-
|
|
127295
|
-
/**
|
|
127296
|
-
* Restores snake_case component names from placeholders after parsing.
|
|
127297
|
-
* Runs after mdxishComponentBlocks converts HTML nodes to mdxJsxFlowElement.
|
|
127298
|
-
*/
|
|
127299
|
-
const restoreSnakeCaseComponentNames = (options) => {
|
|
127300
|
-
const { mapping } = options;
|
|
127301
|
-
return tree => {
|
|
127302
|
-
if (!mapping || Object.keys(mapping).length === 0) {
|
|
127303
|
-
return tree;
|
|
127304
|
-
}
|
|
127305
|
-
visit(tree, 'mdxJsxFlowElement', (node) => {
|
|
127306
|
-
if (node.name) {
|
|
127307
|
-
node.name = restoreSnakeCase(node.name, mapping);
|
|
127308
|
-
}
|
|
127309
|
-
});
|
|
127310
|
-
// Pre-compile regex patterns for better performance
|
|
127311
|
-
const regexPatterns = Object.entries(mapping).map(([placeholder, original]) => ({
|
|
127312
|
-
regex: new RegExp(`(<\\/?)(${placeholder})(\\s|\\/?>)`, 'gi'),
|
|
127313
|
-
original,
|
|
127314
|
-
}));
|
|
127315
|
-
visit(tree, 'html', (node) => {
|
|
127316
|
-
if (node.value) {
|
|
127317
|
-
let newValue = node.value;
|
|
127318
|
-
regexPatterns.forEach(({ regex, original }) => {
|
|
127319
|
-
newValue = newValue.replace(regex, `$1${original}$3`);
|
|
127320
|
-
});
|
|
127321
|
-
if (newValue !== node.value) {
|
|
127322
|
-
node.value = newValue;
|
|
127323
|
-
}
|
|
127324
|
-
}
|
|
127325
|
-
});
|
|
127326
|
-
return tree;
|
|
127327
|
-
};
|
|
127328
|
-
};
|
|
127329
|
-
/* harmony default export */ const restore_snake_case_component_name = (restoreSnakeCaseComponentNames);
|
|
127330
|
-
|
|
127331
127358
|
;// ./processor/transform/mdxish/retain-boolean-attributes.ts
|
|
127332
127359
|
|
|
127333
127360
|
// Private Use Area character (U+E000) which is extremely unlikely to appear in real content.
|
|
@@ -127869,9 +127896,6 @@ function loadComponents() {
|
|
|
127869
127896
|
|
|
127870
127897
|
|
|
127871
127898
|
|
|
127872
|
-
|
|
127873
|
-
|
|
127874
|
-
|
|
127875
127899
|
|
|
127876
127900
|
|
|
127877
127901
|
|
|
@@ -127893,10 +127917,8 @@ const defaultTransformers = [
|
|
|
127893
127917
|
* 5. Terminate HTML flow blocks so subsequent content isn't swallowed
|
|
127894
127918
|
* 6. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
|
|
127895
127919
|
* 7. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
|
|
127896
|
-
* 8. Replace snake_case component names with parser-safe placeholders
|
|
127897
127920
|
*/
|
|
127898
|
-
function preprocessContent(content
|
|
127899
|
-
const { knownComponents } = opts;
|
|
127921
|
+
function preprocessContent(content) {
|
|
127900
127922
|
// Runs first so `jsxTable` sees a literal `</table>` (and the HTML-line
|
|
127901
127923
|
// classification in `terminateHtmlFlowBlocks` is accurate)
|
|
127902
127924
|
let result = normalizeClosingTagWhitespace(content);
|
|
@@ -127909,7 +127931,7 @@ function preprocessContent(content, opts) {
|
|
|
127909
127931
|
result = terminateHtmlFlowBlocks(result);
|
|
127910
127932
|
result = closeSelfClosingHtmlTags(result);
|
|
127911
127933
|
result = normalizeCompactHeadings(result);
|
|
127912
|
-
return
|
|
127934
|
+
return result;
|
|
127913
127935
|
}
|
|
127914
127936
|
function mdxishAstProcessor(mdContent, opts = {}) {
|
|
127915
127937
|
const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, newEditorTypes = false, safeMode = false, useTailwind, } = opts;
|
|
@@ -127917,9 +127939,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
|
|
|
127917
127939
|
...loadComponents(),
|
|
127918
127940
|
...userComponents,
|
|
127919
127941
|
};
|
|
127920
|
-
|
|
127921
|
-
const knownComponents = new Set(Object.keys(components));
|
|
127922
|
-
const { content: parserReadyContent, mapping: snakeCaseMapping } = preprocessContent(mdContent, { knownComponents });
|
|
127942
|
+
const parserReadyContent = preprocessContent(mdContent);
|
|
127923
127943
|
// Create string map for tailwind transformer
|
|
127924
127944
|
const tempComponentsMap = Object.entries(components).reduce((acc, [key, value]) => {
|
|
127925
127945
|
acc[key] = String(value);
|
|
@@ -127932,10 +127952,8 @@ function mdxishAstProcessor(mdContent, opts = {}) {
|
|
|
127932
127952
|
.use(remarkParse)
|
|
127933
127953
|
.use(remarkFrontmatter)
|
|
127934
127954
|
.use(normalize_malformed_md_syntax)
|
|
127935
|
-
.use(self_closing_blocks)
|
|
127936
127955
|
.use(mdx_blocks, { safeMode })
|
|
127937
127956
|
.use(inline_html, { safeMode })
|
|
127938
|
-
.use(restore_snake_case_component_name, { mapping: snakeCaseMapping })
|
|
127939
127957
|
.use(mdxish_tables)
|
|
127940
127958
|
.use(mdxish_html_blocks) // Convert every <HTMLBlock> shape → html-block
|
|
127941
127959
|
// The next few transformers must appear after mdxishMdxComponentBlocks
|
|
@@ -128011,7 +128029,7 @@ function mdxish(mdContent, opts = {}) {
|
|
|
128011
128029
|
processor
|
|
128012
128030
|
.use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
|
|
128013
128031
|
.use(enableHardBreaks ? hard_breaks : undefined) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
|
|
128014
|
-
.use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
|
|
128032
|
+
.use(safeMode ? undefined : evaluate_expressions, { components, variables }) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
|
|
128015
128033
|
.use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
|
|
128016
128034
|
.use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes
|
|
128017
128035
|
.use(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
|
|
@@ -129057,7 +129075,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"*":["about","acceptCharset","accessK
|
|
|
129057
129075
|
/******/ // startup
|
|
129058
129076
|
/******/ // Load entry module and return exports
|
|
129059
129077
|
/******/ // This entry module used 'module' so it can't be inlined
|
|
129060
|
-
/******/ let __webpack_exports__ = __webpack_require__(
|
|
129078
|
+
/******/ let __webpack_exports__ = __webpack_require__(8719);
|
|
129061
129079
|
/******/ module.exports = __webpack_exports__;
|
|
129062
129080
|
/******/
|
|
129063
129081
|
/******/ })()
|