@code-hike/mini-editor - npm Package Compare versions

Comparing version 0.0.0-133ab88 to 0.0.0-211ab01

dist/code-tween.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 interface CodeTweenProps {
@@ -3,0 +2,0 @@ /** A number between 0 and 1. */

dist/code.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 declare type CodeProps = {
@@ -3,0 +2,0 @@ prevCode: string;

dist/editor-frame.d.ts

@@ -10,3 +10,3 @@ import React from "react";
     button?: React.ReactNode;
-    classes: Record<string, string>;
+    classes?: Record<string, string>;
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>;
@@ -13,0 +13,0 @@ declare function EditorFrame({ files, active, children, terminalPanel, height, style, button, classes, ...rest }: EditorFrameProps): JSX.Element;

dist/index.cjs.js

@@ -129,2 +129,4 @@ 'use strict';
     var _a = __read(React__default['default'].useState(null), 2), dimensions = _a[0], setDimensions = _a[1];
+    var windowWidth = useWindowWidth();
+    var fullDeps = __spread(deps, [windowWidth]);
     useLayoutEffect(function () {
@@ -153,7 +155,8 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
                 colWidth: colWidth,
-                deps: deps,
+                deps: fullDeps,
             });
         }
-    }, deps);
-    if (!dimensions || depsChanged(dimensions.deps, deps)) {
+    }, fullDeps);
+    if (!dimensions ||
+        depsChanged(dimensions.deps, fullDeps)) {
         return [ref, null];
@@ -172,2 +175,15 @@ }
 }
+function useWindowWidth() {
+    var _a = __read(React__default['default'].useState(undefined), 2), width = _a[0], setWidth = _a[1];
+    React__default['default'].useEffect(function () {
+        function handleResize() {
+            setWidth(window.innerWidth);
+        }
+        window.addEventListener("resize", handleResize);
+        return function () {
+            return window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    return width;
+}
 
@@ -316,3 +332,3 @@ function getFocusIndexes(focus, lines) {
         } },
-        React__default['default'].createElement("code", null, dimensions ? (React__default['default'].createElement(smoothLines.SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
+        React__default['default'].createElement("code", { style: { opacity: dimensions ? 1 : 0 } }, dimensions ? (React__default['default'].createElement(smoothLines.SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
                 return Math.max(lw, dimensions.colWidth * minColumns);
@@ -319,0 +335,0 @@ }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, maxZoom: 1 })) : (React__default['default'].createElement(React__default['default'].Fragment, null,

dist/index.esm.js

@@ -121,2 +121,4 @@ import React from 'react';
     var _a = __read(React.useState(null), 2), dimensions = _a[0], setDimensions = _a[1];
+    var windowWidth = useWindowWidth();
+    var fullDeps = __spread(deps, [windowWidth]);
     useLayoutEffect(function () {
@@ -145,7 +147,8 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
                 colWidth: colWidth,
-                deps: deps,
+                deps: fullDeps,
             });
         }
-    }, deps);
-    if (!dimensions || depsChanged(dimensions.deps, deps)) {
+    }, fullDeps);
+    if (!dimensions ||
+        depsChanged(dimensions.deps, fullDeps)) {
         return [ref, null];
@@ -164,2 +167,15 @@ }
 }
+function useWindowWidth() {
+    var _a = __read(React.useState(undefined), 2), width = _a[0], setWidth = _a[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setWidth(window.innerWidth);
+        }
+        window.addEventListener("resize", handleResize);
+        return function () {
+            return window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    return width;
+}
 
@@ -308,3 +324,3 @@ function getFocusIndexes(focus, lines) {
         } },
-        React.createElement("code", null, dimensions ? (React.createElement(SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
+        React.createElement("code", { style: { opacity: dimensions ? 1 : 0 } }, dimensions ? (React.createElement(SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
                 return Math.max(lw, dimensions.colWidth * minColumns);
@@ -311,0 +327,0 @@ }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, maxZoom: 1 })) : (React.createElement(React.Fragment, null,

dist/index.js

@@ -123,2 +123,4 @@ (function (global, factory) {
         var _a = __read(React__default['default'].useState(null), 2), dimensions = _a[0], setDimensions = _a[1];
+        var windowWidth = useWindowWidth();
+        var fullDeps = __spread(deps, [windowWidth]);
         useLayoutEffect(function () {
@@ -147,7 +149,8 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
                     colWidth: colWidth,
-                    deps: deps,
+                    deps: fullDeps,
                 });
             }
-        }, deps);
-        if (!dimensions || depsChanged(dimensions.deps, deps)) {
+        }, fullDeps);
+        if (!dimensions ||
+            depsChanged(dimensions.deps, fullDeps)) {
             return [ref, null];
@@ -166,2 +169,15 @@ }
     }
+    function useWindowWidth() {
+        var _a = __read(React__default['default'].useState(undefined), 2), width = _a[0], setWidth = _a[1];
+        React__default['default'].useEffect(function () {
+            function handleResize() {
+                setWidth(window.innerWidth);
+            }
+            window.addEventListener("resize", handleResize);
+            return function () {
+                return window.removeEventListener("resize", handleResize);
+            };
+        }, []);
+        return width;
+    }
 
@@ -310,3 +326,3 @@ function getFocusIndexes(focus, lines) {
             } },
-            React__default['default'].createElement("code", null, dimensions ? (React__default['default'].createElement(smoothLines.SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
+            React__default['default'].createElement("code", { style: { opacity: dimensions ? 1 : 0 } }, dimensions ? (React__default['default'].createElement(smoothLines.SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
                     return Math.max(lw, dimensions.colWidth * minColumns);
@@ -313,0 +329,0 @@ }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, maxZoom: 1 })) : (React__default['default'].createElement(React__default['default'].Fragment, null,

dist/mini-editor.d.ts

@@ -23,4 +23,4 @@ import React from "react";
     button?: React.ReactNode;
-    classes: Record<string, string>;
+    classes?: Record<string, string>;
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>;
 declare function MiniEditor(props: MiniEditorProps): JSX.Element;

package.json

 {
   "name": "@code-hike/mini-editor",
-  "version": "0.0.0-133ab88",
+  "version": "0.0.0-211ab01",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@ "typings": "dist/index.d.ts",
   "dependencies": {
-    "@code-hike/code-diff": "0.0.0-133ab88",
-    "@code-hike/mini-frame": "0.0.0-133ab88",
-    "@code-hike/mini-terminal": "0.0.0-133ab88",
-    "@code-hike/smooth-lines": "0.0.0-133ab88",
-    "@code-hike/utils": "0.0.0-133ab88",
+    "@code-hike/code-diff": "0.0.0-211ab01",
+    "@code-hike/mini-frame": "0.0.0-211ab01",
+    "@code-hike/mini-terminal": "0.0.0-211ab01",
+    "@code-hike/smooth-lines": "0.0.0-211ab01",
+    "@code-hike/utils": "0.0.0-211ab01",
     "use-spring": "^0.2.3"
@@ -28,0 +28,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

102098

increased by1.86%

Lines of code

2097

increased by2.24%

Dependency changes

• + Added@code-hike/code-diff@0.0.0-211ab01(transitive)

• + Added@code-hike/mini-frame@0.0.0-211ab01(transitive)

• + Added@code-hike/mini-terminal@0.0.0-211ab01(transitive)

• + Added@code-hike/smooth-lines@0.0.0-211ab01(transitive)

• + Added@code-hike/utils@0.0.0-211ab01(transitive)

• - Removed@code-hike/code-diff@0.0.0-133ab88(transitive)

• - Removed@code-hike/mini-frame@0.0.0-133ab88(transitive)

• - Removed@code-hike/mini-terminal@0.0.0-133ab88(transitive)

• - Removed@code-hike/smooth-lines@0.0.0-133ab88(transitive)

• - Removed@code-hike/utils@0.0.0-133ab88(transitive)

• Updated@code-hike/code-diff@0.0.0-211ab01

• Updated@code-hike/mini-frame@0.0.0-211ab01

• Updated@code-hike/mini-terminal@0.0.0-211ab01

• Updated@code-hike/smooth-lines@0.0.0-211ab01

• Updated@code-hike/utils@0.0.0-211ab01