@code-hike/mdx - npm Package Compare versions

Comparing version 0.3.0--canary.111.a1cf9e4.0 to 0.3.0--canary.116.0186a87.0

dist/client/preview.d.ts

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

dist/components.cjs.js

@@ -84,7 +84,9 @@ 'use strict';
         !props.files[0].name) {
-        return (React__default['default'].createElement(smoothCode.CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] }));
+        return (React__default['default'].createElement("div", { className: "ch-codeblock no-prose" },
+            React__default['default'].createElement(smoothCode.CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] })));
     }
     else {
         var frameProps = __assign(__assign({}, props === null || props === void 0 ? void 0 : props.frameProps), { onTabClick: onTabClick });
-        return (React__default['default'].createElement(miniEditor.EditorSpring, __assign({}, props, { frameProps: frameProps })));
+        return (React__default['default'].createElement("div", { className: "ch-codegroup no-prose" },
+            React__default['default'].createElement(miniEditor.EditorSpring, __assign({}, props, { frameProps: frameProps }))));
     }
@@ -155,3 +157,7 @@ }
 function Preview(_a) {
-    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig;
+    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig, show = _a.show, children = _a.children, codeConfig = _a.codeConfig, rest = __rest(_a, ["className", "files", "presetConfig", "show", "children", "codeConfig"]);
+    return (React__default['default'].createElement("div", __assign({ className: "ch-preview" + (className ? " " + className : "") }, rest), !presetConfig ? (React__default['default'].createElement(miniBrowser.MiniBrowser, { loadUrl: show, children: children, theme: codeConfig.theme })) : (React__default['default'].createElement(SandpackPreview, { files: files, presetConfig: presetConfig, codeConfig: codeConfig }))));
+}
+function SandpackPreview(_a) {
+    var files = _a.files, presetConfig = _a.presetConfig, codeConfig = _a.codeConfig;
     var iframeRef = React__default['default'].useRef(null);
@@ -169,3 +175,5 @@ var clientRef = React__default['default'].useRef(null);
     }, [files]);
-    return (React__default['default'].createElement(miniBrowser.MiniBrowser, { className: className },
+    return (
+    // TODO only render iframe here, leave MiniBrowser for the parent component
+    React__default['default'].createElement(miniBrowser.MiniBrowser, { theme: codeConfig.theme },
         React__default['default'].createElement("iframe", { ref: iframeRef })));
@@ -212,3 +220,3 @@ }
             React__default['default'].createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -236,3 +244,3 @@
             React__default['default'].createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -256,3 +264,3 @@
             React__default['default'].createElement(InnerCode, __assign({}, tab, { codeConfig: __assign(__assign({}, codeConfig), code), onTabClick: onTabClick })),
-            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig }))),
+            presetConfig && (React__default['default'].createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig }))),
         React__default['default'].createElement("div", { className: "ch-slideshow-notes" },
@@ -353,2 +361,3 @@ React__default['default'].createElement("div", { className: "ch-slideshow-range" },
     Scrollycoding: Scrollycoding,
+    Preview: Preview,
     annotations: annotationsMap,
@@ -355,0 +364,0 @@ Annotation: Annotation,

dist/components.d.ts

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

dist/components.esm.js

@@ -76,7 +76,9 @@ import React from 'react';
         !props.files[0].name) {
-        return (React.createElement(CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] }));
+        return (React.createElement("div", { className: "ch-codeblock no-prose" },
+            React.createElement(CodeSpring, { className: "ch-code", config: props.codeConfig, step: props.files[0] })));
     }
     else {
         var frameProps = __assign(__assign({}, props === null || props === void 0 ? void 0 : props.frameProps), { onTabClick: onTabClick });
-        return (React.createElement(EditorSpring, __assign({}, props, { frameProps: frameProps })));
+        return (React.createElement("div", { className: "ch-codegroup no-prose" },
+            React.createElement(EditorSpring, __assign({}, props, { frameProps: frameProps }))));
     }
@@ -147,3 +149,7 @@ }
 function Preview(_a) {
-    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig;
+    var className = _a.className, files = _a.files, presetConfig = _a.presetConfig, show = _a.show, children = _a.children, codeConfig = _a.codeConfig, rest = __rest(_a, ["className", "files", "presetConfig", "show", "children", "codeConfig"]);
+    return (React.createElement("div", __assign({ className: "ch-preview" + (className ? " " + className : "") }, rest), !presetConfig ? (React.createElement(MiniBrowser, { loadUrl: show, children: children, theme: codeConfig.theme })) : (React.createElement(SandpackPreview, { files: files, presetConfig: presetConfig, codeConfig: codeConfig }))));
+}
+function SandpackPreview(_a) {
+    var files = _a.files, presetConfig = _a.presetConfig, codeConfig = _a.codeConfig;
     var iframeRef = React.useRef(null);
@@ -161,3 +167,5 @@ var clientRef = React.useRef(null);
     }, [files]);
