als-render-jsx - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

docs/03-basic-usage.md

@@ -9,5 +9,7 @@ ## Basic Usage
 ```js
-const component = /*js*/`function Some() {
-   const inner = 'Hello world!';
-   return (<div>{inner}</div>);
+const component = /*js*/`class Some {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return (<div>{this.inner}</div>);
+   }
 }`;
@@ -20,5 +22,7 @@ const result = RenderJsx.render(component);
 ```js
-function Some() {
-   const inner = 'Hello world!';
-   return `<div>${inner}</div>`;
+class Some {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return `<div>${this.inner}</div>`;
+   }
 }
@@ -31,4 +35,7 @@ ```
 ```js
-const component = /*js*/`function Parent() {
-   return (<div><Child>some inner</Child></div>);
+const component = /*js*/`class Parent {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return (<div><Child>some inner</Child></div>);
+   }
 }`;
@@ -41,5 +48,32 @@ const result = RenderJsx.render(component);
 ```js
-function Parent() {
-   return `<div>${(new Child({}, \`some inner\`)).call()}</div>`;
+class Parent {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return `<div>${new Child({},'some inner').call()}</div>`;
+   }
 }
 ```
+
+### rest attrubutes
+
+```js
+class Input {
+   constructor(props) {super(props)}
+   render(props) {
+      return (<input {...props} />);
+   }
+}
+
+```
+
+```js
+class Login {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return (<div>
+         <Input {{ name:'email',placeholder:'Email',type:'email',required:true  }}>
+         <Input {{ name:'password',placeholder:'password',type:'password',required:true  }}>
+      </div>);
+   }
+}
+```

docs/05-examples.md

@@ -7,4 +7,6 @@ ## Advanced Examples
 ```js
-const components = /*js*/`function Parent() {
-   return (<div><Child prop="value">Hello</Child></div>);
+const components = /*js*/`class Parent {
+   render() {
+      return (<div><Child prop="value">Hello</Child></div>);
+   }
 }`;
@@ -17,4 +19,6 @@ const result = RenderJsx.render(components);
 ```js
-function Parent() {
-   return `<div>${(new Child({prop: "value"}, \`Hello\`)).call()}</div>`;
+class Parent {
+   render() {
+      return `<div>${(new Child({prop: "value"}, \`Hello\`)).call()}</div>`;
+   }
 }
@@ -21,0 +25,0 @@ ```

lib/get-outer.js

 function getOuter(element,componentFn) {
-   let { tagName, selfClosed, attributes, props, isComponent, rest, inner } = element
-
+   let { tagName, selfClosed, attributes, props, isComponent, rest = '', inner } = element
    let outer = ''
@@ -13,2 +12,3 @@ if (isComponent) {
    } else {
+      if(rest) rest = ` \${Object.entries(${rest.replace('...','')}).map(([k,v]) => k + (v ? '="'+v+'"' : '')).join(' ')+' '}`
       if (tagName === '') {
@@ -23,3 +23,3 @@ if (inner) return inner
       }).join(' ')
-      outer = `<${tagName}${atts.length ? ' ' + atts : ''}>`
+      outer = `<${tagName}${atts.length ? ' ' + atts : ''}${rest}>`
       if (!selfClosed) outer += inner + `</${tagName}>`
@@ -26,0 +26,0 @@ }

package.json

 {
   "name": "als-render-jsx",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "index.js",
@@ -5,0 +5,0 @@ "directories": {

readme.md

@@ -48,5 +48,7 @@ # als-render-jsx Documentation
 ```js
-const component = /*js*/`function Some() {
-   const inner = 'Hello world!';
-   return (<div>{inner}</div>);
+const component = /*js*/`class Some {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return (<div>{this.inner}</div>);
+   }
 }`;
@@ -59,5 +61,7 @@ const result = RenderJsx.render(component);
 ```js
-function Some() {
-   const inner = 'Hello world!';
-   return `<div>${inner}</div>`;
+class Some {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return `<div>${this.inner}</div>`;
+   }
 }
@@ -70,4 +74,7 @@ ```
 ```js
-const component = /*js*/`function Parent() {
-   return (<div><Child>some inner</Child></div>);
+const component = /*js*/`class Parent {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return (<div><Child>some inner</Child></div>);
+   }
 }`;
@@ -80,7 +87,33 @@ const result = RenderJsx.render(component);
 ```js
-function Parent() {
-   return `<div>${(new Child({}, \`some inner\`)).call()}</div>`;
+class Parent {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return `<div>${new Child({},'some inner').call()}</div>`;
+   }
 }
 ```
 
+### rest attrubutes
+
+```js
+class Input {
+   constructor(props) {super(props)}
+   render(props) {
+      return (<input {...props} />);
+   }
+}
+
+```
+
+```js
+class Login {
+   constructor(props,inner) {super(props,inner)}
+   render() {
+      return (<div>
+         <Input {{ name:'email',placeholder:'Email',type:'email',required:true  }}>
+         <Input {{ name:'password',placeholder:'password',type:'password',required:true  }}>
+      </div>);
+   }
+}
+```
 ## Customizing `componentFn` and `buildAction`
@@ -142,4 +175,6 @@
 ```js
-const components = /*js*/`function Parent() {
-   return (<div><Child prop="value">Hello</Child></div>);
+const components = /*js*/`class Parent {
+   render() {
+      return (<div><Child prop="value">Hello</Child></div>);
+   }
 }`;
@@ -152,4 +187,6 @@ const result = RenderJsx.render(components);
 ```js
-function Parent() {
-   return `<div>${(new Child({prop: "value"}, \`Hello\`)).call()}</div>`;
+class Parent {
+   render() {
+      return `<div>${(new Child({prop: "value"}, \`Hello\`)).call()}</div>`;
+   }
 }
@@ -156,0 +193,0 @@ ```

render-jsx.js

@@ -135,4 +135,3 @@ const RenderJsx = (function(){
 function getOuter(element,componentFn) {
-   let { tagName, selfClosed, attributes, props, isComponent, rest, inner } = element
-
+   let { tagName, selfClosed, attributes, props, isComponent, rest = '', inner } = element
    let outer = ''
@@ -147,2 +146,3 @@ if (isComponent) {
    } else {
+      if(rest) rest = ` \${Object.entries(${rest.replace('...','')}).map(([k,v]) => k + (v ? '="'+v+'"' : '')).join(' ')+' '}`
       if (tagName === '') {
@@ -157,3 +157,3 @@ if (inner) return inner
       }).join(' ')
-      outer = `<${tagName}${atts.length ? ' ' + atts : ''}>`
+      outer = `<${tagName}${atts.length ? ' ' + atts : ''}${rest}>`
       if (!selfClosed) outer += inner + `</${tagName}>`
@@ -160,0 +160,0 @@ }

render-jsx.min.js

@@ -1,1 +0,1 @@
-let RenderJsx=(()=>{let c=["disabled","checked","readonly","required","hidden","autofocus","multiple","selected","controls","loop","muted","open","spellcheck","draggable","contenteditable","novalidate"];function i(e,t,r,l){let a="",h="",o=!0,u=!1,f,i=0;function n(e,i,n="attributes"){var s=r;if(i){let[e,t]=i;"async"===(e="className"===e?"class":e)?s.async=!0:c.includes(e)?(t&&(e=`\${${t} ? '${e}' : ''}`),s.attributes.push([e])):"props"===n&&e.startsWith("on")?s.buildAction([e,t]):s[n].push([e,t])}for(o=!0,u=!1,a="",h="",f=null;0===l[e].trim().length;)e++;return e}for(;">"!==e&&!(t>=l.length);){if(o)if("{"===e){for(;t<l.length&&"}"!==(e=l[++t]);)r.rest+=e;n(t)}else if("="===e||0===e.trim().length)0<a.length&&(" "===e&&"="!==l[t+1]?(r.attributes.push([a]),a=""):(o=!1,u=!0));else{if(">"===l[t+1]){"/"===e?r.selfClosed=!0:""!==a&&r.attributes.push([a+e]),t++;break}a+=e}else u&&(f?"{"===f?(h+=e,"{"===e?i++:"}"===e&&(0<i?i--:t=n(t,[a,h.slice(0,-1)],"props"))):"\\"!==l[t-1]&&e===f?t=n(t,[a,h]):h+=e:/["'`{]/.test(e)?f=e:/[a-zA-Z]/.test(e)&&(""!==a&&r.attributes.push([a]),o=!0,u=!1,a=e));">"===(e=l[++t])&&u&&(h+=e,e=l[++t])}return++t}class f{static render(e){return f.jsxParser((t=>{var i={'"':!0,"'":!0,"`":!0};let n="",s=null;for(let e=0;e<t.length;e++){var r=t[e];if(i[r]&&"\\"!==t[e-1])s=s===r&&"\\"!==t[e-1]?null:r,n+=t[e];else if(s||"/"!==r||"/"!==t[e+1])if(s||"{"!==r||"/"!==t[e+1]||"*"!==t[e+2])if(s||"/"!==r||"*"!==t[e+1])n+=t[e];else{for(;e<t.length&&("*"!==t[e]||"/"!==t[e+1]);)e++;e++}else{for(;e<t.length&&("*"!==t[e]||"/"!==t[e+1]||"}"!==t[e+2]);)e++;e+=2}else{for(;e<t.length&&"\n"!==t[e];)e++;"\n"===t[e]&&(n+=t[e])}}return n})(e))}static componentFn(e,t,i,n){return e+`(new ${t}(${i},\`${n}\`)).call()`}static buildAction([e,t]){e=e.split("on")[1].toLowerCase();return[e,t="$"+`{this.action('${e}',${t})}`]}static getOuter(h){{var o=f.componentFn;let{tagName:e,selfClosed:t,attributes:i,props:n,isComponent:s,rest:r,inner:l}=h,a="";if(s){var u=[...n,...i.map(([e,t])=>[e,'"'+t+'"'])].map(([e,t])=>e+":"+t),h=(r&&u.push(r),h.async?"await ":"");n="{"+u.join(",")+"}",a="${"+o(h,e,n,l)+"}"}else{if(""===e)return l||"";n=n.map(([e,t])=>[e,"${"+t+"}"]);u=[...i,...n].map(([e,t])=>t?`${e}="${t.replace(/\"/g,'\\"')}"`:e).join(" ");a=`<${e}${u.length?" "+u:""}>`,t||(a+=l+`</${e}>`)}return a}}static jsxParser(t){let i="";for(let e=0;e<t.length;e++)if("("===t[e]){var n=e;for(e++;0===t[e].trim().length;)e++;if("<"===t[e]){var s=new f(t,e);for(e=s.i,i+="`"+s.outer+"`";")"!==t[e];)e++}else i+=t.slice(n,e+1)}else i+=t[e];return i}tagName="";rest="";inner="";attributes=[];props=[];selfClosed=!1;constructor(e,t){if(">"===e[t+1])this.isComponent=!1,this.tagName="",this.i=t+2;else{for(this.isComponent=/[A-Z]/.test(e[t+1]);t<e.length&&!1!==/[A-Za-z0-9.]/.test(e[++t]);)this.tagName+=e[t];this.i=i(e[t],t,this,e)}!1===this.selfClosed&&this.getInner(e)}get outer(){return f.getOuter(this)}buildAction([e,t]){this.attributes.push(f.buildAction([e,t]))}getInner(e){var t=`</${this.tagName}>`;let i=0;for(var n="</>"==t?"<>":"<"+this.tagName;this.i<e.length;){if(this.inner+=e[this.i],this.inner.endsWith(n)&&i++,this.inner.endsWith(t)){if(!(0<i)){this.inner=this.inner.slice(0,-t.length).trim();break}i--}this.i++}this.buildInner()}buildInner(){let t="";if(!(this.inner.trim().length<2)&&(this.inner.includes("<")||this.inner.includes("{"))){for(let e=0;e<this.inner.length;e++){var i,n;"<"===this.inner[e]?(i=new f(this.inner,e),t+=i.outer,e=i.i):"{"===this.inner[e]?(e=((t,i)=>{let e=0,n={'"':[],"'":[],"`":[]};for(i.replace(/["'`]/g,(e,t)=>{"\\"!==i[t-1]&&n[e].push(t)});t<i.length;){var s=i[++t];if(n[s]&&n[s].length){let e;for(var r of n[s])if(r>t){e=r;break}e&&(t=e,n[s]=n[s].filter(e=>t<e))}else if("{"===s)e++;else if("}"===s){if(!(0<e))break;e--}}return t+1})(i=e,this.inner),n=this.inner.slice(i,e+1),t+="$"+f.jsxParser(n)):t+=this.inner[e]}this.inner=t}}}return f})();
+let RenderJsx=(()=>{let c=["disabled","checked","readonly","required","hidden","autofocus","multiple","selected","controls","loop","muted","open","spellcheck","draggable","contenteditable","novalidate"];function i(e,t,r,l){let a="",h="",o=!0,u=!1,f,i=0;function n(e,i,n="attributes"){var s=r;if(i){let[e,t]=i;"async"===(e="className"===e?"class":e)?s.async=!0:c.includes(e)?(t&&(e=`\${${t} ? '${e}' : ''}`),s.attributes.push([e])):"props"===n&&e.startsWith("on")?s.buildAction([e,t]):s[n].push([e,t])}for(o=!0,u=!1,a="",h="",f=null;0===l[e].trim().length;)e++;return e}for(;">"!==e&&!(t>=l.length);){if(o)if("{"===e){for(;t<l.length&&"}"!==(e=l[++t]);)r.rest+=e;n(t)}else if("="===e||0===e.trim().length)0<a.length&&(" "===e&&"="!==l[t+1]?(r.attributes.push([a]),a=""):(o=!1,u=!0));else{if(">"===l[t+1]){"/"===e?r.selfClosed=!0:""!==a&&r.attributes.push([a+e]),t++;break}a+=e}else u&&(f?"{"===f?(h+=e,"{"===e?i++:"}"===e&&(0<i?i--:t=n(t,[a,h.slice(0,-1)],"props"))):"\\"!==l[t-1]&&e===f?t=n(t,[a,h]):h+=e:/["'`{]/.test(e)?f=e:/[a-zA-Z]/.test(e)&&(""!==a&&r.attributes.push([a]),o=!0,u=!1,a=e));">"===(e=l[++t])&&u&&(h+=e,e=l[++t])}return++t}class f{static render(e){return f.jsxParser((t=>{var i={'"':!0,"'":!0,"`":!0};let n="",s=null;for(let e=0;e<t.length;e++){var r=t[e];if(i[r]&&"\\"!==t[e-1])s=s===r&&"\\"!==t[e-1]?null:r,n+=t[e];else if(s||"/"!==r||"/"!==t[e+1])if(s||"{"!==r||"/"!==t[e+1]||"*"!==t[e+2])if(s||"/"!==r||"*"!==t[e+1])n+=t[e];else{for(;e<t.length&&("*"!==t[e]||"/"!==t[e+1]);)e++;e++}else{for(;e<t.length&&("*"!==t[e]||"/"!==t[e+1]||"}"!==t[e+2]);)e++;e+=2}else{for(;e<t.length&&"\n"!==t[e];)e++;"\n"===t[e]&&(n+=t[e])}}return n})(e))}static componentFn(e,t,i,n){return e+`(new ${t}(${i},\`${n}\`)).call()`}static buildAction([e,t]){e=e.split("on")[1].toLowerCase();return[e,t="$"+`{this.action('${e}',${t})}`]}static getOuter(h){{var o=f.componentFn;let{tagName:e,selfClosed:t,attributes:i,props:n,isComponent:s,rest:r="",inner:l}=h,a="";if(s){var u=[...n,...i.map(([e,t])=>[e,'"'+t+'"'])].map(([e,t])=>e+":"+t),h=(r&&u.push(r),h.async?"await ":"");n="{"+u.join(",")+"}",a="${"+o(h,e,n,l)+"}"}else{if(r=r&&` \${Object.entries(${r.replace("...","")}).map(([k,v]) => k + (v ? '="'+v+'"' : '')).join(' ')+' '}`,""===e)return l||"";n=n.map(([e,t])=>[e,"${"+t+"}"]);u=[...i,...n].map(([e,t])=>t?`${e}="${t.replace(/\"/g,'\\"')}"`:e).join(" ");a=`<${e}${u.length?" "+u:""}${r}>`,t||(a+=l+`</${e}>`)}return a}}static jsxParser(t){let i="";for(let e=0;e<t.length;e++)if("("===t[e]){var n=e;for(e++;0===t[e].trim().length;)e++;if("<"===t[e]){var s=new f(t,e);for(e=s.i,i+="`"+s.outer+"`";")"!==t[e];)e++}else i+=t.slice(n,e+1)}else i+=t[e];return i}tagName="";rest="";inner="";attributes=[];props=[];selfClosed=!1;constructor(e,t){if(">"===e[t+1])this.isComponent=!1,this.tagName="",this.i=t+2;else{for(this.isComponent=/[A-Z]/.test(e[t+1]);t<e.length&&!1!==/[A-Za-z0-9.]/.test(e[++t]);)this.tagName+=e[t];this.i=i(e[t],t,this,e)}!1===this.selfClosed&&this.getInner(e)}get outer(){return f.getOuter(this)}buildAction([e,t]){this.attributes.push(f.buildAction([e,t]))}getInner(e){var t=`</${this.tagName}>`;let i=0;for(var n="</>"==t?"<>":"<"+this.tagName;this.i<e.length;){if(this.inner+=e[this.i],this.inner.endsWith(n)&&i++,this.inner.endsWith(t)){if(!(0<i)){this.inner=this.inner.slice(0,-t.length).trim();break}i--}this.i++}this.buildInner()}buildInner(){let t="";if(!(this.inner.trim().length<2)&&(this.inner.includes("<")||this.inner.includes("{"))){for(let e=0;e<this.inner.length;e++){var i,n;"<"===this.inner[e]?(i=new f(this.inner,e),t+=i.outer,e=i.i):"{"===this.inner[e]?(e=((t,i)=>{let e=0,n={'"':[],"'":[],"`":[]};for(i.replace(/["'`]/g,(e,t)=>{"\\"!==i[t-1]&&n[e].push(t)});t<i.length;){var s=i[++t];if(n[s]&&n[s].length){let e;for(var r of n[s])if(r>t){e=r;break}e&&(t=e,n[s]=n[s].filter(e=>t<e))}else if("{"===s)e++;else if("}"===s){if(!(0<e))break;e--}}return t+1})(i=e,this.inner),n=this.inner.slice(i,e+1),t+="$"+f.jsxParser(n)):t+=this.inner[e]}this.inner=t}}}return f})();

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

51938

increased by3.68%

Lines of code

854

increased by0.23%

Number of lines in readme file

219

increased by20.33%

No dependency changes