From ef2952b42c70e95f7b12f00b6bd137b89bde9a90 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Wed, 9 Jul 2025 18:40:36 +0100 Subject: [PATCH 01/22] Use classes for templates; keep but deprecate use of function template creators --- code-input.d.ts | 34 +++++++++++++++----- code-input.js | 84 ++++++++++++++++++++++++++++++++++--------------- 2 files changed, 84 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..d36eedc 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,55 @@ var codeInput = { } } +{ + // Templates are defined here after the codeInput variable is set, because they reference it by extending codeInput.Template. + + /** + * 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 + ); + } + }; + codeInput.templates.Prism = Prism; + + /** + * 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 + ); + } + }; + codeInput.templates.Hljs = Hljs; +} + customElements.define("code-input", codeInput.CodeInput); From c22b65bed968b30161aa71d0ced7b2de7029bc85 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Tue, 8 Jul 2025 13:51:42 +0100 Subject: [PATCH 02/22] Start ESM --- esm/generate.sh | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 esm/generate.sh diff --git a/esm/generate.sh b/esm/generate.sh new file mode 100644 index 0000000..e69de29 From 8a4b88381dc250f0b047335817962ec35750e6f1 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Tue, 8 Jul 2025 15:36:06 +0100 Subject: [PATCH 03/22] Add infrastructure for generating ESM files Template functions used for now as this code was actually written before template classes were created, but is afterwards in the tree for easier merging. --- code-input.d.ts | 36 +++++++++++++---- code-input.js | 6 +++ esm/README.md | 12 ++++++ esm/generate.sh | 96 ++++++++++++++++++++++++++++++++++++++++++++++ esm/template_names | 2 + 5 files changed, 145 insertions(+), 7 deletions(-) create mode 100644 esm/README.md create mode 100644 esm/template_names diff --git a/code-input.d.ts b/code-input.d.ts index 284b2c2..020ee03 100644 --- a/code-input.d.ts +++ b/code-input.d.ts @@ -1,4 +1,5 @@ export as namespace codeInput; +// ESM-SUPPORT-END-NOESM-SPECIFIC Do not (re)move this - it's needed for ESM generation /** * Plugins are imported from the plugins folder. They will then @@ -47,6 +48,7 @@ export abstract class Plugin { observedAttributes: Array } +// ESM-SUPPORT-START-NAMESPACE-1 Do not (re)move this - it's needed for ESM generation /** * Before using any plugin in this namespace, please ensure you import its JavaScript * files (in the plugins folder), or continue to get a more detailed error in the developer @@ -62,6 +64,7 @@ export abstract class Plugin { * @type {Object} */ export namespace plugins { + // ESM-SUPPORT-START-PLUGIN-test Do not (re)move this - it's needed for ESM generation /** * JavaScript example of a plugin, which brings extra, * non-central optional functionality to code-input. @@ -75,7 +78,9 @@ export namespace plugins { class Test extends Plugin { constructor(); } + // ESM-SUPPORT-END-PLUGIN-test Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-auto-close-brackets Do not (re)move this - it's needed for ESM generation /** * Automatically closes pairs of brackets/quotes/other syntaxes in code, but also lets you choose the brackets this * is activated for. @@ -88,7 +93,9 @@ export namespace plugins { */ constructor(bracketPairs: Object); } + // ESM-SUPPORT-END-PLUGIN-auto-close-brackets Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-autocomplete Do not (re)move this - it's needed for ESM generation /** * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions. * Files: autocomplete.js / autocomplete.css @@ -100,7 +107,9 @@ export namespace plugins { */ constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void); } + // ESM-SUPPORT-END-PLUGIN-autocomplete Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-autodetect Do not (re)move this - it's needed for ESM generation /** * Autodetect the language live and change the `lang` attribute using the syntax highlighter's * autodetect capabilities. Works with highlight.js only. @@ -109,7 +118,9 @@ export namespace plugins { class Autodetect extends Plugin { constructor(); } + // ESM-SUPPORT-END-PLUGIN-autodetect Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-debounce-update Do not (re)move this - it's needed for ESM generation /** * Debounce the update and highlighting function * https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1 @@ -122,7 +133,9 @@ export namespace plugins { */ constructor(delayMs: number); } + // ESM-SUPPORT-END-PLUGIN-debounce-update Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-find-and-replace Do not (re)move this - it's needed for ESM generation /** * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor. * Files: find-and-replace.js / find-and-replace.css @@ -163,7 +176,9 @@ export namespace plugins { */ showPrompt(codeInputElement: CodeInput, replacePartExpanded: boolean): void; } + // ESM-SUPPORT-END-PLUGIN-find-and-replace Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-go-to-line Do not (re)move this - it's needed for ESM generation /** * Add basic Go-To-Line (ctrl-G by default) functionality to the code editor. * Files: go-to-line.js / go-to-line.css @@ -185,7 +200,9 @@ export namespace plugins { */ showPrompt(codeInput: CodeInput): void; } + // ESM-SUPPORT-END-PLUGIN-go-to-line Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-indent Do not (re)move this - it's needed for ESM generation /** * Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it * possible to indent/unindent multiple lines using Tab/Shift+Tab @@ -205,7 +222,9 @@ export namespace plugins { tabForNavigation?: string; }); } + // ESM-SUPPORT-END-PLUGIN-indent Do not (re)move this - it's needed for ESM generation + // ESM-SUPPORT-START-PLUGIN-select-token-callbacks Do not (re)move this - it's needed for ESM generation /** * Make tokens in the 
 element that are included within the selected text of the 
    * gain a CSS class while selected, or trigger JavaScript callbacks.
@@ -254,7 +273,9 @@ export namespace plugins {
       static createClassSynchronisation(selectedClass: string): codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks;
     }
   }
