@code-hike/mdx - npm Package Compare versions

Comparing version 0.3.0--canary.116.7b3a2f1.0 to 0.3.0--canary.116.9a0c186.0

dist/client/preview.d.ts

@@ -0,8 +1,16 @@
+import React from "react";
 import { SandboxInfo } from "@codesandbox/sandpack-client";
 import { EditorStep } from "@code-hike/mini-editor";
+import { EditorTheme } from "@code-hike/utils";
 export declare type PresetConfig = SandboxInfo;
-export declare function Preview({ className, files, presetConfig, }: {
+export declare function Preview({ className, files, presetConfig, show, children, codeConfig, style, ...rest }: {
     className: string;
     files: EditorStep["files"];
-    presetConfig: PresetConfig;
+    presetConfig?: PresetConfig;
+    show?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    codeConfig: {
+        theme: EditorTheme;
+    };
 }): JSX.Element;

dist/components.cjs.js

@@ -11,2 +11,3 @@ 'use strict';
 var scroller = require('@code-hike/scroller');
+var utils = require('@code-hike/utils');
 
@@ -85,7 +86,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
         !props.files[0].name) {
-        return (React__default['default'].createElement(smoothCode.CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] }));
+        return (React__default['default'].createElement("div", { className: "ch-codeblock not-prose" },
+            React__default['default'].createElement(smoothCode.CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] })));
     }
     else {
         var frameProps = __assign(__assign({}, props === null || props === void 0 ? void 0 : props.frameProps), { onTabClick: onTabClick });
-        return (React__default['default'].createElement(miniEditor.EditorSpring, __assign({}, props, { frameProps: frameProps })));
+        return (React__default['default'].createElement("div", { className: "ch-codegroup not-prose" },
+            React__default['default'].createElement(miniEditor.EditorSpring, __assign({}, props, { frameProps: frameProps }))));
     }
@@ -156,3 +159,8 @@ }
 function Preview(_a) {
-    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig;
+    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig, show = _a.show, children = _a.children, codeConfig = _a.codeConfig, style = _a.style, rest = __rest(_a, ["className", "files", "presetConfig", "show", "children", "codeConfig", "style"]);
+    return (React__default['default'].createElement("div", { className: "ch-preview" + (className ? " " + className : ""), style: style },
+        React__default['default'].createElement(miniBrowser.MiniBrowser, __assign({ loadUrl: show, theme: codeConfig.theme }, rest, { children: presetConfig ? (React__default['default'].createElement(SandpackPreview, { files: files, presetConfig: presetConfig })) : (children) }))));
+}
+function SandpackPreview(_a) {
+    var files = _a.files, presetConfig = _a.presetConfig;
     var iframeRef = React__default['default'].useRef(null);
@@ -170,4 +178,3 @@ var clientRef = React__default['default'].useRef(null);
     }, [files]);
-    return (React__default['default'].createElement(miniBrowser.MiniBrowser, { className: className },
-        React__default['default'].createElement("iframe", { ref: iframeRef })));
+    return React__default['default'].createElement("iframe", { ref: iframeRef });
 }
