MTRGen Template Editor
Template editor for MTRGen as a React component.
📝 Table of Contents
🧐 About
React component for editing JSON templates to be used by MTRGen.
🏁 Getting Started
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
🎈 Usage
// Import the component
import { MTRGenTemplateEditor, Template } from "mtrgen-template-editor";
function App() {
// Create a template object
const [template, setTemplate] = useState<Template>({
name: "Template",
path: "path",
filename: "template",
file: {}
});
return (
<div className="App">
{/* Use it */}
<MTRGenTemplateEditor setTemplate={setTemplate} template={template} onTemplateChange={(temp) => setTemplate(temp) } />
</div>
);
}
Interfaces
EditorProps
interface EditorProps {
template: Template; // The template object
onTemplateChange: (template: Template) => void; // Callback for when the template changes
setTemplate: Dispatch<SetStateAction<Template>>; // React hook for setting the template
}
Template Schema Interfaces
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;
}
⛏️ Built Using
- pnpm - pnpm
- TypeScript - TypeScript
- React - React
- Bootstrap - Bootstrap
- React Bootstrap - React Bootstrap
✍️ Authors
- @matronator - Everything
🎧 Dev Soundtrack
Package was built while listening to: