swup 2.0.19 → 3.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Swup.cjs +2 -0
- package/dist/Swup.cjs.map +1 -0
- package/dist/Swup.modern.js +2 -0
- package/dist/Swup.modern.js.map +1 -0
- package/dist/Swup.module.js +2 -0
- package/dist/Swup.module.js.map +1 -0
- package/dist/Swup.umd.js +2 -0
- package/dist/Swup.umd.js.map +1 -0
- package/dist/helpers.cjs +2 -0
- package/dist/helpers.cjs.map +1 -0
- package/dist/helpers.modern.js +2 -0
- package/dist/helpers.modern.js.map +1 -0
- package/dist/helpers.module.js +2 -0
- package/dist/helpers.module.js.map +1 -0
- package/dist/types/Swup.d.ts +102 -0
- package/dist/types/config/version.d.ts +5 -0
- package/dist/types/helpers/Location.d.ts +31 -0
- package/dist/types/helpers/classify.d.ts +2 -0
- package/dist/types/helpers/cleanupAnimationClasses.d.ts +2 -0
- package/dist/types/helpers/createHistoryRecord.d.ts +2 -0
- package/dist/types/helpers/delegateEvent.d.ts +8 -0
- package/dist/types/helpers/fetch.d.ts +6 -0
- package/dist/types/helpers/getCurrentUrl.d.ts +4 -0
- package/dist/types/helpers/getDataFromHtml.d.ts +8 -0
- package/dist/types/helpers/index.d.ts +11 -0
- package/dist/types/helpers/markSwupElements.d.ts +2 -0
- package/dist/types/helpers/updateHistoryRecord.d.ts +2 -0
- package/dist/types/helpers/versionSatisfies.d.ts +12 -0
- package/dist/types/helpers.d.ts +1 -0
- package/dist/types/index.d.ts +8 -0
- package/dist/types/modules/Cache.d.ts +20 -0
- package/dist/types/modules/enterPage.d.ts +6 -0
- package/dist/types/modules/fetchPage.d.ts +4 -0
- package/dist/types/modules/getAnchorElement.d.ts +2 -0
- package/dist/types/modules/getAnimationPromises.d.ts +7 -0
- package/dist/types/modules/getPageData.d.ts +7 -0
- package/dist/types/modules/leavePage.d.ts +7 -0
- package/dist/types/modules/loadPage.d.ts +7 -0
- package/dist/types/modules/off.d.ts +4 -0
- package/dist/types/modules/on.d.ts +6 -0
- package/dist/types/modules/plugins.d.ts +14 -0
- package/dist/types/modules/renderPage.d.ts +7 -0
- package/dist/types/modules/replaceContent.d.ts +17 -0
- package/dist/types/modules/triggerEvent.d.ts +4 -0
- package/dist/types/modules/updateTransition.d.ts +3 -0
- package/dist/types/utils/index.d.ts +5 -0
- package/dist/types/utils.d.ts +1 -0
- package/dist/utils.cjs +2 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.modern.js +2 -0
- package/dist/utils.modern.js.map +1 -0
- package/dist/utils.module.js +2 -0
- package/dist/utils.module.js.map +1 -0
- package/package.json +30 -23
- package/readme.md +52 -36
- package/src/Swup.ts +369 -0
- package/src/config/version.ts +13 -0
- package/src/helpers/Location.ts +44 -0
- package/src/helpers/classify.ts +13 -0
- package/src/helpers/cleanupAnimationClasses.ts +10 -0
- package/src/helpers/createHistoryRecord.ts +14 -0
- package/src/helpers/delegateEvent.ts +23 -0
- package/src/helpers/fetch.ts +35 -0
- package/src/helpers/getCurrentUrl.ts +5 -0
- package/src/helpers/getDataFromHtml.ts +41 -0
- package/src/helpers/index.ts +11 -0
- package/src/helpers/markSwupElements.ts +18 -0
- package/src/helpers/updateHistoryRecord.ts +18 -0
- package/src/helpers/versionSatisfies.ts +46 -0
- package/src/helpers.ts +4 -0
- package/src/index.ts +8 -0
- package/src/modules/Cache.ts +57 -0
- package/src/modules/enterPage.ts +28 -0
- package/src/modules/fetchPage.ts +35 -0
- package/src/modules/getAnchorElement.ts +19 -0
- package/src/modules/getAnimationPromises.ts +179 -0
- package/src/modules/getPageData.ts +26 -0
- package/src/modules/leavePage.ts +33 -0
- package/src/modules/loadPage.ts +55 -0
- package/src/modules/off.ts +23 -0
- package/src/modules/on.ts +35 -0
- package/src/modules/plugins.ts +58 -0
- package/src/modules/renderPage.ts +52 -0
- package/src/modules/replaceContent.ts +28 -0
- package/src/modules/triggerEvent.ts +23 -0
- package/src/modules/updateTransition.ts +7 -0
- package/src/utils/index.ts +32 -0
- package/src/utils.ts +4 -0
- package/.editorconfig +0 -19
- package/cypress.config.js +0 -14
- package/dist/swup.js +0 -1524
- package/dist/swup.min.js +0 -1
- package/lib/helpers/Link.js +0 -56
- package/lib/helpers/classify.js +0 -18
- package/lib/helpers/cleanupAnimationClasses.js +0 -18
- package/lib/helpers/createHistoryRecord.js +0 -14
- package/lib/helpers/fetch.js +0 -41
- package/lib/helpers/getCurrentUrl.js +0 -10
- package/lib/helpers/getDataFromHtml.js +0 -43
- package/lib/helpers/index.js +0 -64
- package/lib/helpers/markSwupElements.js +0 -24
- package/lib/helpers/normalizeUrl.js +0 -17
- package/lib/helpers/transitionEnd.js +0 -14
- package/lib/helpers/transitionProperty.js +0 -14
- package/lib/index.js +0 -305
- package/lib/modules/Cache.js +0 -66
- package/lib/modules/getAnchorElement.js +0 -25
- package/lib/modules/getAnimationPromises.js +0 -43
- package/lib/modules/getPageData.js +0 -26
- package/lib/modules/loadPage.js +0 -123
- package/lib/modules/off.js +0 -34
- package/lib/modules/on.js +0 -14
- package/lib/modules/plugins.js +0 -54
- package/lib/modules/renderPage.js +0 -76
- package/lib/modules/triggerEvent.js +0 -21
- package/lib/modules/updateTransition.js +0 -15
- package/lib/utils/index.js +0 -32
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
import { PageData } from './getPageData.js';
|
|
3
|
+
export interface PageRecord extends PageData {
|
|
4
|
+
url: string;
|
|
5
|
+
responseURL: string;
|
|
6
|
+
}
|
|
7
|
+
export declare class Cache {
|
|
8
|
+
pages: Record<string, PageRecord>;
|
|
9
|
+
last: PageRecord | null;
|
|
10
|
+
swup: Swup;
|
|
11
|
+
constructor(swup: Swup);
|
|
12
|
+
getCacheUrl(url: string): string;
|
|
13
|
+
cacheUrl(page: PageRecord): void;
|
|
14
|
+
getPage(url: string): PageRecord;
|
|
15
|
+
getCurrentPage(): PageRecord;
|
|
16
|
+
exists(url: string): boolean;
|
|
17
|
+
empty(): void;
|
|
18
|
+
remove(url: string): void;
|
|
19
|
+
}
|
|
20
|
+
export default Cache;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
export default function getAnimationPromises(this: Swup, animationType: 'in' | 'out'): Promise<void>[];
|
|
3
|
+
export declare function getTransitionInfo(element: Element, expectedType?: 'animation' | 'transition' | null): {
|
|
4
|
+
type: string | null;
|
|
5
|
+
timeout: number;
|
|
6
|
+
propCount: number;
|
|
7
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
import { PageHtmlData } from '../helpers/getDataFromHtml.js';
|
|
3
|
+
export type PageData = PageHtmlData & {
|
|
4
|
+
responseURL: string;
|
|
5
|
+
};
|
|
6
|
+
declare const getPageData: (this: Swup, request: XMLHttpRequest) => PageData | null;
|
|
7
|
+
export default getPageData;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
import { TransitionOptions } from './loadPage.js';
|
|
3
|
+
declare const leavePage: (this: Swup, data: TransitionOptions, { popstate, skipTransition }?: {
|
|
4
|
+
popstate: PopStateEvent | null;
|
|
5
|
+
skipTransition?: boolean | undefined;
|
|
6
|
+
}) => Promise<void>[];
|
|
7
|
+
export default leavePage;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
export type EventType = 'animationInDone' | 'animationInStart' | 'animationOutDone' | 'animationOutStart' | 'animationSkipped' | 'clickLink' | 'contentReplaced' | 'disabled' | 'enabled' | 'openPageInNewTab' | 'pageLoaded' | 'pageRetrievedFromCache' | 'pageView' | 'popState' | 'samePage' | 'samePageWithHash' | 'serverError' | 'transitionStart' | 'transitionEnd' | 'willReplaceContent';
|
|
3
|
+
export type Handler = (event?: Event) => void;
|
|
4
|
+
export type Handlers = Record<EventType, Handler[]>;
|
|
5
|
+
declare const on: (this: Swup, event: EventType, handler: Handler) => void;
|
|
6
|
+
export default on;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
export type Plugin = {
|
|
3
|
+
name: string;
|
|
4
|
+
mount: () => void;
|
|
5
|
+
unmount: () => void;
|
|
6
|
+
isSwupPlugin: true;
|
|
7
|
+
swup?: Swup;
|
|
8
|
+
_beforeMount?: () => void;
|
|
9
|
+
_afterUnmount?: () => void;
|
|
10
|
+
_checkRequirements?: () => boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const use: (this: Swup, plugin: Plugin) => Plugin[] | undefined;
|
|
13
|
+
export declare function unuse(this: Swup, pluginOrName: Plugin | string): Plugin[] | undefined;
|
|
14
|
+
export declare function findPlugin(this: Swup, pluginOrName: Plugin | string): Plugin | undefined;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Swup from '../Swup.js';
|
|
2
|
+
import { PageRecord } from './Cache.js';
|
|
3
|
+
declare const renderPage: (this: Swup, page: PageRecord, { popstate, skipTransition }?: {
|
|
4
|
+
popstate: PopStateEvent | null;
|
|
5
|
+
skipTransition?: boolean | undefined;
|
|
6
|
+
}) => void;
|
|
7
|
+
export default renderPage;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Perform the replacement of content after loading a page.
|
|
3
|
+
*
|
|
4
|
+
* This method can be replaced or augmented by plugins to allow pausing.
|
|
5
|
+
*
|
|
6
|
+
* It takes an object with the page data as return from `getPageData` and has to
|
|
7
|
+
* return a Promise that resolves once all content has been replaced and the
|
|
8
|
+
* site is ready to start animating in the new page.
|
|
9
|
+
*
|
|
10
|
+
* @param {object} page The page object
|
|
11
|
+
* @returns Promise
|
|
12
|
+
*/
|
|
13
|
+
declare const replaceContent: ({ blocks, title }: {
|
|
14
|
+
blocks: string[];
|
|
15
|
+
title: string;
|
|
16
|
+
}) => Promise<void>;
|
|
17
|
+
export default replaceContent;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const query: (selector: string, context?: Document | Element) => HTMLElement | null;
|
|
2
|
+
export declare const queryAll: (selector: string, context?: Document | Element) => HTMLElement[];
|
|
3
|
+
export declare const nextTick: (callback: () => void) => void;
|
|
4
|
+
export declare const escapeCssIdentifier: (ident: string) => string;
|
|
5
|
+
export declare const toMs: (s: string) => number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './utils/index.js';
|
package/dist/utils.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
exports.escapeCssIdentifier=e=>window.CSS&&window.CSS.escape?CSS.escape(e):e,exports.nextTick=e=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{e()})})},exports.query=function(e,r){return void 0===r&&(r=document),r.querySelector(e)},exports.queryAll=function(e,r){return void 0===r&&(r=document),Array.from(r.querySelectorAll(e))},exports.toMs=e=>1e3*Number(e.slice(0,-1).replace(",","."));
|
|
2
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../src/utils/index.ts"],"sourcesContent":["export const query = (selector: string, context: Document | Element = document) => {\n\treturn context.querySelector<HTMLElement>(selector);\n};\n\nexport const queryAll = (\n\tselector: string,\n\tcontext: Document | Element = document\n): HTMLElement[] => {\n\treturn Array.from(context.querySelectorAll(selector));\n};\n\nexport const nextTick = (callback: () => void) => {\n\trequestAnimationFrame(() => {\n\t\trequestAnimationFrame(() => {\n\t\t\tcallback();\n\t\t});\n\t});\n};\n\nexport const escapeCssIdentifier = (ident: string) => {\n\t// @ts-ignore this is for support check, so it's correct that TS complains\n\tif (window.CSS && window.CSS.escape) {\n\t\treturn CSS.escape(ident);\n\t} else {\n\t\treturn ident;\n\t}\n};\n\n// Fix for Chrome below v61 formatting CSS floats with comma in some locales\nexport const toMs = (s: string) => {\n\treturn Number(s.slice(0, -1).replace(',', '.')) * 1000;\n};\n"],"names":["ident","window","CSS","escape","callback","requestAnimationFrame","selector","context","document","querySelector","Array","from","querySelectorAll","s","Number","slice","replace"],"mappings":"4BAmBoCA,GAE/BC,OAAOC,KAAOD,OAAOC,IAAIC,OAClBD,IAACC,OAAOH,GAEXA,mBAbgBI,IACxBC,sBAAsB,KACrBA,sBAAsB,KACrBD,GAAQ,EAEV,EACD,gBAjBqB,SAACE,EAAkBC,GACvC,YADuC,IAAAA,IAAAA,EAA8BC,UACvDD,EAACE,cAA2BH,EAC3C,mBAEwB,SACvBA,EACAC,GAEA,YAFA,IAAAA,IAAAA,EAA8BC,UAElBE,MAACC,KAAKJ,EAAQK,iBAAiBN,GAC5C,eAoBqBO,GAC8B,IAArCC,OAACD,EAAEE,MAAM,GAAI,GAAGC,QAAQ,IAAK"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=(e,r=document)=>r.querySelector(e),r=(e,r=document)=>Array.from(r.querySelectorAll(e)),o=e=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{e()})})},t=e=>window.CSS&&window.CSS.escape?CSS.escape(e):e,c=e=>1e3*Number(e.slice(0,-1).replace(",","."));export{t as escapeCssIdentifier,o as nextTick,e as query,r as queryAll,c as toMs};
|
|
2
|
+
//# sourceMappingURL=utils.modern.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.modern.js","sources":["../src/utils/index.ts"],"sourcesContent":["export const query = (selector: string, context: Document | Element = document) => {\n\treturn context.querySelector<HTMLElement>(selector);\n};\n\nexport const queryAll = (\n\tselector: string,\n\tcontext: Document | Element = document\n): HTMLElement[] => {\n\treturn Array.from(context.querySelectorAll(selector));\n};\n\nexport const nextTick = (callback: () => void) => {\n\trequestAnimationFrame(() => {\n\t\trequestAnimationFrame(() => {\n\t\t\tcallback();\n\t\t});\n\t});\n};\n\nexport const escapeCssIdentifier = (ident: string) => {\n\t// @ts-ignore this is for support check, so it's correct that TS complains\n\tif (window.CSS && window.CSS.escape) {\n\t\treturn CSS.escape(ident);\n\t} else {\n\t\treturn ident;\n\t}\n};\n\n// Fix for Chrome below v61 formatting CSS floats with comma in some locales\nexport const toMs = (s: string) => {\n\treturn Number(s.slice(0, -1).replace(',', '.')) * 1000;\n};\n"],"names":["query","selector","context","document","querySelector","queryAll","Array","from","querySelectorAll","nextTick","callback","requestAnimationFrame","escapeCssIdentifier","ident","window","CSS","escape","toMs","s","Number","slice","replace"],"mappings":"AAAaA,MAAAA,EAAQ,CAACC,EAAkBC,EAA8BC,aACtDC,cAA2BH,GAG9BI,EAAW,CACvBJ,EACAC,EAA8BC,WAEvBG,MAAMC,KAAKL,EAAQM,iBAAiBP,IAG/BQ,EAAYC,IACxBC,sBAAsB,KACrBA,sBAAsB,KACrBD,GACD,EACD,IAGYE,EAAuBC,GAE/BC,OAAOC,KAAOD,OAAOC,IAAIC,OAClBD,IAACC,OAAOH,GAEXA,EAKII,EAAQC,GAC8B,IAA3CC,OAAOD,EAAEE,MAAM,GAAI,GAAGC,QAAQ,IAAK"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=function(e,r){return void 0===r&&(r=document),r.querySelector(e)},r=function(e,r){return void 0===r&&(r=document),Array.from(r.querySelectorAll(e))},n=e=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{e()})})},o=e=>window.CSS&&window.CSS.escape?CSS.escape(e):e,t=e=>1e3*Number(e.slice(0,-1).replace(",","."));export{o as escapeCssIdentifier,n as nextTick,e as query,r as queryAll,t as toMs};
|
|
2
|
+
//# sourceMappingURL=utils.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.module.js","sources":["../src/utils/index.ts"],"sourcesContent":["export const query = (selector: string, context: Document | Element = document) => {\n\treturn context.querySelector<HTMLElement>(selector);\n};\n\nexport const queryAll = (\n\tselector: string,\n\tcontext: Document | Element = document\n): HTMLElement[] => {\n\treturn Array.from(context.querySelectorAll(selector));\n};\n\nexport const nextTick = (callback: () => void) => {\n\trequestAnimationFrame(() => {\n\t\trequestAnimationFrame(() => {\n\t\t\tcallback();\n\t\t});\n\t});\n};\n\nexport const escapeCssIdentifier = (ident: string) => {\n\t// @ts-ignore this is for support check, so it's correct that TS complains\n\tif (window.CSS && window.CSS.escape) {\n\t\treturn CSS.escape(ident);\n\t} else {\n\t\treturn ident;\n\t}\n};\n\n// Fix for Chrome below v61 formatting CSS floats with comma in some locales\nexport const toMs = (s: string) => {\n\treturn Number(s.slice(0, -1).replace(',', '.')) * 1000;\n};\n"],"names":["query","selector","context","document","querySelector","queryAll","Array","from","querySelectorAll","nextTick","callback","requestAnimationFrame","escapeCssIdentifier","ident","window","CSS","escape","toMs","s","Number","slice","replace"],"mappings":"AAAaA,MAAAA,EAAQ,SAACC,EAAkBC,GACvC,YADuC,IAAAA,IAAAA,EAA8BC,UACvDD,EAACE,cAA2BH,EAC3C,EAEaI,EAAW,SACvBJ,EACAC,GAEA,YAFA,IAAAA,IAAAA,EAA8BC,UAElBG,MAACC,KAAKL,EAAQM,iBAAiBP,GAC5C,EAEqBQ,EAAIC,IACxBC,sBAAsB,KACrBA,sBAAsB,KACrBD,GAAQ,EAEV,EACD,EAEgCE,EAAIC,GAE/BC,OAAOC,KAAOD,OAAOC,IAAIC,OAClBD,IAACC,OAAOH,GAEXA,EAKQI,EAAIC,GAC8B,IAArCC,OAACD,EAAEE,MAAM,GAAI,GAAGC,QAAQ,IAAK"}
|
package/package.json
CHANGED
|
@@ -1,22 +1,36 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "swup",
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"amdName": "Swup",
|
|
4
|
+
"version": "3.0.0-rc.2",
|
|
5
|
+
"description": "Complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"source": "src/Swup.ts",
|
|
8
|
+
"main": "dist/Swup.cjs",
|
|
9
|
+
"module": "dist/Swup.module.js",
|
|
10
|
+
"exports": "./dist/Swup.modern.js",
|
|
11
|
+
"unpkg": "dist/Swup.umd.js",
|
|
12
|
+
"types": "dist/types/index.d.ts",
|
|
13
|
+
"files": [
|
|
14
|
+
"src",
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
6
17
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"build": "
|
|
10
|
-
"
|
|
11
|
-
"
|
|
18
|
+
"build": "npm run build:module && npm run build:bundle",
|
|
19
|
+
"build:module": "microbundle src/index.ts -f modern,esm,cjs",
|
|
20
|
+
"build:bundle": "microbundle src/Swup.ts -f umd --external none",
|
|
21
|
+
"dev": "microbundle src/*.ts -w",
|
|
22
|
+
"lint": "tsc --noEmit --skipLibCheck && prettier 'src/**/*.ts' --write",
|
|
23
|
+
"prepublish": "npm run build",
|
|
12
24
|
"postinstall": "opencollective-postinstall || true",
|
|
13
|
-
"ci": "
|
|
14
|
-
"test": "
|
|
15
|
-
"test:
|
|
25
|
+
"ci": "start-server-and-test test:start 8274 cy:run:record",
|
|
26
|
+
"test": "start-server-and-test test:start 8274 cy:run",
|
|
27
|
+
"test:dev": "start-server-and-test test:start 8274 cy:open",
|
|
16
28
|
"test:instrument": "nyc instrument --compact=false dist test/site/swup",
|
|
17
29
|
"test:server": "http-server --port 8274 test/site",
|
|
18
|
-
"test:
|
|
19
|
-
"
|
|
30
|
+
"test:start": "npm run test:instrument && npm run test:server",
|
|
31
|
+
"cy:run": "cypress run",
|
|
32
|
+
"cy:run:record": "cypress run --record",
|
|
33
|
+
"cy:open": "cypress open"
|
|
20
34
|
},
|
|
21
35
|
"author": "Georgy Marchuk",
|
|
22
36
|
"license": "MIT",
|
|
@@ -37,20 +51,13 @@
|
|
|
37
51
|
"devDependencies": {
|
|
38
52
|
"@cypress/code-coverage": "^3.10.0",
|
|
39
53
|
"@swup/prettier-config": "^1.0.0",
|
|
40
|
-
"@swup/webpack-config": "^1.0.0",
|
|
41
|
-
"babel-cli": "^6.26.0",
|
|
42
|
-
"babel-loader": "^7.1.4",
|
|
43
|
-
"babel-preset-es2015": "^6.24.1",
|
|
44
|
-
"babel-preset-stage-0": "^6.24.1",
|
|
45
54
|
"cypress": "^10.0.2",
|
|
46
55
|
"http-server": "^14.1.1",
|
|
47
56
|
"istanbul-lib-coverage": "^3.2.0",
|
|
57
|
+
"microbundle": "^0.15.0",
|
|
48
58
|
"nyc": "^15.1.0",
|
|
49
|
-
"prettier": "
|
|
50
|
-
"start-server-and-test": "^1.14.0"
|
|
51
|
-
"uglifyjs-webpack-plugin": "^1.2.5",
|
|
52
|
-
"webpack": "^4.8.3",
|
|
53
|
-
"webpack-cli": "^3.3.2"
|
|
59
|
+
"prettier": "^2.8.2",
|
|
60
|
+
"start-server-and-test": "^1.14.0"
|
|
54
61
|
},
|
|
55
62
|
"collective": {
|
|
56
63
|
"type": "opencollective",
|
package/readme.md
CHANGED
|
@@ -1,44 +1,60 @@
|
|
|
1
|
-
<
|
|
1
|
+
<br>
|
|
2
2
|
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
<p align="center"><img width="420" alt="swup" src="https://swup.js.org/assets/images/swup-logo.svg"></p>
|
|
6
3
|
<p align="center">
|
|
7
|
-
|
|
4
|
+
<img width="280" alt="swup" src="https://swup.js.org/assets/images/swup-logo.svg">
|
|
8
5
|
</p>
|
|
6
|
+
|
|
9
7
|
<p align="center">
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
<a href="https://www.npmjs.com/package/swup"><img src="https://img.shields.io/npm/v/swup.svg" alt="npm version"></a>
|
|
9
|
+
<a href="https://bundlephobia.com/package/swup"><img src="https://img.shields.io/bundlephobia/minzip/swup.svg" alt="Bundle size"></a>
|
|
10
|
+
<a href="https://github.com/gmrchk/swup/blob/master/LICENSE"><img src="https://img.shields.io/github/license/gmrchk/swup.svg" alt="License"></a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/swup"><img src="https://img.shields.io/npm/dt/swup.svg" alt="npm downloads"></a>
|
|
12
|
+
<a href="https://circleci.com/gh/swup/swup"><img src="https://circleci.com/gh/swup/swup.svg?style=shield" alt="Build status"></a>
|
|
15
13
|
</p>
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
15
|
+
<br>
|
|
16
|
+
|
|
17
|
+
# Swup
|
|
18
|
+
|
|
19
|
+
Complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.
|
|
20
|
+
|
|
21
|
+
[Features](#features) •
|
|
22
|
+
[Documentation](https://swup.js.org/getting-started) •
|
|
23
|
+
[Plugins](https://swup.js.org/plugins) •
|
|
24
|
+
[Themes](https://swup.js.org/themes) •
|
|
25
|
+
[Discussions](https://github.com/swup/swup/discussions)
|
|
26
|
+
|
|
27
|
+
## Overview
|
|
28
|
+
|
|
29
|
+
Swup is a library that helps you add page transitions to server-side rendered websites. It handles
|
|
30
|
+
the complete lifecycle of a page visit by intercepting link clicks, loading the new page in the
|
|
31
|
+
background, replacing the content and transitioning between the old and the new page.
|
|
32
|
+
|
|
33
|
+
Its goal is to make adding transitions to a site as simple as possible, while providing lots of
|
|
34
|
+
other quality-of-life improvements.
|
|
35
|
+
|
|
36
|
+
## Features
|
|
37
|
+
|
|
38
|
+
- ✨ Auto-detects [CSS transitions](https://swup.js.org/getting-started/how-it-works) for perfect timing
|
|
39
|
+
- 🔗 Updates URLs and preserves native browser history behavior
|
|
40
|
+
- 📦 Uses a [cache](https://swup.js.org/api/cache) to speed up subsequent page loads
|
|
41
|
+
- 💡 Offers [events](https://swup.js.org/events) for hooking into the lifecycle
|
|
42
|
+
- 🔌 Has a powerful [plugin system](https://swup.js.org/plugins) and many official and third-party plugins
|
|
43
|
+
- 🎨 Provides ready-to-go [themes](https://swup.js.org/themes) to get started quickly
|
|
44
|
+
|
|
45
|
+
## Examples
|
|
43
46
|
|
|
44
47
|
<img src="https://user-images.githubusercontent.com/9338324/49190360-50125480-f372-11e8-89e9-d2fb091a2240.gif" width="100%">
|
|
48
|
+
|
|
49
|
+
Take a look at [Sites using swup](https://github.com/swup/swup/discussions/333) for more examples.
|
|
50
|
+
|
|
51
|
+
## Having trouble?
|
|
52
|
+
|
|
53
|
+
If you're having trouble implementing swup, check out the [Common Issues](https://swup.js.org/other/common-issues) section of the docs, look at [closed issues](https://github.com/gmrchk/swup/issues?q=is%3Aissue+is%3Aclosed) or create a [new discussion](https://github.com/swup/swup/discussions/new).
|
|
54
|
+
|
|
55
|
+
## Want to Contribute?
|
|
56
|
+
|
|
57
|
+
<a href="https://github.com/swup/swup/discussions/424">We're looking for maintainers!</a> 👀
|
|
58
|
+
|
|
59
|
+
Become a sponsor on [Open Collective](https://opencollective.com/swup) or support development through
|
|
60
|
+
[GitHub sponsors](https://github.com/sponsors/gmrchk).
|