@safe-engine/pixi 8.4.7 → 8.5.1

package/src/planck/PhysicsComponent.ts

@@ -1,83 +0,0 @@
-import { Body, BodyType, Vec2 } from 'planck'
-
-import { NoRenderComponentX } from '../components/BaseComponent'
-import { PhysicsSprite } from './PhysicsSprite'
-
-interface RigidBodyProps {
-  type?: BodyType
-  density?: Float
-  restitution?: Float
-  friction?: Float
-  gravityScale?: Float
-}
-export class RigidBody extends NoRenderComponentX<RigidBodyProps> {
-  body: Body
-  // set linearVelocity(vel: Vec2) {
-  //   if (!this.node) {
-  //     return
-  //   }
-  //   const physics = this.node.instance
-  //   if (physics instanceof Sprite) {
-  //     physics.getBody().setVel(vel)
-  //   }
-  // }
-
-  // get linearVelocity() {
-  //   if (!this.node) {
-  //     return Vec2.ZERO
-  //   }
-  //   const physics = this.node.instance
-  //   const vel = (physics as Sprite).getBody().getVel()
-  //   return v2(vel)
-  // }
-}
-
-interface PhysicsMaterialProps {
-  friction?: number
-  restitution?: number
-  density?: number
-}
-export class PhysicsMaterial extends NoRenderComponentX<PhysicsMaterialProps> {
-
-}
-
-interface ColliderPhysicsProps {
-  tag?: number
-  group?: number
-  offset?: Vec2
-  onCollisionEnter?: (other: PhysicsCollider) => void
-  onCollisionExit?: (other: PhysicsCollider) => void
-  onCollisionStay?: (other: PhysicsCollider) => void
-}
-
-export class PhysicsCollider<T extends ColliderPhysicsProps = ColliderPhysicsProps> extends NoRenderComponentX<T, PhysicsSprite['node']> {
-  enabled = true
-  instance: PhysicsSprite
-}
-
-interface BoxColliderPhysicsProps extends ColliderPhysicsProps {
-  width: number
-  height: number
-}
-export class PhysicsBoxCollider extends PhysicsCollider<BoxColliderPhysicsProps> {
-
-  // set onCollisionEnter(val) {
-  //   const phys1 = this.getComponent(PhysicsCollider)
-  //   phys1._onCollisionEnter = val
-  // }
-
-  // get onCollisionEnter() {
-  //   const phys1 = this.getComponent(PhysicsCollider)
-  //   return phys1._onCollisionEnter
-  // }
-}
-interface CircleColliderPhysicsProps extends ColliderPhysicsProps {
-  radius: number
-}
-export class PhysicsCircleCollider extends PhysicsCollider<CircleColliderPhysicsProps> {
-}
-interface PolygonColliderPhysicsProps extends ColliderPhysicsProps {
-  points: Array<Vec2>
-}
-export class PhysicsPolygonCollider extends PhysicsCollider<PolygonColliderPhysicsProps> {
-}

package/src/planck/PhysicsSprite.ts

@@ -1,43 +0,0 @@
-import { Container } from 'pixi.js'
-import { Body, Vec2 } from 'planck'
-
-export class PhysicsSprite {
-  node: Container
-  physicsBody: Body
-
-  constructor(node: Container, body: Body) {
-    this.node = node
-    this.physicsBody = body
-  }
-
-  set position(val: Vec2) {
-    this.physicsBody.setPosition(val)
-  }
-
-  set x(val) {
-    this.physicsBody.setPosition(Vec2(val, this.y))
-  }
-  set y(val) {
-    this.physicsBody.setPosition(Vec2(this.x, val))
-  }
-
-  get x() {
-    return this.physicsBody.getPosition().x
-  }
-
-  get y() {
-    return this.physicsBody.getPosition().x
-  }
-
-  set angle(val: number) {
-    this.physicsBody.setAngle(val)
-  }
-
-  get angle() {
-    return this.physicsBody.getAngle()
-  }
-
-  addChild(child: Container) {
-    this.node.addChild(child)
-  }
-}

package/src/planck/PhysicsSystem.ts

