Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
operator
Advanced tools
Readme
1.8kb drop-in "PJAX" solution for fluid, smooth transitions between pages. Zero stress.
npm i operator --save
Basically zero config by default, just specify a root DOM node to attach to.
import operator from 'operator'
operator('#root')
To define custom handlers for a given route, pass an object with a path
property and handler
method.
operator('#root', [
{
path: '/',
handler (state) {
console.log(state)
}
}
])
Routes handlers can also return Promise
s, and they support params, optional
params, and wildcards.
operator('#root', [
{
path: '/',
handler (state) {
console.log(state)
}
},
{
path: '/products',
handler (state) {
return getProducts() // Promise
}
},
{
path: '/products/:category/:slug?',
handler ({ params }) {
const reqs = [ getProductCategory(params.category) ]
if (params.slug) reqs.push(getProductBySlug(params.slug))
return Promise.all(reqs)
}
}
])
Routes are cached by default, so on subsequent visits, no data will be loaded.
To follow links to pages via AJAX, but fetch fresh content on each navigation
action, set cache
to false
:
operator('#root', [
{
'path': '/',
cache: false
}
])
Sometimes you need to navigate to a page without AJAX, perhaps to load some sort
of iframe
content. To do so, set ignore
to true
:
operator('#root', [
{
'path': '/',
ignore: true
}
])
Any function passed to the route config will be called on every route change, kind of like middleware.
const app = operator('#root', [
state => console.log(state)
])
Operator also emits some helpful events.
app.on('navigate', state => {}) // on valid link click
app.on('before', state => {}) // before render
app.on('after', state => {}) // after render
app.on('hash', state => {}) // when the URL contains a hash
Operator does not manage History
or page title, for maximum flexibility to the
user. Most people should probably just use this snippet:
app.on('after', ({ previousDocument, location }) => {
document.title = previousDocumnt.title
window.history.pushState({}, '', location)
})
If you want to ignore things like query strings or hashes, use pathname
:
app.on('after', ({ previousDocumnt, pathname }) => {
document.title = previousDocumnt.title
window.history.pushState({}, '', pathname)
})
When a hash is encountered – whether on a navigate
action between pages, or
for scroll-anchors on the same page - Operator will emit a hash
event. It's
up to you to handle scrolling.
For most sites, this should work:
app.on('hash', ({ hash }) => {
const target = document.getElementById(hash)
if (target) {
const scroll = target.getBoundingClientRect().top + window.pageYOffset
window.scrollTo(0, scroll)
}
})
Smooth scrolling is also pretty easy:
import sscroll from 'sscroll'
app.on('hash', ({ hash }) => {
const target = document.getElementById(hash)
target && sscroll(target, { duration: 500 })
})
app.go('/about')
Use this for prefetching pages.
app.load('/about')
app.state // => { previousDocument, pathname, location, params, hash, search, handler }
app.on('before', ({ pathname }) => {
if (/redirect/.test(pathname)) {
app.go('/') // redirect
}
})
import wait from 'w2t'
operator('#root', [
state => {
return wait(600, [
const root = document.documentElement.classList
return new Promise(res => {
root.add('is-transitioning')
setTimeout(() => {
root.remove('is-transitioning')
res()
}, 600)
})
])
}
])
Removed default scroll handling. This should be moved to user-space in the event the user doesn't want the page to reset to the top.
Added previousDocument
(a complete cloned document
object) to the state
object. Replaces state.title
via previousDocument.title
.
hash
event, see docsmailto
and tel
regex, thanks @gabrielloeb!Slight update to the API, will require brief migration to new syntax for most users.
ignore
and cache
optionsMIT License © Eric Bailey
FAQs
A drop-in "PJAX" solution for fluid, smooth transitions between pages.
The npm package operator receives a total of 113 weekly downloads. As such, operator popularity was classified as not popular.
We found that operator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.