@code-hike/smooth-code - npm Package Compare versions

Comparing version 0.3.0--canary.77.ade5d72.0 to 0.3.0--canary.77.e1fb282.0

dist/index.esm.js

@@ -442,3 +442,3 @@ import React from 'react';
 
-function Line$1(_a) {
+function Line(_a) {
     var line = _a.line;
@@ -452,3 +452,3 @@ return (React.createElement("div", { style: { display: "inline-block" } },
 }
-var OFF_OPACITY$2 = 0.33;
+var OFF_OPACITY$1 = 0.33;
 function ColumnedLine(_a) {
@@ -474,3 +474,3 @@ var line = _a.line, progress = _a.progress, focus = _a.focus;
                         ? 0.99
-                        : OFF_OPACITY$2,
+                        : OFF_OPACITY$1,
                 toOpacity: !nextFocus
@@ -480,3 +480,3 @@ ? 0.99 // because the line is already transparent
                         ? 0.99
-                        : OFF_OPACITY$2,
+                        : OFF_OPACITY$1,
             });
@@ -491,3 +491,3 @@ });
             var char = _a.char, tokenProps = _a.tokenProps, fromOpacity = _a.fromOpacity, toOpacity = _a.toOpacity;
-            return (React.createElement("span", __assign({}, tokenProps, { key: i + 1, style: __assign(__assign({}, tokenProps === null || tokenProps === void 0 ? void 0 : tokenProps.style), { opacity: tween$2(fromOpacity, toOpacity, progress) }) }), char));
+            return (React.createElement("span", __assign({}, tokenProps, { key: i + 1, style: __assign(__assign({}, tokenProps === null || tokenProps === void 0 ? void 0 : tokenProps.style), { opacity: tween$1(fromOpacity, toOpacity, progress) }) }), char));
         }),
@@ -540,3 +540,3 @@ React.createElement("br", null)));
 // }
-function tween$2(p, n, t) {
+function tween$1(p, n, t) {
     return (n - p) * t + p;
@@ -564,3 +564,3 @@ }
                         key: key,
-                        element: React.createElement(Line$1, { line: codeMap.lines[key] }),
+                        element: React.createElement(Line, { line: codeMap.lines[key] }),
                     };
@@ -571,3 +571,3 @@ }
                         key: key,
-                        element: React.createElement(Line$1, { line: codeMap.lines[key] }),
+                        element: React.createElement(Line, { line: codeMap.lines[key] }),
                         elementWithProgress: function (progress) { return (React.createElement(ColumnedLine, { line: codeMap.lines[key], focus: focus, progress: progress })); },
@@ -831,7 +831,3 @@ };
             : false;
-        var newTokens = splitByFocusObjects(tokens, {
-            prev: prevLineFocus,
-            next: nextLineFocus,
-        });
-        return __assign({ tokens: newTokens, focused: {
+        return __assign({ focused: {
                 prev: Array.isArray(prevLineFocus)
@@ -843,3 +839,6 @@ ? "by-column"
                     : nextLineFocus,
-            } }, rest);
+            }, groups: getTokenGroups(tokens, {
+                prev: prevLineFocus,
+                next: nextLineFocus,
+            }) }, rest);
     });
