Merge pull request #9 from swup/plugin-updates

Update plugins

CHANGELOG.md

@@ -1,12 +1,18 @@
 # Changelog
 
+## 1.1.0
+
+- Add support for [inline form submissions](https://swup.js.org/plugins/forms-plugin/#inline-forms)
+- Add support for [preloading links entering the viewport](https://swup.js.org/plugins/preload-plugin/#preload-visible-links)
+- Update plugins for improved TypeScript support
+
 ## 1.0.2
 
-- Update plugins
+- Update plugins for improved TypeScript support
 
 ## 1.0.1
 
-- Update plugins
+- Update plugins for improved TypeScript support
 
 ## 1.0.0
 

README.md

@@ -190,16 +190,44 @@ for highly dynamic sites that need up-to-date responses on each request.
 
 ### config.preload
 
-Enable smart preloading. Will fetch a page in the background when hovering a link. Also prefetches
-all pages with a `[data-swup-preload]` attribute. Useful for main navigations to ensure all menu
-items load instantly.
+Smart preloading, enabled by default. Pass in an object to enable or disable preloading features:
 
-```js
+```ts
 {
-  preload: false
+  preload: {
+    hover: true,
+    visible: false
+  }
 }
 ```
 
+#### config.preload.hover
+
+Swup will preload links when they are hovered with a mouse, touched with a finger, or focused using
+the keyboard. Enabled by default.
+
+#### config.preload.visible
+
+Preload links as they enter the viewport. Not enabled by default, but recommended for a performance
+boost to static sites.
+
+#### Preloading links manually
+
+In addition to preloading links when interacting with them, you can mark links for preloading
+manually by applying a `data-swup-preload` attribute on the link, or a `data-swup-preload-all` on a
+common parent:
+
+```html
+<!-- preload a single link -->
+<a href="/about" data-swup-preload>About</a>
+
+<!-- preload all links in a container -->
+<nav data-swup-preload-all>
+  <a href="/about">About</a>
+  <a href="/contact">Contact</a>
+</nav>
+```
+
 ### config.accessibility
 
 Enhance accessibility for screen readers by announcing page visits and focussing the newly updated
@@ -217,14 +245,37 @@ If you want swup to handle form submissions as well, enable this option. Note: s
 reasonable scenarios like search or contact forms. For complex requirements like file uploads or
 custom serialization, it is recommended to use the swup API directly.
 
-To disable swup for specific forms, add a `data-no-swup` attribute on the form element.
-
 ```js
 {
   forms: true
 }
 ```
 
+Form submissions trigger normal swup navigations: they will animate and replace the content
+containers as on other visits. If you'd rather submit the form inline and only animate and
+update the form itself, add a `data-swup-inline-form` attribute and a unique `id` to the form:
+
+```html
+<form id="contact-form" class="transition-form" data-swup-inline-form>
+```
+
+The animation classes are then only added to the form itself:
+
+```css
+.transition-form.is-changing {
+  transition: opacity 200ms;
+}
+.transition-form.is-animating {
+  opacity: 0;
+}
+```
+
+To disable swup for specific forms, add a `data-no-swup` attribute on the form element:
+
+```html
+<form action="/" data-no-swup>
+```
+
 ### config.parallel
 
 Swup page transitions usually work in series: hide the current page, update the content, show the