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

Comparing version 0.0.0-4adbd70 to 0.0.0-6a4ea1c

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

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

dist/index.cjs.js

@@ -7,3 +7,3 @@ 'use strict';
 var miniFrame = require('@code-hike/mini-frame');
-var utils = require('@code-hike/utils');
+var classer = require('@code-hike/classer');
 var miniTerminal = require('@code-hike/mini-terminal');
@@ -93,8 +93,8 @@ var codeDiff = require('@code-hike/code-diff');
 
-var c = utils.classNamesWithPrefix("ch-editor");
 var DEFAULT_HEIGHT = 200;
 function EditorFrame(_a) {
     var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, classes = _a.classes, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button", "classes"]);
+    var c = classer.useClasser("ch-editor");
     return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({ titleBar: React__default['default'].createElement(TabsContainer, { files: files, active: active, button: button, classes: classes }), classes: classes, style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
-        React__default['default'].createElement("div", { className: c("-body", classes) }, children),
+        React__default['default'].createElement("div", { className: c("body") }, children),
         terminalPanel));
@@ -104,10 +104,6 @@ }
     var files = _a.files, active = _a.active, button = _a.button, classes = _a.classes;
+    var c = classer.useClasser("ch-editor-tab");
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(miniFrame.FrameButtons, { classes: classes }),
-        files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: c([
-                "-tab",
-                fileName === active
-                    ? "-tab-active"
-                    : "-tab-inactive",
-            ], classes) },
+        React__default['default'].createElement(miniFrame.FrameButtons, null),
+        files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: c("", fileName === active ? "active" : "inactive") },
             React__default['default'].createElement("div", null, fileName))); }),
@@ -132,2 +128,4 @@ React__default['default'].createElement("div", { style: { flex: 1 } }),
     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 () {
@@ -156,7 +154,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];
@@ -175,2 +174,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;
+}
 
@@ -318,2 +330,3 @@ function getFocusIndexes(focus, lines) {
             overflow: "hidden",
+            opacity: dimensions ? 1 : 0,
         } },
@@ -638,3 +651,5 @@ 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) {
     var _b = __read(useSpring.useSpring(state.target, {
-        stiffness: 100,
+        stiffness: 256,
+        damping: 24,
+        mass: 0.2,
         decimals: 3,
@@ -641,0 +656,0 @@ }), 1), progress = _b[0];

dist/index.d.ts

@@ -1,3 +0,4 @@
-import { MiniEditor } from "./mini-editor";
-import { MiniEditorWithState } from "./stateful-editor";
-export { MiniEditor, MiniEditorWithState };
+import "./index.scss";
+import { MiniEditor, MiniEditorProps } from "./mini-editor";
+import { MiniEditorWithState, StatefulEditorProps } from "./stateful-editor";
+export { MiniEditor, MiniEditorWithState, MiniEditorProps, StatefulEditorProps, };

dist/index.esm.js

 import React from 'react';
 import { MiniFrame, FrameButtons } from '@code-hike/mini-frame';
-import { classNamesWithPrefix } from '@code-hike/utils';
+import { useClasser } from '@code-hike/classer';
 import { InnerTerminal } from '@code-hike/mini-terminal';
@@ -84,8 +84,8 @@ import { codeDiff } from '@code-hike/code-diff';
 
-var c = classNamesWithPrefix("ch-editor");
 var DEFAULT_HEIGHT = 200;
 function EditorFrame(_a) {
     var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, classes = _a.classes, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button", "classes"]);
+    var c = useClasser("ch-editor");
     return (React.createElement(MiniFrame, __assign({ titleBar: React.createElement(TabsContainer, { files: files, active: active, button: button, classes: classes }), classes: classes, style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
-        React.createElement("div", { className: c("-body", classes) }, children),
+        React.createElement("div", { className: c("body") }, children),
         terminalPanel));
@@ -95,10 +95,6 @@ }
     var files = _a.files, active = _a.active, button = _a.button, classes = _a.classes;
+    var c = useClasser("ch-editor-tab");
     return (React.createElement(React.Fragment, null,
-        React.createElement(FrameButtons, { classes: classes }),
-        files.map(function (fileName) { return (React.createElement("div", { key: fileName, className: c([
-                "-tab",
-                fileName === active
-                    ? "-tab-active"
-                    : "-tab-inactive",
-            ], classes) },
+        React.createElement(FrameButtons, null),
+        files.map(function (fileName) { return (React.createElement("div", { key: fileName, className: c("", fileName === active ? "active" : "inactive") },
             React.createElement("div", null, fileName))); }),
@@ -123,2 +119,4 @@ React.createElement("div", { style: { flex: 1 } }),
     var _a = __read(React.useState(null), 2), dimensions = _a[0], setDimensions = _a[1];
+    var windowWidth = useWindowWidth();
+    var fullDeps = __spread(deps, [windowWidth]);
     useLayoutEffect(function () {
@@ -147,7 +145,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 +165,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;
+}
 
@@ -309,2 +321,3 @@ function getFocusIndexes(focus, lines) {
             overflow: "hidden",
+            opacity: dimensions ? 1 : 0,
         } },
@@ -629,3 +642,5 @@ 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) {
     var _b = __read(useSpring(state.target, {
-        stiffness: 100,
+        stiffness: 256,
+        damping: 24,
+        mass: 0.2,
         decimals: 3,
@@ -632,0 +647,0 @@ }), 1), progress = _b[0];

dist/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/mini-frame'), require('@code-hike/utils'), require('@code-hike/mini-terminal'), require('@code-hike/code-diff'), require('@code-hike/smooth-lines'), require('use-spring')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/mini-frame', '@code-hike/utils', '@code-hike/mini-terminal', '@code-hike/code-diff', '@code-hike/smooth-lines', 'use-spring'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.miniFrame, global.utils, global.miniTerminal, global.codeDiff, global.smoothLines, global.useSpring));
-}(this, (function (exports, React, miniFrame, utils, miniTerminal, codeDiff, smoothLines, useSpring) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/mini-frame'), require('@code-hike/classer'), require('@code-hike/mini-terminal'), require('@code-hike/code-diff'), require('@code-hike/smooth-lines'), require('use-spring')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/mini-frame', '@code-hike/classer', '@code-hike/mini-terminal', '@code-hike/code-diff', '@code-hike/smooth-lines', 'use-spring'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.miniFrame, global.classer, global.miniTerminal, global.codeDiff, global.smoothLines, global.useSpring));
+}(this, (function (exports, React, miniFrame, classer, miniTerminal, codeDiff, smoothLines, useSpring) { 'use strict';
 
@@ -86,8 +86,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var c = utils.classNamesWithPrefix("ch-editor");
     var DEFAULT_HEIGHT = 200;
     function EditorFrame(_a) {
         var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, classes = _a.classes, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button", "classes"]);
+        var c = classer.useClasser("ch-editor");
         return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({ titleBar: React__default['default'].createElement(TabsContainer, { files: files, active: active, button: button, classes: classes }), classes: classes, style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
-            React__default['default'].createElement("div", { className: c("-body", classes) }, children),
+            React__default['default'].createElement("div", { className: c("body") }, children),
             terminalPanel));
@@ -97,10 +97,6 @@ }
         var files = _a.files, active = _a.active, button = _a.button, classes = _a.classes;
+        var c = classer.useClasser("ch-editor-tab");
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(miniFrame.FrameButtons, { classes: classes }),
-            files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: c([
-                    "-tab",
-                    fileName === active
-                        ? "-tab-active"
-                        : "-tab-inactive",
-                ], classes) },
+            React__default['default'].createElement(miniFrame.FrameButtons, null),
+            files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: c("", fileName === active ? "active" : "inactive") },
                 React__default['default'].createElement("div", null, fileName))); }),
@@ -125,2 +121,4 @@ React__default['default'].createElement("div", { style: { flex: 1 } }),
         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 () {
@@ -149,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];
@@ -168,2 +167,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;
+    }
 
@@ -311,2 +323,3 @@ function getFocusIndexes(focus, lines) {
                 overflow: "hidden",
+                opacity: dimensions ? 1 : 0,
             } },
