Update idiomorph installation guidelines

bigskysoftware · Dec 19, 2024 · a4abca4 · a4abca4
1 parent a32aa79
commit a4abca4
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/www/content/extensions/idiomorph.md b/www/content/extensions/idiomorph.md
@@ -10,19 +10,31 @@ much smoother transition between the two states.
 You can use the idiomorph morphing algorithm as a [swapping](@attributes/hx-swap) strategy by including the idiomorph 
 extension.
 
-## Install
+## Installation
 
-From CDN with a script tag:
-```html
-<script src="https://unpkg.com/[email protected]/dist/idiomorph-ext.min.js"></script>
+The fastest way to install `idiomorph` is to load it via a CDN. Remember to always include the core htmx library before the extension.
+```HTML
+<head>
+    <script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]" integrity="sha384-tg/2Ca9U/RohyxmGCb8qJVR3j9cswtKbdRSXOaPX/aDDOW1bfbeyV+7G9ifYF4bC" crossorigin="anonymous"></script>
+</head>
 ```
+An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js.
 
-From npm using a bundler (e.g. Rollup, Webpack):
-```
-npm i idiomorph
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `idiomorph` is to simply copy it into your project. Download the extension from `https://unpkg.com/idiomorph`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+
+For npm-style build systems, you can install `idiomorph` via [npm](https://www.npmjs.com/):
+```shell
+npm install idiomorph
 ```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/idiomorph/dist/idiomorph.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `idiomorph` via npm
+- Import both packages to your `index.js`
 ```JS
-import 'idiomorph';
+import `htmx.org`;
+import `idiomorph`; 
 ```
 
 ## Usage