Fusion

Cómo Proporcionar la Biblioteca

Para proporcionar tu biblioteca, necesitarás agregar las siguientes entradas a la tabla de tu historia:

Indice	Tipo	Descripión
fusion   Obligatorio	Fusion	La biblioteca de Fusion que será utilizada

Cómo Renderizar Historias

Las historias de Fusion ejecutaran la función story una única vez.

Cuando se ejecute, los componentes de Fusion deben ser creados dentro del objetivo (target) que se encuentra en la tabla props.

Luau

local story = {
   fusion = Fusion,
   controls = controls,
   story = function(props)
      local component = Fusion.New "Frame" {
         Parent = props.target,
      }
   end
}

return story

Roblox-TS

const story = {
	fusion: Fusion,
	controls: controls,
	story: (props: InferFusionProps<typeof controls>) => {
		const component = Fusion.New("Frame")({
			Parent: props.target,
		});
	},
};

export = story;

Cómo Usar Controles

UI Labs creará un Fusion.Value para cada control y los actualizará cuando el control cambie. Estos controles estarán disponibles en la tabla props.

Luau

local controls = {
   Visible = true
}

local story = {
   fusion = Fusion,
   controls = controls,
   story = function(props)
      local component = Fusion.New "Frame" {
         Parent = props.target,
         Size = UDim2.fromOffset(200, 100),
         Visible = props.controls.Visible -- Este será un Fusion.Value<boolean>
      }
   end
}

return story

Roblox-TS

const controls = {
	Visible: true,
};

const story = {
	fusion: Fusion,
	controls: controls,
	story: (props: InferFusionProps<typeof controls>) => {
		const component = Fusion.New("Frame")({
			Parent: props.target,
			Size: UDim2.fromOffset(200, 100),
			Visible: props.controls.Visible, // Este será un Fusion.Value<boolean>
		});
	},
};

export = story;

Limpieza

Luego de ejecutar la función, esta puede regresar 2 tipos de valores:

• Una instancia de Roblox que será destruida al desmontar la historia
• Una función de limpieza que será ejecutada al desmontar la historia

Ejemplo

Luau

local story = {
   fusion = Fusion,
   controls = controls,
   story = function(props)
      local component = Fusion.New "Frame" {
         Parent = props.target,
      }

      return function()
         component:Destroy()
      end
   end
}

return story

Roblox-TS

const story = {
	fusion: Fusion,
	controls: controls,
	story: (props: InferFusionProps<typeof controls>) => {
		const component = Fusion.New("Frame")({
			Parent: props.target,
		});

		return () => {
			component.Destroy();
		};
	},
};

export = story;

Al Usar Fusion 0.3

Fusion 0.3 introdujo los scopes como una manera de limpiar múltiples objetos. Puedes acceder al scope usando el indice scope en la tabla props.

Este scope será destruido con Fusion.doCleanup cuando la historia sea desmontada. Esto implica que la función de limpieza no es necesaria en la mayoría de los casos, por lo que la función/instancia de limpieza puede ser opcional.

Limpieza

Si no se proporciona una función de limpieza en Fusion 0.2 UI Labs arrojará una advertencia.

Ejemplo

Luau

local Fusion = require(...)

local controls = { ... }

local story = {
   fusion = Fusion,
   controls = controls,
   story = function(props)
      local scope = props.scope

      local value = scope:Value("foo")
      local component = scope:New "Frame" {
         Parent = props.target,
      }
      -- No es necesaria una función para limpiar
   end,
}

return story

Roblox-TS

// Aún no se encuentra disponible Fusion 0.3 en roblox-ts

Cómo Usar el Creador de Historias

Puedes usar el Creador de Historias del Paquete de Utilidades para crear tu historia. Estos inferirán los tipos de controles para Roblox-TS.

UILabs.CreateFusionStory(info, story):FusionStory

Ejemplo

Luau

local Fusion = require(...)

local UILabs = require(...)
local CreateFusionStory = UILabs.CreateFusionStory

local controls = { ... }

local story = CreateFusionStory({
   fusion = Fusion,
   controls = controls,
}, function(props)
   local component = Fusion.New "Frame" {
      Parent = props.target,
   }

   return function()
      component:Destroy()
   end
end)

return story

Roblox-TS

import Fusion from "@rbxts/fusion"
import { CreateFusionStory } from "@rbxts/ui-labs"

const controls = { ... }

const story = CreateFusionStory({
   fusion: Fusion,
   controls: controls,
}, (props: InferFusionProps<typeof controls>) => {
   const component = Fusion.New("Frame")({
      Parent: props.target,
   })

   return () => {
      component.Destroy()
   }
})

export = story;