@@ -631,3 +644,5 @@ 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) {
         var _b = __read(useSpring.useSpring(state.target, {
-            stiffness: 100,
+            stiffness: 256,
+            damping: 24,
+            mass: 0.2,
             decimals: 3,
@@ -634,0 +649,0 @@ }), 1), progress = _b[0];

dist/mini-editor.d.ts

 import React from "react";
+import { Classes } from "@code-hike/classer";
 export { MiniEditor };
@@ -23,4 +24,4 @@ declare type MiniEditorStep = {
     button?: React.ReactNode;
-    classes: Record<string, string>;
+    classes?: Classes;
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>;
 declare function MiniEditor(props: MiniEditorProps): JSX.Element;

dist/stateful-editor.d.ts

@@ -1,5 +0,4 @@
-/// <reference types="react" />
 import { MiniEditorProps } from "./mini-editor";
 export { MiniEditorWithState };
-declare type StatefulEditorProps = Omit<MiniEditorProps, "progress" | "steps" | "backward">;
+export declare type StatefulEditorProps = Omit<MiniEditorProps, "progress" | "steps" | "backward">;
 declare function MiniEditorWithState({ focus, code, ...rest }: StatefulEditorProps): JSX.Element;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

101992

increased by1.84%

Lines of code

2096

increased by2.19%

Dependency changes

• + Added@code-hike/classer@0.0.0-6a4ea1c

• + Added@code-hike/classer@0.0.0-6a4ea1c(transitive)

• + Added@code-hike/code-diff@0.0.0-6a4ea1c(transitive)

• + Added@code-hike/mini-frame@0.0.0-6a4ea1c(transitive)

• + Added@code-hike/mini-terminal@0.0.0-6a4ea1c(transitive)

• + Added@code-hike/smooth-lines@0.0.0-6a4ea1c(transitive)

• - Removed@code-hike/utils@0.0.0-4adbd70

• - Removed@code-hike/code-diff@0.0.0-4adbd70(transitive)

• - Removed@code-hike/mini-frame@0.0.0-4adbd70(transitive)

• - Removed@code-hike/mini-terminal@0.0.0-4adbd70(transitive)

• - Removed@code-hike/smooth-lines@0.0.0-4adbd70(transitive)

• - Removed@code-hike/utils@0.0.0-4adbd70(transitive)

• Updated@code-hike/code-diff@0.0.0-6a4ea1c

• Updated@code-hike/mini-frame@0.0.0-6a4ea1c

• Updated@code-hike/mini-terminal@0.0.0-6a4ea1c

• Updated@code-hike/smooth-lines@0.0.0-6a4ea1c