Modern reactive development and HTML templating to A-Frame component development without compromising on speed, usability, or bundle size
Svelte A-Frame Web Components
SVAWC brings modern reactive development and HTML templating to A-Frame component development without compromising on speed, usability, or bundle size.
createElement, setAttibute, et c. calls (no virtual DOM or unecessary entity recreation)Svelte reactive template source:
<!-- APerson.svelte -->
<script>
// props, converted to dash case on WebComponent, e.g. shirt-color
export let skinColor = 'burlywood'
export let shirtColor = 'seagreen'
export let pantsColor = 'slateblue'
// computed variables
$: skinMaterial = { color: skinColor, roughness: 0.9 }
$: shirtMaterial = { color: shirtColor }
$: pantsMaterial = { color: pantsColor }
const limbs = [-1, 1]
</script>
<a-entity
class="head"
position={{ x: 0, y: 1.6, z: 0 }}
geometry={{ primitive: 'sphere', radius: 0.2 }}
material={skinMaterial}
shadow
/>
<a-entity
class="body"
position={{ x: 0, y: 1.05, z: 0 }}
geometry={{primitive: 'cylinder', radius: 0.25, height: 0.7 }}
material={shirtMaterial}
shadow
>
<!-- loops -->
{#each limbs as side (side)}
<a-entity
class="arm"
position={{ x: side * 0.3, y: 0.05, z: 0 }}
rotation={{ x: 0, y: 0, z: side * 30 }}
geometry={{ primitive: 'cylinder', radius: 0.1, height: 0.7 }}
material={shirtMaterial}
shadow
/>
{/each}
</a-entity>
{#each limbs as side (side)}
<a-entity
class="leg"
position={{ x: side * 0.1, y: 0.35, z: 0 }}
rotation={{ x: 0, y: 0, z: side * 10 }}
geometry={{ primitive: 'cylinder', radius: 0.15, height: 0.7 }}
material={pantsMaterial}
shadow
/>
{/each}
The above is just standard Svelte code. Check out their guide if you're not already familiar.
SVAWC Wrapper:
import { registerWebComponent } from 'svawc'
import APerson from "./APerson.svelte"
registerWebComponent({Component: APerson, tagname: "a-person", props: ["skinColor", "shirtColor", "pantsColor"] })
Usage in A-Frame Scene:
<head>
<script src="https://aframe.io/releases/1.4.1/aframe.js"></script>
<script src='https://cdn.jsdelivr.net/npm/svawc-template'></script>
</head>
<body>
<a-scene>
<a-person position="0 0 -3"></a-person>
<a-person position="1 0 -3" skin-color="peachpuff" shirt-color="grey" pants-color="darkgrey"></a-person>
<a-person position="-1 0 -3" skin-color="sienna" shirt-color="pink" pants-color="white"></a-person>
</a-scene>
</body>
I love A-Frame, but the recurring pain points for me in large apps are handling complex reactive state and making nested entity structures re-usable.
Solutions for the reactive state generally involve meta-components
like event-set or the creation of one-off 'components' that just handle business logic.
These tend to spread your logic around and make a large codebase harder to maintain.
For re-usable structures, you're either stuck with HTML templates, which are awkward to use, bloat your index.html,
and again serve to keep your structure far from your logic, or you've got to write tons of tedious
createElement and setAttribute calls.
SVAWC lets you write the organized, concise code we're accustomed to from modern reactive frameworks and integrate it seamlessly in any A-Frame project. SVAWC is the A-Frame answer to React Three Fiber, which is a lovely and powerful framework, but never feels quite right to me due the lack of ECS.
View the full API documentation at https://immers-space.github.io/svawc
The svawc-template repo has everything you need to start building and publishing SVAWCs. Click here to create a copy of it.
This library is fully functional, but some of the features still need some polish
template tag.
See slots tutorial for details.
Key: 😀 complete, 🙂 fully functional but could be improved, 😦 missing or has issues
Big thanks to @dmarcos for undertaking the massive task of porting A-Frame over to native Custom Elements for v1.4.0; this would not be possible otherwise.
Code adapted from svelte-tag by Chris Ward.
Logo is CC-BY-NC-SA, adapted from a photo by Leonard J Matthews.
FAQs
Modern reactive development and HTML templating to A-Frame component development without compromising on speed, usability, or bundle size
We found that svawc 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
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.