@code-hike/mdx - npm Package Compare versions

Comparing version 0.3.0--canary.77.1351c85.0 to 0.3.0--canary.77.15bb99d.0

dist/components.cjs.js

@@ -5,10 +5,3 @@ 'use strict';
 
-require('unist-util-visit');
-require('is-plain-obj');
 var React = require('react');
-require('@code-hike/utils');
-require('unified');
-require('remark-rehype');
-require('hast-util-to-estree');
-require('@code-hike/highlighter');
 var smoothCode = require('@code-hike/smooth-code');
@@ -79,54 +72,2 @@ var miniEditor = require('@code-hike/mini-editor');
 
-function CodeLink(_a) {
-    var _b, _c;
-    var children = _a.children, data = _a.data;
-    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 Annotation() {
-    return "error: code hike remark plugin not running or annotation isn't at the right place";
-}
-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)));
-}
-var annotationsMap = {
-    box: Box,
-    bg: Background,
-    label: Label,
-    link: CodeLink,
-};
-
 function Code(props) {
@@ -260,2 +201,53 @@ if (!props.southPanel &&
 
+function Annotation() {
+    return "error: code hike remark plugin not running or annotation isn't at the right place";
+}
+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;
+    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));
+}
+
 var CH = {
@@ -266,3 +258,2 @@ Code: Code,
     SectionCode: SectionCode,
-    CodeLink: CodeLink,
     Spotlight: Spotlight,
@@ -269,0 +260,0 @@ Scrollycoding: Scrollycoding,

dist/components.d.ts

 /// <reference types="react" />
-import { Section, SectionLink, SectionCode } from "./section";
-import { Code } from "./code";
-import { CodeLink } from "./links";
-import { Spotlight } from "./spotlight";
-import { Scrollycoding } from "./scrollycoding";
-import { Annotation } from "./annotations";
+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: {
@@ -13,3 +12,2 @@ Code: typeof Code;
     SectionCode: typeof SectionCode;
-    CodeLink: typeof CodeLink;
     Spotlight: typeof Spotlight;
@@ -22,4 +20,4 @@ Scrollycoding: typeof Scrollycoding;
         theme: import("@code-hike/smooth-code/dist/themes").EditorTheme;
-    }) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>) | undefined>;
+    }) => 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/components.esm.js

@@ -1,9 +0,2 @@
-import 'unist-util-visit';
-import 'is-plain-obj';
 import React from 'react';
-import '@code-hike/utils';
-import 'unified';
-import 'remark-rehype';
-import 'hast-util-to-estree';
-import '@code-hike/highlighter';
 import { CodeSpring } from '@code-hike/smooth-code';
@@ -70,54 +63,2 @@ import { EditorSpring } from '@code-hike/mini-editor';
 