+  // ESM-SUPPORT-END-PLUGIN-select-token-callbacks Do not (re)move this - it's needed for ESM generation
 
+  // ESM-SUPPORT-START-PLUGIN-special-chars Do not (re)move this - it's needed for ESM generation
   /**
    * Render special characters and control characters as a symbol with their hex code.
    * Files: special-chars.js, special-chars.css
@@ -269,14 +290,9 @@ export namespace plugins {
      */
     constructor(colorInSpecialChars?: boolean, inheritTextColor?: boolean, specialCharRegExp?: RegExp);
   }
+  // ESM-SUPPORT-END-PLUGIN-special-chars Do not (re)move this - it's needed for ESM generation
 }
-
-/**
- * Register a plugin class under `codeInput.plugins`.
- * @param {string} pluginName The identifier of the plugin: if it is `"foo"`, `new codeInput.plugins.foo(`...`)` will instantiate it, etc.
- * @param {Object} pluginClass The class of the plugin, created with `class extends codeInput.plugin {`...`}`
- */
-export function registerPluginClass(pluginName: string, pluginClass: Object): void;
+// 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`.
@@ -330,6 +346,7 @@ export class Template {
   constructor(highlight?: (code: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, plugins?: Plugin[])
 }
 
+// ESM-SUPPORT-START-NAMESPACE-2 Do not (re)move this - it's needed for ESM generation
 /** 
  * Shortcut functions for creating templates.
  * Each code-input element has a template attribute that 
@@ -344,6 +361,7 @@ export class Template {
  * For adding small pieces of functionality, please see `codeInput.plugins`.
  */
 export namespace templates {
+  // 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/).
    */
@@ -360,6 +378,8 @@ export namespace templates {
    * @deprecated Please use `new codeInput.templates.Prism(...)`
    */
   function prism(prism: Object, plugins?: Plugin[]): Template
+  // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation
+  // 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/).
    */
@@ -376,6 +396,7 @@ export namespace templates {
    * @deprecated Please use `new codeInput.templates.Hljs(...)`
    */
   function hljs(hljs: Object, plugins?: Plugin[]): Template
+  // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation
   /**
    * Constructor to create a proof-of-concept template that gives a message if too many characters are typed.
    * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
@@ -391,6 +412,7 @@ export namespace templates {
    */
   function rainbowText(rainbowColors?: string[], delimiter?: string, plugins?: Plugin[]): Template
 }
+// ESM-SUPPORT-END-NAMESPACE-2 Do not (re)move this - it's needed for ESM generation
 
 /**
  * A `` element, an instance of an `HTMLElement`, and the result
diff --git a/code-input.js b/code-input.js
index d36eedc..714a4a0 100644
--- a/code-input.js
+++ b/code-input.js
@@ -209,6 +209,7 @@ var codeInput = {
         plugins = [];
     },
 
+    // ESM-SUPPORT-START-TEMPLATES Do not (re)move this - it's needed for ESM generation!
     /**
      * For creating a custom template from scratch, please 
      * use `new codeInput.Template(...)`
@@ -223,19 +224,23 @@ var codeInput = {
      */
     templates: {
         // (Source code for class templates after var codeInput = ... so they can extend the codeInput.Template class)
+        // ESM-SUPPORT-START-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
         /**
          * @deprecated Please use `new codeInput.templates.Prism(...)`
          */
         prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/)
             return new codeInput.templates.Prism(prism, plugins);
         },
+        // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
 
+        // ESM-SUPPORT-START-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
         /**
          * @deprecated Please use `new codeInput.templates.Hljs(...)`
          */
         hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/)
             return new codeInput.templates.Hljs(hljs, plugins);
         },
+        // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
 
         /**
          * @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
@@ -311,6 +316,7 @@ var codeInput = {
             };
         },
     },
+    // ESM-SUPPORT-END-TEMPLATES Do not (re)move this - it's needed for ESM generation!
 
     /* ------------------------------------
     *  ------------Plugins-----------------
diff --git a/esm/README.md b/esm/README.md
new file mode 100644
index 0000000..63ca3b0
--- /dev/null
+++ b/esm/README.md
@@ -0,0 +1,12 @@
+# Autogenerated ECMAScript Modules
+**Don't edit them! Edit the files outside this directory!**
+
+When code-input was started, it was written and tested only to be imported directly via a `
-    
-    
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
 
         
     
 
diff --git a/tests/tester.js b/tests/tester.js
index 5b0899e..1ddae9b 100644
--- a/tests/tester.js
+++ b/tests/tester.js
@@ -590,4 +590,4 @@ console.log("I've got another line!", 2 < 3, "should be true.");
         document.querySelector("h2").style.backgroundColor = "lightgreen";
         document.querySelector("h2").textContent = "All Tests have Passed.";
     }
-}
\ No newline at end of file
+}

From 883d7e050f108faa24e8cb2b0ca22a24d235ce96 Mon Sep 17 00:00:00 2001
From: Oliver Geer 
Date: Sun, 13 Jul 2025 17:29:29 +0100
Subject: [PATCH 20/22] Remove messy console.logs

---
 code-input.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/code-input.js b/code-input.js
index c4afe8c..fe73cd0 100644
--- a/code-input.js
+++ b/code-input.js
@@ -133,7 +133,6 @@ var codeInput = {
                 // Bind sets elem as first parameter of function 
                 // So innerHTML can be read
             }
-            console.log(`code-input: template: Added existing elements with template ${templateName}`);
         }
 
         if (codeInput.defaultTemplate == undefined) {
@@ -148,9 +147,7 @@ var codeInput = {
                     // So innerHTML can be read
                 }
             }
-            console.log(`code-input: template: Set template ${templateName} as default`);
         }
-        console.log(`code-input: template: Created template ${templateName}`);
     },
 
     /**
@@ -359,7 +356,6 @@ var codeInput = {
          * modifications to the `codeInput.Plugin.attributeChanged` method.
          */
         constructor(observedAttributes) {
-            console.log("code-input: plugin: Created plugin");
 
             observedAttributes.forEach((attribute) => {
                 codeInput.observedAttributes.push(attribute);

From 916ce290f9926cd60329ed89bf38f8c50dd83c7c Mon Sep 17 00:00:00 2001
From: Oliver Geer 
Date: Sat, 19 Jul 2025 10:08:33 +0100
Subject: [PATCH 21/22] Add .js files to package.json exports for backwards
 compatibility; move postpublish script to prepack for better security

---
 package.json | 42 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 972b7f1..e45e9c7 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,42 @@
     "./plugins/test.mjs": {
       "import": "./esm/plugins/test.mjs"
     },
+    "./code-input.js": {
+      "import": "./code-input.js"
+    },
+    "./templates/hljs.js": {
+      "import": "./templates/hljs.js"
+    },
+    "./templates/prism.js": {
+      "import": "./templates/prism.js"
+    },
+    "./plugins/auto-close-brackets.js": {
+      "import": "./plugins/auto-close-brackets.js"
+    },
+    "./plugins/autocomplete.js": {
+      "import": "./plugins/autocomplete.js"
+    },
+    "./plugins/autodetect.js": {
+      "import": "./plugins/autodetect.js"
+    },
+    "./plugins/find-and-replace.js": {
+      "import": "./plugins/find-and-replace.js"
+    },
+    "./plugins/go-to-line.js": {
+      "import": "./plugins/go-to-line.js"
+    },
+    "./plugins/indent.js": {
+      "import": "./plugins/indent.js"
+    },
+    "./plugins/select-token-callbacks.js": {
+      "import": "./plugins/select-token-callbacks.js"
+    },
+    "./plugins/special-chars.js": {
+      "import": "./plugins/special-chars.js"
+    },
+    "./plugins/test.js": {
+      "import": "./plugins/test.js"
+    },
     "./code-input.css": "./code-input.css",
     "./plugins/autocomplete.css": "./plugins/autocomplete.css",
     "./plugins/find-and-replace.css": "./plugins/find-and-replace.css",
@@ -52,7 +88,7 @@
   },
   "scripts": {
     "test": "echo \"This is a front-end library, not a Node library. Please see the README for how to use.\" && exit 1",
-    "postinstall": "cd esm ; node generate.mjs ; cd .."
+    "prepack": "cd esm ; node generate.mjs ; cd .."
   },
   "repository": {
     "type": "git",
@@ -67,9 +103,9 @@
     "web-components"
   ],
   "author": {
-    "name": "WebCoder49",
+    "name": "Oliver Geer and contributors",
     "email": "hi@webcoder49.dev",
-    "url": "https://webcoder49.dev/"
+    "url": "https://oliver.geer.im/"
   },
   "license": "MIT",
   "bugs": {

From 02eabe35dc9480a3c4f0d998ac27333efbc95c64 Mon Sep 17 00:00:00 2001
From: Oliver Geer 
Date: Sat, 19 Jul 2025 12:01:24 +0100
Subject: [PATCH 22/22] Export minified files for backwards compatibility;
 Ignore irrelevant files from NPM build; move ESM generation to prepack

---
 .npmignore     |  4 ++++
 esm/.gitignore |  1 +
 esm/.npmignore |  4 ++++
 esm/README.md  |  4 +++-
 package.json   | 64 +++++++++++++++++++++-----------------------------
 5 files changed, 39 insertions(+), 38 deletions(-)
 create mode 100644 .npmignore
 create mode 100644 esm/.npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..bb28de3
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,4 @@
+.github/
+tests/
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
diff --git a/esm/.gitignore b/esm/.gitignore
index 4425a46..249e3ab 100644
--- a/esm/.gitignore
+++ b/esm/.gitignore
@@ -1,3 +1,4 @@
+# In Git, ignore ES modules
 code-input.mjs
 code-input.d.mts
 templates/
diff --git a/esm/.npmignore b/esm/.npmignore
new file mode 100644
index 0000000..3415c09
--- /dev/null
+++ b/esm/.npmignore
@@ -0,0 +1,4 @@
+# In NPM, ignore generator files and keep ES modules
+.gitignore
+generate.mjs
+generate.sh
diff --git a/esm/README.md b/esm/README.md
index f3cf001..d65b6ac 100644
--- a/esm/README.md
+++ b/esm/README.md
@@ -2,7 +2,9 @@
 
 ## Using
 
-If you are using Yarn, NPM, or a similar package manager, the files should be generated on package install. Otherwise, after changing directory to the one containing this file:
+If you are using Yarn, NPM, or a similar package manager, the files should have been generated before being uploaded to the package repository, or on `pack` if the package manager is fetching from Git.
+
+Otherwise, after changing directory to the one containing this file:
 
 - If you have Node.js installed, run `node generate.mjs`.
 - If you don't have Node.js installed but are on a POSIX-like system with `bash`/`zsh`, run `sh ./generate.sh`.
diff --git a/package.json b/package.json
index e45e9c7..60142a6 100644
--- a/package.json
+++ b/package.json
@@ -43,48 +43,38 @@
     "./plugins/test.mjs": {
       "import": "./esm/plugins/test.mjs"
     },
-    "./code-input.js": {
-      "import": "./code-input.js"
-    },
-    "./templates/hljs.js": {
-      "import": "./templates/hljs.js"
-    },
-    "./templates/prism.js": {
-      "import": "./templates/prism.js"
-    },
-    "./plugins/auto-close-brackets.js": {
-      "import": "./plugins/auto-close-brackets.js"
-    },
-    "./plugins/autocomplete.js": {
-      "import": "./plugins/autocomplete.js"
-    },
-    "./plugins/autodetect.js": {
-      "import": "./plugins/autodetect.js"
-    },
-    "./plugins/find-and-replace.js": {
-      "import": "./plugins/find-and-replace.js"
-    },
-    "./plugins/go-to-line.js": {
-      "import": "./plugins/go-to-line.js"
-    },
-    "./plugins/indent.js": {
-      "import": "./plugins/indent.js"
-    },
-    "./plugins/select-token-callbacks.js": {
-      "import": "./plugins/select-token-callbacks.js"
-    },
-    "./plugins/special-chars.js": {
-      "import": "./plugins/special-chars.js"
-    },
-    "./plugins/test.js": {
-      "import": "./plugins/test.js"
-    },
+    "./code-input.js": "./code-input.js",
+    "./plugins/auto-close-brackets.js": "./plugins/auto-close-brackets.js",
+    "./plugins/autocomplete.js": "./plugins/autocomplete.js",
+    "./plugins/autodetect.js": "./plugins/autodetect.js",
+    "./plugins/find-and-replace.js": "./plugins/find-and-replace.js",
+    "./plugins/go-to-line.js": "./plugins/go-to-line.js",
+    "./plugins/indent.js": "./plugins/indent.js",
+    "./plugins/select-token-callbacks.js": "./plugins/select-token-callbacks.js",
+    "./plugins/special-chars.js": "./plugins/special-chars.js",
+    "./plugins/test.js": "./plugins/test.js",
+    "./code-input.min.js": "./code-input.min.js",
+    "./plugins/auto-close-brackets.min.js": "./plugins/auto-close-brackets.min.js",
+    "./plugins/autocomplete.min.js": "./plugins/autocomplete.min.js",
+    "./plugins/autodetect.min.js": "./plugins/autodetect.min.js",
+    "./plugins/find-and-replace.min.js": "./plugins/find-and-replace.min.js",
+    "./plugins/go-to-line.min.js": "./plugins/go-to-line.min.js",
+    "./plugins/indent.min.js": "./plugins/indent.min.js",
+    "./plugins/select-token-callbacks.min.js": "./plugins/select-token-callbacks.min.js",
+    "./plugins/special-chars.min.js": "./plugins/special-chars.min.js",
+    "./plugins/test.min.js": "./plugins/test.min.js",
     "./code-input.css": "./code-input.css",
     "./plugins/autocomplete.css": "./plugins/autocomplete.css",
     "./plugins/find-and-replace.css": "./plugins/find-and-replace.css",
     "./plugins/go-to-line.css": "./plugins/go-to-line.css",
     "./plugins/prism-line-numbers.css": "./plugins/prism-line-numbers.css",
-    "./plugins/special-chars.css": "./plugins/special-chars.css"
+    "./plugins/special-chars.css": "./plugins/special-chars.css",
+    "./code-input.min.css": "./code-input.min.css",
+    "./plugins/autocomplete.min.css": "./plugins/autocomplete.min.css",
+    "./plugins/find-and-replace.min.css": "./plugins/find-and-replace.min.css",
+    "./plugins/go-to-line.min.css": "./plugins/go-to-line.min.css",
+    "./plugins/prism-line-numbers.min.css": "./plugins/prism-line-numbers.min.css",
+    "./plugins/special-chars.min.css": "./plugins/special-chars.min.css"
   },
   "scripts": {
     "test": "echo \"This is a front-end library, not a Node library. Please see the README for how to use.\" && exit 1",