feat: add cjs and mjs
This commit is contained in:
parent
2944bdbc4c
commit
6566c66af6
46
README.md
46
README.md
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
11
example.html
11
example.html
|
@ -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>
|
||||||
|
|
23
package.json
23
package.json
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue