| 1 | {"version":3,"sources":["Component.ts"],"names":[],"mappings":"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","file":"Component.js","sourcesContent":["import UUID from \"./UUID\";\r\nimport { Template, TagName, ClassNames } from \"./Decorators\";\r\nimport ComponentStore from \"./ComponentStore\";\r\n\r\nimport assign = require(\"object-assign\");\r\n\r\nexport type ArmTemplate = (component: Component) => string;\r\n\r\n/**\r\n * A data structure representing one or more components.\r\n */\r\nexport interface DeflatedComponent {\r\n\ttype: string;\r\n\tdata: any;\r\n\tid: string;\r\n\tlabel: string;\r\n\tchildren?: DeflatedComponent[];\r\n}\r\n\r\n/**\r\n * The base for all Armature components.\r\n */\r\n@TagName(\"arm-component\")\r\n@Template(() => \"\")\r\nexport class Component {\r\n\t/**\r\n\t * A list of class names to apply to the component's root element.\r\n\t */\r\n\tstatic $classNames: string[] = [];\r\n\r\n\t/**\r\n\t * The HTML tag this component type will be using when reified.\r\n\t */\r\n\tstatic $tagName: string;\r\n\r\n\t/**\r\n\t * The template used to render this component.\r\n\t * Use @Template to specify the template for a component type.\r\n\t */\r\n\t$template: ArmTemplate;\r\n\r\n\t/**\r\n\t * The state backing this component.\r\n\t */\r\n\t$data: any;\r\n\r\n\t/**\r\n\t * The globally unique identifier for this component.\r\n\t */\r\n\t$id: string;\r\n\r\n\t/**\r\n\t * The label identifying this component.\r\n\t * This is unique among all siblings of this component.\r\n\t */\r\n\t$label: string;\r\n\r\n\t/**\r\n\t * The element representing this component, if one exists.\r\n\t */\r\n\t$element: HTMLElement;\r\n\r\n\t/**\r\n\t * The components this component contains.\r\n\t */\r\n\t$children: Component[] = [];\r\n\r\n\t/**\r\n\t * The component containing this component, if one exists.\r\n\t */\r\n\t$parent: Component;\r\n\r\n\t/**\r\n\t * Creates a new component with the given data.\r\n\t *\r\n\t * @param data The data to initialize the component with\r\n\t */\r\n\tconstructor(data: any) {\r\n\t\tthis.$data = data;\r\n\t\tthis.$id = UUID.get();\r\n\t}\r\n\r\n\t/**\r\n\t * Creates or retrieves a component that is attached to another component.\r\n\t * Using the same parent and 'label' parameters will retrieve the same object.\r\n\t * Pass null to the data attribute to throw if a new component is created.\r\n\t *\r\n\t * @param parent The component to attach to\r\n\t * @param label The label to use when creating or retrieving the component\r\n\t * @param data The data to initialize the component with if it hasn't been created\r\n\t */\r\n\tstatic $for(parent: Component, label: string, data: any) {\r\n\t\tconst identifier = this.$getIdentifier(label);\r\n\r\n\t\tconst existing = parent.$children.find(v => v.$getIdentifier() === identifier);\r\n\r\n\t\tif (existing) {\r\n\t\t\treturn existing;\r\n\t\t}\r\n\r\n\t\tif (data === null) {\r\n\t\t\tthrow new Error(\"Subcomponent was created with no data!\");\r\n\t\t}\r\n\r\n\t\tconst inst = new this(data);\r\n\t\tinst.$label = label;\r\n\t\tinst.$parent = parent;\r\n\r\n\t\tparent.$children.push(inst);\r\n\r\n\t\treturn inst;\r\n\t}\r\n\r\n\t/**\r\n\t * Serializes the component's data for potential recreation.\r\n\t */\r\n\t$serializeData() {\r\n\t\treturn assign({}, this.$data);\r\n\t}\r\n\r\n\t/**\r\n\t * Returns a way to uniquely identify this component type.\r\n\t */\r\n\tstatic $getTypeName() {\r\n\t\tconst classString = this.$classNames.map(v => \".\" + v).join(\"\");\r\n\r\n\t\treturn this.$tagName + classString;\r\n\t}\r\n\r\n\t/**\r\n\t * Creates an object that can be used to recreate this component.\r\n\t */\r\n\t$deflate(): DeflatedComponent {\r\n\t\tconst thisClass = <typeof Component>this.constructor;\r\n\r\n\t\treturn {\r\n\t\t\ttype: thisClass.$getTypeName(),\r\n\t\t\tdata: this.$serializeData(),\r\n\t\t\tid: this.$id,\r\n\t\t\tlabel: this.$label,\r\n\t\t\tchildren: this.$children.map(v => v.$deflate())\r\n\t\t};\r\n\t}\r\n\r\n\t/**\r\n\t * Creates an instance of a component from data generated by $deflate.\r\n\t *\r\n\t * @param deflated The deflated component data to use\r\n\t * @param inst An optional existing object to inflate\r\n\t */\r\n\tstatic $inflate(deflated: DeflatedComponent, inst?: Component) {\r\n\t\tif (!inst) {\r\n\t\t\tinst = new this(deflated.data);\r\n\t\t}\r\n\r\n\t\tinst.$id = deflated.id;\r\n\t\tinst.$label = deflated.label;\r\n\r\n\t\tif (deflated.children) {\r\n\t\t\tfor (let child of deflated.children) {\r\n\t\t\t\tconst thatClass = ComponentStore.get(child.type);\r\n\r\n\t\t\t\tconst childInst = thatClass.$for(inst, child.label, child.data);\r\n\t\t\t\tthatClass.$inflate(child, childInst);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn inst;\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an identifier that should be unique among a component's siblings.\r\n\t *\r\n\t * @param label The label of the component to create the label for\r\n\t */\r\n\tstatic $getIdentifier(label: string) {\r\n\t\treturn this.$getTypeName() + \"__\" + label;\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an identifier that should be unique among a component's siblings.\r\n\t */\r\n\t$getIdentifier() {\r\n\t\tconst thisClass = <typeof Component>this.constructor;\r\n\r\n\t\treturn thisClass.$getIdentifier(this.$label);\r\n\t}\r\n\r\n\ttoString() {\r\n\t\treturn this.$getHTML();\r\n\t}\r\n\r\n\t/**\r\n\t * Builds the HTML associated with this component.\r\n\t */\r\n\t$getHTML() {\r\n\t\tconst thisClass = <typeof Component>this.constructor;\r\n\r\n\t\treturn `<${ thisClass.$tagName }\r\n\t\t\tclass=\"${ thisClass.$classNames.join(\" \") }\"\r\n\t\t\tdata-armid=\"${ this.$id }\"\r\n\t\t\t${ this.$label ? `data-label=\"${ this.$label }\"` : \"\" }\r\n\t\t\t>${ this.$template(this) }</${ thisClass.$tagName }>`;\r\n\t}\r\n\r\n\t/**\r\n\t * Creates an HTML element for this component if one does not exist.\r\n\t */\r\n\t$ensureElement() {\r\n\t\tif (!this.$element) {\r\n\t\t\tconst thisClass = <typeof Component>this.constructor;\r\n\r\n\t\t\tconst el = document.createElement(thisClass.$tagName);\r\n\t\t\tel.classList.add(...thisClass.$classNames);\r\n\r\n\t\t\tthis.$attachTo(el);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Attaches this component to an existing HTML element.\r\n\t *\r\n\t * @param element The element to attach to\r\n\t */\r\n\t$attachTo(element: HTMLElement) {\r\n\t\tthis.$element = element;\r\n\t\telement.setAttribute(\"data-armid\", this.$id.toString());\r\n\r\n\t\tif (this.$label) {\r\n\t\t\telement.setAttribute(\"data-label\", this.$label);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Attempts to locate this component's element from a parent element.\r\n\t *\r\n\t * @param parent The element to search in\r\n\t */\r\n\t$locate(parent: HTMLElement = document.body) {\r\n\t\tconst thisClass = <typeof Component>this.constructor;\r\n\r\n\t\tconst el = <HTMLElement>parent.querySelector(`${ thisClass.$tagName }[data-armid=\"${ this.$id }\"]`);\r\n\r\n\t\tif (el) {\r\n\t\t\tthis.$element = el;\r\n\r\n\t\t\tthis.$children.forEach(child => {\r\n\t\t\t\tchild.$locate(el);\r\n\t\t\t});\r\n\r\n\t\t\treturn el;\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Evaluates the component's template and puts the result into the component's element\r\n\t */\r\n\t$render() {\r\n\t\tthis.$element.innerHTML = this.$template(this);\r\n\t}\r\n\r\n\t/**\r\n\t * Attaches event handlers for the component and its children.\r\n\t * Often used after $render, or as part of $reify.\r\n\t */\r\n\t$hydrate() {\r\n\t\tfor (let child of this.$children) {\r\n\t\t\tif (child.$locate(this.$element)) {\r\n\t\t\t\tchild.$hydrate();\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Ensures this component's element exists, then renders and hydrates it.\r\n\t */\r\n\t$reify() {\r\n\t\tthis.$ensureElement();\r\n\t\tthis.$render();\r\n\t\tthis.$hydrate();\r\n\t}\r\n}"],"sourceRoot":"/source/"} |