timeline-composer - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

dist/timeline-composer.cjs.d.ts

@@ -1,1 +0,11 @@
-export * from "./declarations/src/index";
+// are you seeing an error that a default export doesn't exist but your source file has a default export?
+// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
+
+// curious why you need to?
+// this file exists so that you can import from the entrypoint normally
+// except that it points to your source file and you don't need to run build constantly
+// which means we need to re-export all of the modules from your source file
+// and since export * doesn't include default exports, we need to read your source file
+// to check for a default export and re-export it if it exists
+// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
+export * from "../src/index";

dist/timeline-composer.cjs.js

@@ -1,7 +0,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./timeline-composer.cjs.prod.js");
-} else {
-  module.exports = require("./timeline-composer.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package.json

@@ -10,3 +10,3 @@ {
 	"description": "Composable timelines for React.",
-	"version": "0.0.2",
+	"version": "0.1.0",
 	"main": "dist/timeline-composer.cjs.js",
@@ -40,3 +40,2 @@ "module": "dist/timeline-composer.esm.js",
 		"@types/react-dom": "^18.0.6",
-		"@types/three": "^0.142.0",
 		"jest": "^28.1.1",
@@ -53,3 +52,2 @@ "jest-environment-jsdom": "^28.1.1",
 	"peerDependencies": {
-		"@react-three/fiber": "^8.2.2",
 		"react": "^18.2.0",
@@ -56,0 +54,0 @@ "react-dom": "^18.2.0"

README.md

@@ -1,1 +0,149 @@
-# Timeline Composer
+![Timeline Composer](https://user-images.githubusercontent.com/1061/181918724-c6702e47-71f9-4962-a567-05d1b85f594d.jpg)
+
+[![Version](https://img.shields.io/npm/v/timeline-composer?style=for-the-badge)](https://www.npmjs.com/package/timeline-composer)
+[![Downloads](https://img.shields.io/npm/dt/timeline-composer.svg?style=for-the-badge)](https://www.npmjs.com/package/timeline-composer)
+[![Bundle Size](https://img.shields.io/bundlephobia/min/timeline-composer?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=timeline-composer)
+
+A small collection of React components for declaratively constructing high-level animation timelines with **repetitions**, **delays**, and **auto-removing** elements.
+
+## Features
+
+- Compose React component timelines with **repetitions**, **delays**, and **auto-removing elements** from a small set of timing primitives.
+- Uses a custom `requestAnimationFrame`-based ticker with **clamped frame deltas** and optional **time scaling**.[^1]
+- Compact API surface, tiny footprint, no dependencies.
+- Built with TypeScript, because types are nice, and so are you.
+
+[^1]: Time scaling is work in progress.
+
+## Getting started
+
+Simply add the `timeline-composer` package using your favorite package manager.
+
+```
+yarn add timeline-composer
+npm add timeline-composer
+pnpm add timeline-composer
+```
+
+## Components
+
+### Delay
+
+Delays rendering its children for the specified amount of time.
+
+```jsx
+<Delay seconds={2.5}>
+  <p>I will only render after 2.5 seconds!</p>
+</Delay>
+```
+
+### Repeat
+
+Repeats (unmounts and re-mounts) its children for the specified number of times, with the specified delay between each repetition.
+
+```jsx
+<Repeat seconds={2.5} times={3}>
+  <p>
+    I will automatically unmount and re-mount every 2.5 seconds, and stop after showing 3
+    times, because that is clearly enough!
+  </p>
+</Repeat>
+```
+
+The default for `times` is `Infinity`, so it will repeat forever:
+
+```jsx
+<Repeat seconds={2.5}>
+  <p>I will repeat forever.</p>
+  <p>Have a random number: {Math.random()}</p>
+</Repeat>
+```
+
+Only repeat 3 times (default is `Infinity`):
+
+### Lifetime
+
+Will render its children immediately, but remove them after the specified time.
+
+```jsx
+<Lifetime seconds={2.5}>
+  <p>I'm only here for 2.5 seconds. Cya!</p>
+</Lifetime>
+```
+
+## Examples
+
+### Combining Delay, Repeat, and Lifetime
+
+Things get a little more interesting when you combine these.
+
+```jsx
+<Lifetime seconds={10}>
+  <Repeat seconds={0.5}>
+    <Lifetime seconds={0.25}>
+      <p>I miss the blink tag!</p>
+    </Lifetime>
+  </Repeat>
+</Lifetime>
+```
+
+### Repeatedly toggling between two states
+
+```jsx
+<Repeat seconds={1}>
+  <Lifetime seconds={0.5}>
+    <p>See</p>
+  </Lifetime>
+
+  <Delay seconds={0.5}>
+    <p>Saw</p>
+  </Delay>
+</Repeat>
+```
+
+### Waterfall animations
+
+Delays can be nested to create a waterfall of animations.
+
+```jsx
+<Delay seconds={1}>
+  <p>One...</p>
+
+  <Delay seconds={0.5}>
+    <p>Two...</p>
+
+    <Delay seconds={0.5}>
+      <p>...three!</p>
+    </Delay>
+  </Delay>
+</Delay>
+```
+
+## Author
+
+Timeline Composer is written and maintained by [Hendrik Mans](https://hmans.co). If you have questions, email me at [[e-mail]](mailto:[e-mail]), or [find me on Twitter](https://twitter.com/hmans).
+
+## License
+
+```
+Copyright (c) 2022 Hendrik Mans
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```

New 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

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Dev dependency count

17

decreased by-5.56%

Number of lines in readme file

150

increased by7400%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

8406

decreased by-46.87%

Number of package files

5

decreased by-58.33%

Lines of code

23

decreased by-93.56%

No dependency changes