Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
piral-feeds
Advanced tools
This is a plugin that only has a peer dependency to piral-core
. What piral-feeds
brings to the table is a set of Pilet API extensions that can be used with piral
or piral-core
.
By default, these API extensions are not integrated in piral
, so you'd need to add them to your Piral instance.
A standard scenario that needs to be covered by most applications is:
WebSocket
connection to the backend) the shown component updates its information, dataPUT
or POST
to the backend) the data is updated, too and the shown component updatesQuite often, this simple scenario involves quite some code and ceremony to be reliable. The whole scenario (lazy load of data, update management on the data) is what call a "data feed" or short "feed" (not to confuse with Pilet Feed service, which is the service provisioning the pilets).
piral-feeds
is an abstraction over the state management. The abstraction is exposed to be used by pilets with the pilet API. It allows creating a connector that returns a higher-order component capable of connecting any React (view) component to the data management.
Alternatives: Expose your own state management solution to the pilets such that they can work directly on it. Or leave it to pilets to manage lazy loading and state management on their own.
We also have a video for this plugin:
The following functions are brought to the Pilet API.
createConnector
Creates a new feed connector, which is an abstraction over a state container driven by the typical lifecycle of a data feed connection.
Returns a higher-order component for providing a data
prop that reflects the current feed data.
::: summary: For pilet authors
You can use the createConnector
function from the Pilet API to create a global container managed data feed inside the Piral instance.
There are two kind of calls. The simple variant just uses a callback to populate the data via a lazy loading mechanism.
Example use:
import { PiletApi } from '<name-of-piral-instance>';
import { Page } from './Page';
export function setup(piral: PiletApi) {
const connect = createConnector(() => fetch('http://example.com').then(res => res.json()));
piral.registerPage('/sample', connect(Page));
}
The most powerful variant declares three different sections:
initialize
to declare how data should be loaded initially (e.g., by loading from some API) requiredconnect
to define how updates of the data should be retrieved (e.g., via a WebSocket connection) optionalupdate
to handle the patching of data (e.g., combining the current data with the data retrieved from a WebSocket connection) optionalIf you specify connect
we recommend to also define update
.
Example use:
import { PiletApi } from '<name-of-piral-instance>';
import { Page } from './Page';
export function setup(piral) {
const connect = createConnector({
initialize() {
return fetch('http://example.com').then(res => res.json());
},
connect(cb) {
const ws = new WebSocket();
ws.onmessage = e => cb(JSON.parse(e.data));
return () => ws.close();
},
update(data, item) {
return [...data, item];
},
});
piral.registerPage('/sample', connect(({ data }) => <Page items={data} />));
}
Calling createConnector
returns a higher-order component that injects a new prop called data
into the component.
Furthermore two more options are available:
immediately
optionally avoids lazy loading and fetches the data immediately.reducers
allows to extend the HOC with some actions triggering the provided reducer functions.The latter can be used like in the following example:
import { PiletApi } from '<name-of-piral-instance>';
export function setup(piral: PiletApi) {
const connect = piral.createConnector({
initialize() {
return Promise.resolve([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
},
update(data: Array<number>) {
return data;
},
reducers: {
shuffle(data) {
return data.slice().sort(() => Math.random() - 0.5);
},
},
});
piral.registerPage(
"/sample",
connect(({ data }) => (
<>
<ul>
{data.map((i) => (
<li key={i}>{i}</li>
))}
</ul>
<button onClick={connect.shuffle}>Shuffle</button>
</>
))
);
}
:::
::: summary: For Piral instance developers
The provided library only brings API extensions for pilets to a Piral instance.
For the setup of the library itself you'll need to import createFeedsApi
from the piral-feeds
package.
import { createFeedsApi } from 'piral-feeds';
The integration looks like:
const instance = createInstance({
// important part
plugins: [createFeedsApi()],
// ...
});
There are no options available.
:::
Piral is released using the MIT license. For more information see the license file.
1.7.3 (December 11, 2024)
pilet upgrade
command with npm
client not changing package.json--allow-self-signed
flag to piral-cli
commands using HTTP requestsreact-router
v7FAQs
Plugin for connecting data feeds in Piral.
The npm package piral-feeds receives a total of 1,120 weekly downloads. As such, piral-feeds popularity was classified as popular.
We found that piral-feeds demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.