Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 33 additions & 13 deletions docs/development/extensions/api/custom-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,31 @@
title: Custom Type APIs
---

systems for displaying/saving types other then the standard string|boolean|number
System for displaying and saving types other than the standard `string`, `boolean`, and `number`.

## object structure
the core system of custom types is an object that represents the data of that custom type and the functions required to show it to the user.
| signiture | fallback | description |
## Object Structure
The core system of a custom type is an object that represents the data of that custom type and the functions required to show it to the user.
| Signature | fallback | Description |
| --------- | -------- | ----------- |
| `customId: String` | `null` | the id of this custom type, used only to identify this object for serialization |
| `customId: String` | `null` | the ID of this custom type, used only to identify this object for serialization |
| `toReporterContent(): HTMLElement` | `toString` | inner content for a script reporter |
| `toMonitorContent(): HTMLElement` | `toReporterContent` | inner content for a variable monitor |
| `toListItem(): HTMLElement` | `toMonitorContent` | inner content for a single list item |
| `toListEditor(): String` | `toString` | string-based representation of this type for the list item editor |
| `fromListEditor(edit: String): this` | `replaceItem` | takes the users edits to the string produced by toListEditor and modifies the custom types content according to the input, returning the object that should take place of this type (normally just self/this) |
| `fromListEditor(edit: String): this` | `replaceItem` | takes the user's edits to the string produced by toListEditor and modifies the custom types content according to the input, returning the object that should replace this type (normally just self/this) |

note that *anything* can be inside this object, its is just that the above functions are things already used internally both as signifiers of a custom type but also to show that custom types content
Note that *anything* can be inside this object, it's just that the above functions are things already used internally both as signifiers of a custom type but also to show the custom type's content.

example of function:
Example function:
```js
class CustomType {
toString() {
return 'look at me im custom reporter content!'
return 'look at me im a custom reporter content!'
}
toReporterContent() {
const emWrap = document.createElement('em');
emWrap.style.color = '#0e0efe';
emWrap.innerText = 'look at me im custom reporter content!';
emWrap.innerText = 'look at me im a custom reporter content!';
return emWrap;
}
}
Expand Down Expand Up @@ -68,8 +68,28 @@ Scratch.extensions.register(new Extension());

## serialization registration
### `registerSerializer(id: string, serialize: function(toSerialize: CustomType) {}: any, deserialize: function(fromSerialize: any) {}: CustomType)`
id must match the customId property of a custom type
The ID must match the customId property of a custom type.

serialize and deserialize must exist together
Serialize and deserialize must exist together.
Serialize must be a function that takes the custom type and returns some data that is then consumed by the deserialize function to remake the instance of custom type.

serialize must be a function that takes the custom type and returns some data that is then consumed by the deserialize function to remake the instance of custom type
Example serializer registration:
```js
Scratch.vm.runtime.registerSerializer(
"customId", // Must match the customId defined on the custom type
value => {
// Receives the custom type instance and must return a JSON object that represents it.
if (value instanceof CustomType) {
return {
data: value._data
};
}
},
data => {
// Receives the previously serialized data and must return a new instance of the custom type.
if (data && data.data) {
return new CustomType(data.data);
}
}
);
```