Make CodeInput's interface clearer in d.ts file, and add readonly template (silent on set) to work with Vue better while being backwards compatible.

Author: WebCoder49

code-input.d.ts

@@ -285,7 +285,9 @@ export namespace plugins {
 // ESM-SUPPORT-END-NAMESPACE-1 Do not (re)move this - it's needed for ESM generation
 
 /**
- * Please see `codeInput.templates.prism` or `codeInput.templates.hljs`.
+ * If you're using one of the two named highlighters, please see
+ * `codeInput.templates.prism` or `codeInput.templates.hljs`.
+ * Otherwise please see this class' constructor.
  * Templates are used in `<code-input>` elements and once registered with
  * `codeInput.registerTemplate` will be in charge of the highlighting
  * algorithm and settings for all code-inputs with a `template` attribute
@@ -397,9 +399,35 @@ export namespace templates {
 
 /**
  * A `<code-input>` element, an instance of an `HTMLElement`, and the result
- * of `document.createElement("code-input")`.
+ * of `document.createElement("code-input")`. Attributes are only set when
+ * the element's template has been registered, and before this are null.
  */
-export class CodeInput extends HTMLElement { }
+export class CodeInput extends HTMLElement {
+  /**
+   * When the code-input's template is registered, this contains its codeInput.Template object.
+   */
+  templateObject?: readonly Template
+  /**
+   * Exposed child textarea element for user to input code in; in this version of code-input you shouldn't need to access
+   * it because most textarea functionality is present on the code-input element itself.
+   */
+  textareaElement?: HTMLTextAreaElement
+  /**
+   * Exposed child pre element where syntax-highlighted code is outputted.
+   * Contains this.codeElement as its only child.
+   */
+  preElement?: HTMLPreElement
+  /**
+   * Exposed child pre element's child code element where syntax-highlighted code is outputted.
+   * Has this.preElement as its parent.
+   */
+  codeElement?: HTMLElement
+  /**
+   * Exposed non-scrolling element designed to contain dialog boxes etc. from plugins,
+   * that shouldn't scroll with the code-input element.
+   */
+  dialogContainerElement?: HTMLElement
+}
 
 /**
  * Register a template so code-input elements with a template attribute that equals the templateName will use the template.

code-input.js

@@ -412,13 +412,20 @@ var codeInput = {
     *  ------------------------------------ */
 
     /**
-     * A code-input element.
+     * A `<code-input>` element, an instance of an `HTMLElement`, and the result
+     * of `document.createElement("code-input")`. Attributes are only set when
+     * the element's template has been registered, and before this are null.
      */
     CodeInput: class extends HTMLElement {
         constructor() {
             super(); // Element
         }
 
+        /**
+         * When the code-input's template is registered, this contains its codeInput.Template object.
+         * Should be treated as read-only by external code.
+         */
+        templateObject = null;
         /**
         * Exposed child textarea element for user to input code in
         */
@@ -435,8 +442,8 @@ var codeInput = {
         codeElement = null;
 
         /** 
-         * Exposed non-scrolling element designed to contain dialog boxes etc. that shouldn't scroll
-         * with the code-input element.
+         * Exposed non-scrolling element designed to contain dialog boxes etc. from plugins,
+         * that shouldn't scroll with the code-input element.
          */
         dialogContainerElement = null;
 
@@ -737,6 +744,22 @@ var codeInput = {
             return this.getTemplate();
         }
 
+        /**
+         * @deprecated Present for backwards compatibility; use CodeInput.templateObject.
+         */
+        get template() {
+            return this.templateObject;
+        }
+
+        /**
+         * @deprecated The Vue framework may try to set the template
+         * property to the value of the template attribute, a string.
+         * This should not happen. Intentional use of this should
+         * also not happen since templates are changed by changing
+         * the template attribute to the name of one registered.
+         */
+        set template(value) { }
+
         /* ------------------------------------
         *  -----------Callbacks----------------
         *  ------------------------------------

plugins/autocomplete.js

@@ -33,7 +33,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
 
         let testPosPre = document.createElement("pre");
         testPosPre.setAttribute("aria-hidden", true); // Hide for screen readers
-        if(codeInput.template.preElementStyled) {
+        if(codeInput.templateObject.preElementStyled) {
             testPosPre.classList.add("code-input_autocomplete_testpos");
             codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update    
         } else {

plugins/indent.js

@@ -67,7 +67,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
         let testIndentationWidthPre = document.createElement("pre");
         testIndentationWidthPre.setAttribute("aria-hidden", "true"); // Hide for screen readers
         let testIndentationWidthSpan = document.createElement("span");
-        if(codeInput.template.preElementStyled) {
+        if(codeInput.templateObject.preElementStyled) {
             testIndentationWidthPre.appendChild(testIndentationWidthSpan);
             testIndentationWidthPre.classList.add("code-input_autocomplete_test-indentation-width");
             codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update