Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
piconav
Advanced tools
Readme
piconav
?piconav
is a tiny library that keeps the browser URL in sync with your JS state for Single Page Applications.
It also syncs the document
title, canonical URL and meta description.
It aims to allow Google indexing of SPA's to prevent the need for server side rendering / hydrating.
piconav
?As a fast way to add SPA URL navigation to my prototypes.
Route
).Clear API.
piconav
to document their usage.document
title, canonical URL and meta description are outside the control of the JSX DOM so have to updated directly with the DOM API.SEO.
script
tag so there is no fetch
latency after your initial JS loads.piconav
?piconav
if you want to get something up and running quickly.piconav
is very simple.piconav
work?There are four broad variables in JS and the DOM that need to be kept in sync:
<link>
meta and canonical URL values.There are two sources of navigation:
piconav
observes a navigation from one of the sources, and makes sure each of the four variables are in sync.
You need to integrate piconav
into your app by passing it function callbacks - code examples below.
Generally, this is what happens when a navigation happens from each of the two sources:
Note: Indentation roughly shows the function call stack, although with observables it might not be exact as there will be some Mobx functions in the stack also.
nav(navEvent)
events.browser.after(url, params)
piconav
to your JS project.Install: yarn add piconav
or npm install piconav
.
nav.js
to add configuration and event handlers to piconav
.import {on, off} from "piconav";
import {storeIns} from "./../stores/store";
const resetPrimaryScroll = () => {
document.querySelector("html").scrollTo(0, 0);
};
const {nav, navByBrowser, updateDoc} = on({
site: {
canonicalDomain: `https://example.com`
},
events: {
js: {
after: ({data}) => {
if (data !== null && "type" in data && data.type !== "home") {
resetPrimaryScroll();
}
}
},
browser: {
after: (url, params) => {
// You should update your store state to match the incoming `url` and `params`.
return storeIns.onBrowserNav(url, params);
}
}
}
});
export {
nav,
navByBrowser,
updateDoc
}
nav.js
to your store, map JS state to document
state.When the user navigates via browser:
events.browser.after(url, params)
is called.
updateDoc(navEvent)
soon after.When the user navigates via JS click:
nav(navEvent)
Example using a MobX store:
@observable curUrl = null;
// This is a public method on an observable store that your app uses to navigate.
// Use `curUrl` state to render the correct page in JSX.
// `src` should equal `browser` when `nav` is called from the `events.browser.after` callback.
nav(appSpecificData, src = "js") {
this.curUrl = {
url: "/a/b/c",
title: "A Title",
metaDesc: "A page description",
data: appSpecificData,
src // equals "js" or "browser"
};
}
Calling piconav
functions after your app navigates to a new URL:
// Using `observe` on `curUrl` allows calling `nav` and `updateDoc` in a single place (instead of many call sites).
const disposer = observe(storeIns, "curUrl", ({oldValue, newValue}) => {
const {url, title, metaDesc, data, src} = newValue;
const navEvent = {
url,
doc: {
title,
metaDesc
},
// This can be any object, and will be passed to `events.js.after` to allow custom logic.
data
};
if (src === "js") {
nav(navEvent);
return;
}
if (src === "browser") {
updateDoc(navEvent);
return;
}
});
navByBrowser
on initial page load.// Will call the `events.browser.after` callback which should set your JS state to match that of the current browser URL.
// Note: this is best done before mounting your JSX as the first JSX render will be the correct page and not empty containers.
// - This ensures Googlebot snapshots the correct HTML.
navByBrowser();
FAQs
JS SPA nav library.
We found that piconav 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).