From d53c19bf11d33c12204524ebad447e6be78a7117 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Wed, 9 Jul 2025 18:40:36 +0100 Subject: [PATCH 1/2] Use classes for templates; keep but deprecate use of function template creators --- code-input.d.ts | 34 ++++++++++++++----- code-input.js | 88 ++++++++++++++++++++++++++++++++++--------------- 2 files changed, 88 insertions(+), 34 deletions(-) diff --git a/code-input.d.ts b/code-input.d.ts index 285caa4..284b2c2 100644 --- a/code-input.d.ts +++ b/code-input.d.ts @@ -345,17 +345,35 @@ export class Template { */ export namespace templates { /** - * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/) - * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter. - * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` - * @returns template object + * A template that uses Prism.js syntax highlighting (https://prismjs.com/). + */ + class Prism extends Template { + /** + * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/) + * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter. + * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` + * @returns template object + */ + constructor(prism: Object, plugins?: Plugin[]) + } + /** + * @deprecated Please use `new codeInput.templates.Prism(...)` */ function prism(prism: Object, plugins?: Plugin[]): Template /** - * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/) - * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter. - * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` - * @returns template object + * A template that uses highlight.js syntax highlighting (https://highlightjs.org/). + */ + class Hljs extends Template { + /** + * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/) + * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter. + * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` + * @returns template object + */ + constructor(hljs: Object, plugins?: Plugin[]) + } + /** + * @deprecated Please use `new codeInput.templates.Hljs(...)` */ function hljs(hljs: Object, plugins?: Plugin[]): Template /** diff --git a/code-input.js b/code-input.js index e724927..a9fc914 100644 --- a/code-input.js +++ b/code-input.js @@ -222,38 +222,19 @@ var codeInput = { * For adding small pieces of functionality, please see `codeInput.plugins`. */ templates: { + // (Source code for class templates after var codeInput = ... so they can extend the codeInput.Template class) /** - * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/) - * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter. - * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` - * @returns {codeInput.Template} template object + * @deprecated Please use `new codeInput.templates.Prism(...)` */ prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/) - return new codeInput.Template( - prism.highlightElement, // highlight - true, // preElementStyled - true, // isCode - false, // includeCodeInputInHighlightFunc - plugins - ); + return new codeInput.templates.Prism(prism, plugins); }, + /** - * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/) - * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter. - * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` - * @returns {codeInput.Template} template object + * @deprecated Please use `new codeInput.templates.Hljs(...)` */ hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/) - return new codeInput.Template( - function(codeElement) { - codeElement.removeAttribute("data-highlighted"); - hljs.highlightElement(codeElement); - }, // highlight - false, // preElementStyled - true, // isCode - false, // includeCodeInputInHighlightFunc - plugins - ); + return new codeInput.templates.Hljs(hljs, plugins); }, /** @@ -318,7 +299,7 @@ var codeInput = { }, /** - * @deprecated Please use `new codeInput.Template()` + * @deprecated Please use `new codeInput.Template(...)` */ custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) { return { @@ -1058,4 +1039,59 @@ var codeInput = { } } +{ + // Templates are defined here after the codeInput variable is set, because they reference it by extending codeInput.Template. + + // ESM-SUPPORT-START-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation! + /** + * A template that uses Prism.js syntax highlighting (https://prismjs.com/). + */ + class Prism extends codeInput.Template { // Dependency: Prism.js (https://prismjs.com/) + /** + * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/) + * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter. + * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` + * @returns {codeInput.Template} template object + */ + constructor(prism, plugins = []) { + super( + prism.highlightElement, // highlight + true, // preElementStyled + true, // isCode + false, // includeCodeInputInHighlightFunc + plugins + ); + } + }; + // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation! + codeInput.templates.Prism = Prism; + + // ESM-SUPPORT-START-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation! + /** + * A template that uses highlight.js syntax highlighting (https://highlightjs.org/). + */ + class Hljs extends codeInput.Template { // Dependency: Highlight.js (https://highlightjs.org/) + /** + * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/) + * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter. + * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins` + * @returns {codeInput.Template} template object + */ + constructor(hljs, plugins = []) { + super( + function(codeElement) { + codeElement.removeAttribute("data-highlighted"); + hljs.highlightElement(codeElement); + }, // highlight + false, // preElementStyled + true, // isCode + false, // includeCodeInputInHighlightFunc + plugins + ); + } + }; + // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation! + codeInput.templates.Hljs = Hljs; +} + customElements.define("code-input", codeInput.CodeInput); From fe408d3cb488a8712d4a602101857587d12af38a Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Fri, 11 Jul 2025 13:45:29 +0100 Subject: [PATCH 2/2] Use classes for templates in README and tests --- README.md | 6 +++--- tests/tester.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f336e9a..2607e46 100644 --- a/README.md +++ b/README.md @@ -64,12 +64,12 @@ The next step is to set up a `template` to link `code-input` to your syntax-high - *Highlight.js:* ```js - codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */)); + codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Hljs(hljs, [] /* Array of plugins (see below) */)); ``` - *Prism.js:* ```js - codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */)); + codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [] /* Array of plugins (see below) */)); ``` - *Custom:* @@ -106,7 +106,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high