hjsx - npm Package Compare versions

Comparing version 0.1.15 to 0.1.16

hjsx.js

@@ -1,1 +0,1 @@
-function J(R){if(U.html.includes(R))return C(R);if(U.svg.includes(R))return K(R);return R}var C=function(R){if(q.html[R])return q.html[R];return R.toLowerCase()},K=function(R){if(q.svg[R])return q.svg[R];return R.replace(/([A-Z])/g,(f)=>`-${f[0].toLowerCase()}`)},U={html:"accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap",svg:"accentHeight accumulate additive alignmentBaseline allowReorder alphabetic amplitude arabicForm ascent attributeName attributeType autoReverse azimuth baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight clip clipPath clipPathUnits clipRule colorInterpolation colorInterpolationFilters colorProfile colorRendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground end exponent externalResourcesRequired fill fillOpacity fillRule filter filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor limitingConeAngle local markerEnd markerHeight markerMid markerStart markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode numOctaves offset opacity operator order orient orientation origin overflow overlinePosition overlineThickness paintOrder panose1 pathLength patternContentUnits patternTransform patternUnits pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shapeRendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor textDecoration textLength textRendering to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan"},q={html:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv",defaultChecked:"checked"},svg:{panose1:"panose-1",xlinkActuate:"xlink:actuate",xlinkArcrole:"xlink:arcrole",xlinkHref:"xlink:href",xlinkRole:"xlink:role",xlinkShow:"xlink:show",xlinkTitle:"xlink:title",xlinkType:"xlink:type",xmlBase:"xml:base",xmlLang:"xml:lang",xmlSpace:"xml:space",xmlnsXlink:"xmlns:xlink",xmlns:"xmlns",zoomAndPan:"zoomAndPan"}};function A(R){let f="",w,E=0,Z;while(!0){if(w=M.exec(R)?.index,w===void 0)break;f+=R.slice(E,w),Z=R[w],f+=W[Z],E=w+1}return f+=R.slice(E),f}function L(R){return typeof R==="string"||typeof R==="number"||typeof R==="boolean"}function B(R){return R===null||R===void 0}function X(R){return Symbol.iterator in Object(R)&&typeof R!=="string"}function D(R){return typeof R==="object"&&R!==null}function Y(R){return typeof R==="function"&&R.toString().trim().startsWith("class")}function $(R){if(typeof R!=="object"||R===null)throw new Error("dangerouslySetInnerHTML must be an object");if(!("__html"in R))throw new Error("dangerouslySetInnerHTML must have an __html property");return String(R.__html)}function j(R){if(typeof R!=="object"||R===null)throw new Error("style must be an object");return Object.entries(R).map(([f,w])=>`${k(f)}: ${w}`).join("; ")}var k=function(R){return R.replace(/([A-Z])/g,(f)=>`-${f[0].toLowerCase()}`)},W={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},M=new RegExp(`[${Object.keys(W).join("")}]`,"g"),H=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];function _(R,f,w){return{type:R,props:f,children:w,render(){return G(this)},$$typeof:Symbol.for("hjsx.element"),key:null,ref:null,_owner:null}}function S({children:R}){return R}var I=function(R){if(!D(R))throw new Error("Element must be an object");if(!("type"in R))throw new Error("Element must have a type");if(!("props"in R))throw new Error("Element must have props")},G=(R)=>{if(L(R))return A(String(R));if(B(R))return"";if(X(R))return O({children:R});if(!D(R))return"";if(!("children"in R))return O({children:R});I(R);let{type:f,props:w,children:E}=R;if(w=w??{},typeof f==="function"){const F=Y(f)?new f({...w,children:E}):f({...w,children:E});return G(F)}const Z=w.dangerouslySetInnerHTML?$(w.dangerouslySetInnerHTML):null,P=Object.entries(w).filter(([F,N])=>F!=="u.dangerouslySetInnerHTML"&&N!==!1&&N!=null).map(([F,N])=>{const Q=J(F),z=A(String(F==="style"?j(N):N));return N===!0?Q:`${Q}="${z}"`}).join(" "),V=Z??O({children:E});if(typeof f!=="string")return G({type:f,props:w,children:E});return H.includes(f)?`<${f} ${P} />`:`<${f} ${P}>${V}</${f}>`},O=(R)=>{if(B(R))return"";if(L(R))return A(String(R));if(!D(R))return"";const{children:f}=R;return(Array.isArray(f)?f:[f]).filter((E)=>!B(E)).map(G).join("")};globalThis.hjsx=_;globalThis.fragment=S;export{G as renderToString,_ as hjsx,S as fragment};
+function J(R){if(U.html.includes(R))return C(R);if(U.svg.includes(R))return K(R);return R}var C=function(R){if(q.html[R])return q.html[R];return R.toLowerCase()},K=function(R){if(q.svg[R])return q.svg[R];return R.replace(/([A-Z])/g,(w)=>`-${w[0].toLowerCase()}`)},U={html:"accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap",svg:"accentHeight accumulate additive alignmentBaseline allowReorder alphabetic amplitude arabicForm ascent attributeName attributeType autoReverse azimuth baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight clip clipPath clipPathUnits clipRule colorInterpolation colorInterpolationFilters colorProfile colorRendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground end exponent externalResourcesRequired fill fillOpacity fillRule filter filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor limitingConeAngle local markerEnd markerHeight markerMid markerStart markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode numOctaves offset opacity operator order orient orientation origin overflow overlinePosition overlineThickness paintOrder panose1 pathLength patternContentUnits patternTransform patternUnits pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shapeRendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor textDecoration textLength textRendering to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan"},q={html:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv",defaultChecked:"checked"},svg:{panose1:"panose-1",xlinkActuate:"xlink:actuate",xlinkArcrole:"xlink:arcrole",xlinkHref:"xlink:href",xlinkRole:"xlink:role",xlinkShow:"xlink:show",xlinkTitle:"xlink:title",xlinkType:"xlink:type",xmlBase:"xml:base",xmlLang:"xml:lang",xmlSpace:"xml:space",xmlnsXlink:"xmlns:xlink",xmlns:"xmlns",zoomAndPan:"zoomAndPan"}};function A(R){let w="",E,F=0,f;while(!0){if(E=M.exec(R)?.index,E===void 0)break;w+=R.slice(F,E),f=R[E],w+=W[f],F=E+1}return w+=R.slice(F),w}function L(R){return typeof R==="string"||typeof R==="number"||typeof R==="boolean"}function B(R){return R===null||R===void 0}function X(R){return Symbol.iterator in Object(R)&&typeof R!=="string"}function D(R){return typeof R==="object"&&R!==null}function Y(R){return typeof R==="function"&&R.toString().trim().startsWith("class")}function $(R){if(typeof R!=="object"||R===null)throw new Error("dangerouslySetInnerHTML must be an object");if(!("__html"in R))throw new Error("dangerouslySetInnerHTML must have an __html property");return String(R.__html)}function j(R){if(typeof R!=="object"||R===null)throw new Error("style must be an object");return Object.entries(R).map(([w,E])=>`${k(w)}: ${E}`).join("; ")}var k=function(R){return R.replace(/([A-Z])/g,(w)=>`-${w[0].toLowerCase()}`)},W={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},M=new RegExp(`[${Object.keys(W).join("")}]`,"g"),H=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];function _(R,w,E){return{type:R,props:w,children:E,render(){return G(this)},$$typeof:Symbol.for("hjsx.element"),key:null,ref:null,_owner:null}}function S({children:R}){return R}var I=function(R){if(!D(R))throw new Error("Element must be an object");if(!("type"in R))throw new Error("Element must have a type");if(!("props"in R))throw new Error("Element must have props")},G=(R)=>{if(L(R))return A(String(R));if(B(R))return"";if(X(R))return O({children:R});if(!D(R))return"";if(!("children"in R))return O({children:R});I(R);let{type:w,props:E,children:F}=R;if(E=E??{},typeof w==="function"){const N=Y(w)?new w({...E,children:F}):w({...E,children:F});return G(N)}const f=E.dangerouslySetInnerHTML?$(E.dangerouslySetInnerHTML):null,P=Object.entries(E).filter(([N,Z])=>N!=="u.dangerouslySetInnerHTML"&&Z!==!1&&Z!=null).map(([N,Z])=>{const Q=J(N),z=A(String(N==="style"?j(Z):Z));return Z===!0?Q:`${Q}="${z}"`}).join(" "),V=f??O({children:F});if(typeof w!=="string")return G({type:w,props:E,children:F});return H.includes(w)?`<${w} ${P} />`:`<${w} ${P}>${V}</${w}>`},O=(R)=>{if(B(R))return"";if(L(R))return A(String(R));if(!D(R))return"";const{children:w}=R;return(Array.isArray(w)?w:[w]).filter((F)=>!B(F)).map(G).join("")};globalThis.hjsx=Object.assign(_,{fragment:S});export{G as renderToString,_ as hjsx,S as fragment};

hjsx.ts

@@ -100,3 +100,3 @@ import * as u from "./util";
 // set globals
-globalThis.hjsx = hjsx;
-globalThis.fragment = fragment;
+globalThis.hjsx = Object.assign(hjsx, { fragment });
+

package.json

 {
     "name": "hjsx",
-    "version": "0.1.15",
+    "version": "0.1.16",
     "module": "hjsx.ts",
@@ -5,0 +5,0 @@ "main": "hjsx.js",

README.md

@@ -13,4 +13,40 @@ # hjsx
 
-It *is* currently available on [`npm`](https://www.npmjs.com/package/hjsx), but I wouldn't recommend using it yet.
+It _is_ currently available on [`npm`](https://www.npmjs.com/package/hjsx), but I wouldn't recommend using it yet.
 
+## Usage
+
+First, install the package:
+
+```bash
+bun i hjsx
+```
+
+Then you'll need to update your tsconfig.json to use the `react-jsx` compiler option, and set the `jsxFactory` and `jsxFragmentFactory` options to `hjsx` and `hjsx.fragment` respectively:
+
+```json
+{
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "jsxFactory": "hjsx",
+        "jsxFragmentFactory": "hjsx.fragment"
+    }
+}
+```
+
+Now you can use JSX in your code:
+
+```tsx
+import { type hjsx } from "hjsx";
+type MyComponentProps = hjsx.Attributes & {};
+export function MyComponent(props: MyComponentProps) {
+    return (
+        <>
+            <div {...props}>
+                <h1>c00l b34nz</h1>
+            </div>
+        </>
+    );
+}
+```
+
 Check out the demo:
@@ -17,0 +53,0 @@

tsconfig.json

@@ -9,3 +9,3 @@ {
     "jsxFactory": "hjsx",
-    "jsxFragmentFactory": "fragment",
+    "jsxFragmentFactory": "hjsx.fragment",
     "allowJs": true,
@@ -12,0 +12,0 @@

No alert changes

Improved metrics

Total package byte prevSize

97419

increased by0.78%

Number of lines in readme file

61

increased by144%

Worsened metrics

Lines of code

1991

decreased by-0.1%

No dependency changes