ts-dom-utils 2.1.0 → 2.2.1

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# ts-dom-utils
+
+## 2.2.1
+
+### Patch Changes
+
+- 6cf9275: Fix typo in `aria-expanded` attribute in `createElement` example
+- fc35c90: Update publish workflow to use OpenID Connect
+- ad96903: Update dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- 3f66d1e: - Simplified `createElement` to handle all object properties, including style.
+  - Fixed issue with styles not applying correctly.
+  - Updated style type in `SpecialAttributes` to `Partial<CSSStyleDeclaration>` for editor hints and flexibility.

package/README.md

@@ -45,21 +45,24 @@ const button = createElement('button', {
   id: 'my-button',
   class: ['btn', 'btn-primary'],
   text: 'Click me',
+  onclick: (event) => {
+    console.log('clicked!', event)
+  },
   dataset: {
     action: 'open-menu',
   },
-  'aria-expandended': 'false',
+  'aria-expanded': 'false',
 });
 
 document.body.appendChild(button);
-// <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
+// <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expanded="false">Click me</button>
 ```
 
-| Param   | Default   | Description                                                                                                                                                                                    |
-|---------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| tagName | undefined | The tag name of the element type to create.                                                                                                                                                    |
-| options | {}        | The options to use when creating the element. Options can include any attributes that can be passed to `setAttribute`, with `class`, `dataset`, and `text` as special options for enhancement. |
-| target  | document  | The Document in which to create the element.                                                                                                                                                   |
+| Param   | Default   | Description                                                                                                                                                                         |
+|---------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| tagName | undefined | The tag name of the element type to create.                                                                                                                                         |
+| options | {}        | The options to use when creating the element. Options can include any attributes that can be passed to `setAttribute`, with `class`, and `text` as special options for enhancement. |
+| target  | document  | The Document in which to create the element.                                                                                                                                        |
 ---
 
 ## `DOMisReady`

package/dist/chunk-X7YTDZOL.js

@@ -0,0 +1 @@
+function l(s,i={},r=document){let e=r.createElement(s);return Object.entries(i).forEach(([n,t])=>{t!=null&&(n==="class"?Array.isArray(t)?e.classList.add(...t):typeof t=="string"&&e.classList.add(t):n==="text"?e.textContent=t:n in e?typeof t=="object"&&!Array.isArray(t)?Object.entries(t).forEach(([a,c])=>{e[n][a]=c}):e[n]=t:e.setAttribute(n,t))}),e}export{l as a};

package/dist/createElement.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var d=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},f=(n,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!p.call(n,t)&&t!==a&&i(n,t,{get:()=>e[t],enumerable:!(s=g(e,t))||s.enumerable});return n};var E=n=>f(i({},"__esModule",{value:!0}),n);var M={};d(M,{default:()=>c});module.exports=E(M);function c(n,e={},a=document){let s=a.createElement(n);return Object.entries(e).forEach(([t,r])=>{if(t==="class")Array.isArray(r)?s.classList.add(...r):s.classList.add(r);else if(t==="dataset"&&typeof r=="object"&&r!==null)Object.entries(r).forEach(([l,o])=>{s.dataset[l]=o});else if(t==="text"){s.textContent=r;return}else if(t in s){s[t]=r;return}else s.setAttribute(t,r)}),s}
+"use strict";var a=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var y=(i,n)=>{for(var r in n)a(i,r,{get:n[r],enumerable:!0})},d=(i,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of m(n))!p.call(i,t)&&t!==r&&a(i,t,{get:()=>n[t],enumerable:!(s=o(n,t))||s.enumerable});return i};var E=i=>d(a({},"__esModule",{value:!0}),i);var g={};y(g,{default:()=>c});module.exports=E(g);function c(i,n={},r=document){let s=r.createElement(i);return Object.entries(n).forEach(([t,e])=>{e!=null&&(t==="class"?Array.isArray(e)?s.classList.add(...e):typeof e=="string"&&s.classList.add(e):t==="text"?s.textContent=e:t in s?typeof e=="object"&&!Array.isArray(e)?Object.entries(e).forEach(([l,f])=>{s[t][l]=f}):s[t]=e:s.setAttribute(t,e))}),s}

package/dist/createElement.d.cts

@@ -11,23 +11,26 @@
  *   id: 'my-button',
  *   class: ['btn', 'btn-primary'],
  *   text: 'Click me',
+ *   onclick: (event) => {
+ *    console.log('clicked!', event)
+ *   },
  *   dataset: {
  *     action: 'open-menu',
  *   },
- *   'aria-expandended': 'false',
+ *   'aria-expanded': 'false',
  * });
 
  * document.body.appendChild(button);
- * // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
+ * // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expanded="false">Click me</button>
  */
 declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: CreateElementOptions<K>, target?: Document): HTMLElementTagNameMap[K];
 type SpecialAttributes = {
     class?: string | string[];
-    dataset?: Record<string, string>;
     text?: string;
+    style?: Partial<CSSStyleDeclaration>;
 };
 type CreateElementOptions<K extends keyof HTMLElementTagNameMap> = (Partial<Omit<HTMLElementTagNameMap[K], keyof SpecialAttributes>> & SpecialAttributes) & {
     [key: string]: any;
 };
 
-export { CreateElementOptions, createElement as default };
+export { type CreateElementOptions, createElement as default };

package/dist/createElement.d.ts

@@ -11,23 +11,26 @@
  *   id: 'my-button',
  *   class: ['btn', 'btn-primary'],
  *   text: 'Click me',
+ *   onclick: (event) => {
+ *    console.log('clicked!', event)
+ *   },
  *   dataset: {
  *     action: 'open-menu',
  *   },
- *   'aria-expandended': 'false',
+ *   'aria-expanded': 'false',
  * });
 
  * document.body.appendChild(button);
- * // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
+ * // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expanded="false">Click me</button>
  */
 declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: CreateElementOptions<K>, target?: Document): HTMLElementTagNameMap[K];
 type SpecialAttributes = {
     class?: string | string[];
-    dataset?: Record<string, string>;
     text?: string;
+    style?: Partial<CSSStyleDeclaration>;
 };
 type CreateElementOptions<K extends keyof HTMLElementTagNameMap> = (Partial<Omit<HTMLElementTagNameMap[K], keyof SpecialAttributes>> & SpecialAttributes) & {
     [key: string]: any;
 };
 
-export { CreateElementOptions, createElement as default };
+export { type CreateElementOptions, createElement as default };

package/dist/createElement.js

@@ -1 +1 @@
-import{a}from"./chunk-K55FPGHK.js";export{a as default};
+import{a}from"./chunk-X7YTDZOL.js";export{a as default};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},x=(t,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!E.call(t,r)&&r!==a&&i(t,r,{get:()=>e[r],enumerable:!(n=u(e,r))||n.enumerable});return t};var y=t=>x(i({},"__esModule",{value:!0}),t);var M={};g(M,{DOMisReady:()=>d,createElement:()=>o,qs:()=>l,qsa:()=>f});module.exports=y(M);function o(t,e={},a=document){let n=a.createElement(t);return Object.entries(e).forEach(([r,s])=>{if(r==="class")Array.isArray(s)?n.classList.add(...s):n.classList.add(s);else if(r==="dataset"&&typeof s=="object"&&s!==null)Object.entries(s).forEach(([c,m])=>{n.dataset[c]=m});else if(r==="text"){n.textContent=s;return}else if(r in n){n[r]=s;return}else n.setAttribute(r,s)}),n}function d(t=document){return new Promise(e=>{if(t.readyState!=="loading")return e();t.addEventListener("DOMContentLoaded",()=>e())})}function l(t,e=document){return e.querySelector(t)}function f(t,e=document){return e.querySelectorAll(t)}0&&(module.exports={DOMisReady,createElement,qs,qsa});
+"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var s in e)i(t,s,{get:e[s],enumerable:!0})},x=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!E.call(t,r)&&r!==s&&i(t,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return t};var g=t=>x(i({},"__esModule",{value:!0}),t);var M={};y(M,{DOMisReady:()=>d,createElement:()=>o,qs:()=>f,qsa:()=>l});module.exports=g(M);function o(t,e={},s=document){let a=s.createElement(t);return Object.entries(e).forEach(([r,n])=>{n!=null&&(r==="class"?Array.isArray(n)?a.classList.add(...n):typeof n=="string"&&a.classList.add(n):r==="text"?a.textContent=n:r in a?typeof n=="object"&&!Array.isArray(n)?Object.entries(n).forEach(([m,c])=>{a[r][m]=c}):a[r]=n:a.setAttribute(r,n))}),a}function d(t=document){return new Promise(e=>{if(t.readyState!=="loading")return e();t.addEventListener("DOMContentLoaded",()=>e())})}function f(t,e=document){return e.querySelector(t)}function l(t,e=document){return e.querySelectorAll(t)}0&&(module.exports={DOMisReady,createElement,qs,qsa});

package/dist/index.js

@@ -1 +1 @@
-import{a as e}from"./chunk-QYTVIVCC.js";import{a}from"./chunk-K55FPGHK.js";import{a as t}from"./chunk-YC4DGQBN.js";import{a as r}from"./chunk-22TR3O4D.js";export{e as DOMisReady,a as createElement,t as qs,r as qsa};
+import{a as e}from"./chunk-QYTVIVCC.js";import{a}from"./chunk-X7YTDZOL.js";import{a as t}from"./chunk-YC4DGQBN.js";import{a as r}from"./chunk-22TR3O4D.js";export{e as DOMisReady,a as createElement,t as qs,r as qsa};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-dom-utils",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "A simple utility library for DOM manipulation. Provides TypeScript typings for enhanced development experience in TS environments.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -10,7 +10,8 @@
   "scripts": {
     "build": "tsup --dts",
     "lint": "tsc",
-    "format": "prettier --write ./src"
+    "format": "prettier --write ./src",
+    "release": "npm run build && changeset publish"
   },
   "repository": {
     "type": "git",
@@ -29,8 +30,9 @@
   "homepage": "https://github.com/rafaucau/ts-dom-utils#readme",
   "funding": "https://github.com/rafaucau/ts-dom-utils?sponsor=1",
   "devDependencies": {
-    "prettier": "^3.0.3",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2"
+    "@changesets/cli": "^2.29.8",
+    "prettier": "^3.8.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   }
 }

package/dist/chunk-K55FPGHK.js

@@ -1 +0,0 @@
-function l(n,r={},a=document){let e=a.createElement(n);return Object.entries(r).forEach(([s,t])=>{if(s==="class")Array.isArray(t)?e.classList.add(...t):e.classList.add(t);else if(s==="dataset"&&typeof t=="object"&&t!==null)Object.entries(t).forEach(([i,c])=>{e.dataset[i]=c});else if(s==="text"){e.textContent=t;return}else if(s in e){e[s]=t;return}else e.setAttribute(s,t)}),e}export{l as a};