@code-hike/mdx - npm Package Compare versions

Comparing version 0.3.0--canary.77.e9bb465.0 to 0.3.0--canary.77.eda31ba.0

dist/components.d.ts

@@ -1,6 +0,7 @@
-import { Section, SectionLink, SectionCode } from "./section";
-import { Code } from "./code";
-import { CodeLink } from "./links";
-import { Spotlight } from "./spotlight";
-import { Scrollycoding } from "./scrollycoding";
+/// <reference types="react" />
+import { Section, SectionLink, SectionCode } from "./client/section";
+import { Code } from "./client/code";
+import { Spotlight } from "./client/spotlight";
+import { Scrollycoding } from "./client/scrollycoding";
+import { Annotation } from "./client/annotations";
 export declare const CH: {
@@ -11,5 +12,11 @@ Code: typeof Code;
     SectionCode: typeof SectionCode;
-    CodeLink: typeof CodeLink;
     Spotlight: typeof Spotlight;
     Scrollycoding: typeof Scrollycoding;
+    annotations: Record<string, ((props: {
+        style?: import("react").CSSProperties | undefined;
+        children: import("react").ReactNode;
+        data: any;
+        theme: import("@code-hike/smooth-code/dist/themes").EditorTheme;
+    }) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>) | undefined>;
+    Annotation: typeof Annotation;
 };

dist/index.cjs.js

@@ -9,5 +9,6 @@ 'use strict';
 var isPlainObject = require('is-plain-obj');
-var smoothCode = require('@code-hike/smooth-code');
-var miniEditor = require('@code-hike/mini-editor');
-var scroller = require('@code-hike/scroller');
+var unified = require('unified');
+var remarkRehype = require('remark-rehype');
+var toEstree = require('hast-util-to-estree');
+var utils = require('@code-hike/utils');
 
@@ -19,2 +20,5 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
+var unified__default = /*#__PURE__*/_interopDefaultLegacy(unified);
+var remarkRehype__default = /*#__PURE__*/_interopDefaultLegacy(remarkRehype);
+var toEstree__default = /*#__PURE__*/_interopDefaultLegacy(toEstree);
 