@@ -213,3 +220,3 @@ function mergeFiles(csbFiles, chFiles) {
             React__default['default'].createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -237,3 +244,3 @@
             React__default['default'].createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -257,3 +264,3 @@
             React__default['default'].createElement(InnerCode, __assign({}, tab, { codeConfig: __assign(__assign({}, codeConfig), code), onTabClick: onTabClick })),
-            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig }))),
+            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig }))),
         React__default['default'].createElement("div", { className: "ch-slideshow-notes" },
@@ -296,3 +303,29 @@ React__default['default'].createElement("div", { className: "ch-slideshow-range" },
     link: CodeLink,
+    mark: Mark,
 };
+function Mark(_a) {
+    var children = _a.children, data = _a.data, theme = _a.theme;
+    var bg = data && typeof data === "string"
+        ? data
+        : tryGuessColor(children) ||
+            utils.transparent(utils.getColor(theme, utils.ColorName.CodeForeground), 0.2);
+    return (React__default['default'].createElement("span", { className: "ch-code-mark-annotation", style: {
+            background: bg,
+            borderRadius: "0.25rem",
+            padding: "0.2rem 0.15rem 0.1rem",
+            margin: "0 -0.15rem",
+        } }, children));
+}
+function tryGuessColor(children) {
+    var _a, _b, _c;
+    var child = React__default['default'].Children.toArray(children)[0];
+    var grandChild = React__default['default'].Children.toArray(((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || [])[0];
+    var grandGrandChild = React__default['default'].Children.toArray(((_b = grandChild === null || grandChild === void 0 ? void 0 : grandChild.props) === null || _b === void 0 ? void 0 : _b.children) || [])[0];
+    console.log({ grandGrandChild: grandGrandChild });
+    var color = ((_c = grandGrandChild === null || grandGrandChild === void 0 ? void 0 : grandGrandChild.props) === null || _c === void 0 ? void 0 : _c.style).color;
+    if (color) {
+        return utils.transparent(color, 0.2);
+    }
+    return undefined;
+}
 function Box(_a) {
@@ -348,2 +381,13 @@ var _b, _c;
 
+function InlineCode(_a) {
+    var className = _a.className, codeConfig = _a.codeConfig, children = _a.children, rest = __rest(_a, ["className", "codeConfig", "children"]);
+    var theme = codeConfig.theme;
+    return (React__default['default'].createElement("span", __assign({ className: "ch-inline-code not-prose" +
+            (className ? " " + className : "") }, rest),
+        React__default['default'].createElement("code", { style: {
+                background: utils.transparent(utils.getColor(theme, utils.ColorName.CodeBackground), 0.9),
+                color: utils.getColor(theme, utils.ColorName.CodeForeground),
+            } }, children)));
+}
+
 var CH = {
@@ -356,7 +400,9 @@ Code: Code,
     Scrollycoding: Scrollycoding,
+    Preview: Preview,
     annotations: annotationsMap,
     Annotation: Annotation,
     Slideshow: Slideshow,
+    InlineCode: InlineCode,
 };
 
 exports.CH = CH;

dist/components.d.ts

@@ -8,2 +8,4 @@ /// <reference types="react" />
 import { Annotation } from "./client/annotations";
+import { Preview } from "./client/preview";
+import { InlineCode } from "./client/inline-code";
 export declare const CH: {
@@ -16,2 +18,3 @@ Code: typeof Code;
     Scrollycoding: typeof Scrollycoding;
+    Preview: typeof Preview;
     annotations: Record<string, ((props: {
@@ -25,2 +28,3 @@ style?: import("react").CSSProperties | undefined;
     Slideshow: typeof Slideshow;
+    InlineCode: typeof InlineCode;
 };

dist/components.esm.js

@@ -7,2 +7,3 @@ import React from 'react';
 import { Scroller, Step } from '@code-hike/scroller';
+import { transparent, getColor, ColorName } from '@code-hike/utils';
 
@@ -77,7 +78,9 @@ /*! *****************************************************************************
         !props.files[0].name) {
-        return (React.createElement(CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] }));
+        return (React.createElement("div", { className: "ch-codeblock not-prose" },
+            React.createElement(CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] })));
     }
     else {
         var frameProps = __assign(__assign({}, props === null || props === void 0 ? void 0 : props.frameProps), { onTabClick: onTabClick });
-        return (React.createElement(EditorSpring, __assign({}, props, { frameProps: frameProps })));
+        return (React.createElement("div", { className: "ch-codegroup not-prose" },
+            React.createElement(EditorSpring, __assign({}, props, { frameProps: frameProps }))));
     }
@@ -148,3 +151,8 @@ }
 function Preview(_a) {
-    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig;
+    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig, show = _a.show, children = _a.children, codeConfig = _a.codeConfig, style = _a.style, rest = __rest(_a, ["className", "files", "presetConfig", "show", "children", "codeConfig", "style"]);
+    return (React.createElement("div", { className: "ch-preview" + (className ? " " + className : ""), style: style },
+        React.createElement(MiniBrowser, __assign({ loadUrl: show, theme: codeConfig.theme }, rest, { children: presetConfig ? (React.createElement(SandpackPreview, { files: files, presetConfig: presetConfig })) : (children) }))));
+}
+function SandpackPreview(_a) {
+    var files = _a.files, presetConfig = _a.presetConfig;
     var iframeRef = React.useRef(null);
@@ -162,4 +170,3 @@ var clientRef = React.useRef(null);
     }, [files]);
-    return (React.createElement(MiniBrowser, { className: className },
-        React.createElement("iframe", { ref: iframeRef })));
+    return React.createElement("iframe", { ref: iframeRef });
 }
@@ -205,3 +212,3 @@ function mergeFiles(csbFiles, chFiles) {
             React.createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React.createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React.createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -229,3 +236,3 @@
             React.createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React.createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React.createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -249,3 +256,3 @@
             React.createElement(InnerCode, __assign({}, tab, { codeConfig: __assign(__assign({}, codeConfig), code), onTabClick: onTabClick })),
-            presetConfig && (React.createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig }))),
+            presetConfig && (React.createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig }))),
         React.createElement("div", { className: "ch-slideshow-notes" },
@@ -288,3 +295,29 @@ React.createElement("div", { className: "ch-slideshow-range" },
     link: CodeLink,
+    mark: Mark,
 };
+function Mark(_a) {
+    var children = _a.children, data = _a.data, theme = _a.theme;
+    var bg = data && typeof data === "string"
+        ? data
+        : tryGuessColor(children) ||
+            transparent(getColor(theme, ColorName.CodeForeground), 0.2);
+    return (React.createElement("span", { className: "ch-code-mark-annotation", style: {
+            background: bg,
+            borderRadius: "0.25rem",
+            padding: "0.2rem 0.15rem 0.1rem",
+            margin: "0 -0.15rem",
+        } }, children));
+}
+function tryGuessColor(children) {
+    var _a, _b, _c;
+    var child = React.Children.toArray(children)[0];
+    var grandChild = React.Children.toArray(((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || [])[0];
+    var grandGrandChild = React.Children.toArray(((_b = grandChild === null || grandChild === void 0 ? void 0 : grandChild.props) === null || _b === void 0 ? void 0 : _b.children) || [])[0];
+    console.log({ grandGrandChild: grandGrandChild });
+    var color = ((_c = grandGrandChild === null || grandGrandChild === void 0 ? void 0 : grandGrandChild.props) === null || _c === void 0 ? void 0 : _c.style).color;
+    if (color) {
+        return transparent(color, 0.2);
+    }
+    return undefined;
+}
 function Box(_a) {
@@ -340,2 +373,13 @@ var _b, _c;
 
+function InlineCode(_a) {
+    var className = _a.className, codeConfig = _a.codeConfig, children = _a.children, rest = __rest(_a, ["className", "codeConfig", "children"]);
+    var theme = codeConfig.theme;
+    return (React.createElement("span", __assign({ className: "ch-inline-code not-prose" +
+            (className ? " " + className : "") }, rest),
+        React.createElement("code", { style: {
+                background: transparent(getColor(theme, ColorName.CodeBackground), 0.9),
+                color: getColor(theme, ColorName.CodeForeground),
+            } }, children)));
+}
+
 var CH = {
@@ -348,7 +392,9 @@ Code: Code,
     Scrollycoding: Scrollycoding,
+    Preview: Preview,
     annotations: annotationsMap,
     Annotation: Annotation,
     Slideshow: Slideshow,
+    InlineCode: InlineCode,
 };
 
 export { CH };

dist/index.cjs.js

@@ -7,2 +7,3 @@ 'use strict';
 var React = require('react');
+var utils = require('@code-hike/utils');
 var visit = require('unist-util-visit');
@@ -13,3 +14,2 @@ var isPlainObject = require('is-plain-obj');
 var toEstree = require('hast-util-to-estree');
-var utils = require('@code-hike/utils');
 var fetch = require('node-fetch');
@@ -131,3 +131,29 @@
     link: CodeLink,
+    mark: Mark,
 };
+function Mark(_a) {
+    var children = _a.children, data = _a.data, theme = _a.theme;
+    var bg = data && typeof data === "string"
+        ? data
+        : tryGuessColor(children) ||
+            utils.transparent(utils.getColor(theme, utils.ColorName.CodeForeground), 0.2);
+    return (React__default['default'].createElement("span", { className: "ch-code-mark-annotation", style: {
+            background: bg,
+            borderRadius: "0.25rem",
+            padding: "0.2rem 0.15rem 0.1rem",
+            margin: "0 -0.15rem",
+        } }, children));
+}
+function tryGuessColor(children) {
+    var _a, _b, _c;
+    var child = React__default['default'].Children.toArray(children)[0];
+    var grandChild = React__default['default'].Children.toArray(((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || [])[0];
+    var grandGrandChild = React__default['default'].Children.toArray(((_b = grandChild === null || grandChild === void 0 ? void 0 : grandChild.props) === null || _b === void 0 ? void 0 : _b.children) || [])[0];
+    console.log({ grandGrandChild: grandGrandChild });
+    var color = ((_c = grandGrandChild === null || grandGrandChild === void 0 ? void 0 : grandGrandChild.props) === null || _c === void 0 ? void 0 : _c.style).color;
+    if (color) {
+        return utils.transparent(color, 0.2);
+    }
+    return undefined;
+}
 function Box(_a) {
@@ -500,2 +526,5 @@ var _b, _c;
     }
+    else {
+        node.attributes = node.attributes || [];
+    }
     Object.keys(props).forEach(function (key) {
@@ -1080,2 +1109,40 @@ if (props[key] === undefined) {
 }
+function transformPreviews(tree) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, visitAsync(tree, "mdxJsxFlowElement", function (node) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(node.name === "CH.Preview")) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, transformPreview(node)];
+                                case 1:
+                                    _a.sent();
+                                    _a.label = 2;
+                                case 2: return [2 /*return*/];
+                            }
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function transformPreview(node) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            toJSX(node, {
+                props: {
+                    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+                },
+                appendProps: true,
+            });
+            return [2 /*return*/];
+        });
+    });
+}
 
