Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

windups

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

windups - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

2

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";

68

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);

8

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;

6

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 }];
}

42

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;

2

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";

5

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;

2

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;

122

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);

4

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": {

4

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 @@ 

dist-web/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc