From 6566c66af60e31447f3ea87497a275227a5f8e2f Mon Sep 17 00:00:00 2001
From: AJ ONeal <aj@therootcompany.com>
Date: Thu, 29 Aug 2024 17:29:03 -0600
Subject: [PATCH] feat: add cjs and mjs

---
 README.md    | 46 ++++++++++++++++++++++++++++++++++++++++++----
 ajquery.cjs  | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 ajquery.mjs  | 32 ++++++++++++++++++++++++++++++++
 example.html | 11 +++++++++++
 package.json | 23 ++++++++++++++++++++---
 5 files changed, 152 insertions(+), 7 deletions(-)
 create mode 100644 ajquery.cjs
 create mode 100644 ajquery.mjs

diff --git a/README.md b/README.md
index dbc793c..df40cc0 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,8 @@
 
 The fastest, most lightweight, fewest dependency jQuery alternative.
 
-Development Build: 145B (with comments) \
-Production Build: 103B (min + gz)
+Development Build: 572B (types + comments) \
+Production Build: 146B (min + gz)
 
 ## Example Usage
 
@@ -18,11 +18,15 @@ console.log("innerText:", $("p:nth-child(2").innerText);
 ### via GitHub
 
 ```bash
-my_ver="v2.1.2"
+my_ver="v3.0.0"
 
 mkdir ./vendor/
+
 curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajquery.js" \
     -o ./vendor/ajquery.js
+
+# Lighthouse-optimized
+npx -p uglify-js@3 uglifyjs ./vendor/ajquery.js -o ./vendor/ajquery.min.js
 ```
 
 ```html
@@ -32,7 +36,41 @@ curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajqu
 ### via CDN
 
 ```html
-<script src="https://unpkg.com/ajquery"></script>
+<script src="https://unpkg.com/ajquery@3.0.0/ajquery.min.js"></script>
+```
+
+Bundler-optimized:
+
+```html
+<script src="https://unpkg.com/ajquery@3.0.0/ajquery.min.cjs"></script>
+```
+
+Tree-shaking-optimized:
+
+```html
+<script src="https://unpkg.com/ajquery@3.0.0/ajquery.min.mjs"></script>
+```
+
+### via NPM
+
+```sh
+npm install --save ajquery@3
+```
+
+#### CommonJS
+
+```js
+let AJQuery = require("ajquery");
+let $ = AJQuery.$;
+let $$ = AJQuery.$$;
+```
+
+#### ESM
+
+```js
+import AJQuery from "ajquery";
+let $ = AJQuery.$;
+let $$ = AJQuery.$$;
 ```
 
 ## API
diff --git a/ajquery.cjs b/ajquery.cjs
new file mode 100644
index 0000000..a80d3a2
--- /dev/null
+++ b/ajquery.cjs
@@ -0,0 +1,47 @@
+/**
+ * @typedef AJQuery
+ * @prop {AJQuerySelector} $
+ * @prop {AJQuerySelectorAll} $$
+ */
+
+/**
+ * Select first matching element, just like console $
+ * @callback AJQuerySelector
+ * @param {String} cssSelector
+ * @param {ParentNode} [$parent=document]
+ */
+
+/**
+ * Select all matching child elements as a JS Array, just like console $$
+ * @callback AJQuerySelectorAll
+ * @param {String} cssSelector
+ * @param {ParentNode} [$parent=document]
+ */
+
+/** @type {AJQuery} */
+//@ts-ignore
+var AJQuery = ("object" === typeof module && exports) || {};
+(function (window, AJQuery) {
+  "use strict";
+
+  /** @type {AJQuerySelector} */
+  AJQuery.$ = function (cssSelector, $parent = document) {
+    let $child = $parent.querySelector(cssSelector);
+    return $child;
+  };
+
+  /** @type {AJQuerySelectorAll} */
+  AJQuery.$$ = function (cssSelector, $parent = document) {
+    let nodeList = $parent.querySelectorAll(cssSelector);
+    let $children = Array.from(nodeList);
+    return $children;
+  };
+
+  Object.assign(window, AJQuery);
+
+  //@ts-ignore
+  window.AJQuery = AJQuery;
+})(globalThis.window || {}, AJQuery);
+if ("object" === typeof module) {
+  module.exports = AJQuery;
+}
diff --git a/ajquery.mjs b/ajquery.mjs
new file mode 100644
index 0000000..617efe4
--- /dev/null
+++ b/ajquery.mjs
@@ -0,0 +1,32 @@
+/** @import('typed-query-selector/strict') */
+
+let AJQuery = { $, $$ };
+
+/**
+ * AJQuery - The fastest, most lightweight, least dependency jQuery alternative,
+ *           now Ai-enhanced, and better than ever!
+ * @namespace AJQuery
+ */
+
+/**
+ * Selects the first element that matches the given selector within the specified parent.
+ * @param {string} sel - The CSS selector to match.
+ * @param {Document|Element} [$parent=document] - The parent element to search within. Defaults to document.
+ */
+function $(sel, $parent = document) {
+  let $child = $parent.querySelector(sel);
+  return $child;
+}
+
+/**
+ * Select all matching child elements from $parent (which is document by default)
+ * @param {String} sel - The CSS selector to match.
+ * @param {Document|Element} [$parent=document] - The parent element to search within. Defaults to document.
+ */
+function $$(sel, $parent = document) {
+  let $children = $parent.querySelectorAll(sel);
+  let children = Array.from($children);
+  return children;
+}
+
+export default AJQuery;
diff --git a/example.html b/example.html
index 6e4902b..cc0d13a 100644
--- a/example.html
+++ b/example.html
@@ -9,4 +9,15 @@
     let text = $("body").textContent;
     console.log(text);
   </script>
+
+  <script src="./ajquery.min.cjs"></script>
+  <script>
+    console.log("globalThis.AJQuery:", globalThis.AJQuery);
+  </script>
+
+  <script type="module" src="./ajquery.min.mjs"></script>
+  <script type="module">
+    import AJQuery from "./ajquery.mjs";
+    console.log("imported AJQuery", AJQuery);
+  </script>
 </body>
diff --git a/package.json b/package.json
index 59e3660..93998c0 100644
--- a/package.json
+++ b/package.json
@@ -2,14 +2,31 @@
   "name": "ajquery",
   "version": "2.1.2",
   "description": "The fastest, most lightweight, least dependency jQuery alternative",
-  "main": "ajquery.min.js",
+  "main": "ajquery.cjs",
+  "module": "ajquery.mjs",
+  "type": "commonjs",
+  "browser": {
+    "ajquery.min.cjs": "ajquery.min.js"
+  },
+  "exports": {
+    ".": {
+      "require": "./ajquery.cjs",
+      "import": "./ajquery.mjs",
+      "default": "./ajquery.cjs"
+    }
+  },
   "files": [
-    "ajquery.js"
+    "ajquery.js",
+    "ajquery.min.js",
+    "ajquery.cjs",
+    "ajquery.min.cjs",
+    "ajquery.mjs",
+    "ajquery.min.mjs"
   ],
   "scripts": {
     "benchmark": "node benchmark.js",
     "prepare": "npm run build",
-    "start": "open example.html",
+    "start": "open http://localhost/example.html && caddy file-server --browse --root .",
     "prettier": "npx prettier -w '**/*.{js,md,css,html}'",
     "build": "npx uglify-js ajquery.js -o ajquery.min.js",
     "test": "node test.js"