feat: add cjs and mjs

This commit is contained in:
AJ ONeal 2024-08-29 17:29:03 -06:00
parent 2944bdbc4c
commit 6566c66af6
No known key found for this signature in database
GPG Key ID: F1D692A76F70CF98
5 changed files with 152 additions and 7 deletions

View File

@ -2,8 +2,8 @@
The fastest, most lightweight, fewest dependency jQuery alternative. The fastest, most lightweight, fewest dependency jQuery alternative.
Development Build: 145B (with comments) \ Development Build: 572B (types + comments) \
Production Build: 103B (min + gz) Production Build: 146B (min + gz)
## Example Usage ## Example Usage
@ -18,11 +18,15 @@ console.log("innerText:", $("p:nth-child(2").innerText);
### via GitHub ### via GitHub
```bash ```bash
my_ver="v2.1.2" my_ver="v3.0.0"
mkdir ./vendor/ mkdir ./vendor/
curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajquery.js" \ curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajquery.js" \
-o ./vendor/ajquery.js -o ./vendor/ajquery.js
# Lighthouse-optimized
npx -p uglify-js@3 uglifyjs ./vendor/ajquery.js -o ./vendor/ajquery.min.js
``` ```
```html ```html
@ -32,7 +36,41 @@ curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajqu
### via CDN ### via CDN
```html ```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 ## API

47
ajquery.cjs Normal file
View File

@ -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;
}

32
ajquery.mjs Normal file
View File

@ -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;

View File

@ -9,4 +9,15 @@
let text = $("body").textContent; let text = $("body").textContent;
console.log(text); console.log(text);
</script> </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> </body>

View File

@ -2,14 +2,31 @@
"name": "ajquery", "name": "ajquery",
"version": "2.1.2", "version": "2.1.2",
"description": "The fastest, most lightweight, least dependency jQuery alternative", "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": [ "files": [
"ajquery.js" "ajquery.js",
"ajquery.min.js",
"ajquery.cjs",
"ajquery.min.cjs",
"ajquery.mjs",
"ajquery.min.mjs"
], ],
"scripts": { "scripts": {
"benchmark": "node benchmark.js", "benchmark": "node benchmark.js",
"prepare": "npm run build", "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}'", "prettier": "npx prettier -w '**/*.{js,md,css,html}'",
"build": "npx uglify-js ajquery.js -o ajquery.min.js", "build": "npx uglify-js ajquery.js -o ajquery.min.js",
"test": "node test.js" "test": "node test.js"