{{{contents}}}
Next page
page
Go to home* ## Barba core object * * Main methods: * * - `.init()` for initialization with options * - `.use()` for plugins * * @module core */ /***/ import { version } from '../package.json'; // Definitions import { IBarbaOptions, IBarbaPlugin, IgnoreOption, ISchemaPage, ITransitionData, ITransitionOnce, ITransitionPage, Link, LinkEvent, RequestCustomError, RequestErrorOrResponse, SchemaAttributeValues, Trigger, Wrapper, } from './defs'; // Hooks import { hooks } from './hooks'; // Modules import { Cache } from './modules/Cache'; import { Headers } from './modules/Headers'; import { Logger } from './modules/Logger'; import { Prevent } from './modules/Prevent'; import { Transitions } from './modules/Transitions'; import { Views } from './modules/Views'; // Polyfills import './polyfills'; // Schemas import { schemaAttribute } from './schemas/attribute'; import { schemaPage } from './schemas/page'; // Utils import { dom, helpers, history, request, url } from './utils'; export class Core { /** * Version. */ public version: string = version; /** * Schemas. */ public schemaPage: ISchemaPage = schemaPage; /** * Logger class, allows plugins to create Logger. */ public Logger: typeof Logger = Logger; /** * Barba logger. */ public logger: Logger = new Logger('@barba/core'); /** * Plugins. */ public plugins: IBarbaPlugin
* Set to `undefined` until values are available. * * @param container Barba container element * @param html Full stringified HTML * @param namespace Namespace * @param url URL * @param route Route name (with `@barba/router`) */ export interface ISchemaPage { container: HTMLElement; html: string; namespace: string; url: IUrlFull; route?: IRouteResolved | null; } ================================================ FILE: packages/core/src/defs/transition.ts ================================================ /** * @module typings/core */ // Definitions import { LinkEvent } from '../defs'; import { ISchemaPage, Trigger } from './index'; // Data export interface ITransitionData { current: ISchemaPage; next: ISchemaPage; trigger: Trigger; event?: LinkEvent | PopStateEvent; } // Filter export interface ITransitionFilters { once?: boolean; self?: boolean; } // Rules export interface ITransitionRules { namespace?: string | string[]; route?: string | string[]; custom?(data: ITransitionData): boolean; } // Transitions export interface ITransitionPage extends ITransitionRules { name?: string; from?: ITransitionRules; to?: ITransitionRules; sync?: boolean; priority?: number; async?: () => (data?: any) => void; beforeOnce?(data: ITransitionData): void; once?(data: ITransitionData): Promise
* ## Hooks manager. * * - Register and trigger hooks * * Hooks can be easily registered: * * ```js * hooks.leave(callback, context); * ``` * * @module core/modules/hooks * @preferred */ /***/ // Definitions import { HookFunction, HookMethods, HooksAll } from './defs'; // Modules import { Logger } from './modules/Logger'; // Utils import { runAsync } from './utils'; // Types interface IHookInfos { ctx: any; fn: HookFunction; } export class Hooks extends HookMethods { /** * Allow the use of `hooks[name](cb, ctx)`. */ [key: string]: any; // [key in HooksAll]?: any; public logger: Logger = new Logger('@barba/core'); /** * All available hooks. * * See [[HooksAll]] */ // TODO: get hooks from defs (DRY)? public all: HooksAll[] = [ 'ready', 'page', 'reset', 'currentAdded', 'currentRemoved', 'nextAdded', 'nextRemoved', 'beforeOnce', 'once', 'afterOnce', 'before', 'beforeLeave', 'leave', 'afterLeave', 'beforeEnter', 'enter', 'afterEnter', 'after', ]; /** * Registered hooks. * * - Unique hook name * - Associated data set(s) (callback + context) */ public registered: Map
* ## Cache for storing URL / HTML. * * @module core/modules/cache * @preferred */ /***/ // Definitions import { CacheAction, CacheRequest, CacheStatus, CacheTarget, ICacheData, IgnoreOption } from '../defs'; // Modules import { Ignore } from './Ignore'; export class Cache extends Ignore { private _state: Map
* ## Manage request Headers. * * @module core/modules/headers * @preferred */ /***/ // Definitions import { HeaderList, IHeaderData } from '../defs'; export class Headers { private _list: HeaderList = new Map(); /** * Set a new header */ public set(name: string, value: string): IHeaderData { this._list.set(name, value); return { name: value }; } /** * Get a specific header */ public get(name: string): string { return this._list.get(name); } /** * Get all headers */ public all(): HeaderList { return this._list; } /** * Check if header exists */ public has(name: string): boolean { return this._list.has(name); } /** * Delete a header */ public delete(name: string): boolean { return this._list.delete(name); } /** * Clear all headers */ public clear(): void { return this._list.clear(); } } ================================================ FILE: packages/core/src/modules/Ignore.ts ================================================ /** * @barba/core/modules/ignore *
* ## Manage ignore options. * * - cache * - prefetch * * @module core/modules/ignore * @preferred */ /***/ // Definitions import { IgnoreOption } from '../defs'; // Utils import { pathToRegexp } from '../utils/helpers'; import { parse } from '../utils/url'; export class Ignore { private _ignoreAll: boolean; private _ignoreRegexes: RegExp[] = []; constructor(ignore: IgnoreOption) { if (typeof ignore === 'boolean') { this._ignoreAll = ignore; } else { const paths = Array.isArray(ignore) ? ignore : [ignore]; this._ignoreRegexes = paths.map(p => pathToRegexp(p)); } } public checkHref(href: string): boolean { if (typeof this._ignoreAll === 'boolean') { return this._ignoreAll; } const { path } = parse(href); return this._ignoreRegexes.some(regex => regex.exec(path) !== null); } } ================================================ FILE: packages/core/src/modules/Logger.ts ================================================ /** * @barba/core/modules/Logger *
* ## Logger. * * - Display informations via the console * * @module core/modules/Logger * @preferred */ /***/ /** * Log levels, all lower level messages are printed * * 0. mute * 1. error = `console.error()` * 2. warning= `console.warn()` * 3. info = `console.info()` * 4. debug = `console.log()` */ export enum LogLevels { off = 0, error = 1, warning = 2, info = 3, debug = 4, } /** * Global log level */ let _level: number = LogLevels.off; export class Logger { /** * Get global log level. */ public static getLevel(): number { return _level; } /** * Set global log level. */ public static setLevel(name: keyof typeof LogLevels): number { _level = LogLevels[name]; return _level; } /** * Log "prefix". */ private _source: string; /** * Creates an instance of Logger. */ constructor(source: string) { this._source = source; } /** * Permanent, unremovable log. */ // public print(...objects: any[]): void { // this._log(console.info, LogLevels.off, objects); // } /** * Error log. */ public error(...objects: any[]): void { this._log(console.error, LogLevels.error, objects); } /** * Warn log. */ public warn(...objects: any[]): void { this._log(console.warn, LogLevels.warning, objects); } /** * Info log. */ public info(...objects: any[]): void { this._log(console.info, LogLevels.info, objects); } /** * Debug log. */ public debug(...objects: any[]): void { this._log(console.log, LogLevels.debug, objects); } /** * Internal logger. */ private _log(fn: () => void, level: number, objects: any[]): void { if (level <= Logger.getLevel()) { fn.apply(console, ([`[${this._source}] `].concat(objects) as unknown) as [ ]); } } } ================================================ FILE: packages/core/src/modules/Prevent.ts ================================================ /** * @barba/core/modules/prevent *
* ## Prevent checks. * * - Gathers all the tests that allow Barba to work and play transitions * * @module core/modules/prevent * @preferred */ /***/ // Definitions import { IgnoreOption, Link, PreventCheck } from '../defs'; // Schemas import { schemaAttribute } from '../schemas/attribute'; // Utils import { url } from '../utils'; // Modules import { Ignore } from './Ignore'; /** * Make sure the browser supports `history.pushState`. */ const pushState: PreventCheck = () => !window.history.pushState; /** * Make sure there is an `el` and `href`. */ const exists: PreventCheck = ({ el, href }) => !el || !href; /** * If the user is pressing ctrl + click, the browser will open a new tab. */ const newTab: PreventCheck = ({ event }) => (event as KeyboardEvent).which > 1 || (event as KeyboardEvent).metaKey || (event as KeyboardEvent).ctrlKey || (event as KeyboardEvent).shiftKey || (event as KeyboardEvent).altKey; /** * If the link has `_blank` target. */ const blank: PreventCheck = ({ el }) => el.hasAttribute('target') && (el as Link).target === '_blank'; /** * If the domain is the same (in order to avoid pushState cross origin security problem). * Note: SVGAElement do not have `protocol` neither `hostname` properties. */ const corsDomain: PreventCheck = ({ el }) => ((el as HTMLAnchorElement).protocol !== undefined && window.location.protocol !== (el as HTMLAnchorElement).protocol) || ((el as HTMLAnchorElement).hostname !== undefined && window.location.hostname !== (el as HTMLAnchorElement).hostname); /** * If the port is the same. * Note: SVGAElement do not have `port` property. */ const corsPort: PreventCheck = ({ el }) => (el as HTMLAnchorElement).port !== undefined && url.getPort() !== url.getPort((el as HTMLAnchorElement).href); /** * If the link has download attribute. */ const download: PreventCheck = ({ el }) => el.getAttribute && typeof el.getAttribute('download') === 'string'; /** * If the links contains [data-barba-prevent] or [data-barba-prevent="self"]. */ const preventSelf: PreventCheck = ({ el }) => el.hasAttribute(`${schemaAttribute.prefix}-${schemaAttribute.prevent}`); /** * If some link ancestor contains [data-barba-prevent="all"]. */ const preventAll: PreventCheck = ({ el }) => Boolean( el.closest(`[${schemaAttribute.prefix}-${schemaAttribute.prevent}="all"]`) ); /** * If the link is the current URL. * * > Not in the test suite. */ const sameUrl: PreventCheck = ({ href }) => url.clean(href) === url.clean() && url.getPort(href) === url.getPort(); export class Prevent extends Ignore { public suite: string[] = []; public tests: Map
* ## Transitions store. * * - Resolve transition * - Manage rules * * @module core/modules/store * @preferred */ /***/ // Definitions import { IRule, IRules, ITransitionData, ITransitionFilters, ITransitionOnce, ITransitionPage, RuleName, } from '../defs'; // Modules import { Logger } from './Logger'; export class Store { public logger: Logger = new Logger('@barba/core'); /** * All registered transitions. */ public all: ITransitionPage[] = []; /** * "Page only" registered transitions. */ public page: ITransitionPage[] = []; /** * "Once only" registered transitions. */ public once: ITransitionOnce[] = []; /** * Rules for transition resolution. * * Defaults: * * - namespace * - custom */ private _rules: IRule[] = [ { name: 'namespace', type: 'strings', }, { name: 'custom', type: 'function', }, ]; /** * Init store. */ constructor(transitions: ITransitionPage[] = []) { /* istanbul ignore else */ if (transitions) { // TODO: add check for valid transitions? criteria? (once || enter && leave) this.all = this.all.concat(transitions); } this.update(); } /** * Add rule or transition. */ public add(type: 'rule' | 'transition', data: any): void { switch (type) { case 'rule': // TODO: check for valid rule this._rules.splice(data.position || 0, 0, data.value); break; case 'transition': default: // TODO: check for valid transition this.all.push(data); break; } this.update(); } /** * Resolve transition. */ public resolve( data: ITransitionData, filters: ITransitionFilters = {} ): ITransitionOnce | ITransitionPage { // Filter on "once" let transitions = filters.once ? this.once : this.page; // Filter on "self" if (filters.self) { transitions = transitions.filter(t => t.name && t.name === 'self'); } else { transitions = transitions.filter(t => !t.name || t.name !== 'self'); } // All matching transition infos const matching = new Map(); // Active = first of valid transitions // sorted by directions (from/to, from || to, …) const active = transitions.find(t => { let valid = true; const match = {}; if (filters.self && t.name === 'self') { matching.set(t, match); return true; } // Check rules this._rules.reverse().forEach(rule => { if (valid) { valid = this._check(t, rule, data, match); // From/to check if (t.from && t.to) { valid = this._check(t, rule, data, match, 'from') && this._check(t, rule, data, match, 'to'); } if (t.from && !t.to) { valid = this._check(t, rule, data, match, 'from'); } if (!t.from && t.to) { valid = this._check(t, rule, data, match, 'to'); } } }); matching.set(t, match); return valid; }); const activeMatch = matching.get(active); const transitionType = []; if (filters.once) { transitionType.push('once'); } else { transitionType.push('page'); } if (filters.self) { transitionType.push('self'); } if (activeMatch) { // Log resolved transition const infos: any[] = [active]; // Log if matching criteria Object.keys(activeMatch).length > 0 && infos.push(activeMatch); this.logger.info( `Transition found [${transitionType.join(',')}]`, ...infos ); } else { this.logger.info(`No transition found [${transitionType.join(',')}]`); } return active; } /** * ### Update store. * * - Reorder transition by priorities * - Get wait indicator * - Get once transitions */ public update(): void { // Reorder by priorities this.all = this.all .map(t => this._addPriority(t)) .sort((a, b) => a.priority - b.priority) .reverse() .map(t => { delete t.priority; return t; }); this.page = this.all.filter( t => t.leave !== undefined || t.enter !== undefined ) as ITransitionPage[]; this.once = this.all.filter(t => t.once !== undefined) as ITransitionOnce[]; } /** * ### Check if transition apply. * * Based on rule, page data and optional direction: * * 1. transition has no rule "property": * - always returns true * 2. transition has rule "property": * - "strings" should be present on both side (transition + page) and match * - "function" should return true */ private _check( transition: ITransitionPage, rule: IRule, data: ITransitionData, match: any, direction?: 'from' | 'to' ): boolean { let isValid = true; let hasMatch = false; const t = transition; const { name, type } = rule; const strRule = name as IRules['strings']; const objRule = name as IRules['object']; const fnName = name as IRules['function']; const base = direction ? t[direction] : t; // = t || t.from || t.to const page = direction === 'to' ? data.next : data.current; // = current || next const exist = direction ? base && base[name] : base[name]; // If transition rule exists if (exist) { switch (type) { case 'strings': default: { // Array support const names: string[] = Array.isArray(base[strRule]) ? (base[strRule] as string[]) : [base[strRule] as string]; // For matching, prop should be present on both sides and match if (page[strRule] && names.indexOf(page[strRule]) !== -1) { hasMatch = true; } // If transition prop is different from current, not valid if (names.indexOf(page[strRule]) === -1) { isValid = false; } break; } case 'object': { // Array support const names: string[] = Array.isArray(base[objRule]) ? (base[objRule] as string[]) : [base[objRule] as string]; // For matching, prop should be present on both sides and match if (page[objRule]) { if ( page[objRule].name && names.indexOf(page[objRule].name) !== -1 ) { hasMatch = true; } // If transition prop is different from current, not valid if (names.indexOf(page[objRule].name) === -1) { isValid = false; } } else { isValid = false; } break; } case 'function': if (base[fnName](data)) { hasMatch = true; } else { isValid = false; } break; } if (hasMatch) { if (direction) { match[direction] = match[direction] || {}; match[direction][name] = t[direction][name]; } else { match[name] = t[name]; } } } return isValid; } /** * ### Calculate transition priority. * * Based on: * * - rule "position" (index) give tens, hundreds, thousands, … * - from/to properties give units (0, 1 or 2) */ private _calculatePriority( t: ITransitionPage, ruleName: RuleName, ruleIndex: number ): number { let priority = 0; if ( t[ruleName] || (t.from && t.from[ruleName]) || (t.to && t.to[ruleName]) ) { priority += Math.pow(10, ruleIndex); if (t.from && t.from[ruleName]) { priority += 1; } if (t.to && t.to[ruleName]) { priority += 2; } } return priority; } private _addPriority(t: ITransitionPage): ITransitionPage { t.priority = 0; let priority = 0; this._rules.forEach((rule, i) => { const { name } = rule; const index = i + 1; priority += this._calculatePriority(t, name, index); }); t.priority = priority; return t; } } ================================================ FILE: packages/core/src/modules/Transitions.ts ================================================ /** * @barba/core/modules/transitions *
* ## Transitions manager. * * - Handle hooks and transition lifecycle * * @module core/modules/transitions * @preferred */ /***/ // Definitions import { HooksTransition, HooksTransitionMap, IResponse, ITransitionData, ITransitionFilters, ITransitionOnce, ITransitionPage, Wrapper, } from '../defs'; // Hooks import { hooks } from '../hooks'; // Utils import { dom, helpers, runAsync } from '../utils'; // Modules import { BarbaError } from './Error'; import { Logger } from './Logger'; import { Store } from './Store'; export class Transitions { public logger: Logger = new Logger('@barba/core'); public store: Store; private _running: boolean = false; constructor(transitions: ITransitionPage[] = []) { this.store = new Store(transitions); } /** * Get resolved transition * * - based on data */ public get( data: ITransitionData, filters?: ITransitionFilters ): ITransitionOnce | ITransitionPage { return this.store.resolve(data, filters); } /** * Animation running status. */ get isRunning(): boolean { return this._running; } set isRunning(status: boolean) { this._running = status; } /** * Check for registered once transition(s). */ get hasOnce(): boolean { return this.store.once.length > 0; } /** * Check for registered self transition. */ get hasSelf(): boolean { return this.store.all.some(t => t.name === 'self'); } /** * ### Wait indicator. * * Tells Barba to get next page data
* before starting the resolution
* because some registered transitions need
* next page data to be resolved (eg: `sync: true`, `to: { namespace }`, …) */ get shouldWait(): boolean { return this.store.all.some(t => (t.to && !t.to.route) || t.sync); } /** * ### Do "once" transition. * * Hooks: see [[HooksOnce]]. */ public async doOnce({ data, transition, }: { data: ITransitionData; transition: ITransitionOnce; }) { const t = transition || {}; this._running = true; try { await this._doAsyncHook('beforeOnce', data, t); await this.once(data, t); await this._doAsyncHook('afterOnce', data, t); } catch (error) { this._running = false; this.logger.debug('Transition error [before/after/once]'); this.logger.error(error); } this._running = false; } /** * ### Do "page" transition. * * Hooks: see [[HooksPage]]. * * `sync: false` (default) order: * * 1. before * 2. beforeLeave * 3. leave * 4. afterLeave * 5. beforeEnter * 6. enter * 7. afterEnter * 8. after * * `sync: true` order: * * 1. before * 2. beforeLeave * 3. beforeEnter * 4. leave & enter * 5. afterLeave * 6. afterEnter * 7. after */ public async doPage({ data, transition, page, wrapper, }: { data: ITransitionData; transition: ITransitionPage; page: Promise
* ## Views manager. * * @module core/modules/views * @preferred */ /***/ // Definitions import { HooksView, IView, IViewData } from '../defs'; // Hooks import { hooks } from '../hooks'; // Utils import { runAsync } from '../utils'; // Types type Hook = (data: IViewData) => Promise
* ## Schemas description. * * @module core/schemas * @preferred */ /***/ // Definitions import { ISchemaAttribute } from '../defs'; /** * See [[ISchemaAttribute]] */ export const schemaAttribute: ISchemaAttribute = { container: 'container', history: 'history', namespace: 'namespace', prefix: 'data-barba', prevent: 'prevent', wrapper: 'wrapper', }; ================================================ FILE: packages/core/src/schemas/page.ts ================================================ /** * @module core/schemas */ // Definitions import { ISchemaPage } from '../defs'; /** * See [[ISchemaPage]] */ export const schemaPage: ISchemaPage = { container: null, html: '', namespace: '', url: { hash: '', href: '', path: '', port: null, query: {}, }, }; ================================================ FILE: packages/core/src/typings.ts ================================================ export * from './defs'; export { default } from './core'; ================================================ FILE: packages/core/src/utils/dom.ts ================================================ /** * @barba/core/utils/dom *
* ## Dom utils * * - Access DOM contents * - DOM vs string conversions * * @module core/utils/dom * @preferred */ /***/ import path from 'path'; // Definitions import { IDomSibling, ISchemaAttribute, Link, Scope, Wrapper } from '../defs'; // Schemas import { schemaAttribute } from '../schemas/attribute'; export class Dom { private _attr: ISchemaAttribute = schemaAttribute; private _parser: DOMParser; private _sibling: IDomSibling = { after: null, before: null, parent: null }; /** * Convert HTMLDocument to string. */ public toString(el: HTMLElement): string { return el.outerHTML; } /** * Parse HTML string to HTMLDocument. */ // see https://github.com/barbajs/barba/issues/362 // Seems that using DOMParser.parseFromString causes this issue. public toDocument(htmlString: string): HTMLDocument { /* istanbul ignore else */ if (!this._parser) { this._parser = new DOMParser(); } return this._parser.parseFromString(htmlString, 'text/html'); } /** * Parse HTML string to DIVElement. * * DOMParser.parseFromString fails with img[srcset] on iOS. * see https://github.com/barbajs/barba/issues/362 */ public toElement(htmlString: string): HTMLDivElement { const div = document.createElement('div'); div.innerHTML = htmlString; return div; } /** * Get HTML content. */ public getHtml(doc: HTMLDocument = document): string { return this.toString(doc.documentElement); } /** * Get full document content. */ // getDocument(el = document.documentElement) { // return this.toStr(el); // }, /** * Get `[data-barba="wrapper"]`. */ public getWrapper(scope: Scope = document): Wrapper { return scope.querySelector( `[${this._attr.prefix}="${this._attr.wrapper}"]` ); } /** * Get `[data-barba="container"]`. */ public getContainer(scope: Scope = document): HTMLElement | null { return scope.querySelector( `[${this._attr.prefix}="${this._attr.container}"]` ); } /** * Remove container and store next sibling (if applicable). */ public removeContainer(container: HTMLElement) { if (document.body.contains(container)) { this._updateSibling(container); container.parentNode.removeChild(container); } } /** * Add container near previous container */ public addContainer(container: HTMLElement, wrapper: HTMLElement) { const siblingBefore = this.getContainer() || this._sibling.before; if (siblingBefore) { this._insertAfter(container, siblingBefore); } else if (this._sibling.after) { this._sibling.after.parentNode.insertBefore(container, this._sibling.after); } else if (this._sibling.parent) { this._sibling.parent.appendChild(container); } else { wrapper.appendChild(container); } } /** * Get current dom sibling */ public getSibling(): IDomSibling { return this._sibling; } /** * Get `[data-barba-namespace]`. */ public getNamespace(scope: Scope = document): string | null { const ns = scope.querySelector( `[${this._attr.prefix}-${this._attr.namespace}]` ); return ns ? ns.getAttribute(`${this._attr.prefix}-${this._attr.namespace}`) : null; } /** * Get URL from `href` value. */ public getHref(el: Link): string | null { // HTML tagName is UPPERCASE, xhtml tagName keeps existing case. if (el.tagName && el.tagName.toLowerCase() === 'a') { // HTMLAnchorElement, full URL available if (typeof el.href === 'string') { return el.href; } // Probably a SVGAElement… const href = el.getAttribute('href') || el.getAttribute('xlink:href'); /* istanbul ignore else */ if (href) { // When link comes from SVG, `href` returns an object, not a string. const attr: string = ((href as unknown) as SVGAnimatedString).baseVal || href; return this.resolveUrl(attr); } } return null; } // Copyright 2014 Simon Lydell // X11 (“MIT”) Licensed. (See LICENSE // https://github.com/lydell/resolve-url/blob/master/resolve-url.js /* istanbul ignore next */ public resolveUrl(...urls: string[]) { const numUrls = urls.length; if (numUrls === 0) { throw new Error('resolveUrl requires at least one argument; got none.'); } const base = document.createElement('base'); base.href = arguments[0]; if (numUrls === 1) { return base.href; } const head = document.getElementsByTagName('head')[0]; head.insertBefore(base, head.firstChild); const a = document.createElement('a'); let resolved; for (let index = 1; index < numUrls; index++) { a.href = arguments[index]; resolved = a.href; base.href = resolved; } head.removeChild(base); return resolved; } /** * Insert node after another node. */ private _insertAfter(newNode: Node, referenceNode: Node) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } /** * Update current dom sibling regarding container */ private _updateSibling(container: HTMLElement): IDomSibling { this._sibling = { after: container.nextElementSibling, before: container.previousElementSibling, parent: container.parentElement }; return this._sibling; } } const dom = new Dom(); export { dom }; ================================================ FILE: packages/core/src/utils/helpers.ts ================================================ /** * @barba/core/utils/helpers *
* ## Helpers * * - Update next page data * * @module core/utils/helpers * @preferred */ /***/ // Third-party import { pathToRegexp as ptr } from 'path-to-regexp'; // Definitions import { IResponse, ITransitionData } from '../defs'; // Utils import { dom } from './dom'; import { history } from './history'; /** * Update `data.next`, the title and the history */ export const update = async ( page: Promise
* ## History manager. * * - Keep track of the navigation history * * @module core/utils/history * @preferred */ /** * State item. * * @property from * @property index */ interface IHistoryItem { /** origin */ from: string; /** index */ index: number; /** states */ states: IStateItem[]; } /***/ interface ICoords { x: number; y: number; } /** * History item. * * @property namespace * @property scroll * @property URL */ interface IStateItem { /** data */ data: object; /** namespace */ ns: string | undefined; /** Scroll position */ scroll: ICoords; /** URL */ url: string; } export class History { private _session: string; private _states: IStateItem[] = []; private _pointer = -1; /** * Init with first state. */ public init(url: string, ns: string): void { this._session = 'barba'; const state: IStateItem = { data: {}, ns, scroll: { x: window.scrollX, y: window.scrollY, }, url, }; this._pointer = 0; this._states.push(state); const item: IHistoryItem = { from: this._session, index: this._pointer, states: [...this._states], }; window.history && window.history.replaceState(item, '', url); } public change( url: string, trigger: Trigger, e?: LinkEvent | PopStateEvent ): Trigger { if (e && (e as PopStateEvent).state) { // If popstate, move to existing state // and get back/forward direction. const { state }: { state: IHistoryItem } = e as PopStateEvent; const { index } = state; const diff = this._pointer - index; trigger = this._getDirection(diff); // Work with previous states this.replace(state.states); this._pointer = index; } else { // Add new state this.add(url, trigger); } return trigger; } /** * Add a new state. */ public add(url: string, trigger: Trigger, action?: HistoryAction, data?: object): void { // If no state, it will be updated later. const ns = 'tmp'; const method = action ?? this._getAction(trigger); const state: IStateItem = { data: data ?? {}, ns, scroll: { x: window.scrollX, y: window.scrollY, }, url, }; switch (method) { case 'push': this._pointer = this.size; this._states.push(state); break; case 'replace': this.set(this._pointer, state); break; /* istanbul ignore next */ default: } const item: IHistoryItem = { from: this._session, index: this._pointer, states: [...this._states], }; switch (method) { case 'push': window.history && window.history.pushState(item, '', url); break; case 'replace': window.history && window.history.replaceState(item, '', url); break; /* istanbul ignore next */ default: } } /** * Store custom user data per state. */ public store(data: object, i?: number): void { const index = i || this._pointer; const state = this.get(index); // merge data (allow data overwrite) state.data = { ...state.data, ...data }; // update states this.set(index, state); const item: IHistoryItem = { from: this._session, index: this._pointer, states: [...this._states], }; // update browser history window.history.replaceState(item, ''); } /** * Update state. */ public update(data: any, i?: number): void { const index = i || this._pointer; const existing = this.get(index); const state: IStateItem = { ...existing, ...data, }; this.set(index, state); } /** * Remove last state. */ public remove(i?: number): void { if (i) { this._states.splice(i, 1); } else { this._states.pop(); } this._pointer--; } /** * Delete all states. */ public clear(): void { this._states = []; this._pointer = -1; } /** * Replace all states. */ public replace(newStates: IStateItem[]): void { this._states = newStates; } /** * Get state by index. */ public get(index: number): IStateItem { return this._states[index]; } /** * Set state by index. */ public set(i: number, state: IStateItem) { return (this._states[i] = state); } /** * Get the current state. */ get current(): IStateItem { return this._states[this._pointer]; } /** * Get the previous state. */ get previous(): IStateItem | null { return this._pointer < 1 ? null : this._states[this._pointer - 1]; } /** * Get the state size. */ get size(): number { return this._states.length; } /** * Get the history action: push vs replace */ private _getAction(trigger: Trigger): HistoryAction { let action: HistoryAction = 'push'; // Manage `data-barba-history` attribute // to get the right action (push vs replace). const el = trigger as HTMLAnchorElement; const attr = `${schemaAttribute.prefix}-${schemaAttribute.history}`; if (el.hasAttribute && el.hasAttribute(attr)) { action = el.getAttribute(attr) as HistoryAction; } return action; } /** * Get the direction of popstate change */ private _getDirection(diff: number): Trigger { // Check if "session switch" if (Math.abs(diff) > 1) { // Ex 6-0 > 0 -> forward, 0-6 < 0 -> back return diff > 0 ? 'forward' : 'back'; } else { if (diff === 0) { return 'popstate'; } else { // Ex 6-5 > 0 -> back, 5-6 < 0 -> forward return diff > 0 ? 'back' : 'forward'; } } } } const history = new History(); export { history }; ================================================ FILE: packages/core/src/utils/index.ts ================================================ import * as helpers from './helpers'; import * as url from './url'; export * from './dom'; export * from './history'; export * from './request'; export * from './run-async'; export { helpers, url }; ================================================ FILE: packages/core/src/utils/request.ts ================================================ /** * @barba/core/utils/request *
* ## Fetch pages for transitions. * * - Includes timeout * - Uses Fetch API * - Handles errors * * @module core/utils/request * @preferred */ /***/ // Definitions import { Cache } from '@barba/core/src/modules/Cache'; import { Headers } from '@barba/core/src/modules/Headers'; import { IResponse, RequestError } from '../defs'; import { parse } from './url'; /** * Init a page request. * Fetch the page and returns a promise with the text content. */ function request( url: string, ttl: number = 2e3, requestError: RequestError, cache: Cache, headers: Headers ): Promise
* ## URL utils. * * - Collect and structure informations from URLs * * @module core/utils/url */ /***/ // Definitions import { IGenericObject, IUrlBase } from '../defs'; /** * Get location href. */ export const getHref = () => window.location.href; /** * Get absolute href from URL. */ export const getAbsoluteHref = (url: string, base: string = document.baseURI): string => new URL(url, base).href; /** * Get location origin. */ export const getOrigin = () => window.location.origin; /** * Get port based on URL or location. */ export const getPort = (url: string = window.location.href) => parse(url).port; /** * Get path from URL. */ export const getPath = (url: string = window.location.href) => parse(url).path; /** * Get query object from URL. */ export const getQuery = (url: string, stringify: boolean = false): IGenericObject|string => { return stringify ? JSON.stringify(parse(url).query) : parse(url).query; }; /** * Get hash from URL. */ export const getHash = (url: string): string => parse(url).hash; /** * Parse URL for path, query and hash and more. */ export const parse = (url: string): IUrlBase => { // Port let port; const matches = url.match(/:\d+/); if (matches === null) { if (/^http/.test(url)) { port = 80; } if (/^https/.test(url)) { port = 443; } } else { const portString = matches[0].substring(1); port = parseInt(portString, 10); } // Path let path = url.replace(getOrigin(), ''); let hash; let query = {}; // Hash const hashIndex = path.indexOf('#'); if (hashIndex >= 0) { hash = path.slice(hashIndex + 1); path = path.slice(0, hashIndex); } // Query const queryIndex = path.indexOf('?'); if (queryIndex >= 0) { query = parseQuery(path.slice(queryIndex + 1)); path = path.slice(0, queryIndex); } return { hash, path, port, query, }; }; /** * Parse a query string to object. */ export const parseQuery = (str: string) => str.split('&').reduce((acc: IGenericObject, el: string) => { const [key, value] = el.split('='); acc[key] = value; return acc; }, {}); /** * Clean URL, remove "hash" and/or "trailing slash". */ export const clean = (url: string = window.location.href) => url.replace(/(\/#.*|\/|#.*)$/, ''); ================================================ FILE: packages/css/.npmignore ================================================ ### Custom ### /__e2e__ /__mocks__ /__tests__ /__web__ /jest.config.js /mangle.json /*.md /.rts2* !/README.md !/CHANGELOG.md ================================================ FILE: packages/css/AUTHORS ================================================ Luigi De Rosa
home
Go to pagenamed
Go to pageonce
Go to pagepage
Go to home* ## Barba CSS. * * - Add CSS classes * - Manage CSS transitions * * @module css * @preferred */ /***/ // Definitions import { IBarbaPlugin, ITransitionData, ITransitionPage, } from '@barba/core/src/defs'; import { Core } from '@barba/core/src/core'; import { Logger } from '@barba/core/src/modules/Logger'; import { ICssCallbacks } from './defs'; import { version } from '../package.json'; export class Css implements IBarbaPlugin<{}> { public name = '@barba/css'; public version = version; public barba: Core; public logger: Logger; public prefix: string = 'barba'; public callbacks: ICssCallbacks = {}; public cb: any; // Check if transition property applied private _hasTransition: boolean = false; /** * Plugin installation. */ public install(barba: Core) { this.logger = new barba.Logger(this.name); this.logger.info(this.version); this.barba = barba; this._once = this._once.bind(this); this._leave = this._leave.bind(this); this._enter = this._enter.bind(this); } /** * Plugin installation. */ public init() { // Register hooks to get prefix this.barba.hooks.before(this._getPrefix, this); this.barba.hooks.beforeOnce(this._getPrefix, this); // Register hook for CSS classes this.barba.hooks.beforeOnce(this._beforeOnce, this); this.barba.hooks.afterOnce(this._afterOnce, this); this.barba.hooks.beforeLeave(this._beforeLeave, this); this.barba.hooks.afterLeave(this._afterLeave, this); this.barba.hooks.beforeEnter(this._beforeEnter, this); this.barba.hooks.afterEnter(this._afterEnter, this); // Override main transitions this.barba.transitions.once = this._once; this.barba.transitions.leave = this._leave; this.barba.transitions.enter = this._enter; // Add empty default transition (force prepend) /* istanbul ignore next */ this.barba.transitions.store.all.unshift({ name: 'barba', once() {}, // tslint:disable-line:no-empty leave() {}, // tslint:disable-line:no-empty enter() {}, // tslint:disable-line:no-empty }); this.barba.transitions.store.update(); } /** * Initial state. */ public async start(container: HTMLElement, kind: string): Promise
Hello prefetch
================================================ FILE: packages/prefetch/jest.config.js ================================================ const jestBase = require('../../jest.config.js'); module.exports = { ...jestBase, }; ================================================ FILE: packages/prefetch/package.json ================================================ { "name": "@barba/prefetch", "version": "2.2.0", "description": "Automatically fetch and cache your pages based on the viewport", "publishConfig": { "access": "public" }, "main": "dist/barba-prefetch.js", "umd:main": "dist/barba-prefetch.umd.js", "browser": "dist/barba-prefetch.umd.js", "unpkg": "dist/barba-prefetch.umd.js", "module": "dist/barba-prefetch.mjs", "source": "src/index.ts", "types": "dist/prefetch/src/typings", "mangle": { "regex": "^_" }, "files": [ "dist" ], "keywords": [ "page", "transition", "animation", "css", "router", "prefetch" ], "homepage": "https://github.com/barbajs/barba#readme", "bugs": { "url": "https://github.com/barbajs/barba/issues" }, "license": "MIT", "repository": { "type": "git", "url": "git+ssh://git@github.com/barbajs/barba.git" }, "scripts": { "build": "microbundle --name barbaPrefetch", "build:watch": "microbundle watch --name barbaPrefetch", "clear": "rimraf dist", "lint": "tslint src/**", "precommit": "lint-staged", "report": "source-map-explorer --html ./dist/barba-prefetch.umd.js > report.html", "size": "echo '🚀 prefetch' && gzip-size ./dist/barba-prefetch.umd.js", "tag:latest": "npm dist-tag add @barba/prefetch@$npm_package_version latest", "tag:next": "npm dist-tag add @barba/prefetch@$npm_package_version next" }, "gitHead": "33c213bc36a0996f6333185dfc695fcd0d37c9d9" } ================================================ FILE: packages/prefetch/src/defs/index.ts ================================================ /** * @module typings/prefetch */ export interface IPrefetchOptions { root?: HTMLElement | HTMLDocument; timeout?: number; limit?: number; } ================================================ FILE: packages/prefetch/src/index.ts ================================================ import * as t from './typings'; export { default } from './prefetch'; ================================================ FILE: packages/prefetch/src/polyfills/index.ts ================================================ // Browser support + polyfills // if (window.NodeList && !NodeList.prototype.forEach) { // NodeList.prototype.forEach = Array.prototype.forEach; // } export * from './requestIdleCallback'; ================================================ FILE: packages/prefetch/src/polyfills/requestIdleCallback.ts ================================================ /** * @module prefetch/polyfills */ /** * Copyright 2018 Google Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ // [source](https://github.com/GoogleChromeLabs/quicklink/blob/master/src/request-idle-callback.mjs) // RIC and shim for browsers setTimeout() without it export const requestIdleCallback = // @ts-ignore window.requestIdleCallback || function ric(cb: any) { const start = Date.now(); return setTimeout(() => { cb({ didTimeout: false, timeRemaining: function timeRemaining() { return Math.max(0, 50 - (Date.now() - start)); }, }); }, 1); }; ================================================ FILE: packages/prefetch/src/prefetch.ts ================================================ /** * @barba/prefetch ** ## Barba prefetch. * * @module prefetch * @preferred */ import { IPrefetchOptions } from './defs'; /***/ // Definitions import { Core } from '@barba/core/src/core'; import { IBarbaPlugin, Link } from '@barba/core/src/defs'; import { Logger } from '@barba/core/src/modules/Logger'; import { version } from '../package.json'; import { requestIdleCallback } from './polyfills'; class Prefetch implements IBarbaPlugin
default
Go to home* ## Barba Router. * * - Add `route` to Barba transitions resolution * * @module router * @preferred */ /***/ // Definitions import { IBarbaPlugin, ITransitionData } from '@barba/core/src/defs'; // Barba/core import { Core } from '@barba/core/src/core'; import { Logger } from '@barba/core/src/modules/Logger'; // Local import { version } from '../package.json'; import { IRouteByName, IRouteResolved, IRouterOptions } from './defs'; class Router implements IBarbaPlugin