support HTMLText component

.changeset/smooth-llamas-destroy.md

@@ -0,0 +1,5 @@
+---
+'svelte-pixi': patch
+---
+
+support HTMLText component

docs/src/content/docs/api/components/assets-loader.mdx

@@ -1,5 +1,7 @@
 ---
 title: AssetsLoader
+sidebar:
+  badge: 'New'
 ---
 
 Creates and loads assets using [PIXI.Assets](https://pixijs.download/release/docs/PIXI.Assets.html) by creating a bundle from the `assets` prop.

docs/src/content/docs/api/components/html-text.mdx

@@ -0,0 +1,24 @@
+---
+title: HTMLText
+pixi: https://pixijs.download/release/docs/HTMLText.html
+sidebar:
+  badge: 'New'
+---
+
+Renders text with support for styling via HTML tags. The rendering can vary across browsers and platforms. 
+
+## Usage
+
+```svelte live
+<script>
+  import { HTMLText } from 'svelte-pixi'
+</script>
+
+<HTMLText
+  text="<strong>Hello</strong> <em>World</em>"
+  anchor={0.5}
+  style={{
+    fill: 'white'
+  }}
+/>
+```

src/lib/HTMLText.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  /**
+   * @restProps {Container}
+   */
+  import * as PIXI from 'pixi.js'
+
+  import { createApplyProps } from './util/props'
+  import Container from './Container.svelte'
+  import { afterUpdate } from 'svelte'
+  import { getRenderer } from './Renderer.svelte'
+  import type { PointLike } from './util/data-types'
+
+  type T = $$Generic<PIXI.HTMLText>
+  type $$Props = Container<T>['$$prop_def'] & {
+    text: PIXI.HTMLText['text']
+    style?: PIXI.IHTMLTextStyle
+    anchor?: PointLike
+    blendMode?: PIXI.Sprite['blendMode']
+    pluginName?: PIXI.Sprite['pluginName']
+    roundPixels?: PIXI.Sprite['roundPixels']
+  }
+
+  /**
+   * The text to display
+   *
+   * @type {string}
+   */
+  export let text: $$Props['text']
+
+  /**
+   * Sets the style of the text
+   *
+   * @type {PIXI.HTMLTextStyle}
+   */
+  export let style: $$Props['style'] = undefined
+
+  /**
+   * The anchor sets the origin point of the text.
+   *
+   * @type {PointLike}
+   */
+  export let anchor: $$Props['anchor'] = undefined
+
+  /**
+   * The blend mode to be applied to the sprite.
+   * Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.
+   */
+  export let blendMode: $$Props['blendMode'] = PIXI.BLEND_MODES.NORMAL
+
+  /**
+   * Plugin that is responsible for rendering this element.
+   *
+   * @type {string}
+   */
+  export let pluginName: $$Props['pluginName'] = undefined
+
+  /**
+   * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.
+   * Advantages can include sharper image quality (like text) and faster rendering on canvas.
+   * The main disadvantage is movement of objects may appear less smooth.
+   *
+   * @type {boolean}
+   */
+  export let roundPixels: $$Props['roundPixels'] = undefined
+
+  /**
+   * The PIXI.Text instance. Can be set or bound to.
+   *
+   * @type {PIXI.HTMLText}
+   */
+  export let instance: T = new PIXI.HTMLText(text, style as any) as T
+
+  const { invalidate } = getRenderer()
+  const { applyProp } = createApplyProps<PIXI.HTMLText>(instance)
+
+  afterUpdate(() => {
+    invalidate()
+  })
+
+  $: applyProp('text', text)
+  $: applyProp('style', style)
+  $: applyProp('anchor', anchor)
+  $: applyProp('blendMode', blendMode)
+  $: applyProp('pluginName', pluginName)
+  $: applyProp('roundPixels', roundPixels)
+</script>
+
+<Container
+  {...$$restProps}
+  {instance}
+  on:create
+  on:click
+  on:globalmousemove
+  on:globalpointermove
+  on:globaltouchmove
+  on:mousedown
+  on:mousemove
+  on:mouseout
+  on:mouseover
+  on:mouseup
+  on:mouseupoutside
+  on:mouseupoutside
+  on:pointercancel
+  on:pointerdown
+  on:pointermove
+  on:pointerout
+  on:pointerover
+  on:pointertap
+  on:pointerup
+  on:pointerupoutside
+  on:removedFrom
+  on:rightclick
+  on:rightdown
+  on:rightup
+  on:rightupoutside
+  on:tap
+  on:touchcancel
+  on:touchend
+  on:touchendoutside
+  on:touchmove
+  on:touchstart
+  on:added
+  on:removed
+>
+  <slot />
+</Container>

src/lib/index.ts

@@ -1,5 +1,6 @@
 import 'pixi.js'
 export { default as AnimatedSprite } from './AnimatedSprite.svelte'
+export { default as AssetsLoader } from './AssetsLoader.svelte'
 export { default as Application, getApp } from './Application.svelte'
 export { default as BitmapText } from './BitmapText.svelte'
 export {
@@ -8,7 +9,7 @@ export {
   getStage,
 } from './Container.svelte'
 export { default as Graphics } from './Graphics.svelte'
-export { default as AssetsLoader } from './AssetsLoader.svelte'
+export { default as HTMLText } from './HTMLText.svelte'
 export { default as Mesh } from './Mesh.svelte'
 export { default as NineSlicePlane } from './NineSlicePlane.svelte'
 export { default as ParticleContainer } from './ParticleContainer.svelte'