Components, KubeJS and you!

In 1.18.2 and beyond KubeJS uses Components in a lot of places. It returns them for entity names, item names and accepts them for everything from tooltips to sending messages to players.

All examples use event.player.tell from the player.chat event to output their example, but they will with anywhere that accepts a Component!

Making your own Components starts from the ComponentWrapper class, invokable with just Component or Text from anywhere. The examples all use Component but Text works just the same.

ComponentWrapper methods:

A list of colors accepted in various places:

• black
• darkBlue
• darkGreen
• darkAqua
• darkRed
• darkPurple
• gold
• gray
• darkGray
• blue
• green
• aqua
• red
• lightPurple
• yellow
• white

Basic examples:

onEvent('player.chat', event => {
  // Tell the player a normal message
  event.player.tell(Component.string('Hello world'))
  // Now in black
  event.player.tell(Component.black('Welcome to the dark side, we have cookies!'))
  // Tell them the diamond item, in whatever language they have set
  event.player.tell(Component.translate('item.minecraft.diamond'))
  // Now tell them whatever key they have crouching set to
  event.player.tell(Component.keybind('key.sneak'))
  // And finally show them the nbt data of the item they are holding
  event.player.tell(Component.prettyPrintNbt(event.player.mainHandItem.nbt))
})

MutableComponent

These are methods you can call on any MutableComponent. This includes ComponentKJS, which is a KubeJS extension for vanilla's components and is injected into vanillas code on runtime. All methods from ComponentKJS are included, but only relevant ones from vanilla are included.

More complex examples:

// First a prefix, like a rank. This won't be changing so we can just declare it up here.
const prefix = Component.darkRed('[Admin]').underlined()

onEvent('player.chat', event => {
  
  // First cancel the event because we are going to be sending the message ourselves
  event.cancel()
  
  // The main Component we will be adding stuff to. It is just a copy of the prefix component for now
  let component = prefix.copy() // If we didn't copy it all the modifications we made to it would be applied to the original as well!
  
  // Make a component of the players name and then surround with < > and make it white again. Then append it our main copmponent.
  // A component will inherit any styiling it doesnt have from whatever it has been .append()ed to, so you need to apply formatting	rather liberally some times!
  let playerName = Component.string(event.getUsername())
  // Doing it this way means we only have to apply the white formatting and no underline once to the name
  let nameComponent = Component.white(' <').underlined(false).append(playerName).append('> ')
  component.append(nameComponent)
  
  // Finnally add the message (obfuscated, of course) and send it!
  // We make sure to set its color and underline though, otherwise it will end up inheriting the red and underline from the prefix!
  component.append(Component.string(event.message).obfuscated().white().underlined(false))
  event.server.tell(component)
  
})