svelte-typewriter
Advanced tools
svelte-typewriter - npm Package Compare versions
Comparing version 2.0.0 to 2.0.2
@@ -7,2 +7,9 @@ ### Changelog | ||
| ### [v2.0.0](https://github.com/henriquehbr/svelte-typewriter/compare/v1.5.5...v2.0.0) | ||
| > 23 December 2019 | ||
| - BREAKING CHANGES: remove directive-based animation [`9eab55f`](https://github.com/henriquehbr/svelte-typewriter/commit/9eab55f1800856b47a78fa8afae6e8147e5a8a07) | ||
| - docs(README): document `cursor` option [`e7b5a2a`](https://github.com/henriquehbr/svelte-typewriter/commit/e7b5a2aead23366dc8af0a5d9b9d3afaf24ab4b0) | ||
| #### [v1.5.5](https://github.com/henriquehbr/svelte-typewriter/compare/v1.5.4...v1.5.5) | ||
@@ -9,0 +16,0 @@ |
@@ -12,3 +12,3 @@ { | ||
| }, | ||
| "version": "2.0.0", | ||
| "version": "2.0.2", | ||
| "main": "Typewriter.svelte", | ||
@@ -21,3 +21,3 @@ "author": "Henrique Borges <henriqueborgeshbr@gmail.com>", | ||
| "peerDependencies": { | ||
| "svelte": "^3.16.5" | ||
| "svelte": "^3.16.7" | ||
| }, | ||
@@ -24,0 +24,0 @@ "devDependencies": { |
@@ -6,11 +6,4 @@ # svelte-typewriter | ||
| [DEMO](https://svelte.dev/repl/9dfb73bfa9b34aeea4740fa23f5cde8a?version=3.14.1) | ||
| [DEMO](https://svelte.dev/repl/9dfb73bfa9b34aeea4740fa23f5cde8a) | ||
| > **NOTICE:** In order to keep delivering new features in short periods, and keeping up the development of | ||
| > `svelte-typewriter` seamlessy and without bloating the codebase with unnecessary features and bottlenecks, the | ||
| > support for animating elements with the `use:typewriter` directive will be dropped starting from version `2.0` due | ||
| > to it's implementation flaws in comparison to it's component-based counterpart whom is way more readable and easier > to maintain of the, thanks for you comprehension! | ||
| > If you want to keep using the old directive-based approach, install the old version by running: `npm i -D svelte-typewriter@1.5.5` | ||
| ## Installation | ||
@@ -28,11 +21,4 @@ | ||
| You can apply the typewriter effect on your elements in two ways: | ||
| You need to import the Svelte component, and wrap your elements with the `<Typewriter>` component | ||
| - Component-based approach | ||
| - Directive-based approach *(pre-2.0 only)* | ||
| ### Component-based approach | ||
| In order to use this method, you need to import the Svelte component, and wrap your elements with the `<Typewriter>` component | ||
| ```svelte | ||
@@ -50,20 +36,2 @@ <script> | ||
| ### Directive-based approach | ||
| > **WARNING:** this option is deprecated, and will only work on versions under 2.0 | ||
| This method relies on [Svelte actions](https://svelte.dev/docs#use_action) (more specifically, the `use:action` directive), in order to animate your components with this approach, you must import the directive and include it as a attribute on your element | ||
| ```svelte | ||
| <script> | ||
| import typewriter from 'svelte-typewriter/typewriter' | ||
| </script> | ||
| <!-- Without parameters --> | ||
| <h1 use:typewriter>Hello World!</h1> | ||
| <!-- With parameters --> | ||
| <h1 use:typewriter={{ loop: true, interval: 50 }}>The force will be with you, Always...</h1> | ||
| ``` | ||
| ## Options | ||
@@ -79,3 +47,3 @@ | ||
| [DEMO](https://svelte.dev/repl/eb6caec159cf454b8f2bc98f3444fa8c?version=3.14.1) | ||
| [DEMO](https://svelte.dev/repl/eb6caec159cf454b8f2bc98f3444fa8c) | ||
@@ -104,3 +72,3 @@ #### Example: | ||
| [DEMO](https://svelte.dev/repl/9ddb89942e954a2a90b553356952ff46?version=3.14.1) | ||
| [DEMO](https://svelte.dev/repl/9ddb89942e954a2a90b553356952ff46) | ||
@@ -119,10 +87,10 @@ #### Example: | ||
| Cycles the typewriter animation between the children elements of the `<Typewriter>` component | ||
| > **Warning:** won't work if `cascade` is enabled | ||
| > When using the `loop` prop, the tag name will be determined by the first child of the `<Typewriter>` component | ||
| Cycles the typewriter animation between the children elements of the `<Typewriter>` component, the tag name will be determined by the first child of the `<Typewriter>` component | ||
| default: `false` | ||
| [DEMO](https://svelte.dev/repl/e8b82d83f6c2444b97619238404bcd4d) | ||
| #### Example: | ||
@@ -148,9 +116,10 @@ | ||
| ### `cursor` | ||
| > **INFO:** requires version ^2.0 | ||
| Enables/disables the terminal cursor on the Typewriter animation, and also, allows you to pass any valid color name, hex code, rgb/rgba valid values to change the cursor color | ||
| [DEMO](https://svelte.dev/repl/6008b5aaff6f46e5909c63e795a19f5a) | ||
| #### Example: | ||
| ```svelte | ||
@@ -157,0 +126,0 @@ <Typewriter> |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.1%
13418
- Number of lines in readme file
- decreased by-18.67%
135
No dependency changes