html-attribute-sorter - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

CHANGELOG.md

 # Changelog
 
+## [0.4.0](https://github.com/shufo/html-attribute-sorter/compare/v0.3.2...v0.4.0) (2022-08-07)
+
+
+### Features
+
+* 🎸 add custom order strategy ([64e5639](https://github.com/shufo/html-attribute-sorter/commit/64e563912ad71a1a06c4551bab5c8930d9335942))
+
 ## [0.3.2](https://github.com/shufo/html-attribute-sorter/compare/v0.3.1...v0.3.2) (2022-08-06)
@@ -4,0 +11,0 @@

dist/main.js

@@ -1,2 +0,2 @@
-"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var I=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},O=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!v.call(r,s)&&s!==e&&u(r,s,{get:()=>t[s],enumerable:!(i=E(t,s))||i.enumerable});return r};var x=r=>O(u({},"__esModule",{value:!0}),r);var b={};I(b,{sortAttributes:()=>y});module.exports=x(b);var g=class{constructor(t){this.strategy=t}setStrategy(t){this.strategy=t}sort(t){return this.strategy.sort(t)}};var p=class{sort(t){return t.sort()}};var d=class{constructor(){this.orderedAttrsRegex=["class","id","name","data-.+","ng-.+","src","for","type","href","value","values","title","alt","role","aria-.+","tabindex","style"]}sort(t){let e=[];this.orderedAttrsRegex.forEach(s=>{t.forEach(n=>{new RegExp(`^${s}`).test(n)&&e.push(n)})});let i=t.filter(s=>e.indexOf(s)===-1);return e.concat(i)}};var l=class{constructor(){this.orderedAttrsRegex=["class","id","data-.+"]}sort(t){let e=[];this.orderedAttrsRegex.forEach(s=>{t.forEach(n=>{new RegExp(`^${s}`).test(n)&&e.push(n)})});let i=t.filter(s=>e.indexOf(s)===-1);return e.concat(i)}};var f=class{constructor(){this.DEFINITION=["is","v-is"];this.LIST_RENDERING=["v-for"];this.CONDITIONALS=["v-if","v-else-if","v-else","v-show","v-cloak"];this.RENDER_MODIFIERS=["v-once","v-pre"];this.GLOBAL=["id"];this.UNIQUE=["ref","key"];this.SLOT=["v-slot","slot"];this.TWO_WAY_BINDING=["v-model"];this.OTHER_DIRECTIVES=/v-[-:\w\d]+/g;this.EVENTS=["@click","v-on="];this.CONTENT=["v-text","v-html"];this.headingOrderedAttrsRegex=[...this.DEFINITION,...this.LIST_RENDERING,...this.CONDITIONALS,...this.RENDER_MODIFIERS,...this.GLOBAL,...this.UNIQUE,...this.SLOT,...this.TWO_WAY_BINDING];this.tailOrderedAttrsRegex=[...this.EVENTS,...this.CONTENT]}sort(t){let e=[],i=[];this.headingOrderedAttrsRegex.forEach(o=>{t.forEach(a=>{new RegExp(`^${o}`).test(a)&&e.push(a)})}),this.tailOrderedAttrsRegex.forEach(o=>{t.forEach(a=>{new RegExp(`^${o}`).test(a)&&i.push(a)})});let s=t.filter(o=>e.indexOf(o)===-1).filter(o=>i.indexOf(o)===-1),n=s.filter(o=>this.OTHER_DIRECTIVES.test(o)),c=s.filter(o=>n.indexOf(o)===-1);return e.concat(n).concat(c).concat(i)}};var S=[],m=[];function y(r,t={order:"code-guide"}){let e=r.replace(/<(?!\/)[-:.\w\d@]+\s(?:"[^"]*"|'[^']*'|[^"'])*?>/g,i=>N(i));return w(e,t)}function N(r){let t=S.push(r)-1;return T(t.toString())}function R(r,t){let e=m.push(t)-1;return A(r,e.toString())}function T(r){return"___sort_tags_#___".replace("#",r)}function A(r,t){return`${r}_attrs_#___`.replace("#",t)}function w(r,t){return r.replace(/___sort_tags_(\d+)___/g,(e,i)=>{let n=S[i].replace(/([-:.\w\d]+)=("[^"]*"|'[^']*'|[^"'])/g,(a,h)=>R(h,a));return D(n,t).replace(/[-:.\w\d]+_attrs_(\d+)___/g,(a,h)=>m[h])})}function D(r,t){let e=L(t.order),i=new g(e);return r.replace(/(?<=<[-:.\w\d]+\s)[^>]*?(?=\/?>)/g,s=>{let c=s.split(/\s/).filter(a=>a.length>0);return i.sort(c).join(" ")})}function L(r){switch(r){case"alphabetical":return new p;case"code-guide":return new d;case"idiomatic":return new l;case"vuejs":return new f}throw new Error("You can specify only [alphabetical|code-guide|idiomatic|vuejs] for sorting order")}0&&(module.exports={sortAttributes});
+"use strict";var h=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var I=(r,t)=>{for(var e in t)h(r,e,{get:t[e],enumerable:!0})},O=(r,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!x.call(r,s)&&s!==e&&h(r,s,{get:()=>t[s],enumerable:!(o=_(t,s))||o.enumerable});return r};var R=r=>O(h({},"__esModule",{value:!0}),r);var C={};I(C,{sortAttributes:()=>y});module.exports=R(C);var g=class{constructor(t){this.strategy=t}setStrategy(t){this.strategy=t}sort(t){return this.strategy.sort(t)}};var p=class{sort(t){return t.sort()}};var d=class{constructor(){this.orderedAttrsRegex=["class","id","name","data-.+","ng-.+","src","for","type","href","value","values","title","alt","role","aria-.+","tabindex","style"]}sort(t){let e=[];this.orderedAttrsRegex.forEach(s=>{t.forEach(i=>{new RegExp(`^${s}`).test(i)&&e.push(i)})});let o=t.filter(s=>e.indexOf(s)===-1);return e.concat(o)}};var l=class{constructor(t){this.orderedAttrsRegex=[];if(t.customRegexes===void 0)throw new Error("customRegexes is empty. You must specify custom order to use custom strategy");this.orderedAttrsRegex=t.customRegexes}sort(t){let e=[];this.orderedAttrsRegex.forEach(s=>{t.forEach(i=>{new RegExp(`^${s}`).test(i)&&e.push(i)})});let o=t.filter(s=>e.indexOf(s)===-1);return e.concat(o)}};var f=class{constructor(){this.orderedAttrsRegex=["class","id","data-.+"]}sort(t){let e=[];this.orderedAttrsRegex.forEach(s=>{t.forEach(i=>{new RegExp(`^${s}`).test(i)&&e.push(i)})});let o=t.filter(s=>e.indexOf(s)===-1);return e.concat(o)}};var u=class{constructor(){this.DEFINITION=["is","v-is"];this.LIST_RENDERING=["v-for"];this.CONDITIONALS=["v-if","v-else-if","v-else","v-show","v-cloak"];this.RENDER_MODIFIERS=["v-once","v-pre"];this.GLOBAL=["id"];this.UNIQUE=["ref","key"];this.SLOT=["v-slot","slot"];this.TWO_WAY_BINDING=["v-model"];this.OTHER_DIRECTIVES=/v-[-:\w\d]+/g;this.EVENTS=["@click","v-on="];this.CONTENT=["v-text","v-html"];this.headingOrderedAttrsRegex=[...this.DEFINITION,...this.LIST_RENDERING,...this.CONDITIONALS,...this.RENDER_MODIFIERS,...this.GLOBAL,...this.UNIQUE,...this.SLOT,...this.TWO_WAY_BINDING];this.tailOrderedAttrsRegex=[...this.EVENTS,...this.CONTENT]}sort(t){let e=[],o=[];this.headingOrderedAttrsRegex.forEach(n=>{t.forEach(a=>{new RegExp(`^${n}`).test(a)&&e.push(a)})}),this.tailOrderedAttrsRegex.forEach(n=>{t.forEach(a=>{new RegExp(`^${n}`).test(a)&&o.push(a)})});let s=t.filter(n=>e.indexOf(n)===-1).filter(n=>o.indexOf(n)===-1),i=s.filter(n=>this.OTHER_DIRECTIVES.test(n)),c=s.filter(n=>i.indexOf(n)===-1);return e.concat(i).concat(c).concat(o)}};var S=[],E=[];function y(r,t={order:"code-guide"}){let e=r.replace(/<(?!\/)[-:.\w\d@]+\s(?:"[^"]*"|'[^']*'|[^"'])*?>/g,o=>N(o));return D(e,t)}function N(r){let t=S.push(r)-1;return w(t.toString())}function A(r,t){let e=E.push(t)-1;return T(r,e.toString())}function w(r){return"___sort_tags_#___".replace("#",r)}function T(r,t){return`${r}_attrs_#___`.replace("#",t)}function D(r,t){return r.replace(/___sort_tags_(\d+)___/g,(e,o)=>{let i=S[o].replace(/([-:.\w\d]+)=("[^"]*"|'[^']*'|[^"'])/g,(a,m)=>A(m,a));return L(i,t).replace(/[-:.\w\d]+_attrs_(\d+)___/g,(a,m)=>E[m])})}function L(r,t){let e=b(t),o=new g(e);return r.replace(/(?<=<[-:.\w\d]+\s)[^>]*?(?=\/?>)/g,s=>{let c=s.split(/\s/).filter(a=>a.length>0);return o.sort(c).join(" ")})}function b(r){switch(r.order){case"alphabetical":return new p;case"code-guide":return new d;case"idiomatic":return new f;case"vuejs":return new u;case"custom":return new l(r)}throw new Error("You can specify only [alphabetical|code-guide|idiomatic|vuejs] for sorting order")}0&&(module.exports={sortAttributes});
 //# sourceMappingURL=main.js.map

dist/types/options.d.ts

@@ -1,4 +0,5 @@
-export declare type Strategy = "alphabetical" | "code-guide" | "idiomatic" | "vuejs";
+export declare type Strategy = "alphabetical" | "code-guide" | "idiomatic" | "vuejs" | "custom";
 export interface ISortOption {
     order: Strategy;
+    customRegexes?: string[];
 }

package.json

 {
   "name": "html-attribute-sorter",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "An html attribute sorter",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

README.md

@@ -59,2 +59,13 @@ [![npm](https://img.shields.io/npm/v/html-attribute-sorter)](https://www.npmjs.com/package/html-attribute-sorter)
 // => <img class="img b-30" id="img_10" src="foo">
+
+// custom order
+const sorted = sortAttributes(
+  `<img src="foo" alt="title" class="img b-30" id="img_10">`,
+  {
+    order: "custom",
+    customRegexes: ["id", "class", "sr.+", "alt"], // you can use regex for attritube names
+  }
+);
+console.log(sorted);
+// => <img id="img_10" class="img b-30" src="foo" alt="title" >
 ```
@@ -77,8 +88,10 @@
   order: string;
+  customRegexes?: string[];
 }
 ```
 
-| key   | value                                                                                                                    |
-| ----- | ------------------------------------------------------------------------------------------------------------------------ |
-| order | An order to sort attributes. You can specify `alphabetical`, `code-guide`, `idiomatic` or `vuejs`. default: `code-guide` |
+| key           | value                                                                                                                               | required | default      |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------ |
+| order         | An order to sort attributes. You can specify `alphabetical`, `code-guide`, `idiomatic`, `custom` or `vuejs`.                        | yes      | `code-guide` |
+| customRegexes | If you set an `order` to `custom`, you can specify custom order regexes for sorting attributes. e.g. `["data-.+", "class", "src"]`. | no       | `[]`         |
 
@@ -85,0 +98,0 @@ ## Testing

src/main.ts

@@ -5,2 +5,3 @@ import { ISortOption, Strategy } from "./options";
 import { CodeGuideStrategy } from "./strategy/code-guide";
+import { CustomStrategy } from "./strategy/custom";
 import { IdiomaticStrategy } from "./strategy/idiomatic";
@@ -65,3 +66,3 @@ import { VuejsStrategy } from "./strategy/vuejs";
 function _sortAttributes(content: string, options: ISortOption): string {
-    const strategy = getSortStrategy(options.order);
+    const strategy = getSortStrategy(options);
     const sorter = new Sorter(strategy);
@@ -77,4 +78,4 @@
 
-function getSortStrategy(strategy: Strategy) {
-    switch (strategy) {
+function getSortStrategy(options: ISortOption) {
+    switch (options.order) {
         case "alphabetical":
@@ -88,2 +89,4 @@ return new AlphabeticalStrategy();
             return new VuejsStrategy();
+        case "custom":
+            return new CustomStrategy(options);
     }
@@ -90,0 +93,0 @@

src/options.ts

@@ -1,5 +0,11 @@
-export type Strategy = "alphabetical" | "code-guide" | "idiomatic" | "vuejs";
+export type Strategy =
+    | "alphabetical"
+    | "code-guide"
+    | "idiomatic"
+    | "vuejs"
+    | "custom";
 
 export interface ISortOption {
     order: Strategy;
+    customRegexes?: string[];
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39488

increased by13.7%

Number of package files

22

increased by10%

Lines of code

348

increased by17.57%

Number of lines in readme file

122

increased by11.93%

No dependency changes