-function CodeLink(_a) {
-    var _b, _c;
-    var children = _a.children, data = _a.data;
-    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 Annotation() {
-    return "error: code hike remark plugin not running or annotation isn't at the right place";
-}
-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)));
-}
-var annotationsMap = {
-    box: Box,
-    bg: Background,
-    label: Label,
-    link: CodeLink,
-};
-
 function Code(props) {
@@ -251,2 +192,53 @@ if (!props.southPanel &&
 
+function Annotation() {
+    return "error: code hike remark plugin not running or annotation isn't at the right place";
+}
+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;
+    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));
+}
+
 var CH = {
@@ -257,3 +249,2 @@ Code: Code,
     SectionCode: SectionCode,
-    CodeLink: CodeLink,
     Spotlight: Spotlight,
@@ -260,0 +251,0 @@ Scrollycoding: Scrollycoding,

dist/index.cjs.js

@@ -9,11 +9,7 @@ 'use strict';
 var isPlainObject = require('is-plain-obj');
-var utils = require('@code-hike/utils');
 var unified = require('unified');
 var remarkRehype = require('remark-rehype');
 var toEstree = require('hast-util-to-estree');
-require('@code-hike/smooth-code');
-require('@code-hike/mini-editor');
-require('@code-hike/mini-browser');
-require('@codesandbox/sandpack-client');
-require('@code-hike/scroller');
+var utils = require('@code-hike/utils');
+var fetch = require('node-fetch');
 
@@ -28,2 +24,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var toEstree__default = /*#__PURE__*/_interopDefaultLegacy(toEstree);
+var fetch__default = /*#__PURE__*/_interopDefaultLegacy(fetch);
 
@@ -129,2 +126,38 @@ /*! *****************************************************************************
 
+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) {
@@ -141,2 +174,3 @@ var _b, _c;
 }
+
 function extractLinks(node, index, parent, code) {
@@ -150,3 +184,3 @@ var annotations = [];
             annotations.push({
-                Component: CodeLink,
+                Component: annotationsMap["link"],
                 focus: focus,
@@ -185,120 +219,2 @@ data: {
 
-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)));
-}
-var annotationsMap = {
-    box: Box,
-    bg: Background,
-    label: Label,
-    link: CodeLink,
-};
-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;
-}
-
 /**
@@ -604,2 +520,84 @@ * Convert a value to an ESTree node
 
+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) {
@@ -628,3 +626,2 @@ var theme = _a.theme;
 }
-// remark:
 function isEditorNode(node) {
@@ -843,7 +840,2 @@ return (node.type === "code" ||
 
-React__default['default'].createContext({
-    props: null,
-    setFocus: function () { },
-    resetFocus: function () { },
-});
 function transformSections(tree, config) {
@@ -1043,3 +1035,3 @@ return __awaiter(this, void 0, void 0, function () {
                     configUrl = "https://codesandbox.io/api/v1/sandboxes/" + csbid + "/sandpack";
-                    return [4 /*yield*/, fetch(configUrl)];
+                    return [4 /*yield*/, fetch__default['default'](configUrl)];
                 case 1:
@@ -1226,4 +1218,4 @@ res = _a.sent();
                             type: "Literal",
-                            value: "@code-hike/mdx/dist/components.esm.js",
-                            raw: '"@code-hike/mdx/dist/components.esm.js"',
+                            value: "@code-hike/mdx/dist/components.cjs.js",
+                            raw: '"@code-hike/mdx/dist/components.cjs.js"',
                         },
@@ -1230,0 +1222,0 @@ },

dist/index.esm.js

@@ -5,11 +5,7 @@ import { highlight } from '@code-hike/highlighter';
 import isPlainObject from 'is-plain-obj';
-import { relativeToAbsolute, mergeFocus } from '@code-hike/utils';
 import unified from 'unified';
 import remarkRehype from 'remark-rehype';
 import toEstree from 'hast-util-to-estree';
-import '@code-hike/smooth-code';
-import '@code-hike/mini-editor';
-import '@code-hike/mini-browser';
-import '@codesandbox/sandpack-client';
-import '@code-hike/scroller';
+import { relativeToAbsolute, mergeFocus } from '@code-hike/utils';
+import fetch from 'node-fetch';
 
