Suggest for implementing P.tsx

[SonyStone]

Hello I have recently been exploring the possibility of integrating PixiJS into my SolidJS application and have been exploring this library. I was a little confused by import * as pixi from ‘pixi.js’ for tree shaking, and I thought I would suggest this option for implementing pixijs components: https://github.com/sammccord/solid-pixi/blob/main/packages/solid-pixi/src/P.tsx

// packages/solid-pixi/src/P.tsx
import {
  AnimatedSprite as _AnimatedSprite,
  BitmapText as _BitmapText,
  Container as _Container,
  Culler as _Culler,
  Graphics as _Graphics,
  HTMLText as _HTMLText,
  Mesh as _Mesh,
  MeshGeometry as _MeshGeometry,
  MeshPlane as _MeshPlane,
  MeshRope as _MeshRope,
  MeshSimple as _MeshSimple,
  NineSliceGeometry as _NineSliceGeometry,
  NineSliceSprite as _NineSliceSprite,
  Particle as _Particle,
  ParticleContainer as _ParticleContainer,
  PerspectiveMesh as _PerspectiveMesh,
  PerspectivePlaneGeometry as _PerspectivePlaneGeometry,
  PlaneGeometry as _PlaneGeometry,
  RenderContainer as _RenderContainer,
  RenderLayer as _RenderLayer,
  RopeGeometry as _RopeGeometry,
  Sprite as _Sprite,
  Text as _Text,
  TilingSprite as _TilingSprite,
  type AnimatedSpriteOptions,
  type ContainerOptions,
  type GraphicsOptions,
  type HTMLTextOptions,
  type MeshGeometryOptions,
  type MeshOptions,
  type MeshPlaneOptions,
  type MeshRopeOptions,
  type NineSliceGeometryOptions,
  type NineSliceSpriteOptions,
  type ParticleContainerOptions,
  type ParticleOptions,
  type PerspectivePlaneGeometryOptions,
  type PerspectivePlaneOptions,
  type PlaneGeometryOptions,
  type RenderContainerOptions,
  type RenderLayerOptions,
  type RopeGeometryOptions,
  type SimpleMeshOptions,
  type SpriteOptions,
  type TextOptions,
  type TilingSpriteOptions
} from 'pixi.js';
import { JSX, splitProps, type Ref } from 'solid-js';
import { CommonPropKeys } from './interfaces';
import { insert, spread } from './runtime';

function createPixiComponent<T, O>(PixiComponent: new (options: O) => T) {
  return function (props: Omit<Partial<O>, 'children'> & { children?: JSX.Element; as?: T; ref?: Ref<T> }) {
    const [common, pixis] = splitProps(props, CommonPropKeys);

    const as = common.as || new PixiComponent(pixis as O);
    spread(as, pixis);
    insert(as, () => common.children);
    return as as T & JSX.Element;
  };
}

export const Container = createPixiComponent<_Container, ContainerOptions>(_Container);
export const Sprite = createPixiComponent<_Sprite, SpriteOptions>(_Sprite);
export const Graphics = createPixiComponent<_Graphics, GraphicsOptions>(_Graphics);
export const Text = createPixiComponent<_Text, TextOptions>(_Text);
export const AnimatedSprite = createPixiComponent<_AnimatedSprite, AnimatedSpriteOptions>(_AnimatedSprite);
export const BitmapText = createPixiComponent<_BitmapText, TextOptions>(_BitmapText);
export const Culler = createPixiComponent<_Culler, unknown>(_Culler);
export const HTMLText = createPixiComponent<_HTMLText, HTMLTextOptions>(_HTMLText);
export const Mesh = createPixiComponent<_Mesh, MeshOptions>(_Mesh);
export const MeshGeometry = createPixiComponent<_MeshGeometry, MeshGeometryOptions>(_MeshGeometry);
export const MeshPlane = createPixiComponent<_MeshPlane, MeshPlaneOptions>(_MeshPlane);
export const MeshRope = createPixiComponent<_MeshRope, MeshRopeOptions>(_MeshRope);
export const MeshSimple = createPixiComponent<_MeshSimple, SimpleMeshOptions>(_MeshSimple);
export const NineSliceGeometry = createPixiComponent<_NineSliceGeometry, NineSliceGeometryOptions>(_NineSliceGeometry);
export const NineSliceSprite = createPixiComponent<_NineSliceSprite, NineSliceSpriteOptions>(_NineSliceSprite);
export const Particle = createPixiComponent<_Particle, ParticleOptions>(_Particle);
export const ParticleContainer = createPixiComponent<_ParticleContainer, ParticleContainerOptions>(_ParticleContainer);
export const PerspectiveMesh = createPixiComponent<_PerspectiveMesh, PerspectivePlaneOptions>(_PerspectiveMesh);
export const PerspectivePlaneGeometry = createPixiComponent<_PerspectivePlaneGeometry, PerspectivePlaneGeometryOptions>(
  _PerspectivePlaneGeometry
);
export const PlaneGeometry = createPixiComponent<_PlaneGeometry, PlaneGeometryOptions>(_PlaneGeometry);
export const RenderContainer = createPixiComponent<_RenderContainer, RenderContainerOptions>(_RenderContainer);
export const RenderLayer = createPixiComponent<InstanceType<typeof _RenderLayer>, RenderLayerOptions>(_RenderLayer);
export const RopeGeometry = createPixiComponent<_RopeGeometry, RopeGeometryOptions>(_RopeGeometry);
export const TilingSprite = createPixiComponent<_TilingSprite, TilingSpriteOptions>(_TilingSprite);

It's should help bundler with tree shaking (I hope so)

And it will be passable to use Pixi Components without P prefix

export function CharacterUI(
  props: Partial<{ name: string; layer: ReturnType<typeof RenderLayer> }> & ContainerOptions
) {
  const padding = 10;
  const label = (
    <Text text={props.name} resolution={2} style={{ fontSize: 16, fill: 0x000000 }} anchor={0.5} />
  ) as ReturnType<typeof Text>;

  return (
    <Container
      ref={(ref) => {
        useAttachToRenderLayer(ref, { layer: props.layer });
      }}
      {...props}
    >
      <Graphics
        ref={(bg) => {
          bg.roundRect(
            -label.width / 2 - padding,
            -label.height / 2 - padding,
            label.width + padding * 2,
            label.height + padding * 2,
            20
          ).fill({ color: 0xffff00, alpha: 1 });
        }}
      />
      {label}
    </Container>
  );
}

What do you think?