-    return (React.createElement(MiniBrowser, { className: className },
+    return (
+    // TODO only render iframe here, leave MiniBrowser for the parent component
+    React.createElement(MiniBrowser, { theme: codeConfig.theme },
         React.createElement("iframe", { ref: iframeRef })));
@@ -204,3 +212,3 @@ }
             React.createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React.createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React.createElement(Preview, { className: "ch-spotlight-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -228,3 +236,3 @@
             React.createElement(InnerCode, __assign({}, tab, { codeConfig: codeConfig, onTabClick: onTabClick })),
-            presetConfig && (React.createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig })))));
+            presetConfig && (React.createElement(Preview, { className: "ch-scrollycoding-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig })))));
 }
@@ -248,3 +256,3 @@
             React.createElement(InnerCode, __assign({}, tab, { codeConfig: __assign(__assign({}, codeConfig), code), onTabClick: onTabClick })),
-            presetConfig && (React.createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig }))),
+            presetConfig && (React.createElement(Preview, { className: "ch-slideshow-preview", files: tab.files, presetConfig: presetConfig, codeConfig: codeConfig }))),
         React.createElement("div", { className: "ch-slideshow-notes" },
@@ -345,2 +353,3 @@ React.createElement("div", { className: "ch-slideshow-range" },
     Scrollycoding: Scrollycoding,
+    Preview: Preview,
     annotations: annotationsMap,
@@ -347,0 +356,0 @@ Annotation: Annotation,

dist/index.cjs.js

@@ -1076,2 +1076,40 @@ 'use strict';
 }
+function transformPreviews(tree) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, visitAsync(tree, "mdxJsxFlowElement", function (node) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(node.name === "CH.Preview")) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, transformPreview(node)];
+                                case 1:
+                                    _a.sent();
+                                    _a.label = 2;
+                                case 2: return [2 /*return*/];
+                            }
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function transformPreview(node) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            toJSX(node, {
+                props: {
+                    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+                },
+                appendProps: true,
+            });
+            return [2 /*return*/];
+        });
+    });
+}
 
@@ -1250,27 +1288,30 @@ function transformSpotlights(tree, config) {
                 case 1:
-                    _a.trys.push([1, 8, , 9]);
-                    return [4 /*yield*/, transformScrollycodings(tree, config)];
+                    _a.trys.push([1, 9, , 10]);
+                    return [4 /*yield*/, transformPreviews(tree)];
                 case 2:
                     _a.sent();
-                    return [4 /*yield*/, transformSpotlights(tree, config)];
+                    return [4 /*yield*/, transformScrollycodings(tree, config)];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, transformSlideshows(tree, config)];
+                    return [4 /*yield*/, transformSpotlights(tree, config)];
                 case 4:
                     _a.sent();
-                    return [4 /*yield*/, transformSections(tree, config)];
+                    return [4 /*yield*/, transformSlideshows(tree, config)];
                 case 5:
                     _a.sent();
-                    return [4 /*yield*/, transformEditorNodes(tree, config)];
+                    return [4 /*yield*/, transformSections(tree, config)];
                 case 6:
                     _a.sent();
-                    return [4 /*yield*/, transformCodeNodes(tree, config)];
+                    return [4 /*yield*/, transformEditorNodes(tree, config)];
                 case 7:
                     _a.sent();
-                    return [3 /*break*/, 9];
+                    return [4 /*yield*/, transformCodeNodes(tree, config)];
                 case 8:
+                    _a.sent();
+                    return [3 /*break*/, 10];
+                case 9:
                     e_1 = _a.sent();
                     console.error("error running remarkCodeHike", e_1);
                     throw e_1;
-                case 9: return [2 /*return*/];
+                case 10: return [2 /*return*/];
             }
@@ -1277,0 +1318,0 @@ });

dist/index.esm.js

@@ -1062,2 +1062,40 @@ import { highlight } from '@code-hike/highlighter';
 }
+function transformPreviews(tree) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, visitAsync(tree, "mdxJsxFlowElement", function (node) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(node.name === "CH.Preview")) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, transformPreview(node)];
+                                case 1:
+                                    _a.sent();
+                                    _a.label = 2;
+                                case 2: return [2 /*return*/];
+                            }
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function transformPreview(node) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            toJSX(node, {
+                props: {
+                    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+                },
+                appendProps: true,
+            });
+            return [2 /*return*/];
+        });
+    });
+}
 
