windups - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist-src/react/index.js

@@ -7,3 +7,3 @@ export { default as useWindupString } from "./useWindupString";
 export { default as CharWrapper } from "./CharWrapper";
-export { default as Linebreaker } from "./Linebreaker";
+export { default as Linebreaker, StyledText } from "./Linebreaker";
 export { default as Effect } from "./Effect";

dist-src/react/Linebreaker.js

 import React from "react";
 import breakLines from "break-styled-lines";
-function getStringsOfReactChildren(strings, children) {
-    if (typeof children === "string") {
-        return [...strings, children];
-    }
-    if (typeof children === "number") {
-        return [...strings, children.toString()];
-    }
-    if (!React.isValidElement(children)) {
-        return strings;
-    }
-    return [
-        ...strings,
-        ...React.Children.toArray(children.props.children).reduce(getStringsOfReactChildren, [])
-    ];
+function makeGetDescriptorsOfChildren(defaultFontStyle) {
+    return (descriptors, children) => {
+        if (typeof children === "string") {
+            return [...descriptors, { text: children, font: defaultFontStyle }];
+        }
+        if (typeof children === "number") {
+            return [
+                ...descriptors,
+                { text: children.toString(), font: defaultFontStyle },
+            ];
+        }
+        if (!React.isValidElement(children)) {
+            return descriptors;
+        }
+        if (isStyledTextElement(children) &&
+            typeof children.props.children === "string") {
+            return [
+                ...descriptors,
+                { text: children.props.children, font: children.props.fontStyle },
+            ];
+        }
+        if (isStyledTextElement(children)) {
+            return [
+                ...descriptors,
+                ...React.Children.toArray(children.props.children).reduce(makeGetDescriptorsOfChildren(children.props.fontStyle), []),
+            ];
+        }
+        return [
+            ...descriptors,
+            ...React.Children.toArray(children.props.children).reduce(makeGetDescriptorsOfChildren(defaultFontStyle), []),
+        ];
+    };
 }
@@ -31,9 +49,15 @@ function reinsertStringsIntoChildren([accChildren, accStrings], children) {
             React.cloneElement(children, {
-                children: subChildrenAcc
-            })
+                children: subChildrenAcc,
+            }),
         ],
-        subStringsAcc
+        subStringsAcc,
     ];
 }
-const Linebreaker = ({ children, fontStyle, width }) => {
+function isStyledTextElement(element) {
+    return element.type === StyledText;
+}
+export function StyledText({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+const Linebreaker = ({ children, fontStyle, width, }) => {
     // CAVEATS:
@@ -44,7 +68,7 @@ // fontStyle must match the font style of the characters inside
     const childrenArray = React.Children.toArray(children);
-    const strings = childrenArray.reduce(getStringsOfReactChildren, []);
-    const transformedStrings = breakLines(strings, width, fontStyle);
-    const [transformedChildren] = childrenArray.reduce(reinsertStringsIntoChildren, [
+    const descriptors = childrenArray.reduce(makeGetDescriptorsOfChildren(fontStyle), []);
+    const transformedStrings = breakLines(descriptors, width, fontStyle);
+    const [transformedChildren,] = childrenArray.reduce(reinsertStringsIntoChildren, [
         [],
-        transformedStrings
+        transformedStrings,
     ]);
@@ -51,0 +75,0 @@ return React.createElement("div", { style: { whiteSpace: "pre" } }, transformedChildren);

dist-src/react/Pace.js

@@ -36,13 +36,13 @@ import React from "react";
 }
-export function paceFromWindup(windup) {
+export function paceFromWindup(windup, parentPace) {
     if (isFinished(windup)) {
         return undefined;
     }
-    const [_played, remaining, metadata] = windup;
+    const [, remaining, metadata] = windup;
     const [firstRemaining] = remaining;
     if (firstRemaining && memberIsWindup(firstRemaining)) {
-        return paceFromWindup(firstRemaining);
+        return paceFromWindup(firstRemaining, metadata.pace || parentPace);
     }
-    return metadata.pace;
+    return metadata.pace || parentPace;
 }
 export default Pace;

dist-src/react/useWindupString.js

@@ -1,2 +0,2 @@
-import { useMemo } from "react";
+import { useMemo, useDebugValue } from "react";
 import { windupFromString } from "../Windup";
@@ -10,3 +10,5 @@ import useWindup from "./useWindup";
     const { windup, skip, rewind, isFinished } = useWindup(windupInit, options);
-    return [renderStringWindup(windup), { skip, rewind, isFinished }];
+    const rendered = renderStringWindup(windup);
+    useDebugValue(rendered);
+    return [rendered, { skip, rewind, isFinished }];
 }

dist-src/react/WindupChildren.js

 import React, { useContext, useMemo } from "react";
-import { newWindup, windupFromString, memberIsWindup } from "../Windup";
+import { newWindup, windupFromString, memberIsWindup, } from "../Windup";
 import { isPaceElement, isMsProp } from "./Pace";
@@ -15,3 +15,3 @@ import { isOnCharElement } from "./OnChar";
     },
-    isFinished: false
+    isFinished: false,
 });
@@ -48,3 +48,3 @@ export function useSkip() {
                 return children.props.getPace(char);
-            }
+            },
         }
