Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@blitzui/core
Advanced tools
Blitzui is a tool for dynamically generating a website using already existing components and Behaviours, giving the possibility to compose your application and change it on demand without having to re-build
In the context of Blitzui, we have to main concepts.
Components: Are UI components including React components meant to be reused, the components is what we are going to use to "generate" the ui.
Behaviours: Are functions we can pass to components as props, the idea of behaviours is to add functionality to the UI.
Component Pools: Is where we register our components and pass it to the Blitz main function.
Behaviour Pool: Is where we register our behaviours to pass it down to the Blitz main function.
By combining Components and Behaviours, we can compose our UI and reuse. This is very useful when having to create applications like a CMS or to generate dynamic reports with interactivity.
Let's create a component and a simple component Pool. A component Pool is a big object representing a Tree like structure, this tree structure will be used when creating the JSON with the UI instructions.
On a newly created react app:
components
on src
folder// Paste on components/index.js file
import TestComponent from "./TestComponent"
export default {
"basic": {
"TestComponent": TestComponent
},
}
// Paste on TestComponent.js file
import React from 'react'
const TestComponent = ({ title, textGenerator, children }) => {
const text = textGenerator();
return (
<>
<h1>{title}</h1>
<div>{text}</div>
{children}
</>
)
}
export default TestComponent
Now that we have ready our basic component pool, let's create the behaviour pool
behaviours
on src
folderindex.js
inside this foldertextGenerator.js
inside this folder// Paste into index.js
import textGenerator from "./textGenerator";
export default {
"dummy": {
"textGenerator": textGenerator
}
}
// Paste into textGenerator.js
function textGenerator() {
return "Hello World";
}
export default textGenerator;
At this point we have the component pool and the behaviour pool, let's bring them together. Create a file named demo.json and put the following:
[
{
"component": "basic.TestComponent",
"props": {
"textGenerator": {
"behaviour": "dummy.textGenerator"
},
"title": "Title"
},
"children": [
{
"component": "span",
"children": "I am a simple span"
}
]
}
]
This is the configuration file, and what is instructing is to print a TestComponent
that can be found on the pool by going into basic.TestComponent
. Pass the prop textGenerator
which is a behaviour
that can be found in dummy.textGenerator
(the Behaviour pool we already defined). Also pass the prop title and as children, print a simple span with some text.
On your App.js:
See the following code for reference.
import Blitz from '@blitzui/core';
import components from './components';
import behaviours from './behaviours';
import demo from './demo';
const blitz = Blitz(components, behaviours);
function App() {
return (
<div className="App">
{blitz(demo)}
</div>
);
}
export default App;
Behaviours can be executed on the spot, meaning you won't pass the function but the value they generate. Check the following example.
//titleGenerator.js
export default function titleGenerator() {
return "BlitzUI - Rocks";
}
//Behaviour Pool
import textGenerator from "./textGenerator";
import titleGenerator from "./titleGenerator";
export default {
"dummy": {
"textGenerator": textGenerator,
"titleGenerator": titleGenerator
}
}
[
{
"component": "basic.TestComponent",
"props": {
"textGenerator": {
"behaviour": "dummy.textGenerator"
},
"title": {
"behaviour": "dummy.titleGenerator",
"execute": true
}
}
}
]
This will pass the prop title
, which is the value from executing the Behaviour
on the spot, and the component will receive the text generated.
FAQs
Tool for generating dynamic website content
The npm package @blitzui/core receives a total of 1 weekly downloads. As such, @blitzui/core popularity was classified as not popular.
We found that @blitzui/core demonstrated a healthy version release cadence and project activity because the last version was released less than 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.