Merge pull request #23 from svg-rust/html-attr

mapping html attr to jsx prop

.github/workflows/CI.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Install Rust
         uses: dtolnay/rust-toolchain@stable
         with:
-          toolchain: nightly
+          toolchain: nightly-2023-06-27
           target: x86_64-unknown-linux-gnu
       - name: Run cargo test
         run: cargo test -p svgr-rs
@@ -47,7 +47,7 @@ jobs:
             docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
             build: |-
               set -e &&
-              rustup default nightly &&
+              rustup default nightly-2023-06-27 &&
               yarn build --target x86_64-unknown-linux-gnu &&
               strip *.node
           - host: macos-latest
@@ -75,7 +75,7 @@ jobs:
         uses: dtolnay/rust-toolchain@stable
         if: ${{ !matrix.settings.docker }}
         with:
-          toolchain: nightly
+          toolchain: nightly-2023-06-27
           targets: ${{ matrix.settings.target }}
       - name: Cache cargo
         uses: actions/cache@v3

__tests__/__snapshots__/config.spec.ts.md

@@ -220,3 +220,25 @@ Generated by [AVA](https://avajs.dev).
     const SvgComponent = (props)=><svg width="88px" height="88px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" {...props}><g fill="none" fillRule="evenodd" stroke="#063855" strokeLinecap="square" strokeWidth={2}><path d="M51 37 37 51M51 51 37 37"/></g></svg>;␊
     export default SvgComponent;␊
     `
+
+## titleProp: without title added
+
+> Snapshot 1
+
+    `import * as React from "react";␊
+    const SvgComponent = ({ title , titleId , ...props })=><svg width={0} height={0} style={{␊
+            position: "absolute"␊
+        }} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path d="M0 0h24v24H0z" fill="none"/></svg>;␊
+    export default SvgComponent;␊
+    `
+
+## descProp: without desc added
+
+> Snapshot 1
+
+    `import * as React from "react";␊
+    const SvgComponent = ({ desc , descId , ...props })=><svg width={0} height={0} style={{␊
+            position: "absolute"␊
+        }} aria-describedby={descId} {...props}>{desc ? <desc id={descId}>{desc}</desc> : null}<path d="M0 0h24v24H0z" fill="none"/></svg>;␊
+    export default SvgComponent;␊
+    `

__tests__/config.spec.ts

@@ -56,24 +56,22 @@ configs.forEach(async c => {
 	})
 })
 
-// it('titleProp: without title added', async () => {
-// 	const svg = `
-// 	<svg width="0" height="0" style="position:absolute">
-// <path d="M0 0h24v24H0z" fill="none" />
-// </svg>
-// `
-// 	expect(
-// 		await convertWithAllPlugins(svg, { titleProp: true }),
-// 	).toMatchSnapshot()
-// })
+test('titleProp: without title added', async t => {
+	const svg = `
+<svg width="0" height="0" style="position:absolute">
+	<path d="M0 0h24v24H0z" fill="none" />
+</svg>
+`
+	const result = await transform(svg, { titleProp: true })
+	t.snapshot(result)
+})
 
-// it('descProp: without desc added', async () => {
-// 	const svg = `
-// 	<svg width="0" height="0" style="position:absolute">
-// <path d="M0 0h24v24H0z" fill="none" />
-// </svg>
-// `
-// 	expect(
-// 		await convertWithAllPlugins(svg, { descProp: true }),
-// 	).toMatchSnapshot()
-// })
+test('descProp: without desc added', async t => {
+	const svg = `
+<svg width="0" height="0" style="position:absolute">
+	<path d="M0 0h24v24H0z" fill="none" />
+</svg>
+`
+	const result = await transform(svg, { descProp: true })
+	t.snapshot(result)
+})

binding.d.ts

@@ -11,9 +11,17 @@ export interface Caller {
   name?: string
   previousExport?: string
 }
+/** The state linked to the transformation. */
 export interface State {
+  /** The name of the file that is generated, mainly used to find runtime config file to apply. */
   filePath?: string
+  /** The name of the component that will be used in the generated component. */
   componentName?: string
+  /**
+   * If you create a tool based on SVGR, it is always better to specify `state.caller`.
+   * It permits the inter-operability betweens plugins.
+   * If someone create a SVGR plugin it could adapt it specifically to your tool.
+   */
   caller?: Caller
 }
 export function transform(code: string, config: Buffer, state?: State | undefined | null): Promise<string>

crates/core/Cargo.toml

@@ -5,7 +5,7 @@ name        = "svgr-rs"
 edition     = "2021"
 license     = "MIT"
 repository  = "https://github.com/svg-rust/svgr-rs.git"
-version     = "0.1.2"
+version     = "0.1.3"
 
 [features]
 node = ["dep:napi", "dep:napi-derive"]

crates/core/src/hast_to_swc_ast/mappings.rs

@@ -3,6 +3,152 @@ use std::collections::HashMap;
 // From https://raw.githubusercontent.com/facebook/react/master/packages/react-dom/src/shared/possibleStandardNames.js
 pub fn create_attr_mappings() -> HashMap<&'static str, &'static str> {
     HashMap::from([
+        // HTML
+        ("accept", "accept"),
+        ("acceptcharset", "acceptCharset"),
+        ("accept-charset", "acceptCharset"),
+        ("accesskey", "accessKey"),
+        ("action", "action"),
+        ("allowfullscreen", "allowFullScreen"),
+        ("alt", "alt"),
+        ("as", "as"),
+        ("async", "async"),
+        ("autocapitalize", "autoCapitalize"),
+        ("autocomplete", "autoComplete"),
+        ("autocorrect", "autoCorrect"),
+        ("autofocus", "autoFocus"),
+        ("autoplay", "autoPlay"),
+        ("autosave", "autoSave"),
+        ("capture", "capture"),
+        ("cellpadding", "cellPadding"),
+        ("cellspacing", "cellSpacing"),
+        ("challenge", "challenge"),
+        ("charset", "charSet"),
+        ("checked", "checked"),
+        ("children", "children"),
+        ("cite", "cite"),
+        ("class", "className"),
+        ("classid", "classID"),
+        ("classname", "className"),
+        ("cols", "cols"),
+        ("colspan", "colSpan"),
+        ("content", "content"),
+        ("contenteditable", "contentEditable"),
+        ("contextmenu", "contextMenu"),
+        ("controls", "controls"),
+        ("controlslist", "controlsList"),
+        ("coords", "coords"),
+        ("crossorigin", "crossOrigin"),
+        ("dangerouslysetinnerhtml", "dangerouslySetInnerHTML"),
+        ("data", "data"),
+        ("datetime", "dateTime"),
+        ("default", "default"),
+        ("defaultchecked", "defaultChecked"),
+        ("defaultvalue", "defaultValue"),
+        ("defer", "defer"),
+        ("dir", "dir"),
+        ("disabled", "disabled"),
+        ("download", "download"),
+        ("draggable", "draggable"),
+        ("enctype", "encType"),
+        ("for", "htmlFor"),
+        ("form", "form"),
+        ("formmethod", "formMethod"),
+        ("formaction", "formAction"),
+        ("formenctype", "formEncType"),
+        ("formnovalidate", "formNoValidate"),
+        ("formtarget", "formTarget"),
+        ("frameborder", "frameBorder"),
+        ("headers", "headers"),
+        ("height", "height"),
+        ("hidden", "hidden"),
+        ("high", "high"),
+        ("href", "href"),
+        ("hreflang", "hrefLang"),
+        ("htmlfor", "htmlFor"),
+        ("httpequiv", "httpEquiv"),
+        ("http-equiv'", "httpEquiv"),
+        ("icon", "icon"),
+        ("id", "id"),
+        ("innerhtml", "innerHTML"),
+        ("inputmode", "inputMode"),
+        ("integrity", "integrity"),
+        ("is", "is"),
+        ("itemid", "itemID"),
+        ("itemprop", "itemProp"),
+        ("itemref", "itemRef"),
+        ("itemscope", "itemScope"),
+        ("itemtype", "itemType"),
+        ("keyparams", "keyParams"),
+        ("keytype", "keyType"),
+        ("kind", "kind"),
+        ("label", "label"),
+        ("lang", "lang"),
+        ("list", "list"),
+        ("loop", "loop"),
+        ("low", "low"),
+        ("manifest", "manifest"),
+        ("marginwidth", "marginWidth"),
+        ("marginheight", "marginHeight"),
+        ("max", "max"),
+        ("maxlength", "maxLength"),
+        ("media", "media"),
+        ("mediagroup", "mediaGroup"),
+        ("method", "method"),
+        ("min", "min"),
+        ("minlength", "minLength"),
+        ("multiple", "multiple"),
+        ("muted", "muted"),
+        ("name", "name"),
+        ("nomodule", "noModule"),
+        ("nonce", "nonce"),
+        ("novalidate", "noValidate"),
+        ("open", "open"),
+        ("optimum", "optimum"),
+        ("pattern", "pattern"),
+        ("placeholder", "placeholder"),
+        ("playsinline", "playsInline"),
+        ("poster", "poster"),
+        ("preload", "preload"),
+        ("profile", "profile"),
+        ("radiogroup", "radioGroup"),
+        ("readonly", "readOnly"),
+        ("referrerpolicy", "referrerPolicy"),
+        ("rel", "rel"),
+        ("required", "required"),
+        ("reversed", "reversed"),
+        ("role", "role"),
+        ("rows", "rows"),
+        ("rowspan", "rowSpan"),
+        ("sandbox", "sandbox"),
+        ("scope", "scope"),
+        ("scoped", "scoped"),
+        ("scrolling", "scrolling"),
+        ("seamless", "seamless"),
+        ("selected", "selected"),
+        ("shape", "shape"),
+        ("size", "size"),
+        ("sizes", "sizes"),
+        ("span", "span"),
+        ("spellcheck", "spellCheck"),
+        ("src", "src"),
+        ("srcdoc", "srcDoc"),
+        ("srclang", "srcLang"),
+        ("srcset", "srcSet"),
+        ("start", "start"),
+        ("step", "step"),
+        ("style", "style"),
+        ("summary", "summary"),
+        ("tabindex", "tabIndex"),
+        ("target", "target"),
+        ("title", "title"),
+        ("type", "type"),
+        ("usemap", "useMap"),
+        ("value", "value"),
+        ("width", "width"),
+        ("wmode", "wmode"),
+        ("wrap", "wrap"),
+        // SVG
         ("about", "about"),
         ("accentheight", "accentHeight"),
         ("accent-height", "accentHeight"),

crates/core/src/hast_to_swc_ast/mod.rs

@@ -346,4 +346,12 @@ mod tests {
             r#"<svg><path style={{"--index":1,fontSize:24}}/><path style={{"--index":2}}/></svg>;"#
         );
     }
+
+    #[test]
+    fn transforms_class() {
+        code_test(
+            r#"<svg><path class="icon"/></svg>"#,
+            r#"<svg><path className="icon"/></svg>;"#
+        );
+    }
 }