@@ -115,2 +111,38 @@ /*! *****************************************************************************
 
+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) {
@@ -127,2 +159,3 @@ var _b, _c;
 }
+
 function extractLinks(node, index, parent, code) {
@@ -136,3 +169,3 @@ var annotations = [];
             annotations.push({
-                Component: CodeLink,
+                Component: annotationsMap["link"],
                 focus: focus,
@@ -171,120 +204,2 @@ data: {
 
-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)));
-}
-var annotationsMap = {
-    box: Box,
-    bg: Background,
-    label: Label,
-    link: CodeLink,
-};
-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;
-}
-
 /**
@@ -590,2 +505,84 @@ * Convert a value to an ESTree node
 
+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) {
@@ -614,3 +611,2 @@ var theme = _a.theme;
 }
-// remark:
 function isEditorNode(node) {
@@ -829,7 +825,2 @@ return (node.type === "code" ||
 
-React.createContext({
-    props: null,
-    setFocus: function () { },
-    resetFocus: function () { },
-});
 function transformSections(tree, config) {
@@ -1211,4 +1202,4 @@ return __awaiter(this, void 0, void 0, function () {
                             type: "Literal",
-                            value: "@code-hike/mdx/dist/components.esm.js",
-                            raw: '"@code-hike/mdx/dist/components.esm.js"',
+                            value: "@code-hike/mdx/dist/components.cjs.js",
+                            raw: '"@code-hike/mdx/dist/components.cjs.js"',
                         },
@@ -1215,0 +1206,0 @@ },

package.json

 {
   "name": "@code-hike/mdx",
-  "version": "0.3.0--canary.77.1351c85.0",
+  "version": "0.3.0--canary.77.15bb99d.0",
   "main": "dist/index.cjs.js",
@@ -20,16 +20,17 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.77.1351c85.0",
-    "@types/react": "^16.9.38",
-    "react": "^16.13.1"
+    "@code-hike/script": "0.3.0--canary.77.15bb99d.0",
+    "@types/react": "^17.0.2",
+    "react": "^17.0.2"
   },
   "dependencies": {
-    "@code-hike/highlighter": "0.3.0--canary.77.1351c85.0",
-    "@code-hike/mini-browser": "0.3.0--canary.77.1351c85.0",
-    "@code-hike/mini-editor": "0.3.0--canary.77.1351c85.0",
-    "@code-hike/scroller": "0.3.0--canary.77.1351c85.0",
-    "@code-hike/smooth-code": "0.3.0--canary.77.1351c85.0",
-    "@code-hike/utils": "0.3.0--canary.77.1351c85.0",
+    "@code-hike/highlighter": "0.3.0--canary.77.15bb99d.0",
+    "@code-hike/mini-browser": "0.3.0--canary.77.15bb99d.0",
+    "@code-hike/mini-editor": "0.3.0--canary.77.15bb99d.0",
+    "@code-hike/scroller": "0.3.0--canary.77.15bb99d.0",
+    "@code-hike/smooth-code": "0.3.0--canary.77.15bb99d.0",
+    "@code-hike/utils": "0.3.0--canary.77.15bb99d.0",
     "@codesandbox/sandpack-client": "^0.1.20",
     "estree-util-value-to-estree": "^1.3.0",
     "hast-util-to-estree": "^1.4.0",
+    "node-fetch": "^2.0.0",
     "remark-rehype": "^8.1.0",
@@ -56,3 +57,3 @@ "unified": "^9.2.2",
   },
-  "gitHead": "1351c85b88dcf72dc8828976689fd84ca17ef0df"
+  "gitHead": "15bb99da55a6bebca0da1b8baf5a5083b2c5652f"
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

30

20%

Number of medium supply chain risk alerts

2

-33.33%

Worsened metrics

Total package byte prevSize

139126

-0.82%

Dependency count

14

7.69%

Lines of code

3016

-1.5%

Dependency changes

• + Added

  node-fetch@^2.0.0

• + Added

  @code-hike/classer@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/highlighter@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/mini-browser@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/mini-editor@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/mini-frame@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/mini-terminal@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/scroller@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/smooth-code@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  @code-hike/utils@0.3.0--canary.77.15bb99d.0
  (transitive)

• + Added

  node-fetch@2.7.0
  (transitive)

• + Added

  tr46@0.0.3
  (transitive)

• + Added

  webidl-conversions@3.0.1
  (transitive)

• + Added

  whatwg-url@5.0.0
  (transitive)

• - Removed

  @code-hike/classer@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/highlighter@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/mini-browser@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/mini-editor@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/mini-frame@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/mini-terminal@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/scroller@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/smooth-code@0.3.0--canary.77.1351c85.0
  (transitive)

• - Removed

  @code-hike/utils@0.3.0--canary.77.1351c85.0
  (transitive)

• Updated

  @code-hike/highlighter@0.3.0--canary.77.15bb99d.0

• Updated

  @code-hike/mini-browser@0.3.0--canary.77.15bb99d.0

• Updated

  @code-hike/mini-editor@0.3.0--canary.77.15bb99d.0

• Updated

  @code-hike/scroller@0.3.0--canary.77.15bb99d.0

• Updated

  @code-hike/smooth-code@0.3.0--canary.77.15bb99d.0

• Updated

  @code-hike/utils@0.3.0--canary.77.15bb99d.0