mtrgen-template-editor

v1.1.10

Published

2 years ago

Editor for MTRGen templates

Downloads

0High
0Medium
0Low

matronator

mtrgen template editor react component

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

MongoDB - TypeScript
Express - React
VueJs - Bootstrap
NodeJs - React Bootstrap

✍️ Authors

@matronator - Everything

🎧 Dev Soundtrack

Package was built while listening to: