lume / classy-solid

Solid.js reactivity patterns for classes, and class components. See https://github.com/lume/element for a Custom Element system built with classy-solid.

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home  ·  Documentation  ·  Examples  ·  Forum  ·  Chat  ·  Source

npm install lume

Features

LUME is composed of several packages that can be used individually, or together as a whole:

lume - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

@lume/element - System for defining HTML elements

This is a web component system that allows you to create new, fast, and performant HTML elements in a simple way. It provides the foundation for LUME's HTML elements, and a standard pattern for building new elements that extend the features of LUME.

element-behaviors - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called "behaviors" that are similar to custom elements: each behavior is defined as a class that has the same lifecycle methods as custom elements. The difference is that an unlimited number of behaviors can be associated with an element.

glas - WebGL engine written in AssemblyScript (WIP)

This is a WebGL engine with the consistent performance of WebAssembly, written in AssemblyScript (a TypeScript-to-WebAssembly compiler).

LUMECraft

LUMECraft is a collection of applications made with LUME, showing what LUME can do, and serving as forkable starting points for further customization.

first-person-shooter - First-person shooter game

A first-person shooter game foundation made with LUME, Solid.js, and Meteor.

Getting involved

There are various ways to get involved!

• Visit the documentation and make something awesome!
• Submit fixes or new features to any packages or the website! See the contributing guide.
• Discuss LUME, get help, or help others in the forums or on our Discord chat server.

Status

classy-solid's Issues

TypeError: this.__propsSetAtLeastOnce__.add is not a function

Trying to create a signalified object using below code.

export type GameState = {
	count: number;
};

export let state: GameState = {
	count: 0,
};

signalify<GameState>(state);

Then, in component I import state and increment/display it

setInterval(() => {
	state.count = Math.floor(Math.random() * 100);
}, 1000);

return <strong>{state.count}</strong>

It then results in the error below

TypeError: this.__propsSetAtLeastOnce__.add is not a function

Document steps needed to use decorators with vite

I think many use Vite with Solid, but I noticed there aren't any instructions on using classy-solid with Vite. Using the example car class from the readme will cause errors with Vite if it's not configured to use decorators (Support for the experimental syntax 'decorators' isn't currently enabled).

To do so, one can install @babel/plugin-proposal-class-properties, and @babel/plugin-proposal-decorators. Then update their vite.config.ts file to include:

// ...
solidPlugin({
     babel: {
          plugins: [
               ["@babel/plugin-proposal-decorators", { legacy: true }],
               "@babel/plugin-proposal-class-properties",
          ]
     },
}),
// ...

I think it would be beneficial to add this or similar instructions to the readme.

TypeScript does support stage 3 decorators!

I had an idea to implement something like classy-solid does because one of the qualms I have with Solid is its unnecessary verbosity, which decorators would definitely help with. I also find class-based components to be a better fit generally because to me classes and mutability go hand-in-hand and often times component has mutating data - especially when signals are involved.

Anyway, stage 3 decorators are available in TS 5. I haven't really taken a look into your source code yet, just saw the readme and read that TS doesn't support them. I assume there's some stuff worth updating.

Classy violates Contnent Security Policy

I'm unable to use classy while using the script-src directive in a Content Security Policy due to the use of the new Function() constructor. Is it possible to avoid using it?

Error When Using Component Decorator

I have a solid-js project setup with their basic Vite template. I enabled experimental decorators with babel and was able to successfully use the @reactive decorator. However, whenever I try to use the @component decorator I get the following error:

A class descriptor's .kind property must be "class", but a decorator created a class descriptor with .kind "undefined"

I was able to solve the problem by exporting the class and wrapping it inside the component function like such:

export default component(Home)
Home being the class name