@@ -120,9 +124,50 @@ /*! *****************************************************************************
 
+var annotationsMap = {
+    box: Box,
+    bg: Background,
+    label: Label,
+    link: CodeLink,
+};
+function Box(_a) {
+    var _b, _c;
+    var children = _a.children, data = _a.data, theme = _a.theme;
+    var border = typeof data === "string"
+        ? data
+        : ((_c = (_b = theme.tokenColors.find(function (tc) { var _a; return (_a = tc.scope) === null || _a === void 0 ? void 0 : _a.includes("string"); })) === null || _b === void 0 ? void 0 : _b.settings) === null || _c === void 0 ? void 0 : _c.foreground) || "yellow";
+    return (React__default['default'].createElement("span", { style: { outline: "2px solid " + border } }, children));
+}
+function Background(_a) {
+    var children = _a.children, data = _a.data, style = _a.style, theme = _a.theme;
+    var bg = data ||
+        (theme.colors["editor.lineHighlightBackground"] ||
+            theme.colors["editor.selectionHighlightBackground"]);
+    return (React__default['default'].createElement("div", { style: __assign(__assign({}, style), { background: bg }) }, children));
+}
+function Label(_a) {
+    var children = _a.children, data = _a.data, style = _a.style, theme = _a.theme;
+    var bg = (theme.colors["editor.lineHighlightBackground"] ||
+        theme.colors["editor.selectionHighlightBackground"]);
+    var _b = __read(React__default['default'].useState(false), 2), hover = _b[0], setHover = _b[1];
+    return (React__default['default'].createElement("div", { style: __assign(__assign({}, style), { background: hover ? bg : undefined }), onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
+        children,
+        React__default['default'].createElement("div", { style: {
+                position: "absolute",
+                right: 0,
+                paddingRight: 16,
+                display: hover ? "block" : "none",
+                opacity: 0.7,
+            } }, (data === null || data === void 0 ? void 0 : data.children) || data)));
+}
 function CodeLink(_a) {
+    var _b, _c;
     var children = _a.children, data = _a.data;
-    return (React__default['default'].createElement("a", { href: data.url, target: "_blank", rel: "noopener noreferrer", title: data.title, style: {
+    var url = ((_b = data) === null || _b === void 0 ? void 0 : _b.url) || data;
+    var title = (_c = data) === null || _c === void 0 ? void 0 : _c.title;
+    return (React__default['default'].createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", title: title, style: {
             textDecoration: "underline",
             textDecorationStyle: "dotted",
+            color: "inherit",
         } }, children));
 }
+
 function extractLinks(node, index, parent, code) {
@@ -136,3 +181,3 @@ var annotations = [];
             annotations.push({
-                Component: CodeLink,
+                Component: annotationsMap["link"],
                 focus: focus,
@@ -179,2 +224,3 @@ data: {
 function valueToEstree(value, options) {
+    var _a, _b;
     if (options === void 0) { options = {}; }
@@ -312,2 +358,11 @@ if (value === undefined) {
     if (options.instanceAsObject || isPlainObject__default['default'](value)) {
+        if (((_a = value) === null || _a === void 0 ? void 0 : _a.name) === MDX_CHILDREN) {
+            var tree = __assign({}, value);
+            tree.name = null;
+            return mdastToEstree(tree).body[0].expression;
+        }
+        if (((_b = value) === null || _b === void 0 ? void 0 : _b.type) ===
+            "mdxJsxAttributeValueExpression") {
+            return value.data.estree.body[0].expression;
+        }
         return {
@@ -330,13 +385,24 @@ type: "ObjectExpression",
     }
+    var isAnnotation = Object.values(annotationsMap).includes(value);
     // code hike annotations patch
-    if (value === CodeLink) {
+    if (isAnnotation) {
+        var identifier = Object.keys(annotationsMap).find(function (key) { return annotationsMap[key] === value; });
         return {
             type: "MemberExpression",
             object: {
-                type: "Identifier",
-                name: "CH",
+                type: "MemberExpression",
+                object: {
+                    type: "Identifier",
+                    name: "CH",
+                },
+                property: {
+                    type: "Identifier",
+                    name: "annotations",
+                },
+                computed: false,
+                optional: false,
             },
             property: {
                 type: "Identifier",
-                name: "CodeLink",
+                name: identifier,
             },
@@ -349,2 +415,31 @@ computed: false,
 }
+function mdastToEstree(node) {
+    var nodeTypes = [
+        "mdxFlowExpression",
+        "mdxJsxFlowElement",
+        "mdxJsxTextElement",
+        "mdxTextExpression",
+        "mdxjsEsm",
+    ];
+    var changedTree = unified__default['default']()
+        .use(remarkRehype__default['default'], {
+        allowDangerousHtml: true,
+        passThrough: nodeTypes,
+    })
+        .use(rehypeRecma)
+        .runSync(node);
+    return changedTree;
+}
+function rehypeRecma() {
+    return function (tree) { return toEstree__default['default'](tree); };
+}
+var MDX_CHILDREN = "MDX_CHILDREN";
+function wrapChildren(children) {
+    var tree = {
+        type: "mdxJsxFlowElement",
+        children: children,
+        name: MDX_CHILDREN,
+    };
+    return tree;
+}
 
@@ -399,2 +494,5 @@ function splitChildren(parent, type) {
     Object.keys(props).forEach(function (key) {
+        if (props[key] === undefined) {
+            return;
+        }
         node.attributes.push({
@@ -423,2 +521,84 @@ type: "mdxJsxAttribute",
 
+function getAnnotationsFromMetastring(options) {
+    var annotations = [];
+    Object.keys(options).forEach(function (key) {
+        var Component = annotationsMap[key];
+        if (Component) {
+            annotations === null || annotations === void 0 ? void 0 : annotations.push({ focus: options[key], Component: Component });
+        }
+    });
+    return annotations;
+}
+function extractAnnotationsFromCode(code) {
+    var lines = code.lines;
+    var lineNumber = 1;
+    var annotations = [];
+    var focusList = [];
+    while (lineNumber <= lines.length) {
+        var line = lines[lineNumber - 1];
+        var _a = getCommentData(line, lineNumber), key = _a.key, focus_1 = _a.focus, data = _a.data;
+        var Component = annotationsMap[key];
+        if (Component) {
+            lines.splice(lineNumber - 1, 1);
+            annotations.push({ Component: Component, focus: focus_1, data: data });
+        }
+        else if (key === "focus") {
+            lines.splice(lineNumber - 1, 1);
+            focusList.push(focus_1);
+        }
+        else {
+            lineNumber++;
+        }
+    }
+    return [annotations, focusList.join(",")];
+}
+function getCommentData(line, lineNumber) {
+    var _a;
+    var comment = (_a = line.tokens.find(function (t) {
+        return t.content.startsWith("//");
+    })) === null || _a === void 0 ? void 0 : _a.content;
+    if (!comment) {
+        return {};
+    }
+    var commentRegex = /\/\/\s+(\w+)(\S*)\s*(.*)/;
+    var _b = __read(commentRegex.exec(comment), 4), key = _b[1], focusString = _b[2], data = _b[3];
+    return {
+        key: key,
+        focus: utils.relativeToAbsolute(focusString, lineNumber),
+        data: data,
+    };
+}
+function extractJSXAnnotations(node, index, parent) {
+    var annotations = [];
+    var nextIndex = index + 1;
+    var _loop_1 = function () {
+        var jsxAnnotation = parent.children[nextIndex];
+        // copy attributes to props
+        var props = {};
+        jsxAnnotation.attributes.forEach(function (attr) {
+            props[attr.name] = attr.value;
+        });
+        var as = props.as, focus_2 = props.focus, data = __rest(props, ["as", "focus"]);
+        data.children = wrapChildren(jsxAnnotation.children || []);
+        var Component = annotationsMap[as] || as;
+        annotations.push({
+            Component: Component,
+            focus: focus_2,
+            data: isEmpty$1(data) ? undefined : data,
+        });
+        // console.log(jsxAnnotation)
+        parent.children.splice(nextIndex, 1);
+    };
+    while (parent.children[nextIndex] &&
+        parent.children[nextIndex].type ===
+            "mdxJsxFlowElement" &&
+        parent.children[nextIndex].name === "CH.Annotation") {
+        _loop_1();
+    }
+    return annotations;
+}
+function isEmpty$1(obj) {
+    return Object.keys(obj).length === 0;
+}
+
 function transformCodeNodes(tree, _a) {
@@ -447,13 +627,2 @@ var theme = _a.theme;
 }
-function Code(props) {
-    if (!props.southPanel &&
-        props.files.length === 1 &&
-        !props.files[0].name) {
-        return (React__default['default'].createElement(smoothCode.CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] }));
-    }
-    else {
-        return React__default['default'].createElement(miniEditor.EditorSpring, __assign({}, props));
-    }
-}
-// remark:
 function isEditorNode(node) {
@@ -464,2 +633,42 @@ return (node.type === "code" ||
 }
+function transformCode(nodeInfo, config) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _a = toJSX;
+                    _b = [nodeInfo.node];
+                    _c = {
+                        name: "CH.Code"
+                    };
+                    return [4 /*yield*/, mapCode(nodeInfo, config)];
+                case 1:
+                    _a.apply(void 0, _b.concat([(_c.props = _d.sent(),
+                            _c)]));
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function transformEditor(nodeInfo, config) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _a = toJSX;
+                    _b = [nodeInfo.node];
+                    _c = {
+                        name: "CH.Code"
+                    };
+                    return [4 /*yield*/, mapEditor(nodeInfo, config)];
+                case 1:
+                    _a.apply(void 0, _b.concat([(_c.props = _d.sent(),
+                            _c)]));
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
 function mapAnyCodeNode(nodeInfo, config) {
@@ -503,47 +712,2 @@ return __awaiter(this, void 0, void 0, function () {
 }
-function transformCode(nodeInfo, config) {
-    return __awaiter(this, void 0, void 0, function () {
-        var file, props;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, mapFile(nodeInfo, config)];
-                case 1:
-                    file = _a.sent();
-                    props = {
-                        northPanel: {
-                            tabs: [file.name],
-                            active: file.name,
-                            heightRatio: 1,
-                        },
-                        files: [file],
-                        codeConfig: {
-                            theme: config.theme,
-                        },
-                    };
-                    toJSX(nodeInfo.node, {
-                        name: "CH.Code",
-                        props: props,
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function transformEditor(nodeInfo, config) {
-    return __awaiter(this, void 0, void 0, function () {
-        var props;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, mapEditor(nodeInfo, config)];
-                case 1:
-                    props = _a.sent();
-                    toJSX(nodeInfo.node, {
-                        name: "CH.Code",
-                        props: props,
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
 function mapEditor(_a, config) {
@@ -610,8 +774,7 @@ var node = _a.node;
     return __awaiter(this, void 0, void 0, function () {
-        var theme, annotations, code, options, file;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var theme, code, _b, commentAnnotations, commentFocus, options, metaAnnotations, jsxAnnotations, file;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     theme = config.theme;
-                    annotations = extractLinks(node, index, parent, node.value);
                     return [4 /*yield*/, highlighter.highlight({
@@ -623,5 +786,9 @@ code: node.value,
                 case 1:
-                    code = _b.sent();
+                    code = _c.sent();
+                    _b = __read(extractAnnotationsFromCode(code), 2), commentAnnotations = _b[0], commentFocus = _b[1];
                     options = parseMetastring(typeof node.meta === "string" ? node.meta : "");
-                    file = __assign(__assign({}, options), { focus: options.focus || "", code: code, name: options.name || "", annotations: annotations });
+                    metaAnnotations = getAnnotationsFromMetastring(options);
+                    extractLinks(node, index, parent, node.value);
+                    jsxAnnotations = extractJSXAnnotations(node, index, parent);
+                    file = __assign(__assign({}, options), { focus: utils.mergeFocus(options.focus, commentFocus), code: code, name: options.name || "", annotations: __spread(metaAnnotations, commentAnnotations, jsxAnnotations) });
                     return [2 /*return*/, file];
@@ -678,22 +845,2 @@ }
 
-var SectionContext = React__default['default'].createContext({ props: null, setFocus: function () { } });
-function Section(_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var _b = __read(React__default['default'].useState(props), 2), state = _b[0], setState = _b[1];
-    var setFocus = function (_a) {
-        var fileName = _a.fileName, focus = _a.focus;
-        var newFiles = state.files.map(function (file) {
-            return !fileName || file.name === fileName
-                ? __assign(__assign({}, file), { focus: focus }) : file;
-        });
-        setState(__assign(__assign({}, state), { files: newFiles }));
-    };
-    return (React__default['default'].createElement(SectionContext.Provider, { value: { props: state, setFocus: setFocus } },
-        React__default['default'].createElement("section", { style: { outline: "1px solid violet" } },
-            React__default['default'].createElement("div", null, children))));
-}
-function SectionCode() {
-    var props = React__default['default'].useContext(SectionContext).props;
-    return React__default['default'].createElement(Code, __assign({}, props));
-}
 function transformSections(tree, config) {
@@ -730,8 +877,8 @@ return __awaiter(this, void 0, void 0, function () {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, visitAsync(node, "mdxJsxFlowElement", function (node, index, parent) { return __awaiter(_this, void 0, void 0, function () {
+                case 0: return [4 /*yield*/, visitAsync(node, ["mdxJsxFlowElement", "code"], function (node, index, parent) { return __awaiter(_this, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0:
-                                    if (!(node.name === "CH.Code")) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, mapEditor({ node: node, index: index, parent: parent }, config)];
+                                    if (!isEditorNode(node)) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, mapAnyCodeNode({ node: node, index: index, parent: parent }, config)];
                                 case 1:
@@ -763,7 +910,13 @@ props = _a.sent();
         if (url.startsWith("focus://")) {
-            var focus_1 = url.slice(8);
+            var _a = __read(decodeURI(url)
+                .substr("focus://".length)
+                .split("#"), 2), firstPart = _a[0], secondPart = _a[1];
+            var hasFile = Boolean(secondPart);
+            var props = hasFile
+                ? { file: firstPart, focus: secondPart, id: url }
+                : { focus: firstPart, id: url };
             toJSX(linkNode, {
                 type: "mdxJsxTextElement",
                 name: "CH.SectionLink",
-                props: { focus: focus_1 },
+                props: props,
             });
@@ -773,11 +926,2 @@ }
 }
-function SectionLink(_a) {
-    var focus = _a.focus, children = _a.children;
-    var setFocus = React__default['default'].useContext(SectionContext).setFocus;
-    return (React__default['default'].createElement("span", { style: {
-            textDecoration: "underline",
-            textDecorationStyle: "dotted",
-            cursor: "pointer",
-        }, title: focus, onClick: function () { return setFocus({ focus: focus }); } }, children));
-}
 
@@ -832,5 +976,5 @@ // extend steps with info from previous steps
 // extract step info
-function extractStepsInfo(parent, config) {
+function extractStepsInfo(parent, config, merge) {
     return __awaiter(this, void 0, void 0, function () {
-        var steps, stepIndex, children, i, child, step, _a, editorStep;
+        var steps, stepIndex, children, i, child, step, _a, editorStep, baseStep;
         return __generator(this, function (_b) {
@@ -862,4 +1006,6 @@ switch (_b.label) {
                     else {
-                        // for the rest, merge the editor step with the header step
-                        step.editorStep = reduceSteps(steps[0].editorStep, editorStep);
+                        baseStep = merge === "merge steps with header"
+                            ? steps[0].editorStep
+                            : steps[stepIndex - 1].editorStep;
+                        step.editorStep = reduceSteps(baseStep, editorStep);
                     }
@@ -886,23 +1032,25 @@ return [3 /*break*/, 4];
 
-function Spotlight(_a) {
-    var _b;
-    var children = _a.children, editorSteps = _a.editorSteps, codeConfig = _a.codeConfig, _c = _a.start, start = _c === void 0 ? 0 : _c;
-    var stepsChildren = React__default['default'].Children.toArray(children);
-    var _d = __read(React__default['default'].useState(start), 2), stepIndex = _d[0], setIndex = _d[1];
-    var tab = editorSteps[stepIndex];
-    var headerElement = stepsChildren[0];
-    return (React__default['default'].createElement("div", { className: "ch-spotlight" },
-        React__default['default'].createElement("div", { className: "ch-spotlight-tabs" },
-            ((_b = headerElement === null || headerElement === void 0 ? void 0 : headerElement.props) === null || _b === void 0 ? void 0 : _b.children) ? (React__default['default'].createElement("div", null, stepsChildren[0])) : null,
-            stepsChildren.map(function (children, i) {
-                return i === 0 ? null : (React__default['default'].createElement("div", { key: i, onClick: function () { return setIndex(i); }, className: "ch-spotlight-tab", "data-selected": i === stepIndex ? "true" : undefined }, children));
-            })),
-        React__default['default'].createElement("div", { className: "ch-spotlight-sticker" },
-            React__default['default'].createElement(Code, __assign({}, tab, { codeConfig: __assign(__assign({}, codeConfig), { htmlProps: {
-                        style: {
-                            minHeight: "100%",
-                            maxHeight: "80vh",
-                        },
-                    } }) })))));
+function getPresetConfig(attributes) {
+    return __awaiter(this, void 0, void 0, function () {
+        var presetAttribute, url, prefix, csbid, configUrl, res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    presetAttribute = attributes === null || attributes === void 0 ? void 0 : attributes.find(function (attr) { return attr.name === "preset"; });
+                    if (!presetAttribute)
+                        return [2 /*return*/, undefined];
+                    url = presetAttribute.value;
+                    prefix = "https://codesandbox.io/s/";
+                    csbid = url.slice(prefix.length);
+                    configUrl = "https://codesandbox.io/api/v1/sandboxes/" + csbid + "/sandpack";
+                    return [4 /*yield*/, fetch(configUrl)];
+                case 1:
+                    res = _a.sent();
+                    return [4 /*yield*/, res.json()];
+                case 2: return [2 /*return*/, _a.sent()];
+            }
+        });
+    });
 }
+
 function transformSpotlights(tree, config) {
@@ -936,8 +1084,11 @@ return __awaiter(this, void 0, void 0, function () {
     return __awaiter(this, void 0, void 0, function () {
-        var editorSteps;
+        var editorSteps, presetConfig;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme })];
+                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme }, "merge steps with header")];
                 case 1:
                     editorSteps = _b.sent();
+                    return [4 /*yield*/, getPresetConfig(node.attributes)];
+                case 2:
+                    presetConfig = _b.sent();
                     toJSX(node, {
@@ -947,2 +1098,3 @@ props: {
                             editorSteps: editorSteps,
+                            presetConfig: presetConfig,
                         },
@@ -957,16 +1109,2 @@ appendProps: true,
 
-function Scrollycoding(_a) {
-    var children = _a.children, editorSteps = _a.editorSteps, codeConfig = _a.codeConfig, _b = _a.start, start = _b === void 0 ? 0 : _b;
-    var stepsChildren = React__default['default'].Children.toArray(children);
-    var _c = __read(React__default['default'].useState(start), 2), stepIndex = _c[0], setIndex = _c[1];
-    var tab = editorSteps[stepIndex];
-    function onStepChange(index) {
-        setIndex(index);
-    }
-    return (React__default['default'].createElement("section", { className: "ch-scrollycoding" },
-        React__default['default'].createElement("div", { className: "ch-scrollycoding-content" },
-            React__default['default'].createElement(scroller.Scroller, { onStepChange: onStepChange }, stepsChildren.map(function (children, i) { return (React__default['default'].createElement(scroller.Step, { as: "div", key: i, index: i, onClick: function () { return setIndex(i); }, className: "ch-scrollycoding-step-content", "data-selected": i === stepIndex ? "true" : undefined }, children)); }))),
-        React__default['default'].createElement("div", { className: "ch-scrollycoding-sticker" },
-            React__default['default'].createElement(Code, __assign({}, tab, { codeConfig: codeConfig })))));
-}
 function transformScrollycodings(tree, config) {
@@ -1000,8 +1138,11 @@ return __awaiter(this, void 0, void 0, function () {
     return __awaiter(this, void 0, void 0, function () {
-        var editorSteps;
+        var editorSteps, presetConfig;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme })];
+                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme }, "merge step with previous")];
                 case 1:
                     editorSteps = _b.sent();
+                    return [4 /*yield*/, getPresetConfig(node.attributes)];
+                case 2:
+                    presetConfig = _b.sent();
                     toJSX(node, {
@@ -1011,2 +1152,3 @@ props: {
                             editorSteps: editorSteps,
+                            presetConfig: presetConfig,
                         },
@@ -1091,4 +1233,4 @@ appendProps: true,
                             type: "Literal",
-                            value: "@code-hike/mdx",
-                            raw: '"@code-hike/mdx"',
+                            value: "@code-hike/mdx/dist/components.cjs.js",
+                            raw: '"@code-hike/mdx/dist/components.cjs.js"',
                         },
@@ -1103,13 +1245,2 @@ },
 
-var CH = {
-    Code: Code,
-    Section: Section,
-    SectionLink: SectionLink,
-    SectionCode: SectionCode,
-    CodeLink: CodeLink,
-    Spotlight: Spotlight,
-    Scrollycoding: Scrollycoding,
-};
-
-exports.CH = CH;
 exports.remarkCodeHike = remarkCodeHike;

dist/index.d.ts

 import "./index.scss";
 export { remarkCodeHike } from "./plugin";
-export { CH } from "./components";

dist/index.esm.js

@@ -5,5 +5,6 @@ import { highlight } from '@code-hike/highlighter';
 import isPlainObject from 'is-plain-obj';
-import { CodeSpring } from '@code-hike/smooth-code';
-import { EditorSpring } from '@code-hike/mini-editor';
-import { Scroller, Step } from '@code-hike/scroller';
+import unified from 'unified';
+import remarkRehype from 'remark-rehype';
+import toEstree from 'hast-util-to-estree';
+import { relativeToAbsolute, mergeFocus } from '@code-hike/utils';
 
@@ -109,9 +110,50 @@ /*! *****************************************************************************
 
+var annotationsMap = {
+    box: Box,
+    bg: Background,
+    label: Label,
+    link: CodeLink,
+};
+function Box(_a) {
+    var _b, _c;
+    var children = _a.children, data = _a.data, theme = _a.theme;
+    var border = typeof data === "string"
+        ? data
+        : ((_c = (_b = theme.tokenColors.find(function (tc) { var _a; return (_a = tc.scope) === null || _a === void 0 ? void 0 : _a.includes("string"); })) === null || _b === void 0 ? void 0 : _b.settings) === null || _c === void 0 ? void 0 : _c.foreground) || "yellow";
+    return (React.createElement("span", { style: { outline: "2px solid " + border } }, children));
+}
+function Background(_a) {
+    var children = _a.children, data = _a.data, style = _a.style, theme = _a.theme;
+    var bg = data ||
+        (theme.colors["editor.lineHighlightBackground"] ||
+            theme.colors["editor.selectionHighlightBackground"]);
+    return (React.createElement("div", { style: __assign(__assign({}, style), { background: bg }) }, children));
+}
+function Label(_a) {
+    var children = _a.children, data = _a.data, style = _a.style, theme = _a.theme;
+    var bg = (theme.colors["editor.lineHighlightBackground"] ||
+        theme.colors["editor.selectionHighlightBackground"]);
+    var _b = __read(React.useState(false), 2), hover = _b[0], setHover = _b[1];
+    return (React.createElement("div", { style: __assign(__assign({}, style), { background: hover ? bg : undefined }), onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
+        children,
+        React.createElement("div", { style: {
+                position: "absolute",
+                right: 0,
+                paddingRight: 16,
+                display: hover ? "block" : "none",
+                opacity: 0.7,
+            } }, (data === null || data === void 0 ? void 0 : data.children) || data)));
+}
 function CodeLink(_a) {
+    var _b, _c;
     var children = _a.children, data = _a.data;
-    return (React.createElement("a", { href: data.url, target: "_blank", rel: "noopener noreferrer", title: data.title, style: {
+    var url = ((_b = data) === null || _b === void 0 ? void 0 : _b.url) || data;
+    var title = (_c = data) === null || _c === void 0 ? void 0 : _c.title;
+    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", title: title, style: {
             textDecoration: "underline",
             textDecorationStyle: "dotted",
+            color: "inherit",
         } }, children));
 }
+
 function extractLinks(node, index, parent, code) {
@@ -125,3 +167,3 @@ var annotations = [];
             annotations.push({
-                Component: CodeLink,
+                Component: annotationsMap["link"],
                 focus: focus,
@@ -168,2 +210,3 @@ data: {
 function valueToEstree(value, options) {
+    var _a, _b;
     if (options === void 0) { options = {}; }
@@ -301,2 +344,11 @@ if (value === undefined) {
     if (options.instanceAsObject || isPlainObject(value)) {
+        if (((_a = value) === null || _a === void 0 ? void 0 : _a.name) === MDX_CHILDREN) {
+            var tree = __assign({}, value);
+            tree.name = null;
+            return mdastToEstree(tree).body[0].expression;
+        }
+        if (((_b = value) === null || _b === void 0 ? void 0 : _b.type) ===
+            "mdxJsxAttributeValueExpression") {
+            return value.data.estree.body[0].expression;
+        }
         return {
@@ -319,13 +371,24 @@ type: "ObjectExpression",
     }
+    var isAnnotation = Object.values(annotationsMap).includes(value);
     // code hike annotations patch
-    if (value === CodeLink) {
+    if (isAnnotation) {
+        var identifier = Object.keys(annotationsMap).find(function (key) { return annotationsMap[key] === value; });
         return {
             type: "MemberExpression",
             object: {
-                type: "Identifier",
-                name: "CH",
+                type: "MemberExpression",
+                object: {
+                    type: "Identifier",
+                    name: "CH",
+                },
+                property: {
+                    type: "Identifier",
+                    name: "annotations",
+                },
+                computed: false,
+                optional: false,
             },
             property: {
                 type: "Identifier",
-                name: "CodeLink",
+                name: identifier,
             },
@@ -338,2 +401,31 @@ computed: false,
 }
+function mdastToEstree(node) {
+    var nodeTypes = [
+        "mdxFlowExpression",
+        "mdxJsxFlowElement",
+        "mdxJsxTextElement",
+        "mdxTextExpression",
+        "mdxjsEsm",
+    ];
+    var changedTree = unified()
+        .use(remarkRehype, {
+        allowDangerousHtml: true,
+        passThrough: nodeTypes,
+    })
+        .use(rehypeRecma)
+        .runSync(node);
+    return changedTree;
+}
+function rehypeRecma() {
+    return function (tree) { return toEstree(tree); };
+}
+var MDX_CHILDREN = "MDX_CHILDREN";
+function wrapChildren(children) {
+    var tree = {
+        type: "mdxJsxFlowElement",
+        children: children,
+        name: MDX_CHILDREN,
+    };
+    return tree;
+}
 
@@ -388,2 +480,5 @@ function splitChildren(parent, type) {
     Object.keys(props).forEach(function (key) {
+        if (props[key] === undefined) {
+            return;
+        }
         node.attributes.push({
@@ -412,2 +507,84 @@ type: "mdxJsxAttribute",
 
+function getAnnotationsFromMetastring(options) {
+    var annotations = [];
+    Object.keys(options).forEach(function (key) {
+        var Component = annotationsMap[key];
+        if (Component) {
+            annotations === null || annotations === void 0 ? void 0 : annotations.push({ focus: options[key], Component: Component });
+        }
+    });
+    return annotations;
+}
+function extractAnnotationsFromCode(code) {
+    var lines = code.lines;
+    var lineNumber = 1;
+    var annotations = [];
+    var focusList = [];
+    while (lineNumber <= lines.length) {
+        var line = lines[lineNumber - 1];
+        var _a = getCommentData(line, lineNumber), key = _a.key, focus_1 = _a.focus, data = _a.data;
+        var Component = annotationsMap[key];
+        if (Component) {
+            lines.splice(lineNumber - 1, 1);
+            annotations.push({ Component: Component, focus: focus_1, data: data });
+        }
+        else if (key === "focus") {
+            lines.splice(lineNumber - 1, 1);
+            focusList.push(focus_1);
+        }
+        else {
+            lineNumber++;
+        }
+    }
+    return [annotations, focusList.join(",")];
+}
+function getCommentData(line, lineNumber) {
+    var _a;
+    var comment = (_a = line.tokens.find(function (t) {
+        return t.content.startsWith("//");
+    })) === null || _a === void 0 ? void 0 : _a.content;
+    if (!comment) {
+        return {};
+    }
+    var commentRegex = /\/\/\s+(\w+)(\S*)\s*(.*)/;
+    var _b = __read(commentRegex.exec(comment), 4), key = _b[1], focusString = _b[2], data = _b[3];
+    return {
+        key: key,
+        focus: relativeToAbsolute(focusString, lineNumber),
+        data: data,
+    };
+}
+function extractJSXAnnotations(node, index, parent) {
+    var annotations = [];
+    var nextIndex = index + 1;
+    var _loop_1 = function () {
+        var jsxAnnotation = parent.children[nextIndex];
+        // copy attributes to props
+        var props = {};
+        jsxAnnotation.attributes.forEach(function (attr) {
+            props[attr.name] = attr.value;
+        });
+        var as = props.as, focus_2 = props.focus, data = __rest(props, ["as", "focus"]);
+        data.children = wrapChildren(jsxAnnotation.children || []);
+        var Component = annotationsMap[as] || as;
+        annotations.push({
+            Component: Component,
+            focus: focus_2,
+            data: isEmpty$1(data) ? undefined : data,
+        });
+        // console.log(jsxAnnotation)
+        parent.children.splice(nextIndex, 1);
+    };
+    while (parent.children[nextIndex] &&
+        parent.children[nextIndex].type ===
+            "mdxJsxFlowElement" &&
+        parent.children[nextIndex].name === "CH.Annotation") {
+        _loop_1();
+    }
+    return annotations;
+}
+function isEmpty$1(obj) {
+    return Object.keys(obj).length === 0;
+}
+
 function transformCodeNodes(tree, _a) {
@@ -436,13 +613,2 @@ var theme = _a.theme;
 }
-function Code(props) {
-    if (!props.southPanel &&
-        props.files.length === 1 &&
-        !props.files[0].name) {
-        return (React.createElement(CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] }));
-    }
-    else {
-        return React.createElement(EditorSpring, __assign({}, props));
-    }
-}
-// remark:
 function isEditorNode(node) {
@@ -453,2 +619,42 @@ return (node.type === "code" ||
 }
+function transformCode(nodeInfo, config) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _a = toJSX;
+                    _b = [nodeInfo.node];
+                    _c = {
+                        name: "CH.Code"
+                    };
+                    return [4 /*yield*/, mapCode(nodeInfo, config)];
+                case 1:
+                    _a.apply(void 0, _b.concat([(_c.props = _d.sent(),
+                            _c)]));
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function transformEditor(nodeInfo, config) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _a = toJSX;
+                    _b = [nodeInfo.node];
+                    _c = {
+                        name: "CH.Code"
+                    };
+                    return [4 /*yield*/, mapEditor(nodeInfo, config)];
+                case 1:
+                    _a.apply(void 0, _b.concat([(_c.props = _d.sent(),
+                            _c)]));
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
 function mapAnyCodeNode(nodeInfo, config) {
@@ -492,47 +698,2 @@ return __awaiter(this, void 0, void 0, function () {
 }
-function transformCode(nodeInfo, config) {
-    return __awaiter(this, void 0, void 0, function () {
-        var file, props;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, mapFile(nodeInfo, config)];
-                case 1:
-                    file = _a.sent();
-                    props = {
-                        northPanel: {
-                            tabs: [file.name],
-                            active: file.name,
-                            heightRatio: 1,
-                        },
-                        files: [file],
-                        codeConfig: {
-                            theme: config.theme,
-                        },
-                    };
-                    toJSX(nodeInfo.node, {
-                        name: "CH.Code",
-                        props: props,
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function transformEditor(nodeInfo, config) {
-    return __awaiter(this, void 0, void 0, function () {
-        var props;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, mapEditor(nodeInfo, config)];
-                case 1:
-                    props = _a.sent();
-                    toJSX(nodeInfo.node, {
-                        name: "CH.Code",
-                        props: props,
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
 function mapEditor(_a, config) {
@@ -599,8 +760,7 @@ var node = _a.node;
     return __awaiter(this, void 0, void 0, function () {
-        var theme, annotations, code, options, file;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var theme, code, _b, commentAnnotations, commentFocus, options, metaAnnotations, jsxAnnotations, file;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     theme = config.theme;
-                    annotations = extractLinks(node, index, parent, node.value);
                     return [4 /*yield*/, highlight({
@@ -612,5 +772,9 @@ code: node.value,
                 case 1:
-                    code = _b.sent();
+                    code = _c.sent();
+                    _b = __read(extractAnnotationsFromCode(code), 2), commentAnnotations = _b[0], commentFocus = _b[1];
                     options = parseMetastring(typeof node.meta === "string" ? node.meta : "");
-                    file = __assign(__assign({}, options), { focus: options.focus || "", code: code, name: options.name || "", annotations: annotations });
+                    metaAnnotations = getAnnotationsFromMetastring(options);
+                    extractLinks(node, index, parent, node.value);
+                    jsxAnnotations = extractJSXAnnotations(node, index, parent);
+                    file = __assign(__assign({}, options), { focus: mergeFocus(options.focus, commentFocus), code: code, name: options.name || "", annotations: __spread(metaAnnotations, commentAnnotations, jsxAnnotations) });
                     return [2 /*return*/, file];
@@ -667,22 +831,2 @@ }
 
-var SectionContext = React.createContext({ props: null, setFocus: function () { } });
-function Section(_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var _b = __read(React.useState(props), 2), state = _b[0], setState = _b[1];
-    var setFocus = function (_a) {
-        var fileName = _a.fileName, focus = _a.focus;
-        var newFiles = state.files.map(function (file) {
-            return !fileName || file.name === fileName
-                ? __assign(__assign({}, file), { focus: focus }) : file;
-        });
-        setState(__assign(__assign({}, state), { files: newFiles }));
-    };
-    return (React.createElement(SectionContext.Provider, { value: { props: state, setFocus: setFocus } },
-        React.createElement("section", { style: { outline: "1px solid violet" } },
-            React.createElement("div", null, children))));
-}
-function SectionCode() {
-    var props = React.useContext(SectionContext).props;
-    return React.createElement(Code, __assign({}, props));
-}
 function transformSections(tree, config) {
@@ -719,8 +863,8 @@ return __awaiter(this, void 0, void 0, function () {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, visitAsync(node, "mdxJsxFlowElement", function (node, index, parent) { return __awaiter(_this, void 0, void 0, function () {
+                case 0: return [4 /*yield*/, visitAsync(node, ["mdxJsxFlowElement", "code"], function (node, index, parent) { return __awaiter(_this, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0:
-                                    if (!(node.name === "CH.Code")) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, mapEditor({ node: node, index: index, parent: parent }, config)];
+                                    if (!isEditorNode(node)) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, mapAnyCodeNode({ node: node, index: index, parent: parent }, config)];
                                 case 1:
@@ -752,7 +896,13 @@ props = _a.sent();
         if (url.startsWith("focus://")) {
-            var focus_1 = url.slice(8);
+            var _a = __read(decodeURI(url)
+                .substr("focus://".length)
+                .split("#"), 2), firstPart = _a[0], secondPart = _a[1];
+            var hasFile = Boolean(secondPart);
+            var props = hasFile
+                ? { file: firstPart, focus: secondPart, id: url }
+                : { focus: firstPart, id: url };
             toJSX(linkNode, {
                 type: "mdxJsxTextElement",
                 name: "CH.SectionLink",
-                props: { focus: focus_1 },
+                props: props,
             });
@@ -762,11 +912,2 @@ }
 }
-function SectionLink(_a) {
-    var focus = _a.focus, children = _a.children;
-    var setFocus = React.useContext(SectionContext).setFocus;
-    return (React.createElement("span", { style: {
-            textDecoration: "underline",
-            textDecorationStyle: "dotted",
-            cursor: "pointer",
-        }, title: focus, onClick: function () { return setFocus({ focus: focus }); } }, children));
-}
 
@@ -821,5 +962,5 @@ // extend steps with info from previous steps
 // extract step info
-function extractStepsInfo(parent, config) {
+function extractStepsInfo(parent, config, merge) {
     return __awaiter(this, void 0, void 0, function () {
-        var steps, stepIndex, children, i, child, step, _a, editorStep;
+        var steps, stepIndex, children, i, child, step, _a, editorStep, baseStep;
         return __generator(this, function (_b) {
@@ -851,4 +992,6 @@ switch (_b.label) {
                     else {
-                        // for the rest, merge the editor step with the header step
-                        step.editorStep = reduceSteps(steps[0].editorStep, editorStep);
+                        baseStep = merge === "merge steps with header"
+                            ? steps[0].editorStep
+                            : steps[stepIndex - 1].editorStep;
+                        step.editorStep = reduceSteps(baseStep, editorStep);
                     }
@@ -875,23 +1018,25 @@ return [3 /*break*/, 4];
 
-function Spotlight(_a) {
-    var _b;
-    var children = _a.children, editorSteps = _a.editorSteps, codeConfig = _a.codeConfig, _c = _a.start, start = _c === void 0 ? 0 : _c;
-    var stepsChildren = React.Children.toArray(children);
-    var _d = __read(React.useState(start), 2), stepIndex = _d[0], setIndex = _d[1];
-    var tab = editorSteps[stepIndex];
-    var headerElement = stepsChildren[0];
-    return (React.createElement("div", { className: "ch-spotlight" },
-        React.createElement("div", { className: "ch-spotlight-tabs" },
-            ((_b = headerElement === null || headerElement === void 0 ? void 0 : headerElement.props) === null || _b === void 0 ? void 0 : _b.children) ? (React.createElement("div", null, stepsChildren[0])) : null,
-            stepsChildren.map(function (children, i) {
-                return i === 0 ? null : (React.createElement("div", { key: i, onClick: function () { return setIndex(i); }, className: "ch-spotlight-tab", "data-selected": i === stepIndex ? "true" : undefined }, children));
-            })),
-        React.createElement("div", { className: "ch-spotlight-sticker" },
-            React.createElement(Code, __assign({}, tab, { codeConfig: __assign(__assign({}, codeConfig), { htmlProps: {
-                        style: {
-                            minHeight: "100%",
-                            maxHeight: "80vh",
-                        },
-                    } }) })))));
+function getPresetConfig(attributes) {
+    return __awaiter(this, void 0, void 0, function () {
+        var presetAttribute, url, prefix, csbid, configUrl, res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    presetAttribute = attributes === null || attributes === void 0 ? void 0 : attributes.find(function (attr) { return attr.name === "preset"; });
+                    if (!presetAttribute)
+                        return [2 /*return*/, undefined];
+                    url = presetAttribute.value;
+                    prefix = "https://codesandbox.io/s/";
+                    csbid = url.slice(prefix.length);
+                    configUrl = "https://codesandbox.io/api/v1/sandboxes/" + csbid + "/sandpack";
+                    return [4 /*yield*/, fetch(configUrl)];
+                case 1:
+                    res = _a.sent();
+                    return [4 /*yield*/, res.json()];
+                case 2: return [2 /*return*/, _a.sent()];
+            }
+        });
+    });
 }
+
 function transformSpotlights(tree, config) {
@@ -925,8 +1070,11 @@ return __awaiter(this, void 0, void 0, function () {
     return __awaiter(this, void 0, void 0, function () {
-        var editorSteps;
+        var editorSteps, presetConfig;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme })];
+                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme }, "merge steps with header")];
                 case 1:
                     editorSteps = _b.sent();
+                    return [4 /*yield*/, getPresetConfig(node.attributes)];
+                case 2:
+                    presetConfig = _b.sent();
                     toJSX(node, {
@@ -936,2 +1084,3 @@ props: {
                             editorSteps: editorSteps,
+                            presetConfig: presetConfig,
                         },
@@ -946,16 +1095,2 @@ appendProps: true,
 
-function Scrollycoding(_a) {
-    var children = _a.children, editorSteps = _a.editorSteps, codeConfig = _a.codeConfig, _b = _a.start, start = _b === void 0 ? 0 : _b;
-    var stepsChildren = React.Children.toArray(children);
-    var _c = __read(React.useState(start), 2), stepIndex = _c[0], setIndex = _c[1];
-    var tab = editorSteps[stepIndex];
-    function onStepChange(index) {
-        setIndex(index);
-    }
-    return (React.createElement("section", { className: "ch-scrollycoding" },
-        React.createElement("div", { className: "ch-scrollycoding-content" },
-            React.createElement(Scroller, { onStepChange: onStepChange }, stepsChildren.map(function (children, i) { return (React.createElement(Step, { as: "div", key: i, index: i, onClick: function () { return setIndex(i); }, className: "ch-scrollycoding-step-content", "data-selected": i === stepIndex ? "true" : undefined }, children)); }))),
-        React.createElement("div", { className: "ch-scrollycoding-sticker" },
-            React.createElement(Code, __assign({}, tab, { codeConfig: codeConfig })))));
-}
 function transformScrollycodings(tree, config) {
@@ -989,8 +1124,11 @@ return __awaiter(this, void 0, void 0, function () {
     return __awaiter(this, void 0, void 0, function () {
-        var editorSteps;
+        var editorSteps, presetConfig;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme })];
+                case 0: return [4 /*yield*/, extractStepsInfo(node, { theme: theme }, "merge step with previous")];
                 case 1:
                     editorSteps = _b.sent();
+                    return [4 /*yield*/, getPresetConfig(node.attributes)];
+                case 2:
+                    presetConfig = _b.sent();
                     toJSX(node, {
@@ -1000,2 +1138,3 @@ props: {
                             editorSteps: editorSteps,
+                            presetConfig: presetConfig,
                         },
@@ -1080,4 +1219,4 @@ appendProps: true,
                             type: "Literal",
-                            value: "@code-hike/mdx",
-                            raw: '"@code-hike/mdx"',
+                            value: "@code-hike/mdx/dist/components.cjs.js",
+                            raw: '"@code-hike/mdx/dist/components.cjs.js"',
                         },
@@ -1092,12 +1231,2 @@ },
 
-var CH = {
-    Code: Code,
-    Section: Section,
-    SectionLink: SectionLink,
-    SectionCode: SectionCode,
-    CodeLink: CodeLink,
-    Spotlight: Spotlight,
-    Scrollycoding: Scrollycoding,
-};
-
-export { CH, remarkCodeHike };
+export { remarkCodeHike };

package.json

 {
   "name": "@code-hike/mdx",
-  "version": "0.3.0--canary.77.e9bb465.0",
+  "version": "0.3.0--canary.77.eda31ba.0",
   "main": "dist/index.cjs.js",
@@ -12,2 +12,6 @@ "typings": "dist/index.d.ts",
   ],
+  "inputs": [
+    "index",
+    "components"
+  ],
   "scripts": {
@@ -17,13 +21,18 @@ "x": "x"
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.77.e9bb465.0",
-    "@types/react": "^16.9.38",
-    "react": "^16.13.1"
+    "@code-hike/script": "0.3.0--canary.77.eda31ba.0",
+    "@types/react": "^17.0.2",
+    "react": "^17.0.2"
   },
   "dependencies": {
-    "@code-hike/highlighter": "0.3.0--canary.77.e9bb465.0",
-    "@code-hike/mini-editor": "0.3.0--canary.77.e9bb465.0",
-    "@code-hike/scroller": "0.3.0--canary.77.e9bb465.0",
-    "@code-hike/smooth-code": "0.3.0--canary.77.e9bb465.0",
-    "@code-hike/utils": "0.3.0--canary.77.e9bb465.0",
+    "@code-hike/highlighter": "0.3.0--canary.77.eda31ba.0",
+    "@code-hike/mini-browser": "0.3.0--canary.77.eda31ba.0",
+    "@code-hike/mini-editor": "0.3.0--canary.77.eda31ba.0",
+    "@code-hike/scroller": "0.3.0--canary.77.eda31ba.0",
+    "@code-hike/smooth-code": "0.3.0--canary.77.eda31ba.0",
+    "@code-hike/utils": "0.3.0--canary.77.eda31ba.0",
+    "@codesandbox/sandpack-client": "^0.1.20",
     "estree-util-value-to-estree": "^1.3.0",
+    "hast-util-to-estree": "^1.4.0",
+    "remark-rehype": "^8.1.0",
+    "unified": "^9.2.2",
     "unist-util-visit": "^2.0.0"
@@ -48,3 +57,3 @@ },
   },
-  "gitHead": "e9bb465ab104d9e5a844a0eb6c1d0c551136e3ea"
+  "gitHead": "eda31ba3ce0ab994f4d4238736294e2779fc3c1b"
 }

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138983

increased by36.39%

Number of package files

30

increased by42.86%

Lines of code

3013

increased by34.27%

Worsened metrics

Dependency count

13

increased by62.5%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@code-hike/[e-mail]31ba.0

• + Added@codesandbox/sandpack-client@^0.1.20

• + Addedhast-util-to-estree@^1.4.0

• + Addedremark-rehype@^8.1.0

• + Addedunified@^9.2.2

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@code-hike/[e-mail]31ba.0(transitive)

• + Added@codesandbox/sandpack-client@0.1.20(transitive)

• + Added@types/mdast@3.0.15(transitive)

• + Addedbail@1.0.5(transitive)

• + Addedbinaryextensions@2.3.0(transitive)

• + Addedcodesandbox-import-util-types@1.3.7(transitive)

• + Addedcodesandbox-import-utils@1.3.8(transitive)

• + Addedcomma-separated-tokens@1.0.8(transitive)

• + Addededitions@1.3.4(transitive)

• + Addedestree-util-attach-comments@1.0.0(transitive)

• + Addedestree-util-is-identifier-name@1.1.0(transitive)

• + Addedextend@3.0.2(transitive)

• + Addedhast-util-to-estree@1.4.0(transitive)

• + Addedhast-util-whitespace@1.0.4(transitive)

• + Addedinline-style-parser@0.1.1(transitive)

• + Addedis-buffer@2.0.5(transitive)

• + Addedis-plain-obj@2.1.0(transitive)

• + Addedistextorbinary@2.2.1(transitive)

• + Addedlodash.isequal@4.5.0(transitive)

• + Addedlz-string@1.5.0(transitive)

• + Addedmdast-util-definitions@4.0.0(transitive)

• + Addedmdast-util-to-hast@10.2.0(transitive)

• + Addedmdurl@1.0.1(transitive)

• + Addedproperty-information@5.6.0(transitive)

• + Addedremark-rehype@8.1.0(transitive)

• + Addedspace-separated-tokens@1.1.5(transitive)

• + Addedstyle-to-object@0.3.0(transitive)

• + Addedtextextensions@2.6.0(transitive)

• + Addedtrough@1.0.5(transitive)

• + Addedunified@9.2.2(transitive)

• + Addedunist-builder@2.0.3(transitive)

• + Addedunist-util-generated@1.1.6(transitive)

• + Addedunist-util-position@3.1.0(transitive)

• + Addedunist-util-stringify-position@2.0.3(transitive)

• + Addedvfile@4.2.1(transitive)

• + Addedvfile-message@2.0.4(transitive)

• + Addedxtend@4.0.2(transitive)

• + Addedzwitch@1.0.5(transitive)

• - Removed@code-hike/classer@0.3.0--canary.77.e9bb465.0(transitive)

• - Removed@code-hike/highlighter@0.3.0--canary.77.e9bb465.0(transitive)

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

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

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

• - Removed@code-hike/scroller@0.3.0--canary.77.e9bb465.0(transitive)

• - Removed@code-hike/smooth-code@0.3.0--canary.77.e9bb465.0(transitive)

• - Removed@code-hike/utils@0.3.0--canary.77.e9bb465.0(transitive)

• Updated@code-hike/[e-mail]31ba.0

• Updated@code-hike/[e-mail]31ba.0

• Updated@code-hike/[e-mail]31ba.0

• Updated@code-hike/[e-mail]31ba.0

• Updated@code-hike/[e-mail]31ba.0