@@ -1,201 +0,0 @@
-import {
-  Entity,
-  EntityManager,
-  EventManager,
-  EventTypes,
-  System
-} from 'entityx-ts'
-import { Body, Box, Contact, Fixture, Manifold, Shape, Vec2, World } from 'planck'
-
-import { Graphics } from 'pixi.js'
-import { GameWorld, instantiate } from '../base'
-import { NodeComp } from '../components/NodeComp'
-import {
-  PhysicsBoxCollider,
-  PhysicsCircleCollider,
-  PhysicsCollider,
-  PhysicsPolygonCollider,
-  RigidBody,
-} from './PhysicsComponent'
-import { PhysicsSprite } from './PhysicsSprite'
-
-Fixture.prototype.shouldCollide = function (other) {
-  const nodeThis: NodeComp = this.getBody().getUserData()
-  const nodeOther = other.getBody().getUserData() as NodeComp
-  const { colliderMatrix } = GameWorld.Instance.systems.get(PhysicsSystem)
-  return colliderMatrix[nodeOther.group][nodeThis.group]
-}
-
-export function setColliderMatrix(colliderMatrix = [[true]]) {
-  const physicsSystem = GameWorld.Instance.systems.get(PhysicsSystem)
-  physicsSystem.colliderMatrix = colliderMatrix
-}
-
-export class PhysicsSystem implements System {
-  world: World
-  listRemoveBody: Body[] = []
-  listRemoveShape: Shape[] = []
-  colliderMatrix = [[true]]
-
-  configure(event_manager: EventManager) {
-    this.world = new World({
-      gravity: Vec2(0, 98.0),
-    })
-    // event_manager.world.physicsManager = this
-    // event_manager.subscribe(ComponentAddedEvent(RigidBody), this);
-    event_manager.subscribe(EventTypes.ComponentAdded, PhysicsBoxCollider, ({ entity, component }) => {
-      console.log('ComponentAddedEvent PhysicsBoxCollider', component)
-      let rigidBody = entity.getComponent(RigidBody)
-      if (!rigidBody) {
-        rigidBody = instantiate(RigidBody)
-        entity.assign(rigidBody)
-      }
-      const { type = 'dynamic', gravityScale = 1 } = rigidBody.props
-      // const physicsMaterial = entity.getComponent(PhysicsMaterial)
-      const box = component
-      const node = entity.getComponent(NodeComp)
-      const { width, height, ...colliderProps } = box.props
-      // ett.assign(instantiate(PhysicsCollider, { tag, offset }))
-      // const { density, restitution, friction } = physicsMaterial
-      const { x = 0, y = 0 } = colliderProps.offset || {}
-      const body = this.world.createBody({
-        position: { x: node.position.x + x, y: node.position.y + y }, // the body's origin position.
-        angle: 0.25 * Math.PI, // the body's angle in radians.
-        userData: node,
-        type,
-        gravityScale,
-      })
-      rigidBody.body = body
-      // console.log('body', body);
-      // body.setMassData({ mass: 1 } as any)
-      const physicsNode = new PhysicsSprite(node.instance, body)
-      const shape = new Box(width, height)
-      body.createFixture({
-        shape,
-        density: 1,
-        isSensor: true,
-      })
-      const debugBox = new Graphics()
-      debugBox.rect(x, y, width, height)
-      debugBox.fill({ color: 0xff0000, alpha: 0.3 })
-      node.instance.addChild(debugBox)
-      const physicsCollide = entity.assign(instantiate(PhysicsCollider, colliderProps))
-      physicsCollide.instance = physicsNode
-      physicsCollide.node = node
-      box.node = node
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, (PhysicsCircleCollider), () => { })
-    event_manager.subscribe(EventTypes.ComponentAdded, (PhysicsPolygonCollider), () => { })
-    event_manager.subscribe(EventTypes.ComponentRemoved, (NodeComp), () => {
-      // log('ComponentRemovedEvent NodeComp', event);
-      // const node = event.entity.getComponent(NodeComp)
-      // if (node.instance instanceof Sprite) {
-      //   const body = node.instance.getBody()
-      //   this.listRemoveShape.push(...body.shapeList)
-      //   this.listRemoveBody.push(body)
-      // }
-    })
-    this.world.on('begin-contact', this.contactBegin.bind(this))
-    this.world.on('end-contact', this.contactEnd.bind(this))
-    this.world.on('pre-solve', this.preSolve.bind(this))
-    this.world.on('post-solve', this.postSolve.bind(this))
-  }
-
-  update(entities: EntityManager, events: EventManager, dt: number) {
-    if (this.world) {
-      this.world.step(dt)
-
-      // Iterate over bodies
-      for (let body = this.world.getBodyList(); body; body = body.getNext()) {
-        this.renderBody(body)
-        // ... and fixtures
-        for (let fixture = body.getFixtureList(); fixture; fixture = fixture.getNext()) {
-          this.renderFixture(fixture)
-        }
-      }
-
-      // Iterate over joints
-      for (let joint = this.world.getJointList(); joint; joint = joint.getNext()) {
-        this.renderJoint(joint)
-      }
-    }
-  }
-
-  renderBody(body: Body) {
-    // Render or update body rendering
-    const ett = body.getUserData() as NodeComp
-    const collider = ett.getComponent(PhysicsCollider)
-    if (collider) {
-      collider.instance.node.position = body.getPosition()
-      collider.instance.angle = body.getAngle()
-      // console.log('renderBody body', body.getPosition())
-    }
-  }
-
-  renderFixture(fixture: Fixture) {
-    // Render or update fixture rendering
-    // const shape = fixture.getShape()
-    // console.log('renderFixture shape', shape.m_type)
-  }
-
-  renderJoint(joint) {
-    // Render or update joint rendering
-  }
-
-  contactBegin(contact: Contact) {
-    console.log('contactBegin');
-    const ett1: NodeComp = contact.getFixtureA().getBody().getUserData() as NodeComp
-    const ett2: NodeComp = contact.getFixtureB().getBody().getUserData() as NodeComp
-    // this.world.addPostStepCallback(() => {
-    //   // log('addPostStepCallback');
-    //   this.listRemoveShape.forEach((s) => this.world.removeShape(s))
-    //   this.listRemoveBody.forEach((b) => this.world.removeBody(b))
-    //   this.listRemoveBody = []
-    //   this.listRemoveShape = []
-    // })
-    const phys1 = ett1.getComponent(PhysicsCollider)
-    const phys2 = ett2.getComponent(PhysicsCollider)
-    if (phys1 && phys2) {
-      if (Object.prototype.hasOwnProperty.call(phys1, 'onCollisionEnter')) {
-        phys1.props.onCollisionEnter(phys2)
-      }
-      if (Object.prototype.hasOwnProperty.call(phys2, 'onCollisionEnter')) {
-        phys2.props.onCollisionEnter(phys1)
-      }
-    }
-  }
-
-  preSolve(contact: Contact, oldManifold: Manifold) {
-    console.log('preSolve');
-  }
-
-  postSolve(contact: Contact, contactImpulse) {
-    console.log('collisionPost');
-  }
-
-  contactEnd(contact: Contact) {
-    console.log('collisionSeparate');
-    const ett1: Entity = contact.getFixtureA().getBody().getUserData() as Entity
-    const ett2: Entity = contact.getFixtureB().getBody().getUserData() as Entity
-    // const event1 = ett1.getComponent(NodeComp)
-    const phys1 = ett1.getComponent(PhysicsCollider)
-    const phys2 = ett2.getComponent(PhysicsCollider)
-    // const event2 = ett2.getComponent(NodeComp)
-    if (phys1 && phys2) {
-      if (Object.prototype.hasOwnProperty.call(phys1, 'onCollisionExit')) {
-        phys1.props.onCollisionExit(phys2)
-      }
-      if (Object.prototype.hasOwnProperty.call(phys2, 'onCollisionExit')) {
-        phys2.props.onCollisionExit(phys1)
-      }
-    }
-  }
-
-  set enabled(val) {
-    if (val) {
-      this.world.setGravity(Vec2(0, 98))
-      // this.world.iterations = 60
-      // this.world.collisionSlop = 0.5
-    }
-  }
-}

package/src/planck/index.ts

@@ -1,3 +0,0 @@
-export * from './PhysicsComponent'
-export * from './PhysicsSprite'
-export * from './PhysicsSystem'

package/src/render/RenderComponent.ts

@@ -1,132 +0,0 @@
-import { Graphics, Sprite, Texture } from 'pixi.js'
-
-import { BaseComponentProps, Color4B, Vec2 } from '..'
-import { ComponentX } from '../components/BaseComponent'
-import { LoadingBarMode } from '../core/LoadingBar'
-import { SpriteTypes } from './RenderSystem'
-
-export class NodeRender extends ComponentX {
-  nodeName?: string
-}
-
-interface SpriteRenderProps extends BaseComponentProps<SpriteRender> {
-  spriteFrame: string
-  type?: SpriteTypes
-  fillType?: LoadingBarMode
-  // fillRange = 1
-  // fillCenter: Point
-  // loadingBar: LoadingBar
-}
-
-export class SpriteRender extends ComponentX<SpriteRenderProps, Sprite> {
-  // protected _spriteFrame: string
-  // set fillStart(val: number) {
-  //   if (this.node.instance instanceof cc.ProgressTimer) {
-  //     this.node.instance.setMidpoint(cc.v2(val, val));
-  //   }
-  // }
-
-  // setFillRange(val: number) {
-  //   if (this.loadingBar) {
-  //     this.loadingBar.progress = val
-  //   }
-  // }
-
-  get spriteFrame() {
-    return this.props.spriteFrame
-  }
-
-  set spriteFrame(frame) {
-    this.props.spriteFrame = frame
-    if (!this.node) return
-    const sprite = this.node.instance as Sprite
-    // if (this.node.instance instanceof cc.Sprite) {
-    sprite.texture = Texture.from(frame)
-    // sprite.texture.rotate = 8
-    // } else if (this.node.instance instanceof ccui.ImageView) {
-    //   if (this.texType) {
-    //     this.node.instance.loadTexture(frame, this.texType);
-    //   } else {
-    //     this.node.instance.loadTexture(frame);
-    //   }
-    //   const sprite = new cc.Sprite(frame);
-    //   this.node.setContentSize(sprite.getContentSize());
-    // } else if (this.node.instance instanceof ccui.Button) {
-    //   this.node.instance.loadTextureNormal(frame);
-    // }
-  }
-}
-enum PointType {
-  Circle,
-  Rect,
-}
-interface GraphicsRenderProps extends BaseComponentProps<GraphicsRender> {
-  lineWidth?: number
-  strokeColor?: Color4B
-  fillColor?: Color4B
-}
-export class GraphicsRender extends ComponentX<GraphicsRenderProps, Graphics> {
-  drawPoint(position: Vec2, pointSize: Float, color: Color4B, pointType = PointType.Rect) { }
-  // drawPoints(points: Vec2[], color: Color4B) {
-  // }
-  drawLine(origin: Vec2, destination: Vec2, color: Color4B, thickness: Float) { }
-  drawRect(origin: Vec2, destination: Vec2, color: Color4B) {
-    const { x, y } = origin
-    const width = destination.x - x
-    const height = destination.y - y
-    this.node.instance.rect(x, y, width, height)
-    this.node.instance.fill(color)
-  }
-  drawSolidRect(origin: Vec2, destination: Vec2, color: Color4B) { }
-  drawCircle(
-    center: Vec2,
-    radius: Float,
-    angle?: Float,
-    segments?: Integer,
-    drawLineToCenter?: boolean,
-    scaleX?: Float,
-    scaleY?: Float,
-    color?: Color4B,
-    thickness?: Float,
-  ) {
-    const { x, y } = center
-    this.node.instance.circle(x, y, radius)
-    this.node.instance.fill(color)
-  }
-  drawSolidCircle(origin: Vec2, destination: Vec2, color: Color4B) { }
-  drawQuadBezier(origin: Vec2, destination: Vec2, color: Color4B) { }
-  drawCubicBezier(origin: Vec2, destination: Vec2, color: Color4B) { }
-  drawCardinalSpline(points: Vec2[], color: Color4B) { }
-  drawCatmullRom(points: Vec2[], color: Color4B) { }
-  drawPoly(points: Vec2[], color?: Color4B, thickness?: Float) {
-    this.node.instance.poly(points, true)
-    this.node.instance.fill(color || this.props.fillColor)
-  }
-  drawSolidPoly(points: Vec2[], color: Color4B) { }
-  drawDot(points: Vec2[], color: Color4B) { }
-  drawSegment(from: Vec2, to: Vec2, thickness?: Float, color?: Color4B) {
-    this.node.instance.moveTo(from.x, from.y)
-    this.node.instance.lineTo(to.x, to.y)
-    this.node.instance.strokeStyle = {
-      cap: 'round',
-      join: 'round',
-      width: thickness || this.props.lineWidth || 36,
-      color: color || this.props.strokeColor,
-    }
-    this.node.instance.stroke()
-  }
-  drawTriangle(p1: Vec2, p2: Vec2, p3: Vec2, color: Color4B) {
-    this.node.instance.poly([p1, p2, p3], true)
-    this.node.instance.fill(color)
-  }
-  clear() {
-    this.node.instance.clear()
-  }
-}
-
-interface MaskRenderProps extends BaseComponentProps<MaskRender>{
-  type?: number
-  segments?: number
-  inverted?: boolean
-}
-export class MaskRender extends ComponentX<MaskRenderProps> { }

package/src/render/RenderSystem.ts

@@ -1,64 +0,0 @@
-import { EventManager, EventTypes, System } from 'entityx-ts'
-import { Container, Graphics, Sprite } from 'pixi.js'
-
-import { NodeComp } from '..'
-import { GraphicsRender, MaskRender, NodeRender, SpriteRender } from './RenderComponent'
-
-export enum SpriteTypes {
-  SIMPLE,
-  SLICED,
-  TILED,
-  FILLED,
-  MESH,
-  ANIMATION,
-}
-
-export class RenderSystem implements System {
-  configure(event_manager: EventManager) {
-    event_manager.subscribe(EventTypes.ComponentAdded, NodeRender, ({ entity }) => {
-      const nodeRenderComp = entity.getComponent(NodeRender)
-      const node = new Container()
-      nodeRenderComp.node = entity.assign(new NodeComp(node, entity))
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, SpriteRender, ({ entity, component }) => {
-      const { spriteFrame } = component.props
-      // const texture = GameWorld.Instance.assetManager.get<Texture>(spriteFrame)
-      // console.log('SpriteRender ComponentAdded', component, texture)
-      const node = Sprite.from(spriteFrame)
-      // if (type === SpriteTypes.FILLED) {
-      //   // console.log('fillType', fillType)
-      //   const loadingBar = new LoadingBar(fillType, node)
-      //   if (fillRange) loadingBar.progress = fillRange
-      //   if (fillCenter) loadingBar.fillCenter = fillCenter
-      //   component.loadingBar = loadingBar
-      //   // node.setMidpoint(fillCenter)
-      // }
-      // node.texture.rotate = 8
-      component.node = entity.assign(new NodeComp(node, entity))
-      // component.node.anchorX = 0.5
-      // component.node.anchorY = 0.5
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, MaskRender, ({ component }) => {
-      console.log('MaskRender', component)
-      // const { type, segments, inverted } = maskComp
-      // const node = new cc.ClippingNode()
-      // node.setInverted(inverted)
-      // maskComp.node = ett.assign(new NodeComp(node, ett))
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, GraphicsRender, ({ entity, component }) => {
-      // const { lineWidth, strokeColor, fillColor } = component.props
-      // console.log('GraphicsRender', component);
-      const node = new Graphics()
-      component.node = entity.assign(new NodeComp(node, entity))
-    })
-    event_manager.subscribe(EventTypes.ComponentRemoved, NodeComp, ({ component }) => {
-      if (component) {
-        component.instance.removeFromParent()
-      }
-    })
-  }
-
-  // update() {
-  // throw new Error('Method not implemented.');
-  // }
-}

package/src/richtext/RichTextComp.ts

@@ -1,50 +0,0 @@
-import TaggedText from 'pixi-tagged-text-plus'
-import { BaseComponentProps } from '..'
-import { ComponentX } from '../components/BaseComponent'
-import {
-  generateStringFromStyledElements,
-  generateStylesFromStyledElements,
-  parseFontString,
-  transformToStyledElements,
-} from './html-text-parser'
-
-interface RichTextCompProps extends BaseComponentProps<RichTextComp> {
-  font?: string
-  string?: string
-  size?: number
-}
-
-export class RichTextComp extends ComponentX<RichTextCompProps, TaggedText> {
-  get string() {
-    return this.props.string
-  }
-
-  set string(val: string) {
-    this.props.string = val
-    if (!this.node) return
-    const jObj = parseFontString(val)
-    const styledOutput = transformToStyledElements(jObj)
-    const newText = generateStringFromStyledElements(styledOutput)
-    const styles = generateStylesFromStyledElements(styledOutput)
-    // console.log(styledOutput)
-    const wrapped = `<root>${newText}</root>`
-    this.node.instance.setText(wrapped)
-    this.node.instance.setTagStyles(styles)
-  }
-  get size() {
-    return this.props.size
-  }
-  set size(size: number) {
-    this.props.size = size
-    if (!this.node) return
-    this.node.instance.setStyleForTag('root', { fontSize: size, color: '#fff' })
-  }
-  get font() {
-    return this.props.font
-  }
-  set font(font: string) {
-    this.props.font = font
-    if (!this.node) return
-    this.node.instance.setStyleForTag('root', { color: '#fff', fontFamily: font })
-  }
-}

package/src/richtext/RichTextSystem.ts

@@ -1,26 +0,0 @@
-import { EntityManager, EventManager, EventReceiveCallback, EventTypes, System } from 'entityx-ts'
-
-import TaggedText from 'pixi-tagged-text-plus'
-import { NodeComp } from '..'
-import { RichTextComp } from './RichTextComp'
-
-export class RichTextSystem implements System {
-  configure(event_manager: EventManager) {
-    event_manager.subscribe(EventTypes.ComponentAdded, RichTextComp, this.onAddRichTextComp)
-  }
-
-  private onAddRichTextComp: EventReceiveCallback<RichTextComp> = ({ entity, component }) => {
-    const { string = '', font = '', size = 64 } = component.props
-    const node = new TaggedText(string);
-    // node.defaultStyle = { }
-    component.node = entity.assign(new NodeComp(node, entity))
-    component.string = (string)
-    if (font) component.font = (font)
-    if (size) component.size = (size)
-  }
-
-  update(entities: EntityManager, events: EventManager, dt: number)
-  update() {
-    // throw new Error('Method not implemented.');
-  }
-}

package/src/richtext/html-text-parser.ts

@@ -1,87 +0,0 @@
-interface FontTag {
-  color?: string;
-  size?: number;
-  text: string;
-}
-
-type ParsedResult = FontTag[];
-
-type StyledElement = {
-  tag?: string;
-  style?: { color?: string; size?: number };
-  text: string;
-};
-
-export function parseFontString(input: string): ParsedResult {
-  const regex = /<font\s+color=['"](#?[0-9a-fA-F]{6})['"](?:\s+size=(\d+))?>(.*?)<\/font>/gi;
-  const results: ParsedResult = [];
-  let lastIndex = 0;
-
-  let match: RegExpExecArray | null;
-  while ((match = regex.exec(input)) !== null) {
-    // Add plain text before the match if it exists
-    if (match.index > lastIndex) {
-      const plainText = input.slice(lastIndex, match.index)
-      if (plainText) {
-        results.push({ text: plainText });
-      }
-    }
-
-    const color = match[1];
-    const size = match[2] ? parseInt(match[2], 10) : undefined;
-    const text = match[3];
-
-    results.push({ color, size, text });
-
-    lastIndex = regex.lastIndex;
-  }
-
-  // Add remaining plain text after the last match
-  if (lastIndex < input.length) {
-    const plainText = input.slice(lastIndex);
-    if (plainText) {
-      results.push({ text: plainText });
-    }
-  }
-
-  return results;
-}
-
-export function transformToStyledElements(parsed: ParsedResult): StyledElement[] {
-  return parsed.map((item, index) => {
-    if (item.color || item.size) {
-      return {
-        tag: `b${index + 1}`,
-        style: { color: item.color, size: item.size },
-        text: item.text,
-      };
-    }
-    return {
-      text: item.text,
-    };
-  });
-}
-
-export function generateStringFromStyledElements(elements: StyledElement[]): string {
-  return elements
-    .map((element) => {
-      if (!element.tag) {
-        return element.text;
-      }
-      return `<${element.tag}>${element.text}</${element.tag}>`;
-    })
-    .join('');
-}
-
-export function generateStylesFromStyledElements(elements: StyledElement[]) {
-  const styles = {};
-  elements
-    .forEach((element) => {
-      const { tag, style } = element
-      if (!tag) {
-        return;
-      }
-      styles[element.tag] = style
-    })
-  return styles
-}