ts-dom-utils 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# ts-dom-utils
+
+## 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,6 +45,9 @@ const button = createElement('button', {
   id: 'my-button',
   class: ['btn', 'btn-primary'],
   text: 'Click me',
+  onclick: (event) => {
+    console.log('clicked!', event)
+  },
   dataset: {
     action: 'open-menu',
   },
@@ -55,11 +58,11 @@ document.body.appendChild(button);
 // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="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 d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var l=(s,t)=>{for(var a in t)i(s,a,{get:t[a],enumerable:!0})},p=(s,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of f(t))!m.call(s,e)&&e!==a&&i(s,e,{get:()=>t[e],enumerable:!(r=d(t,e))||r.enumerable});return s};var E=s=>p(i({},"__esModule",{value:!0}),s);var x={};l(x,{default:()=>c});module.exports=E(x);function c(s,t={},a=document){let r=a.createElement(s);return Object.entries(t).forEach(([e,n])=>{if(e==="class"){Array.isArray(n)?r.classList.add(...n):r.classList.add(n);return}if(e==="dataset"&&typeof n=="object"&&n!==null){Object.entries(n).forEach(([o,g])=>{r.dataset[o]=g});return}if(e==="text"){r.textContent=n;return}r.setAttribute(e,n)}),r}
+"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,6 +11,9 @@
  *   id: 'my-button',
  *   class: ['btn', 'btn-primary'],
  *   text: 'Click me',
+ *   onclick: (event) => {
+ *    console.log('clicked!', event)
+ *   },
  *   dataset: {
  *     action: 'open-menu',
  *   },
@@ -20,12 +23,14 @@
  * document.body.appendChild(button);
  * // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
  */
-declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: CreateElementOptions, target?: Document): HTMLElementTagNameMap[K];
-type CreateElementOptions = {
-    [key: string]: any;
+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,6 +11,9 @@
  *   id: 'my-button',
  *   class: ['btn', 'btn-primary'],
  *   text: 'Click me',
+ *   onclick: (event) => {
+ *    console.log('clicked!', event)
+ *   },
  *   dataset: {
  *     action: 'open-menu',
  *   },
@@ -20,12 +23,14 @@
  * document.body.appendChild(button);
  * // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
  */
-declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: CreateElementOptions, target?: Document): HTMLElementTagNameMap[K];
-type CreateElementOptions = {
-    [key: string]: any;
+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-AR3IDUAF.js";export{a as default};
+import{a}from"./chunk-X7YTDZOL.js";export{a as default};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},x=(t,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of E(e))!g.call(t,r)&&r!==a&&o(t,r,{get:()=>e[r],enumerable:!(n=u(e,r))||n.enumerable});return t};var y=t=>x(o({},"__esModule",{value:!0}),t);var O={};p(O,{DOMisReady:()=>d,createElement:()=>i,qs:()=>f,qsa:()=>c});module.exports=y(O);function i(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);return}if(r==="dataset"&&typeof s=="object"&&s!==null){Object.entries(s).forEach(([l,m])=>{n.dataset[l]=m});return}if(r==="text"){n.textContent=s;return}n.setAttribute(r,s)}),n}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 c(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-AR3IDUAF.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.0.0",
+  "version": "2.2.0",
   "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",
@@ -9,7 +9,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "tsup --dts",
-    "lint": "tsc"
+    "lint": "tsc",
+    "format": "prettier --write ./src",
+    "release": "npm run build && changeset publish"
   },
   "repository": {
     "type": "git",
@@ -28,8 +30,9 @@
   "homepage": "https://github.com/rafaucau/ts-dom-utils#readme",
   "funding": "https://github.com/rafaucau/ts-dom-utils?sponsor=1",
   "devDependencies": {
-    "prettier": "^2.8.8",
-    "tsup": "^7.1.0",
-    "typescript": "^5.1.6"
+    "@changesets/cli": "^2.26.2",
+    "prettier": "^3.1.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.2"
   }
 }

package/dist/chunk-AR3IDUAF.js

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