@@ -1236,27 +1274,30 @@ function transformSpotlights(tree, config) {
                 case 1:
-                    _a.trys.push([1, 8, , 9]);
-                    return [4 /*yield*/, transformScrollycodings(tree, config)];
+                    _a.trys.push([1, 9, , 10]);
+                    return [4 /*yield*/, transformPreviews(tree)];
                 case 2:
                     _a.sent();
-                    return [4 /*yield*/, transformSpotlights(tree, config)];
+                    return [4 /*yield*/, transformScrollycodings(tree, config)];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, transformSlideshows(tree, config)];
+                    return [4 /*yield*/, transformSpotlights(tree, config)];
                 case 4:
                     _a.sent();
-                    return [4 /*yield*/, transformSections(tree, config)];
+                    return [4 /*yield*/, transformSlideshows(tree, config)];
                 case 5:
                     _a.sent();
-                    return [4 /*yield*/, transformEditorNodes(tree, config)];
+                    return [4 /*yield*/, transformSections(tree, config)];
                 case 6:
                     _a.sent();
-                    return [4 /*yield*/, transformCodeNodes(tree, config)];
+                    return [4 /*yield*/, transformEditorNodes(tree, config)];
                 case 7:
                     _a.sent();
-                    return [3 /*break*/, 9];
+                    return [4 /*yield*/, transformCodeNodes(tree, config)];
                 case 8:
+                    _a.sent();
+                    return [3 /*break*/, 10];
+                case 9:
                     e_1 = _a.sent();
                     console.error("error running remarkCodeHike", e_1);
                     throw e_1;
-                case 9: return [2 /*return*/];
+                case 10: return [2 /*return*/];
             }
@@ -1263,0 +1304,0 @@ });

dist/plugin/preview.d.ts

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

package.json

 {
   "name": "@code-hike/mdx",
-  "version": "0.3.0--canary.111.a1cf9e4.0",
+  "version": "0.3.0--canary.116.0186a87.0",
   "main": "dist/index.cjs.js",
@@ -20,3 +20,3 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.111.a1cf9e4.0",
+    "@code-hike/script": "0.3.0--canary.116.0186a87.0",
     "@types/react": "^17.0.2",
@@ -26,8 +26,8 @@ "react": "^17.0.2"
   "dependencies": {
-    "@code-hike/highlighter": "0.3.0--canary.111.a1cf9e4.0",
-    "@code-hike/mini-browser": "0.3.0--canary.111.a1cf9e4.0",
-    "@code-hike/mini-editor": "0.3.0--canary.111.a1cf9e4.0",
-    "@code-hike/scroller": "0.3.0--canary.111.a1cf9e4.0",
-    "@code-hike/smooth-code": "0.3.0--canary.111.a1cf9e4.0",
-    "@code-hike/utils": "0.3.0--canary.111.a1cf9e4.0",
+    "@code-hike/highlighter": "0.3.0--canary.116.0186a87.0",
+    "@code-hike/mini-browser": "0.3.0--canary.116.0186a87.0",
+    "@code-hike/mini-editor": "0.3.0--canary.116.0186a87.0",
+    "@code-hike/scroller": "0.3.0--canary.116.0186a87.0",
+    "@code-hike/smooth-code": "0.3.0--canary.116.0186a87.0",
+    "@code-hike/utils": "0.3.0--canary.116.0186a87.0",
     "@codesandbox/sandpack-client": "^0.1.20",
@@ -58,3 +58,3 @@ "estree-util-value-to-estree": "^1.3.0",
   },
-  "gitHead": "a1cf9e4fed74ec7d6353db38b3c85547c1c64607"
+  "gitHead": "0186a8722f3e14c54e147a04d3911ba83ba817e6"
 }

No alert changes

Improved metrics

Total package byte prevSize

167953

increased by3.97%

Lines of code

3588

increased by3.25%

Dependency changes

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

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

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

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

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

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

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

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

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

• - Removed@code-hike/classer@0.3.0--canary.111.a1cf9e4.0(transitive)

• - Removed@code-hike/highlighter@0.3.0--canary.111.a1cf9e4.0(transitive)

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

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

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

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

• - Removed@code-hike/scroller@0.3.0--canary.111.a1cf9e4.0(transitive)

• - Removed@code-hike/smooth-code@0.3.0--canary.111.a1cf9e4.0(transitive)

• - Removed@code-hike/utils@0.3.0--canary.111.a1cf9e4.0(transitive)

• Updated@code-hike/highlighter@0.3.0--canary.116.0186a87.0

• Updated@code-hike/mini-browser@0.3.0--canary.116.0186a87.0

• Updated@code-hike/mini-editor@0.3.0--canary.116.0186a87.0

• Updated@code-hike/scroller@0.3.0--canary.116.0186a87.0

• Updated@code-hike/smooth-code@0.3.0--canary.116.0186a87.0

• Updated@code-hike/utils@0.3.0--canary.116.0186a87.0