@@ -855,37 +854,76 @@ var focusedLineNumbers = map(focusByLineNumber, function (focusByLineNumber) {
 /**
- * Splits the tokens that have different prev focus or next focus.
+ * Get the least amount of groups where no consecutive groups have
+ * the same combination of prevFocus and nextFocus.
  */
-function splitByFocusObjects(tokens, focus) {
-    var breakindexes = [];
-    mapWithDefault(focus, [], function (columns) {
-        if (Array.isArray(columns)) {
-            columns.forEach(function (_a) {
-                var start = _a.start, end = _a.end;
-                breakindexes.push(start - 1);
-                breakindexes.push(end);
-            });
+function getTokenGroups(tokens, focus) {
+    var extremes = map(focus, function (focus) {
+        return Array.isArray(focus) ? focus : [];
+    });
+    var allExtremes = __spread(extremes.prev, extremes.next);
+    var splittedTokens = splitTokens(tokens, allExtremes);
+    console.log({ splittedTokens: splittedTokens });
+    var startIndex = 0;
+    var currentGroup = null;
+    var groups = [];
+    splittedTokens.forEach(function (token) {
+        var newPrevFocus = isIn(startIndex, focus.prev);
+        var newNextFocus = isIn(startIndex, focus.next);
+        if (!currentGroup ||
+            currentGroup.focused.prev !== newPrevFocus ||
+            currentGroup.focused.next !== newNextFocus) {
+            currentGroup = {
+                focused: {
+                    prev: newPrevFocus,
+                    next: newNextFocus,
+                },
+                tokens: [],
+            };
+            groups.push(currentGroup);
         }
+        currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.tokens.push(token);
+        startIndex += token.content.length;
     });
-    var i = 0;
-    var newTokens = [];
-    tokens.forEach(function (token) {
-        var content = token.content, rest = __rest(token, ["content"]);
-        var newContent = "";
-        for (var j = 0; j < content.length; j++) {
-            if (i + j > 0 && breakindexes.includes(i + j)) {
-                newTokens.push(__assign(__assign({ content: newContent }, rest), { focused: {
-                        prev: !focus.prev || isIn(i + j - 1, focus.prev),
-                        next: !focus.next || isIn(i + j - 1, focus.next),
-                    } }));
-                newContent = "";
+    return groups.map(function (group) {
+        return (__assign(__assign({}, group), { element: getGroupElement(group) }));
+    });
+}
+function getGroupElement(group) {
+    return (React.createElement(React.Fragment, null, group.tokens.map(function (_a, i) {
+        var content = _a.content, props = _a.props;
+        return (React.createElement("span", __assign({}, props, { key: i + 1 }), content));
+    })));
+}
+/**
+ * Split a list of tokens into a more fine-graned list of tokens
+ *
+ * tokens: [abc][defg]
+ * extremes: [1:2,2:5]
+ * result tokens: [ab][c][de][fg]
+ *
+ */
+function splitTokens(tokens, extremes) {
+    var splitIndexes = __spread(extremes.map(function (e) { return e.start - 1; }), extremes.map(function (e) { return e.end; }));
+    var oldTokens = tokens;
+    splitIndexes.forEach(function (splitIndex) {
+        var newTokens = [];
+        var i = 0;
+        oldTokens.forEach(function (token) {
+            var startIndex = i;
+            var endIndex = i + token.content.length;
+            var shouldSplit = startIndex < splitIndex && splitIndex < endIndex;
+            if (shouldSplit) {
+                var sliceIndex = splitIndex - startIndex;
+                var content0 = token.content.slice(0, sliceIndex);
+                var content1 = token.content.slice(sliceIndex);
+                newTokens.push(__assign(__assign({}, token), { content: content0 }));
+                newTokens.push(__assign(__assign({}, token), { content: content1 }));
             }
-            newContent += content[j];
-        }
-        i += content.length;
-        newTokens.push(__assign(__assign({ content: newContent }, rest), { focused: {
-                prev: !focus.prev || isIn(i - 1, focus.prev),
-                next: !focus.next || isIn(i - 1, focus.next),
-            } }));
+            else {
+                newTokens.push(token);
+            }
+            i = endIndex;
+        });
+        oldTokens = newTokens;
     });
-    return newTokens;
+    return oldTokens;
 }
@@ -902,3 +940,3 @@ function isIn(index, intervals) {
 
-function tween$1(params, t) {
+function tween(params, t) {
     if (params.fixed)
@@ -977,45 +1015,5 @@ return params.value;
         return __assign(__assign({}, line), { tweenX: tweenX,
-            tweenY: tweenY, element: React.createElement(Line, { tokens: line.tokens }), elementWithProgress: function (t) { return (React.createElement(LineWithProgress, { line: line, progress: t })); } });
+            tweenY: tweenY });
     });
 }
-function Line(_a) {
-    var tokens = _a.tokens;
-    return (React.createElement("div", { style: { display: "inline-block" } },
-        tokens.map(function (_a, i) {
-            var content = _a.content, props = _a.props;
-            return (React.createElement("span", __assign({}, props, { key: i + 1 }), content));
-        }),
-        React.createElement("br", null)));
-}
-function LineWithProgress(_a) {
-    var line = _a.line, progress = _a.progress;
-    return (React.createElement("div", { style: {
-            display: "inline-block",
-            width: "100%",
-        } },
-        line.tokens.map(function (token, i) {
-            var _a;
-            var opacity = getTokenOpacity(line, token);
-            return (React.createElement("span", __assign({}, token.props, { style: __assign(__assign({}, (_a = token.props) === null || _a === void 0 ? void 0 : _a.style), { opacity: tween(opacity.prev, opacity.next, progress) }), key: i + 1 }), token.content));
-        }),
-        React.createElement("br", null)));
-}
-var OFF_OPACITY$1 = 0.33;
-function getTokenOpacity(line, token) {
-    return {
-        prev: !line.focused.prev
-            ? 0.99 // because the line is already transparent
-            : line.focused.prev === true || token.focused.prev
-                ? 0.99
-                : OFF_OPACITY$1,
-        next: !line.focused.next
-            ? 0.99 // because the line is already transparent
-            : line.focused.next === true || token.focused.next
-                ? 0.99
-                : OFF_OPACITY$1,
-    };
-}
-function tween(p, n, t) {
-    return (n - p) * t + p;
-}
 
@@ -1220,3 +1218,3 @@ function useStepParser(input) {
     if (interval === void 0) { interval = [0, 1]; }
-    return tween$1({
+    return tween({
         fixed: false,
@@ -1241,12 +1239,23 @@ interval: interval,
     var lines = _a.lines, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, t = _a.t, _b = _a.startY, startY = _b === void 0 ? 0 : _b;
-    return (React.createElement(React.Fragment, null, lines.map(function (_a, key) {
-        var element = _a.element, tweenX = _a.tweenX, tweenY = _a.tweenY, elementWithProgress = _a.elementWithProgress, focused = _a.focused;
-        var dx = tween$1(tweenX, t);
-        var dy = tween$1(tweenY, t);
+    return (React.createElement(React.Fragment, null, lines.map(function (line, key) {
+        var tweenX = line.tweenX, tweenY = line.tweenY, focused = line.focused;
+        var dx = tween(tweenX, t);
+        var dy = tween(tweenY, t);
         var opacity = getOpacity(map(focused, function (focused) { return !!focused; }), t, dx);
-        return (React.createElement(LineContainer, { key: key, dx: dx * focusWidth, dy: (dy - startY) * lineHeight, opacity: opacity, width: focusWidth }, elementWithProgress
-            ? elementWithProgress(t)
-            : element));
+        return (React.createElement(LineContainer, { key: key, dx: dx * focusWidth, dy: (dy - startY) * lineHeight, width: focusWidth, opacity: opacity },
+            React.createElement(LineContent, { line: line, progress: t, dx: dx })));
     })));
 }
+function LineContent(_a) {
+    var line = _a.line, progress = _a.progress, dx = _a.dx;
+    return (React.createElement("div", { style: {
+            display: "inline-block",
+            width: "100%",
+        } },
+        line.groups.map(function (group, i) {
+            var opacity = getOpacity(group.focused, progress, dx);
+            return (React.createElement("span", { style: { opacity: opacity }, key: i + 1 }, group.element));
+        }),
+        React.createElement("br", null)));
+}
 function LineContainer(_a) {
@@ -1259,3 +1268,2 @@ var children = _a.children, dx = _a.dx, dy = _a.dy, opacity = _a.opacity, width = _a.width;
             transform: "translate(" + dx + "px, " + dy + "px)",
-            opacity: opacity,
             width: width,
@@ -1267,3 +1275,3 @@ display: opacity <= 0 ? "none" : undefined,
 function getOpacity(focused, progress, dx) {
-    return (tween$1({
+    return (tween({
         fixed: false,
@@ -1353,3 +1361,3 @@ extremes: [
     var htmlProps = _a.htmlProps, style = _a.style, children = _a.children;
-    return (React.createElement("pre", __assign({}, htmlProps, { style: __assign(__assign({ margin: 0, outline: "red 1px solid" }, style), htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps.style) }),
+    return (React.createElement("pre", __assign({}, htmlProps, { style: __assign(__assign({ margin: 0 }, style), htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps.style) }),
         React.createElement("code", null, children)));
@@ -1356,0 +1364,0 @@ }

dist/splitter.d.ts

@@ -1,22 +0,11 @@
-import { Tween, FullTween } from "@code-hike/utils";
-import { FocusString } from "./focus-parser";
-import { MergedCode, FocusedCode } from "./step-parser";
-declare type Token = {
-    content: string;
-};
-declare type Line = {
-    tokens: Token[];
-    lineNumber: Tween<number>;
-};
-declare type Annotation = {
-    focus: string;
-};
-declare type LineGroup = {
-    lines: Line[];
-    annotation?: any;
-};
-export declare function splitByAnnotations<T extends Annotation>({ lines, ...rest }: {
-    lines: Line[];
-}, annotations?: FullTween<T[]>): {
-    lines: Line[];
+import { FullTween } from "@code-hike/utils";
+import { FocusString, ColumnExtremes } from "./focus-parser";
+import { MergedCode, FocusedCode, FocusedLine, MergedLine, LineGroup, CodeAnnotation } from "./step-parser";
+import React from "react";
+export declare function splitByAnnotations({ lines, ...rest }: FocusedCode, annotations?: FullTween<CodeAnnotation[]>): {
+    firstFocusedLineNumber: FullTween<number>;
+    lastFocusedLineNumber: FullTween<number>;
+    enterCount: number;
+    exitCount: number;
+    lines: FocusedLine[];
     groups: {
@@ -28,2 +17,15 @@ prev: LineGroup[];
 export declare function splitByFocus(mergedCode: MergedCode, focus: FullTween<FocusString>): FocusedCode;
-export {};
+/**
+ * Split a list of tokens into a more fine-graned list of tokens
+ *
+ * tokens: [abc][defg]
+ * extremes: [1:2,2:5]
+ * result tokens: [ab][c][de][fg]
+ *
+ */
+export declare function splitTokens(tokens: MergedLine["tokens"], extremes: ColumnExtremes[]): {
+    content: string;
+    props: {
+        style?: React.CSSProperties | undefined;
+    };
+}[];

dist/step-parser.d.ts

@@ -41,11 +41,13 @@ import { Tween, FullTween } from "@code-hike/utils";
 }
-declare type FocusedToken = HighlightedToken & {
+export declare type TokenGroup = {
+    tokens: HighlightedToken[];
     focused: FullTween<boolean>;
+    element: React.ReactNode;
 };
-export interface FocusedLine extends MergedLine {
-    tokens: FocusedToken[];
+export interface FocusedLine extends Omit<MergedLine, "tokens"> {
+    groups: TokenGroup[];
     lineNumber: Tween<number>;
     focused: FullTween<boolean | "by-column">;
 }
-export interface FocusedCode extends MergedCode {
+export interface FocusedCode extends Omit<MergedCode, "lines"> {
     lines: FocusedLine[];
@@ -55,6 +57,8 @@ firstFocusedLineNumber: FullTween<number>;
 }
+export declare type LineGroup = {
+    annotation?: CodeAnnotation;
+    lines: FocusedLine[];
+};
 export declare type LineWithElement = FocusedLine & {
     key: number;
-    element: React.ReactNode;
-    elementWithProgress?: (t: number) => React.ReactNode;
     tweenX: TweenParams;
@@ -64,3 +68,3 @@ tweenY: TweenParams;
 declare type LineGroupWithElement = {
-    annotation: CodeAnnotation;
+    annotation?: CodeAnnotation;
     lines: LineWithElement[];
@@ -67,0 +71,0 @@ };

package.json

 {
   "name": "@code-hike/smooth-code",
-  "version": "0.3.0--canary.77.ade5d72.0",
+  "version": "0.3.0--canary.77.e1fb282.0",
   "main": "dist/index.cjs.js",
@@ -12,14 +12,19 @@ "typings": "dist/index.d.ts",
   "scripts": {
-    "x": "x"
+    "x": "x",
+    "test": "jest",
+    "test-watch": "jest --watch --updateSnapshot"
   },
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.77.ade5d72.0",
+    "@code-hike/script": "0.3.0--canary.77.e1fb282.0",
     "@types/diff": "^4.0.2",
+    "@types/jest": "^24.0.15",
     "@types/react": "^16.9.38",
-    "react": "^16.13.1"
+    "jest": "^26.5.3",
+    "react": "^16.13.1",
+    "ts-jest": "^26.4.1"
   },
   "dependencies": {
-    "@code-hike/code-diff": "0.3.0--canary.77.ade5d72.0",
-    "@code-hike/smooth-lines": "0.3.0--canary.77.ade5d72.0",
-    "@code-hike/utils": "0.3.0--canary.77.ade5d72.0",
+    "@code-hike/code-diff": "0.3.0--canary.77.e1fb282.0",
+    "@code-hike/smooth-lines": "0.3.0--canary.77.e1fb282.0",
+    "@code-hike/utils": "0.3.0--canary.77.e1fb282.0",
     "diff": "^4.0.2",
@@ -45,3 +50,3 @@ "shiki": "^0.9.5"
   },
-  "gitHead": "ade5d72c2e84b4893c40b07e576b9aff818d6cec"
+  "gitHead": "e1fb2823795e6394c8456c99eeef88344f3dd360"
 }

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

Total package byte prevSize

142376

increased by0.47%

Number of package files

23

increased by4.55%

Lines of code

3077

increased by0.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

7

increased by75%

Dependency changes

• + Added@code-hike/code-diff@0.3.0--canary.77.e1fb282.0(transitive)

• + Added@code-hike/smooth-lines@0.3.0--canary.77.e1fb282.0(transitive)

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

• - Removed@code-hike/[e-mail]5d72.0(transitive)

• - Removed@code-hike/[e-mail]5d72.0(transitive)

• - Removed@code-hike/[e-mail]5d72.0(transitive)

• Updated@code-hike/code-diff@0.3.0--canary.77.e1fb282.0

• Updated@code-hike/smooth-lines@0.3.0--canary.77.e1fb282.0

• Updated@code-hike/utils@0.3.0--canary.77.e1fb282.0