@@ -54,3 +54,3 @@ : {};
         ? {
-            onChar: children.props.fn
+            onChar: children.props.fn,
         }
@@ -66,4 +66,4 @@ : {};
                 props: {},
-                pace: () => children.props.ms
-            })
+                pace: () => children.props.ms,
+            }),
         ];
@@ -79,4 +79,4 @@ }
                 ...paceMetaData,
-                ...onCharMetaData
-            })
+                ...onCharMetaData,
+            }),
         ];
@@ -92,4 +92,4 @@ }
                 ...paceMetaData,
-                ...onCharMetaData
-            })
+                ...onCharMetaData,
+            }),
         ];
@@ -105,8 +105,8 @@ }
                 ...paceMetaData,
-                ...onCharMetaData
-            })
+                ...onCharMetaData,
+            }),
         ];
     }
     const newArgs = React.Children.toArray(childrenChildren).reduce(reduceWindupArgs, []);
-    const argsWithMetadata = newArgs.map(member => {
+    const argsWithMetadata = newArgs.map((member) => {
         if (memberIsWindup(member)) {
@@ -120,4 +120,4 @@ const [played, remaining, metadata] = member;
                     ...onCharMetaData,
-                    ...metadata
-                }
+                    ...metadata,
+                },
             ];
@@ -134,4 +134,4 @@ }
             ...paceMetaData,
-            ...onCharMetaData
-        })
+            ...onCharMetaData,
+        }),
     ];
@@ -143,3 +143,3 @@ }
     }