@@ -1235,2 +1302,28 @@ function transformSpotlights(tree, config) {
 
+function transformInlineCodes(tree) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, visitAsync(tree, ["mdxJsxFlowElement", "mdxJsxTextElement"], function (node) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            if (node.name === "CH.InlineCode") {
+                                toJSX(node, {
+                                    props: {
+                                        codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+                                    },
+                                    appendProps: true,
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+
 function remarkCodeHike(config) {
@@ -1255,27 +1348,33 @@ var _this = this;
                 case 1:
-                    _a.trys.push([1, 8, , 9]);
-                    return [4 /*yield*/, transformScrollycodings(tree, config)];
+                    _a.trys.push([1, 10, , 11]);
+                    return [4 /*yield*/, transformInlineCodes(tree)];
                 case 2:
                     _a.sent();
-                    return [4 /*yield*/, transformSpotlights(tree, config)];
+                    return [4 /*yield*/, transformPreviews(tree)];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, transformSlideshows(tree, config)];
+                    return [4 /*yield*/, transformScrollycodings(tree, config)];
                 case 4:
                     _a.sent();
-                    return [4 /*yield*/, transformSections(tree, config)];
+                    return [4 /*yield*/, transformSpotlights(tree, config)];
                 case 5:
                     _a.sent();
-                    return [4 /*yield*/, transformEditorNodes(tree, config)];
+                    return [4 /*yield*/, transformSlideshows(tree, config)];
                 case 6:
                     _a.sent();
-                    return [4 /*yield*/, transformCodeNodes(tree, config)];
+                    return [4 /*yield*/, transformSections(tree, config)];
                 case 7:
                     _a.sent();
-                    return [3 /*break*/, 9];
+                    return [4 /*yield*/, transformEditorNodes(tree, config)];
                 case 8:
+                    _a.sent();
+                    return [4 /*yield*/, transformCodeNodes(tree, config)];
+                case 9:
+                    _a.sent();
+                    return [3 /*break*/, 11];
+                case 10:
                     e_1 = _a.sent();
                     console.error("error running remarkCodeHike", e_1);
                     throw e_1;
-                case 9: return [2 /*return*/];
+                case 11: return [2 /*return*/];
             }
@@ -1282,0 +1381,0 @@ });

dist/index.esm.js

 import { highlight } from '@code-hike/highlighter';
 import React from 'react';
+import { transparent, getColor, ColorName, relativeToAbsolute, mergeFocus } from '@code-hike/utils';
 import visit from 'unist-util-visit';
@@ -8,3 +9,2 @@ import isPlainObject from 'is-plain-obj';
 import toEstree from 'hast-util-to-estree';
-import { relativeToAbsolute, mergeFocus } from '@code-hike/utils';
 import fetch from 'node-fetch';
@@ -116,3 +116,29 @@
     link: CodeLink,
+    mark: Mark,
 };
+function Mark(_a) {
+    var children = _a.children, data = _a.data, theme = _a.theme;
+    var bg = data && typeof data === "string"
+        ? data
+        : tryGuessColor(children) ||
+            transparent(getColor(theme, ColorName.CodeForeground), 0.2);
+    return (React.createElement("span", { className: "ch-code-mark-annotation", style: {
+            background: bg,
+            borderRadius: "0.25rem",
+            padding: "0.2rem 0.15rem 0.1rem",
+            margin: "0 -0.15rem",
+        } }, children));
+}
+function tryGuessColor(children) {
+    var _a, _b, _c;
+    var child = React.Children.toArray(children)[0];
+    var grandChild = React.Children.toArray(((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || [])[0];
+    var grandGrandChild = React.Children.toArray(((_b = grandChild === null || grandChild === void 0 ? void 0 : grandChild.props) === null || _b === void 0 ? void 0 : _b.children) || [])[0];
+    console.log({ grandGrandChild: grandGrandChild });
+    var color = ((_c = grandGrandChild === null || grandGrandChild === void 0 ? void 0 : grandGrandChild.props) === null || _c === void 0 ? void 0 : _c.style).color;
+    if (color) {
+        return transparent(color, 0.2);
+    }
+    return undefined;
+}
 function Box(_a) {
@@ -485,2 +511,5 @@ var _b, _c;
     }
+    else {
+        node.attributes = node.attributes || [];
+    }
     Object.keys(props).forEach(function (key) {
@@ -1065,2 +1094,40 @@ if (props[key] === undefined) {
 }
+function transformPreviews(tree) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, visitAsync(tree, "mdxJsxFlowElement", function (node) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(node.name === "CH.Preview")) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, transformPreview(node)];
+                                case 1:
+                                    _a.sent();
+                                    _a.label = 2;
+                                case 2: return [2 /*return*/];
+                            }
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function transformPreview(node) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            toJSX(node, {
+                props: {
+                    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+                },
+                appendProps: true,
+            });
+            return [2 /*return*/];
+        });
+    });
+}
 
