Map camle cased attributes to lower case

packages/core/jsx-runtime.d.ts

@@ -1652,6 +1652,7 @@ export declare namespace JSX {
  y?: number | string;
  width?: number | string;
  height?: number | string;
+ fill?: number | string;
  }
 
  interface ViewSVGAttributes<T>

packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1
+
+exports[`map camle cased > map camle cased 1`] = `
+"<script>
+ import React from \\"@builder.io/react\\";
+
+ let name = \\"Steve\\";
+</script>
+
+<div>
+ <img srcSet=\\"http://example.com\\" />
+</div>"
+`;

packages/core/src/__tests__/camle-case.test.ts

@@ -0,0 +1,11 @@
+import MyComponent from './data/map-camle-cased-attributes.raw?raw'
+import { parseJsx } from '../parsers/jsx';
+import { componentToSvelte } from '../generators/svelte';
+
+describe('map camle cased', () => {
+ test('map camle cased', () => {
+ const component = parseJsx(MyComponent);
+ const svelteComponent = componentToSvelte()({component})
+ expect(svelteComponent).toMatchSnapshot();
+ })
+})

packages/core/src/__tests__/data/map-camle-cased-attributes.raw.tsx

@@ -0,0 +1,12 @@
+import { useState } from "@builder.io/mitosis";
+import React from '@builder.io/react'
+
+export default function MyComponent(props) {
+ const [name, setName] = useState("Steve");
+
+ return (
+ <div>
+ <img srcSet="http://example.com" /> 
+ </div>
+ );
+}

packages/core/src/generators/svelte/svelte.ts

@@ -33,6 +33,9 @@ import { stripStateAndProps } from './helpers';
 import { ToSvelteOptions } from './types';
 import { blockToSvelte } from './blocks';
 import { stripGetter } from '../../helpers/patterns';
+import { isFirstLetterLowerCase } from '../../helpers/is-first-letter-lower-case'
+import { mapCamelCasedHtmlAttributes } from 'src/helpers/map-camel-cased-html-attributes';
+import { MitosisNode } from 'src/types/mitosis-node';
 
 const getContextCode = (json: MitosisComponent) => {
  const contextGetters = json.context.get;
@@ -146,7 +149,9 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
  .filter((x) => !props.includes(x));
 
  json = runPostJsonPlugins(json, options.plugins);
-
+ //@ts-ignore
+ mapCamelCasedHtmlAttributes(json)
+
  const css = collectCss(json);
  stripMetaProperties(json);
 

packages/core/src/helpers/is-first-letter-lower-case.ts

@@ -0,0 +1,5 @@
+export const isFirstLetterLowerCase = (elementName: string) => {
+ const firstLetter = elementName[0]
+
+ return firstLetter >= 'a' && firstLetter <= 'z'
+}

packages/core/src/helpers/map-camel-cased-html-attributes.ts

@@ -0,0 +1,33 @@
+import {isFirstLetterLowerCase} from './is-first-letter-lower-case'
+import { MitosisNode } from '../types/mitosis-node';
+/*
+ * This function does side-effects on `json`
+ */
+export const mapCamelCasedHtmlAttributes = (json: MitosisNode) => {
+ const isBuiltInHtmlElement = isFirstLetterLowerCase(json.name) && !json.name.includes('-');
+
+ if (!isBuiltInHtmlElement) {
+ return;
+ }
+ for (let key in json.bindings) {
+ const isBuiltInHtmlAttrName = !key.includes('-')
+ if (isBuiltInHtmlAttrName) {
+ const newKey = key.toLowerCase() as keyof MitosisNode['bindings']
+ // if json[newKey] already exists: show a warning and don't override
+ json.bindings[newKey] = json.bindings[key];
+ delete json.bindings[key];
+ }
+ } 
+
+ // repeat the above loop for json.properties too
+ for (let key in json.properties) {
+ const isBuiltInHtmlAttrName = !key.includes('-')
+ if (isBuiltInHtmlAttrName) {
+ const newKey = key.toLowerCase()
+ // if json[newKey] already exists: show a warning and don't override
+
+ json.properties[newKey] = json.properties[key];
+ delete json.properties[key];
+ }
+ } 
+}