Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matronator/mtrgen-template-editor
Editor for MTRGen templates as a React component
https://github.com/matronator/mtrgen-template-editor
mtrgen react react-component react-components reactjs template-editor typescript
Last synced: 10 days ago
JSON representation
Editor for MTRGen templates as a React component
- Host: GitHub
- URL: https://github.com/matronator/mtrgen-template-editor
- Owner: matronator
- License: mit
- Created: 2023-02-03T01:20:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-23T23:41:15.000Z (about 1 month ago)
- Last Synced: 2024-10-11T19:49:04.536Z (26 days ago)
- Topics: mtrgen, react, react-component, react-components, reactjs, template-editor, typescript
- Language: TypeScript
- Homepage:
- Size: 651 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
MTRGen Template Editor
[]()
[](https://github.com/matronator/mtrgen-template-editor/issues)
[](https://github.com/matronator/mtrgen-template-editor/pulls)
[](/LICENSE)
---
Template editor for [MTRGen](https://github.com/matronator/mtrgen) as a React component.
## 📝 Table of Contents
- [📝 Table of Contents](#-table-of-contents)
- [🧐 About ](#-about-)
- [🏁 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Installing](#installing)
- [With NPM or PNPM](#with-npm-or-pnpm)
- [With Yarn](#with-yarn)
- [With Bun](#with-bun)
- [🎈 Usage ](#-usage-)
- [Interfaces](#interfaces)
- [`EditorProps`](#editorprops)
- [Template Schema Interfaces](#template-schema-interfaces)
- [⛏️ Built Using ](#️-built-using-)
- [✍️ Authors ](#️-authors-)
- [🎧 Dev Soundtrack ](#-dev-soundtrack-)
React component for editing JSON templates to be used by [MTRGen](https://github.com/matronator/mtrgen).
### Prerequisites
You need to have NodeJS installed and use React in your project.
### Installing
#### With NPM or PNPM
```
npm install mtrgen-template-editor
```
```
pnpm install mtrgen-template-editor
```
#### With Yarn
```
yarn add mtrgen-template-editor
```
#### With Bun
```
bun add mtrgen-template-editor
```
```jsx
// Import the component
import { MTRGenTemplateEditor, Template } from "mtrgen-template-editor";
function App() {
// Create a template object
const [template, setTemplate] = useState({
name: "Template",
path: "path",
filename: "template",
file: {}
});
return (
{/* Use it */}
setTemplate(temp) } />
);
}
```
### Interfaces
#### `EditorProps`
```ts
interface EditorProps {
template: Template; // The template object
onTemplateChange: (template: Template) => void; // Callback for when the template changes
setTemplate: Dispatch>; // React hook for setting the template
}
```
#### Template Schema Interfaces
```ts
interface Template {
autoImport?: boolean;
file: File;
filename: string;
name: string;
path: string;
}
interface File {
class?: Class;
interface?: Interface;
namespace?: Namespace;
strict?: boolean;
trait?: Trait;
use?: IndexedString[];
}
interface Class {
comments?: IndexedString[];
constants?: Constant[];
extends?: string;
implements?: IndexedString[];
methods?: Method[];
modifier?: Modifier;
name: string;
props?: Prop[];
traits?: IndexedString[];
}
interface Constant {
id: number|string;
comments?: IndexedString[];
name: string;
value: Value;
visibility?: Visibility;
}
type Value = any[] | boolean | number | number | { [key: string]: any } | null | string;
interface Method {
id: number|string;
body?: IndexedString[];
comments?: IndexedString[];
modifier?: Modifier;
name: string;
nullable?: boolean;
params?: Param[];
ref?: boolean;
return?: string;
static?: boolean;
visibility?: Visibility;
}
enum Modifier {
Abstract = "abstract",
Final = "final",
}
interface Param {
id: number|string;
name: string;
nullable?: boolean;
promoted?: boolean;
ref?: boolean;
type?: string;
value?: Value;
}
enum Visibility {
Private = "private",
Protected = "protected",
Public = "public",
}
interface Prop {
id: number|string;
comments?: IndexedString[];
getter?: boolean;
init?: boolean;
name: string;
nullable?: boolean;
setter?: boolean;
static?: boolean;
type?: string;
value?: Value;
visibility?: Visibility;
}
interface Interface {
comments?: IndexedString[];
constants?: Constant[];
extends?: string;
methods?: Method[];
name: string;
}
interface Namespace {
class?: Class;
interface?: Interface;
name: string;
trait?: Trait;
use?: IndexedString[];
}
interface Trait {
comments?: IndexedString[];
methods?: Method[];
name: string;
props?: Prop[];
}
interface IndexedString {
id: number|string;
value: string;
}
```
- [pnpm](https://pnpm.io) - pnpm
- [TypeScript](https://www.typescriptlang.org) - TypeScript
- [React](https://reactjs.org) - React
- [Bootstrap](https://getbootstrap.com) - Bootstrap
- [React Bootstrap](https://react-bootstrap.github.io) - React Bootstrap
- [@matronator](https://github.com/matronator) - Everything
Package was built while listening to:
- [Bring Me The Horizon - There Is a Hell Believe Me I've Seen It. There Is a Heaven Let's Keep It a Secret.](https://www.youtube.com/watch?v=BpkDrTLk9K0)
- [Suicide Silence - The Cleansing](https://www.youtube.com/watch?v=msM_4uznjAg)
- [Blackout Podcast 75 - Black Sun Empire](https://soundcloud.com/blackoutmusicnl/blackout-podcast-75-black-sun-empire)
- [Neonlight - 2 Hours #10YNL Special @ Fat Bemme x Boundless Beatz (11 - 10 - 2019)](https://soundcloud.com/neonlightmusic/10years-neonlight-2hours-special-fatbemme-11-10-2019)