@@ -1220,2 +1287,28 @@ function transformSpotlights(tree, config) {
 
+function transformInlineCodes(tree) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, visitAsync(tree, ["mdxJsxFlowElement", "mdxJsxTextElement"], function (node) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            if (node.name === "CH.InlineCode") {
+                                toJSX(node, {
+                                    props: {
+                                        codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+                                    },
+                                    appendProps: true,
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+
 function remarkCodeHike(config) {
@@ -1240,27 +1333,33 @@ var _this = this;
                 case 1:
-                    _a.trys.push([1, 8, , 9]);
-                    return [4 /*yield*/, transformScrollycodings(tree, config)];
+                    _a.trys.push([1, 10, , 11]);
+                    return [4 /*yield*/, transformInlineCodes(tree)];
                 case 2:
                     _a.sent();
-                    return [4 /*yield*/, transformSpotlights(tree, config)];
+                    return [4 /*yield*/, transformPreviews(tree)];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, transformSlideshows(tree, config)];
+                    return [4 /*yield*/, transformScrollycodings(tree, config)];
                 case 4:
                     _a.sent();
-                    return [4 /*yield*/, transformSections(tree, config)];
+                    return [4 /*yield*/, transformSpotlights(tree, config)];
                 case 5:
                     _a.sent();
-                    return [4 /*yield*/, transformEditorNodes(tree, config)];
+                    return [4 /*yield*/, transformSlideshows(tree, config)];
                 case 6:
                     _a.sent();
-                    return [4 /*yield*/, transformCodeNodes(tree, config)];
+                    return [4 /*yield*/, transformSections(tree, config)];
                 case 7:
                     _a.sent();
-                    return [3 /*break*/, 9];
+                    return [4 /*yield*/, transformEditorNodes(tree, config)];
                 case 8:
+                    _a.sent();
+                    return [4 /*yield*/, transformCodeNodes(tree, config)];
+                case 9:
+                    _a.sent();
+                    return [3 /*break*/, 11];
+                case 10:
                     e_1 = _a.sent();
                     console.error("error running remarkCodeHike", e_1);
                     throw e_1;
-                case 9: return [2 /*return*/];
+                case 11: return [2 /*return*/];
             }
@@ -1267,0 +1366,0 @@ });

dist/plugin/preview.d.ts

@@ -0,1 +1,2 @@
+import { Node } from "unist";
 export declare function getPresetConfig(attributes?: {
@@ -5,1 +6,2 @@ name: string;
 }[]): Promise<any>;
+export declare function transformPreviews(tree: Node): Promise<void>;

package.json

 {
   "name": "@code-hike/mdx",
-  "version": "0.3.0--canary.116.7b3a2f1.0",
+  "version": "0.3.0--canary.116.9a0c186.0",
   "main": "dist/index.cjs.js",
@@ -20,3 +20,3 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.116.7b3a2f1.0",
+    "@code-hike/script": "0.3.0--canary.116.9a0c186.0",
     "@types/react": "^17.0.2",
@@ -26,8 +26,8 @@ "react": "^17.0.2"
   "dependencies": {
-    "@code-hike/highlighter": "0.3.0--canary.116.7b3a2f1.0",
-    "@code-hike/mini-browser": "0.3.0--canary.116.7b3a2f1.0",
-    "@code-hike/mini-editor": "0.3.0--canary.116.7b3a2f1.0",
-    "@code-hike/scroller": "0.3.0--canary.116.7b3a2f1.0",
-    "@code-hike/smooth-code": "0.3.0--canary.116.7b3a2f1.0",
-    "@code-hike/utils": "0.3.0--canary.116.7b3a2f1.0",
+    "@code-hike/highlighter": "0.3.0--canary.116.9a0c186.0",
+    "@code-hike/mini-browser": "0.3.0--canary.116.9a0c186.0",
+    "@code-hike/mini-editor": "0.3.0--canary.116.9a0c186.0",
+    "@code-hike/scroller": "0.3.0--canary.116.9a0c186.0",
+    "@code-hike/smooth-code": "0.3.0--canary.116.9a0c186.0",
+    "@code-hike/utils": "0.3.0--canary.116.9a0c186.0",
     "@codesandbox/sandpack-client": "^0.1.20",
@@ -58,3 +58,3 @@ "estree-util-value-to-estree": "^1.3.0",
   },
-  "gitHead": "7b3a2f1d07038f12c9db1e8bdfd1ff0e8c8c26bd"
+  "gitHead": "9a0c186a5a916d99f38e4240273751b7a6dfbd35"
 }

No alert changes

Improved metrics

Total package byte prevSize

178225

increased by10.33%

Number of package files

34

increased by6.25%

Lines of code

3786

increased by8.95%

Dependency changes

• + Added@code-hike/classer@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/highlighter@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/mini-browser@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/mini-editor@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/mini-frame@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/mini-terminal@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/scroller@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/smooth-code@0.3.0--canary.116.9a0c186.0(transitive)

• + Added@code-hike/utils@0.3.0--canary.116.9a0c186.0(transitive)

• - Removed@code-hike/classer@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/highlighter@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/mini-browser@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/mini-editor@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/mini-frame@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/mini-terminal@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/scroller@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/smooth-code@0.3.0--canary.116.7b3a2f1.0(transitive)

• - Removed@code-hike/utils@0.3.0--canary.116.7b3a2f1.0(transitive)

• Updated@code-hike/highlighter@0.3.0--canary.116.9a0c186.0

• Updated@code-hike/mini-browser@0.3.0--canary.116.9a0c186.0

• Updated@code-hike/mini-editor@0.3.0--canary.116.9a0c186.0

• Updated@code-hike/scroller@0.3.0--canary.116.9a0c186.0

• Updated@code-hike/smooth-code@0.3.0--canary.116.9a0c186.0

• Updated@code-hike/utils@0.3.0--canary.116.9a0c186.0