Basic transformer functionality
This commit is contained in:
@@ -1,38 +1,99 @@
|
||||
# rbxts-transformer-services
|
||||
This is a [demo transformer](#template) that converts @rbxts/services imports into plain GetService calls for increased legibility.
|
||||
# rbxts-transformer-instances
|
||||
|
||||
## Example
|
||||
```ts
|
||||
// input.ts
|
||||
import { Players, ServerScriptService } from "@rbxts/services";
|
||||
Enable the use of instance constructors in roblox-ts, reducing boilerplate by letting you use familiar class-like syntax.
|
||||
|
||||
print(Players.LocalPlayer);
|
||||
print(ServerScriptService.GetChildren().size());
|
||||
## Overview
|
||||
|
||||
This transformer automatically converts constructor-style instance creation (`new Frame()`) into the standard Roblox `Instance.new("Frame")` pattern at compile time.
|
||||
|
||||
## Features
|
||||
|
||||
- ✨ Cleaner syntax for creating instances
|
||||
- 🔍 Full TypeScript type safety
|
||||
- ⚡ Zero runtime overhead (transforms at compile-time)
|
||||
- 🔄 Supports all creatable Roblox instance types
|
||||
- 📦 Easy to install and use
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install rbxts-transformer-instances
|
||||
```
|
||||
|
||||
### Configure in your tsconfig.json
|
||||
|
||||
Add the transformer to your `tsconfig.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
...
|
||||
"plugins": [
|
||||
{
|
||||
"transform": "rbxts-transformer-instances",
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": [..., "node_modules/rbxts-transformer-instances"]
|
||||
}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```ts
|
||||
// Instead of this:
|
||||
const part = new Instance("Part");
|
||||
part.Material = Enum.Material.Neon;
|
||||
part.Position = new Vector3(0, 10, 0);
|
||||
|
||||
// You can write this:
|
||||
const part = new Part();
|
||||
part.Material = Enum.Material.Neon;
|
||||
part.Position = new Vector3(0, 10, 0);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Input (TypeScript):
|
||||
|
||||
```ts
|
||||
// Creating a basic UI
|
||||
const screenGui = new ScreenGui();
|
||||
screenGui.Parent = game.GetService("Players").LocalPlayer!.WaitForChild("PlayerGui");
|
||||
|
||||
const frame = new Frame();
|
||||
frame.Size = new UDim2(0, 200, 0, 200);
|
||||
frame.Position = new UDim2(0.5, -100, 0.5, -100);
|
||||
frame.BackgroundColor3 = Color3.fromRGB(45, 45, 45);
|
||||
frame.Parent = screenGui;
|
||||
|
||||
const textLabel = new TextLabel();
|
||||
textLabel.Size = new UDim2(1, 0, 0, 50);
|
||||
textLabel.Text = "Hello, World!";
|
||||
textLabel.Parent = frame;
|
||||
```
|
||||
|
||||
### Output (Lua):
|
||||
|
||||
```lua
|
||||
-- output.lua
|
||||
local Players = game:GetService("Players")
|
||||
local ServerScriptService = game:GetService("ServerScriptService")
|
||||
print(Players.LocalPlayer)
|
||||
print(#ServerScriptService:GetChildren())
|
||||
-- Creates standard Instance.new calls
|
||||
local screenGui = Instance.new("ScreenGui")
|
||||
screenGui.Parent = game:GetService("Players").LocalPlayer:WaitForChild("PlayerGui")
|
||||
|
||||
local frame = Instance.new("Frame")
|
||||
frame.Size = UDim2.new(0, 200, 0, 200)
|
||||
frame.Position = UDim2.new(0.5, -100, 0.5, -100)
|
||||
frame.BackgroundColor3 = Color3.fromRGB(45, 45, 45)
|
||||
frame.Parent = screenGui
|
||||
|
||||
local textLabel = Instance.new("TextLabel")
|
||||
textLabel.Size = UDim2.new(1, 0, 0, 50)
|
||||
textLabel.Text = "Hello, World!"
|
||||
textLabel.Parent = frame
|
||||
```
|
||||
|
||||
# Template
|
||||
This transformer is intended to be used as a template for those who are interested in creating their own transformers in roblox-ts.
|
||||
## License
|
||||
|
||||
A necessary resource for those starting out with transformers is [ts-ast-viewer](https://ts-ast-viewer.com/). It shows you the result of AST, relevant properties, symbol information, type information and it automatically generates factory code for nodes. For example, you can see the code this transformer generates [here](https://ts-ast-viewer.com/#code/MYewdgzgLgBACgGwIYE8CmAnCMC8MDmSAtmgHQDiaUAypgG4CWwaAFAESKqYRsCUANACgYImAHUQGANYQADkma4CxMpRr0mrNhIxQZ85nwDcQA).
|
||||
|
||||
I'd also recommend downloading the [TypeScript repo](https://github.com/microsoft/TypeScript) locally as it's extremely helpful when you're using undocumented (the majority of the compiler API), internal or uncommon APIs.
|
||||
|
||||
Transformers mutate the TypeScript [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) by replacing parts of the AST with new nodes. Transformers are also able to utilize symbol and type information giving you access to TypeScript's advanced control flow analysis.
|
||||
|
||||
## Other Transformers
|
||||
|
||||
Here's a list of transformers if you want to see how they handle working with parts of the TypeScript compiler api not shown here (e.g symbols or types).
|
||||
|
||||
- [rbxts-transform-debug](https://github.com/roblox-aurora/rbxts-transform-debug) by [@roblox-aurora](https://github.com/roblox-aurora)
|
||||
- [rbxts-transform-env](https://github.com/roblox-aurora/rbxts-transform-env) by [@roblox-aurora](https://github.com/roblox-aurora)
|
||||
- [Flamework](https://github.com/rbxts-flamework/transformer) by [@rbxts-flamework](https://github.com/rbxts-flamework)
|
||||
|
||||
One other source you may goto for learning about transformers is actually [roblox-ts](https://github.com/roblox-ts/roblox-ts/tree/master/src/TSTransformer) itself. This generates a Luau AST instead of a TS AST but it may still be a useful resource for learning about the compiler api.
|
||||
MIT
|
||||
Reference in New Issue
Block a user