![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@atelier-wb/svelte
Advanced tools
Weclome to the Atelier!
This package contains bindings for Svelte UI framework. They allow you to test your Svelte components in isolation.
Create a file with .tools.svelte
extension.
<script>
import { Tool } from '@atelier-wb/svelte'
import MyComponent from './MyComponent.svelte'
</script>
<Tool
name="My Awesome Component"
component={MyComponent}
/>
That's it! Now configure Atelier with Vite, and browse to http://localhost:3000/atelier: you'll see your component in action!
Each tool operates on one of your component, and can:
To enable property control, just initialize them in your tool's props
:
<Tool
name="My Awesome Component"
component={MyComponent}
props={{ prop1: 'my component first prop', prop2: 42 }}
/>
Atelier will automatically creates controls in the "Properties" tab so you can change your property values.
It supports numbers, booleans, strings, arrays and objects.
Functions and Svelte stores can not be configured from Atelier.
To listen to your event properties (either DOM native or custom), write their names in an events
array:
<Tool
name="My Awesome Component"
component={MyComponent}
events={['click', 'custom-event']}
/>
Once they'll be triggered, Atelier will show the time, event name and details in the "Events" tab.
It is automatically cleared when opening a different tool, and there is a button to do it manually.
Note: you can also "programmaticaly" record an event:
<script>
import { Tool, recordEvent } from '@atelier-wb/svelte'
import MyComponent from './MyComponent.svelte'
</script>
<Tool
name="My Awesome Component"
props={{
myComponentFunctionProp: () => recordEvent('programmatic-event', 'event arg 1', 'arg could be anything')
}}
component={MyComponent}
/>
If your component uses slots, or needs some companion markup, you can use <Tool>
as templates:
<Tool
name="My Awesome Component"
props={{ prop1: 'my component first prop', prop2: 42 }}
let:props
let:handleEvent
>
<div>You can put any markup before the component.<div>
<MyComponent
{...props}
on:click={handleEvent}
on:custom-event={handleEvent}
>
<span>this goes into YOUR component</span>
</MyComponent>
<div>You can also have markup after.<div>
</Tool>
Please note key differences:
tool does not need component={MyComponent}
any more
tool has let:props
, and your component has {...props}
.
This allows Atelier to configure properties even if your component is "burried" into the template
tool has let:handleEvent
, and your component binds it to specific event.
This allows Atelier to receive any event you'd like.
If you want to tweak properties, don't forget to initialize them on Tool
: otherwise Atelier will not generates the corresponding controls.
If you need to run code every time your tool loads, you can use setup
function:
<Tool
name="My Awesome Component"
component={MyComponent}
props={{ prop1: 'my awesome prop' }}
setup={async ({ name, props }) => {
return newProps
}}
/>
The setup
function:
could either be synchronous or asynchronous.
receives a single object parameter, with the name
and props
keys (the ones you passed to <Tool/>
)
can return new props
for your component.
If setup()
returns nothing, props
from the markup will be used.
You can also use teardown
function:
<Tool
name="My Awesome Component"
component={MyComponent}
teardown={async name => {}}
/>
The teardown
function:
could either be synchronous or asynchronous.
receives the component name
(the one you passed to <Tool/>
)
You can add as many <Tool/>
in the same file as you want.
But there may be a lot of code duplication!
<ToolBox/>
can solve this issue:
<ToolBox name="My Awesome Component" component={MyComponent}>
<Tool name="Primary" props={{ color: 'red', primary: true }} />
<Tool name="Secondary" props={{ color: 'blue' }} />
</ToolBox>
This helps you easily test variations of the same component.
Important highlights:
a tool's full name is its tool box's name + its own name. In the example above: My Awesome Component / Primary
a tool box supports exactly the same properties as tool, with some specificities:
name
are concatenated, as explained above.
tool's component
override tool box.
props
are merged.
events
are merged.
tool box's setup()
runs before the tool's setup()
. The result of the primer becomes props
parameter of the later.
tool box's teardown()
runs after the tool's teardown()
.
tool box do not support templates.
Now that you know everything, you may want some real examples.
You'll find some in Atelier's UI tests
FAQs
Svelte bindings to test your svelte components
The npm package @atelier-wb/svelte receives a total of 4 weekly downloads. As such, @atelier-wb/svelte popularity was classified as not popular.
We found that @atelier-wb/svelte 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
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.