Merge branch 'release/0.6.0' into main

DaveKeehl · Apr 22, 2022 · 7febf71 · 7febf71
2 parents cea57ef + 19ea966
commit 7febf71
Show file tree

Hide file tree

Showing 11 changed files with 317 additions and 298 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -20,18 +20,18 @@ jobs:
       new-version: ${{ toJSON(steps.package-version.outputs.current-version != steps.latest-tag.outputs.tag) }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           # Disabling shallow clone is recommended for improving relevancy of reporting
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '14'
 
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-dependencies
         with:
@@ -87,17 +87,17 @@ jobs:
           echo "New version: ${{ fromJSON(needs.CI.outputs.new-version) }}"
 
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Required due to the weg Git works, without it this action won't be able to find any or the correct tags
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '14'
 
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-dependencies
         with:
@@ -124,7 +124,7 @@ jobs:
       # DOCKER
 
       - name: Cache Docker layers
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [0.6.0] - 2022-04-22
+### Added
+- Created unit tests for new modules
+
+### Changed
+- Version numbers in CHANGELOG now allow to compare changes with previous release
+- Separated some business logic into separate modules
+- Updated README with CSS requirements for scale and spin transitions
+
+### Removed
+- Vendor prefixes are not added anymore
+
+### Fixed
+- Fixed and improved README (emojis have been removed from the headings to fix broken links)
+- Fixed some JSDoc typos
+
 ## [0.5.0] - 2022-03-15
 ### Changed
 - Documented how to use svelte-reveal with SvelteKit
@@ -56,4 +74,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Better naming in GitHub CI workflow
 
 ## [0.1.0] - 2021-11-16
-- Initial beta release
+- Initial beta release
+
+[0.1.0]: https://github.com/DaveKeehl/svelte-reveal/releases/tag/0.1.0
+[0.2.0]: https://github.com/DaveKeehl/svelte-reveal/compare/0.1.0...0.2.0
+[0.3.0]: https://github.com/DaveKeehl/svelte-reveal/compare/0.2.0...0.3.0
+[0.3.1]: https://github.com/DaveKeehl/svelte-reveal/compare/0.3.0...0.3.1
+[0.3.2]: https://github.com/DaveKeehl/svelte-reveal/compare/0.3.1...0.3.2
+[0.3.3]: https://github.com/DaveKeehl/svelte-reveal/compare/0.3.2...0.3.3
+[0.4.0]: https://github.com/DaveKeehl/svelte-reveal/compare/0.3.3...0.4.0
+[0.5.0]: https://github.com/DaveKeehl/svelte-reveal/compare/0.4.0...0.5.0
+[0.6.0]: https://github.com/DaveKeehl/svelte-reveal/compare/0.5.0...0.6.0
diff --git a/README.md b/README.md
@@ -8,14 +8,14 @@
 
 svelte-reveal is a library created with the purpose of helping [Svelte](https://svelte.dev/) users add reveal on scroll transitions to their web applications. This library leverages the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in order to know when to trigger the animations.
 
-## ✨&nbsp;&nbsp;Features
+## Features
 
 - Zero config Svelte action
 - Highly customizable transitions
 - Integrates a performant intersection observer
 - TypeScript ready
 
-## 📖&nbsp;&nbsp;Table of Content
+## Table of Content
 
 1. [Usage](#usage)
 2. [Demo](#demo)
@@ -31,7 +31,7 @@ svelte-reveal is a library created with the purpose of helping [Svelte](https://
 12. [Changelog](#changelog)
 13. [License](#license)
 
-## 🔨&nbsp;&nbsp;Usage
+## Usage
 
 1. Install the library. You can use either [npm](https://www.npmjs.com/):
 
@@ -83,7 +83,7 @@ svelte-reveal is a library created with the purpose of helping [Svelte](https://
 
 4. Using [SvelteKit](https://kit.svelte.dev/)? Please read [section "SvelteKit"](#sveltekit)
 
-### 🐳&nbsp;&nbsp;Docker
+### Docker
 
 A Docker image is also available on [DockerHub](https://hub.docker.com/):
 
@@ -93,19 +93,19 @@ docker pull davekeehl/svelte-reveal:latest
 
 You can also use the provided Dockerfile in the repository as a development environment. You can read more [here](https://code.visualstudio.com/docs/remote/containers).
 
-## 🕺🏻&nbsp;&nbsp;Demo
+## Demo
 
 In this [Svelte REPL](https://svelte.dev/repl/1cf37b0947ac46b8ae9cc791abda7159?version=3.44.1) I created you can see svelte-reveal in action.
 
-## 🤔&nbsp;&nbsp;Why svelte-reveal
+## Why svelte-reveal
 
 If you happened to scout the internet for other similar libraries, you would have noticed that other authors have decided to create their own library using Svelte [slots](https://svelte.dev/docs#slot) (similar to [React children](https://reactjs.org/docs/composition-vs-inheritance.html)). There is nothing wrong with that approach, but in my opinion it goes a bit against one of Svelte's core purposes: writing less code. Having to wrap every to-be-transitioned component adds 2 extra lines of code each time, making your files unnecessarily bloated for such a simple add-on.
 
 You might have also noticed people adding event listeners to the window object, but in terms of performance that [doesn't scale very well](https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6).
 
 Instead, I decided to use Svelte [actions](https://svelte.dev/docs#use_action), which are functions you can attach to a DOM element and that allow you to get access to that element and its lifecycle. They take up considerably less space and so far I haven't encountered any obstacle or performance drawback. Morever, this library is backed by the Intersection Observer API, which is great for performance.
 
-## ⚠️&nbsp;&nbsp;SvelteKit
+## SvelteKit
 
 The way svelte-reveal transitions the elements does not work well with [SSR](https://kit.svelte.dev/docs/appendix#ssr), which is enabled by default on SvelteKit. One way to get around this issue is to wrap your top-most element or component inside an if-block that is evaluated to `true` only when its context has been updated, as in the following example.
 
@@ -123,11 +123,11 @@ In case of problems, please create a new issue and submit a bug report.
 </script>
 
 {#if show}
-<your-element-or-component />
+	<your-element-or-component />
 {/if}
 ```
 
-## ⛩&nbsp;&nbsp;Options
+## Options
 
 Depending on the use case, you can either use this library as-is (which applies some [default styles](https://github.com/DaveKeehl/svelte-reveal/blob/main/src/internal/config.ts#L6-L37)), or customize it to your liking. If you choose to do so, you can pass an object to this action containing additional options.
 
@@ -159,20 +159,20 @@ Keep in mind that these options are applied to the single DOM element you add sv
 | blur           | `number`       | `16`                     | The starting blur value in pixels (_px_) of the `"blur"` transition.                                                                                                                                                                                                                                                                                                                                                       |
 | scale          | `number`       | `0`                      | The starting scale value in percentage (_%_) of the `"scale"` transition.                                                                                                                                                                                                                                                                                                                                                  |
 
-### 🪄&nbsp;&nbsp;Transitions
+### Transitions
 
 The following are all the transitions available by svelte-reveal. The names listed in the table match the ones you can write in your source code. All transitions have the fade transition backed in.
 
-| Name  | Description                                                                                                                                               |
-| ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| fade  | The element fades in gracefully.<br />In practice: `opacity: 0 -> 1`                                                                                      |
-| fly   | The element fades in and performs a translation on the y-axis (vertical).<br />In practice: `opacity: 0 -> 1` and `transform: translateY(-20px -> 0px) `  |
+| Name  | Description                                                  |
+| ----- | ------------------------------------------------------------ |
+| fade  | The element fades in gracefully.<br />In practice: `opacity: 0 -> 1` |
+| fly   | The element fades in and performs a translation on the y-axis (vertical).<br />In practice: `opacity: 0 -> 1` and `transform: translateY(-20px -> 0px) ` |
 | slide | The element fades in and performs a translation on the x-axis (horizontal).<br />In practice: `opacity: 0 -> 1` and `transform: translateX(-20px -> 0px)` |
-| blur  | The element fades in and becomes unblurred.<br />In practice: `opacity: 0 -> 1` and `filter: blur(8px -> 0px)`                                            |
-| scale | The element fades in and gets to the original size.<br />In practice: `opacity: 0 -> 1` and `transform: scale(0 -> 1)`                                    |
-| spin  | The element fades in and gets to the original rotation degree.<br />In practice: `opacity: 0 -> 1` and `transform: rotate(-360 -> 0)`                     |
+| blur  | The element fades in and becomes unblurred.<br />In practice: `opacity: 0 -> 1` and `filter: blur(8px -> 0px)` |
+| scale | The element fades in and gets to the original size.<br />In practice: `opacity: 0 -> 1` and `transform: scale(0 -> 1)`<br /><br />⚠️ In order to use this transition it is required to use the `width` CSS property on the element to reveal. If you are not already using this property for other things, you can set it to `width: fit-content` . |
+| spin  | The element fades in and gets to the original rotation degree.<br />In practice: `opacity: 0 -> 1` and `transform: rotate(-360 -> 0)`<br /><br />⚠️ In order to use this transition it is required to use the `width` CSS property on the element to reveal. If you are not already using this property for other things, you can use set it to `width: fit-content` . |
 
-### 🤙🏻&nbsp;&nbsp;Callbacks
+### Callbacks
 
 Among the available options you can set, there are also some callback functions you can leverage to inject some code during specific moments of the lifecycle of the nodes attached to this action.
 
@@ -186,7 +186,7 @@ Among the available options you can set, there are also some callback functions
 | onUpdate      | `(node: HTMLElement)` | `void` | Function that gets fired when the action options are updated.                                              |
 | onDestroy     | `(node: HTMLElement)` | `void` | Function that gets fired when the node is unmounted from the DOM.                                          |
 
-## 📄&nbsp;&nbsp;Global config
+## Global config
 
 This library is globally configured as follows right of out the box:
 
@@ -212,7 +212,7 @@ This library is globally configured as follows right of out the box:
 |            | rootMargin |            | `string`           | `"0px 0px 0px 0px"` | The Intersection Observer API rootMargin property.                                                                                  |
 |            | threshold  |            | `number`           | `0.6`               | The Intersection Observer API threshold property.                                                                                   |
 
-## ⚡️&nbsp;&nbsp;API
+## API
 
 > 💡&nbsp;&nbsp;All API functions return the global config object with the updated properties.
 
@@ -353,30 +353,30 @@ interface IOptions {
 | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `(options: IOptions)` | `IOptions` | You can use this function to override the global default options of the reveal effect. It can be useful when you want a specific option for many elements, so that you don't have to change it for every element individually. |
 
-## 👀&nbsp;&nbsp;Suggestions
+## Suggestions
 
 In order to take full advantage of this library, I suggest you to create some environment variables to keep track of the environment you are currently in (e.g. development, staging, production) and to leverage NPM scripts to update those variables. [This article](https://www.twilio.com/blog/working-with-environment-variables-in-node-js-html) explains well this concept.
 
 That way you can for example set the config `dev` property to `false` when in production and avoid exposing console logs to the end users.
 
 If you use [SvelteKit](https://kit.svelte.dev/), this feature is available right out of the box with the [$app/env](https://kit.svelte.dev/docs#modules-$app-env) module.
 
-## 🤕&nbsp;&nbsp;Troubleshooting
+## Troubleshooting
 
 Feel free to [open a new issue](https://github.com/DaveKeehl/svelte-reveal/issues/new/choose) in case of any problems.
 
-## ☕️&nbsp;&nbsp;Funding
+## Funding
 
 [Want to buy me a coffee?](https://ko-fi.com/davekeehl)
 
-## 📚&nbsp;&nbsp;Versioning
+## Versioning
 
 This project uses [Semantic Versioning](https://semver.org/) to keep track of its version number.
 
-## ✍🏻&nbsp;&nbsp;Changelog
+## Changelog
 
 [CHANGELOG](https://github.com/DaveKeehl/svelte-reveal/blob/develop/CHANGELOG.md)
 
-## 👨🏻‍⚖️&nbsp;&nbsp;License
+## License
 
 [MIT](https://github.com/DaveKeehl/svelte-reveal/blob/develop/LICENSE)
diff --git a/assets/readme_cover.png b/assets/readme_cover.png