-    return React.Children.map(children, child => {
+    return React.Children.map(children, (child) => {
         if (typeof child === "string") {
@@ -161,3 +161,3 @@ return child;
 }
-const WindupChildren = ({ children, onFinished, skipped }) => {
+const WindupChildren = ({ children, onFinished, skipped, }) => {
     const windupInit = useChildrenMemo(() => {
@@ -168,3 +168,3 @@ return newWindup(React.Children.toArray(children).reduce(reduceWindupArgs, []), { element: undefined });
         onFinished,
-        skipped
+        skipped,
     });
@@ -174,5 +174,5 @@ return (React.createElement(WindupContext.Provider, { value: {
             rewind,
-            isFinished
+            isFinished,
         } }, renderChildrenWindup(windup)));
 };
 export default WindupChildren;

dist-types/react/index.d.ts

@@ -7,3 +7,3 @@ export { default as useWindupString } from "./useWindupString";
 export { default as CharWrapper } from "./CharWrapper";
-export { default as Linebreaker } from "./Linebreaker";
+export { default as Linebreaker, StyledText } from "./Linebreaker";
 export { default as Effect } from "./Effect";

dist-types/react/Linebreaker.d.ts

 import React from "react";
+declare type StyledTextProps = {
+    children: React.ReactNode;
+    fontStyle: string;
+};
+export declare function StyledText({ children }: StyledTextProps): JSX.Element;
 declare type LinebreakerProps = {
@@ -3,0 +8,0 @@ fontStyle: string;

dist-types/react/Pace.d.ts

@@ -15,3 +15,3 @@ import React from "react";
 export declare function isMsProp(props: PaceProps): props is MsProp;
-export declare function paceFromWindup<M extends HookMetadata, W extends Windup<string, M>>(windup: W): ((char: string, nextChar: string | undefined) => number) | undefined;
+export declare function paceFromWindup<M extends HookMetadata, W extends Windup<string, M>>(windup: W, parentPace?: (char: string, nextChar: string | undefined) => number): ((char: string, nextChar: string | undefined) => number) | undefined;
 export default Pace;

dist-web/index.js

@@ -1,2 +0,2 @@
-import React, { useReducer, useRef, useCallback, useEffect, useMemo, useContext, isValidElement } from 'react';
+import React, { useReducer, useRef, useCallback, useEffect, useMemo, useDebugValue, useContext, isValidElement } from 'react';
 import breakLines from 'break-styled-lines';
@@ -173,12 +173,12 @@
 }
-function paceFromWindup(windup) {
+function paceFromWindup(windup, parentPace) {
     if (isFinished(windup)) {
         return undefined;
     }
-    const [_played, remaining, metadata] = windup;
+    const [, remaining, metadata] = windup;
     const [firstRemaining] = remaining;
     if (firstRemaining && memberIsWindup(firstRemaining)) {
-        return paceFromWindup(firstRemaining);
+        return paceFromWindup(firstRemaining, metadata.pace || parentPace);
     }
-    return metadata.pace;
+    return metadata.pace || parentPace;
 }
@@ -378,3 +378,5 @@
     const { windup, skip, rewind, isFinished } = useWindup(windupInit, options);
-    return [renderStringWindup(windup), { skip, rewind, isFinished }];
+    const rendered = renderStringWindup(windup);
+    useDebugValue(rendered);
+    return [rendered, { skip, rewind, isFinished }];
 }
@@ -396,3 +398,3 @@
     },
-    isFinished: false
+    isFinished: false,
 });
@@ -429,3 +431,3 @@ function useSkip() {
                 return children.props.getPace(char);
-            }
+            },
         }
@@ -435,3 +437,3 @@ : {};
         ? {
-            onChar: children.props.fn
+            onChar: children.props.fn,
         }
@@ -447,4 +449,4 @@ : {};
                 props: {},
-                pace: () => children.props.ms
-            })
+                pace: () => children.props.ms,
+            }),
         ];
@@ -460,4 +462,4 @@ }
                 ...paceMetaData,
-                ...onCharMetaData
-            })
+                ...onCharMetaData,
+            }),
         ];
@@ -473,4 +475,4 @@ }
                 ...paceMetaData,
-                ...onCharMetaData
-            })
+                ...onCharMetaData,
+            }),
         ];
@@ -486,8 +488,8 @@ }
                 ...paceMetaData,
-                ...onCharMetaData
-            })
+                ...onCharMetaData,
+            }),
         ];
     }
     const newArgs = React.Children.toArray(childrenChildren).reduce(reduceWindupArgs, []);
-    const argsWithMetadata = newArgs.map(member => {
+    const argsWithMetadata = newArgs.map((member) => {
         if (memberIsWindup(member)) {
@@ -501,4 +503,4 @@ const [played, remaining, metadata] = member;
                     ...onCharMetaData,
-                    ...metadata
-                }
+                    ...metadata,
+                },
             ];
@@ -515,4 +517,4 @@ }
             ...paceMetaData,
-            ...onCharMetaData
-        })
+            ...onCharMetaData,
+        }),
     ];
@@ -524,3 +526,3 @@ }
     }
