svawc

v0.0.2

Published

a year ago

Modern reactive development and HTML templating to A-Frame component development without compromising on speed, usability, or bundle size

Downloads

0High
0Medium
0Low

datatitian

aframe svelte web components

logo - cartoon seagul with a wide open beak and the letters S V A W C

SVAWC

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.

How it works

Write reactive template code using Svelte
Svelte compiles that down to efficient createElement, setAttibute, et c. calls (no virtual DOM or unecessary entity recreation)
SVAWC packages it into Web Components for distribution
Link the packaged script and then use the Web Component in any A-Frame scene, works with bundled apps and vanilla JS & HTML

What it looks like

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>

Try it out

Why it's useful

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.

API documentation

View the full API documentation at https://immers-space.github.io/svawc

Get Started

The svawc-template repo has everything you need to start building and publishing SVAWCs. Click here to create a copy of it.

Feature status

This library is fully functional, but some of the features still need some polish

Key: 😀 complete, 🙂 fully functional but could be improved, 😦 missing or has issues

Acknowledgements

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme