Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@iyio/any-comp-cli
Advanced tools
A lightweight replacement for Storybook designed to run directly in any React application.
A lightweight replacement for Storybook designed to run directly in any React application.
Simplified Integration - No complex configuration or build steps. Just run the any-comp CLI and quickly test any of your components.
Auto Scanning - All components in your project are automatically registered. No need to define a story for every component you want to test.
Persistent Component State - Save and reload the state of your components as you test to quickly recreate specific testing conditions.
When running, the watch-any-comp command scans and watches for changes to all of your components and generates a AcCompRegistry. This component registry can then be rendered by the AnyCompBrowser component which renders an interface similar to StoryBook and contains a searchable list of all the components in your project
The example below continuously watches the src/components
directly and creates a component
registry located at src/testing/all-comps.tsx
. The component registry is updated with any
changes while the watch-any-comp command is running.
npx watch-any-comp --dir src/components --outDir src/testing
Once your component registry has be created using the watch-any-comp
command you can view your
components using the AnyCompBrowser
component. When using AnyComp with a NexJS project create a
new page that renders the AnyCompBrowser
component then browse to the newly created page.
NextJs Page example
import { AcCompRegistry, AnyCompBrowser } from '@iyio/any-comp';
import { useEffect, useState } from 'react';
export default function AnyCompExamplePage(){
const [compReg,setCompReg]=useState<AcCompRegistry|null>(null);
useEffect(()=>{
// import dynamically to avoid NextJS server side errors
import('../testing/all-comps').then(v=>{
setCompReg(v.anyCompReg as any);
})
},[]);
return (
<div>
{compReg && <AnyCompBrowser reg={compReg} rememberCompId/>}
</div>
);
};
AnyComp consists of 2 packages @iyio/any-comp
and @iyio/any-comp-cli
. @iyio/any-comp
contains
the AnyCompBrowser
component and other supporting code used to render your component for testing.
@iyio/any-comp-cli
contains the watch-all-comps
command used to build component registries.
npm install @iyio/any-comp
npm install @iyio/any-comp-cli --save-dev
Prop bindings allow you to connect value props to onChange callbacks. For example if you have a TextInput component with a value prop and an onChange callback called when the value changes you can have these 2 props automatically bound together. With StoryBook you would have to create a custom Template to bind the 2 values together.
By default AnyComp will automatically bind value
to onChange
and {x}
to on{x}Change
.
You can also use tags defined in JSDoc style comments to define custom bindings that don't fit the
auto binding naming convention.
Binding examples:
interface ExampleCompProps
{
onChange:(value:string)=>void;
value:string;
age:number;
onAgeChange:(value:number)=>void;
jobTitle:string;
/**
* @acBind jobTitle
*/
onPositionChange:(value:string)=>void;
}
Resulting bindings
onChange -> value
onAgeChange -> value
onPositionChange -> jobTitle
Tags allow you to customize the behaviour of your components when rendered by AnyComp. Tags are stored as metadata in JSDoc style comments.
@acIgnore
- Ignores the component or prop the tag is applied to.@acBind targetPropName
- Binds a the callback prop to target prop.Tag examples:
interface ExampleCompProps
{
sirName:string;
/**
* @acBind sirName
*/
onLastNameChange:(value:string)=>void;
/**
* @acIgnore
*/
secretKey:string;
}
export function ExampleComp({
sirName,
onLastNameChange,
secretKey
}:ExampleCompProps){
// ...
}
/**
* @acIgnore
*/
export function UtilityComp()
{
}
arg | value | description |
---|---|---|
--dir | directory path | Path to a directory with components. multiple --dir arguments can be specified |
--outDir | directory path | Directory where to write the all-comps.tsx component registry |
--disableLazyLoading | By default the component registry uses lazy loading to load component but this can be disabled using the --disableLazyLoading flag | |
--debug | Write debug information to console | |
--breakOnDebug | Causes the process to enter a break point and wait for a debugger to attach when entering debug mode |
FAQs
A lightweight replacement for Storybook designed to run directly in any React application.
We found that @iyio/any-comp-cli 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.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.