-    return React.Children.map(children, child => {
+    return React.Children.map(children, (child) => {
         if (typeof child === "string") {
@@ -542,3 +544,3 @@ return child;
 }
-const WindupChildren = ({ children, onFinished, skipped }) => {
+const WindupChildren = ({ children, onFinished, skipped, }) => {
     const windupInit = useChildrenMemo(() => {
@@ -549,3 +551,3 @@ return newWindup(React.Children.toArray(children).reduce(reduceWindupArgs, []), { element: undefined });
         onFinished,
-        skipped
+        skipped,
     });
@@ -555,3 +557,3 @@ return (React.createElement(WindupContext.Provider, { value: {
             rewind,
-            isFinished
+            isFinished,
         } }, renderChildrenWindup(windup)));
@@ -592,16 +594,34 @@ };
 
-function getStringsOfReactChildren(strings, children) {
-    if (typeof children === "string") {
-        return [...strings, children];
-    }
-    if (typeof children === "number") {
-        return [...strings, children.toString()];
-    }
-    if (!React.isValidElement(children)) {
-        return strings;
-    }
-    return [
-        ...strings,
-        ...React.Children.toArray(children.props.children).reduce(getStringsOfReactChildren, [])
-    ];
+function makeGetDescriptorsOfChildren(defaultFontStyle) {
+    return (descriptors, children) => {
+        if (typeof children === "string") {
+            return [...descriptors, { text: children, font: defaultFontStyle }];
+        }
+        if (typeof children === "number") {
+            return [
+                ...descriptors,
+                { text: children.toString(), font: defaultFontStyle },
+            ];
+        }
+        if (!React.isValidElement(children)) {
+            return descriptors;
+        }
+        if (isStyledTextElement(children) &&
+            typeof children.props.children === "string") {
+            return [
+                ...descriptors,
+                { text: children.props.children, font: children.props.fontStyle },
+            ];
+        }
+        if (isStyledTextElement(children)) {
+            return [
+                ...descriptors,
+                ...React.Children.toArray(children.props.children).reduce(makeGetDescriptorsOfChildren(children.props.fontStyle), []),
+            ];
+        }
+        return [
+            ...descriptors,
+            ...React.Children.toArray(children.props.children).reduce(makeGetDescriptorsOfChildren(defaultFontStyle), []),
+        ];
+    };
 }
@@ -621,9 +641,15 @@ function reinsertStringsIntoChildren([accChildren, accStrings], children) {
             React.cloneElement(children, {
-                children: subChildrenAcc
-            })
+                children: subChildrenAcc,
+            }),
         ],
-        subStringsAcc
+        subStringsAcc,
     ];
 }
-const Linebreaker = ({ children, fontStyle, width }) => {
+function isStyledTextElement(element) {
+    return element.type === StyledText;
+}
+function StyledText({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+const Linebreaker = ({ children, fontStyle, width, }) => {
     // CAVEATS:
@@ -634,7 +660,7 @@ // fontStyle must match the font style of the characters inside
     const childrenArray = React.Children.toArray(children);
-    const strings = childrenArray.reduce(getStringsOfReactChildren, []);
-    const transformedStrings = breakLines(strings, width, fontStyle);
-    const [transformedChildren] = childrenArray.reduce(reinsertStringsIntoChildren, [
+    const descriptors = childrenArray.reduce(makeGetDescriptorsOfChildren(fontStyle), []);
+    const transformedStrings = breakLines(descriptors, width, fontStyle);
+    const [transformedChildren,] = childrenArray.reduce(reinsertStringsIntoChildren, [
         [],
-        transformedStrings
+        transformedStrings,
     ]);
@@ -641,0 +667,0 @@ return React.createElement("div", { style: { whiteSpace: "pre" } }, transformedChildren);

package.json

 {
   "name": "windups",
   "description": "A typewriter effect library for React.",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "MIT",
@@ -21,3 +21,3 @@ "files": [
   "dependencies": {
-    "break-styled-lines": "1.1.2"
+    "break-styled-lines": "1.2.0"
   },
@@ -24,0 +24,0 @@ "peerDependencies": {

README.md

@@ -5,2 +5,4 @@ # windups
 
+Examples, API docs, and guides can all be found at [the docs site](https://windups.gwil.co)!
+
 Apply the typewriter (or, ahem, "windup") effect to:
@@ -17,4 +19,2 @@
 
-Examples, API docs, and guides can all be found at [the docs site](https://windups.gwil.co)!
-
 ## 🗼 Code landmarks
@@ -21,0 +21,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102440

increased by4.99%

Number of package files

34

increased by3.03%

Lines of code

1538

increased by3.85%

Dependency changes

• + Addedbreak-styled-lines@1.2.0(transitive)

• - Removedbreak-styled-lines@1.1.2(transitive)

• Updatedbreak-styled-lines@1.2.0