adding rootContainerName property

src/guifier/classes/Data.ts

@@ -1,6 +1,6 @@
 import clone from 'clone'
 
-import type { Property, Parameters } from '../types'
+import type { Property, ParametersInternal } from '../types'
 
 import { XMLParser, XMLBuilder } from 'fast-xml-parser'
 import * as toml from 'toml'
@@ -18,18 +18,18 @@ import xmlFormat from 'xml-formatter'
 export class Data {
     public rawData: any
     public parsedData: Property = defaultProperty
-    public params: Parameters
+    public params: ParametersInternal
     private readonly path: Array<number | string> = []
 
-    constructor (data: string, dataType: DataType, params: Parameters) {
+    constructor (data: string, dataType: DataType, params: ParametersInternal) {
         // add guifier params
         this.params = params
 
         // converting data types string into a js object
         this.rawData = this.deserializeData(data, dataType)
 
         // adding meta data (private properties) to the properties that dont have them
-        this.parsedData = this.addMetaDataRecursively(this.rawData, 'root')
+        this.parsedData = this.addMetaDataRecursively(this.rawData, this.params.rootContainerName)
 
         // normalizing _rules array in the property meta data
         this.normalizingRules()

src/guifier/dialogue/dialog.ts

@@ -1,6 +1,6 @@
 import './dialog.css'
 
-import type { ParametersInternal } from '../types'
+import type { Parameters } from '../types'
 import type { DialogParameters } from './dialogTypes'
 
 import { drawOutlineIcon } from '../utils'
@@ -208,7 +208,7 @@ export class Dialog {
      * This function is responsible for drawing a grid element
      */
     private drawGuifierGeneratedContent (data: any): HTMLElement {
-        const params: ParametersInternal = {
+        const params: Parameters = {
             elementSelector: this.params.elementSelector,
             data,
             dataType: DataType.Js,

src/guifier/types.ts

@@ -13,6 +13,7 @@ export const ParameterSchema = z.object({
     elementSelector: z.string(),
     data: z.any(),
     dataType: z.string(),
+    rootContainerName: z.string().default('root'),
     withoutContainer: z.boolean().optional().default(false),
     flipBackgroundColors: z.boolean().optional().default(false),
     expandFieldsToFullWidth: z.boolean().optional().default(false),

src/main.ts

@@ -10,6 +10,7 @@ async function init (): Promise<void> {
         elementSelector: '#app',
         data: exampleData,
         dataType: DataType.Json,
+        rootContainerName: 'Example Object',
         onChange: () => {
             console.log('guifier has changed')
             console.log(guifier.getData(DataType.Json))