svelte-typewriter - npm Package Compare versions

Comparing version 3.0.0-alpha.15 to 3.0.0-alpha.16

package.json

@@ -12,3 +12,3 @@ {
   },
-  "version": "3.0.0-alpha.15",
+  "version": "3.0.0-alpha.16",
   "main": "src/Typewriter.svelte",
@@ -24,2 +24,12 @@ "svelte": "src/Typewriter.svelte",
   ],
+  "scripts": {
+    "example:dev": "vite example",
+    "example:build": "vite build example",
+    "example:preview": "vite preview example",
+    "example:deploy": "pnpm example:build && gh-pages -f -d example/dist -m \"Deploy example application\"",
+    "prerelease": "DOCKER_BUILDKIT=1 docker build --build-arg HOST_USER_UID=\"$(id -u)\" -t release .",
+    "release": "docker run --rm -t -v $PWD:/repo -e GIT_NAME=\"$(git config user.name)\" -e GIT_EMAIL=\"$(git config user.email)\" release ./bump-package-json",
+    "prepare": "husky install",
+    "prettier": "prettier --write \"./src/**/*.js\""
+  },
   "devDependencies": {
@@ -37,12 +47,3 @@ "@sveltejs/vite-plugin-svelte": "1.0.0-next.36",
     "svelte": ">=3.47.x"
-  },
-  "scripts": {
-    "example:dev": "vite example",
-    "example:build": "vite build example",
-    "example:preview": "vite preview example",
-    "example:deploy": "pnpm example:build && gh-pages -f -d example/dist -m \"Deploy example application\"",
-    "prerelease": "DOCKER_BUILDKIT=1 docker build --build-arg HOST_USER_UID=\"$(id -u)\" -t release .",
-    "release": "docker run --rm -t -v $PWD:/repo -e GIT_NAME=\"$(git config user.name)\" -e GIT_EMAIL=\"$(git config user.email)\" release ./bump-package-json",
-    "prettier": "prettier --write \"./src/**/*.js\""
   }
-}
+}

README.md

@@ -16,2 +16,4 @@ # svelte-typewriter
 - [Usage](#usage)
+  - [Component-based approach](#component-based-approach)
+  - [Directive-based approach](#directive-based-approach)
 - [Props](#props)
@@ -39,5 +41,7 @@ - [Settings](#settings)
 
-You need to import the Svelte component, and wrap your elements with the
-`<Typewriter>` component
+### 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
@@ -49,7 +53,33 @@ <script>
 <Typewriter>
-	<h1>Testing the typewriter effect</h1>
+    <h1>Testing the typewriter effect</h1>
 </Typewriter>
+```
 
+### Directive-based approach
+
+This method relies on [Svelte actions](https://svelte.dev/docs#template-syntax-element-directives-use-action)
+(more specifically, the `use:action` directive), in order to animate your
+components with this approach, you must import the directive of the animation
+mode you want to use and include it as a attribute on your element
+
+```svelte
+<script>
+    import { concurrent } from 'svelte-typewriter'
+</script>
+
+<p use:concurrent={{ interval: 30 }}>Testing the typewriter effect</p>
 ```
 
+Each mode has it's own directive, which accepts a single object parameter that
+can be used to set the animation props (just like on the component-based approach)
+
+There are just a few limitations of this approach to keep in mind:
+
+- For now, there's no way to have the cursor caret on the text being animated
+- Event listeners (like `on:done`) won't be triggered
+- Depending on the animation mode you're using, some essential animation
+properties must be explicitly specified, because they don't have default values
+when used on a directive, otherwise the animation won't work properly, those
+include `interval`, `wordInterval`, `writeInterval` and `scrambleDuration`
+
 ## Props
@@ -124,2 +154,5 @@
     </a>
+    <a href="https://github.com/PlebeianTech/plebeian-market">
+        <img src="plebeian-market-logo.jpg" height="128" alt="plebeian.market logo" />
+    </a>
 </div>
@@ -126,0 +159,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

29468

increased by7.54%

Number of package files

43

increased by2.38%

Lines of code

391

increased by1.56%

Number of lines in readme file

191

increased by20.89%

No dependency changes