Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Map camle cased attributes to lower case #1122

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Map camle cased attributes to lower case #1122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
23eb6d6
add fill property to useSvgAttributes
moaoa Mar 24, 2023
a6c115a
map camle cased attributes
moaoa Apr 13, 2023
f15e6e9
refactor isFirstLetterLowerCase
moaoa Apr 14, 2023
732f603
complete changes
moaoa Apr 21, 2023
a1a5b15
update snapshots
moaoa Apr 21, 2023
7c7ca8e
changes to the qwik generator
moaoa Apr 22, 2023
067b29f
fixed map camel case logic
moaoa Apr 25, 2023
730c30c
use the base_options in vue generator
moaoa Apr 25, 2023
d8e78fb
remove files
moaoa Apr 25, 2023
39a5764
update snapshots
moaoa Apr 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/core/jsx-runtime.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1652,6 +1652,7 @@ export declare namespace JSX {
y?: number | string;
width?: number | string;
height?: number | string;
fill?: number | string;
}

interface ViewSVGAttributes<T>
Expand Down
100 changes: 64 additions & 36 deletions packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,8 +484,8 @@ exports[`Alpine.js > jsx > Javascript Test > ContentSlotJSX 1`] = `
x-bind:name=\\"slotContent ? 'name1' : 'name2'\\"
x-bind:title=\\"slotContent ? 'title1' : 'title2'\\"
x-bind=\\"attributes\\"
x-on:click=\\"show()\\"
x-bind:class=\\"slotContent ? \`\${name}-content\` : ''\\"
x-on:click=\\"show()\\"
>
<template x-if=\\"showContent && slotContent\\">
<slot name=\\"content\\"><span x-html=\\"content\\"></span></slot>
Expand Down Expand Up @@ -524,7 +524,7 @@ exports[`Alpine.js > jsx > Javascript Test > CustomCode 1`] = `
x-data=\\"customCode()\\"
x-ref=\\"elem\\"
x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
x-bind:innerHTML=\\"code\\"
x-bind:innerhtml=\\"code\\"
></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -588,7 +588,7 @@ exports[`Alpine.js > jsx > Javascript Test > Embed 1`] = `
x-data=\\"customCode()\\"
x-ref=\\"elem\\"
x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
x-bind:innerHTML=\\"code\\"
x-bind:innerhtml=\\"code\\"
></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -662,8 +662,8 @@ exports[`Alpine.js > jsx > Javascript Test > Form 1`] = `
x-bind:action=\\"!sendWithJs && action\\"
x-bind:method=\\"method\\"
x-bind:name=\\"name\\"
x-on:submit=\\"onSubmit($event)\\"
x-bind=\\"attributes\\"
x-on:submit=\\"onSubmit($event)\\"
>
<template x-if=\\"builderBlock && builderBlock.children\\">
<template x-for=\\"block in builderBlock?.children\\">
Expand Down Expand Up @@ -957,9 +957,9 @@ exports[`Alpine.js > jsx > Javascript Test > Image 1`] = `
x-bind:aria-role=\\"altText ? 'presentation' : undefined\\"
x-bind:class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
x-bind:src=\\"image\\"
x-on:load=\\"setLoaded()\\"
x-bind:srcset=\\"srcset\\"
x-bind:sizes=\\"sizes\\"
x-on:load=\\"setLoaded()\\"
/>
</template>

Expand Down Expand Up @@ -1069,8 +1069,8 @@ exports[`Alpine.js > jsx > Javascript Test > Input 1`] = `
x-bind:type=\\"type\\"
x-bind:name=\\"name\\"
x-bind:value=\\"value\\"
x-bind:defaultValue=\\"defaultValue\\"
x-bind:required=\\"required\\"
x-bind:defaultvalue=\\"defaultValue\\"
/>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand All @@ -1084,7 +1084,7 @@ exports[`Alpine.js > jsx > Javascript Test > RawText 1`] = `
"<span
x-data=\\"rawText()\\"
x-bind:class=\\"attributes?.class || attributes?.className\\"
x-bind:innerHTML=\\"text || ''\\"
x-bind:innerhtml=\\"text || ''\\"
></span>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -1142,8 +1142,8 @@ exports[`Alpine.js > jsx > Javascript Test > Select 1`] = `
x-bind=\\"attributes\\"
x-bind:value=\\"value\\"
x-bind:key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
x-bind:defaultValue=\\"defaultValue\\"
x-bind:name=\\"name\\"
x-bind:defaultvalue=\\"defaultValue\\"
>
<template x-for=\\"option in options\\">
<option x-bind:value=\\"option.value\\" x-bind:data-index=\\"index\\">
Expand Down Expand Up @@ -1324,9 +1324,9 @@ exports[`Alpine.js > jsx > Javascript Test > Submit 1`] = `
`;

exports[`Alpine.js > jsx > Javascript Test > Text 1`] = `
"<div x-data=\\"text()\\" x-bind:contentEditable=\\"allowEditingText || undefined\\" x-bind:data-name=\\"{
"<div x-data=\\"text()\\" x-bind:data-name=\\"{
test: name || 'any name'
}\\" x-bind:innerHTML=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
}\\" x-bind:contenteditable=\\"allowEditingText || undefined\\" x-bind:innerhtml=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
document.addEventListener('alpine:init', () => {
Alpine.data('text', () => ({
name: 'Decadef20'
Expand All @@ -1342,7 +1342,7 @@ exports[`Alpine.js > jsx > Javascript Test > Textarea 1`] = `
x-bind:placeholder=\\"placeholder\\"
x-bind:name=\\"name\\"
x-bind:value=\\"value\\"
x-bind:defaultValue=\\"defaultValue\\"
x-bind:defaultvalue=\\"defaultValue\\"
></textarea>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -1487,6 +1487,20 @@ exports[`Alpine.js > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
"
`;

exports[`Alpine.js > jsx > Javascript Test > camelCasedAttributes 1`] = `
"<div x-data=\\"myComponent()\\">
<img srcset=\\"http://example.com\\" />
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
name: \\"Steve\\",
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Javascript Test > class + ClassName + css 1`] = `
"<style>
.div {
Expand Down Expand Up @@ -2399,12 +2413,12 @@ exports[`Alpine.js > jsx > Javascript Test > svgComponent 1`] = `
fill=\\"none\\"
role=\\"img\\"
x-data=\\"svgComponent()\\"
x-bind:viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
x-bind:width=\\"42\\"
x-bind:height=\\"42\\"
x-bind:viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
>
<defs>
<filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
<filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
<feFlood result=\\"BackgroundImageFix\\"></feFlood>

<feBlend
Expand All @@ -2415,7 +2429,7 @@ exports[`Alpine.js > jsx > Javascript Test > svgComponent 1`] = `

<feGaussianBlur
result=\\"effect1_foregroundBlur\\"
x-bind:stdDeviation=\\"7\\"
x-bind:stddeviation=\\"7\\"
></feGaussianBlur>
</filter>
</defs>
Expand Down Expand Up @@ -2995,8 +3009,8 @@ exports[`Alpine.js > jsx > Typescript Test > ContentSlotJSX 1`] = `
x-bind:name=\\"slotContent ? 'name1' : 'name2'\\"
x-bind:title=\\"slotContent ? 'title1' : 'title2'\\"
x-bind=\\"attributes\\"
x-on:click=\\"show()\\"
x-bind:class=\\"slotContent ? \`\${name}-content\` : ''\\"
x-on:click=\\"show()\\"
>
<template x-if=\\"showContent && slotContent\\">
<slot name=\\"content\\"><span x-html=\\"content\\"></span></slot>
Expand Down Expand Up @@ -3035,7 +3049,7 @@ exports[`Alpine.js > jsx > Typescript Test > CustomCode 1`] = `
x-data=\\"customCode()\\"
x-ref=\\"elem\\"
x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
x-bind:innerHTML=\\"code\\"
x-bind:innerhtml=\\"code\\"
></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -3099,7 +3113,7 @@ exports[`Alpine.js > jsx > Typescript Test > Embed 1`] = `
x-data=\\"customCode()\\"
x-ref=\\"elem\\"
x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
x-bind:innerHTML=\\"code\\"
x-bind:innerhtml=\\"code\\"
></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -3173,8 +3187,8 @@ exports[`Alpine.js > jsx > Typescript Test > Form 1`] = `
x-bind:action=\\"!sendWithJs && action\\"
x-bind:method=\\"method\\"
x-bind:name=\\"name\\"
x-on:submit=\\"onSubmit($event)\\"
x-bind=\\"attributes\\"
x-on:submit=\\"onSubmit($event)\\"
>
<template x-if=\\"builderBlock && builderBlock.children\\">
<template x-for=\\"block in builderBlock?.children\\">
Expand Down Expand Up @@ -3468,9 +3482,9 @@ exports[`Alpine.js > jsx > Typescript Test > Image 1`] = `
x-bind:aria-role=\\"altText ? 'presentation' : undefined\\"
x-bind:class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
x-bind:src=\\"image\\"
x-on:load=\\"setLoaded()\\"
x-bind:srcset=\\"srcset\\"
x-bind:sizes=\\"sizes\\"
x-on:load=\\"setLoaded()\\"
/>
</template>

Expand Down Expand Up @@ -3580,8 +3594,8 @@ exports[`Alpine.js > jsx > Typescript Test > Input 1`] = `
x-bind:type=\\"type\\"
x-bind:name=\\"name\\"
x-bind:value=\\"value\\"
x-bind:defaultValue=\\"defaultValue\\"
x-bind:required=\\"required\\"
x-bind:defaultvalue=\\"defaultValue\\"
/>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand All @@ -3595,7 +3609,7 @@ exports[`Alpine.js > jsx > Typescript Test > RawText 1`] = `
"<span
x-data=\\"rawText()\\"
x-bind:class=\\"attributes?.class || attributes?.className\\"
x-bind:innerHTML=\\"text || ''\\"
x-bind:innerhtml=\\"text || ''\\"
></span>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -3653,8 +3667,8 @@ exports[`Alpine.js > jsx > Typescript Test > Select 1`] = `
x-bind=\\"attributes\\"
x-bind:value=\\"value\\"
x-bind:key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
x-bind:defaultValue=\\"defaultValue\\"
x-bind:name=\\"name\\"
x-bind:defaultvalue=\\"defaultValue\\"
>
<template x-for=\\"option in options\\">
<option x-bind:value=\\"option.value\\" x-bind:data-index=\\"index\\">
Expand Down Expand Up @@ -3835,9 +3849,9 @@ exports[`Alpine.js > jsx > Typescript Test > Submit 1`] = `
`;

exports[`Alpine.js > jsx > Typescript Test > Text 1`] = `
"<div x-data=\\"text()\\" x-bind:contentEditable=\\"allowEditingText || undefined\\" x-bind:data-name=\\"{
"<div x-data=\\"text()\\" x-bind:data-name=\\"{
test: name || 'any name'
}\\" x-bind:innerHTML=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
}\\" x-bind:contenteditable=\\"allowEditingText || undefined\\" x-bind:innerhtml=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
document.addEventListener('alpine:init', () => {
Alpine.data('text', () => ({
name: 'Decadef20'
Expand All @@ -3853,7 +3867,7 @@ exports[`Alpine.js > jsx > Typescript Test > Textarea 1`] = `
x-bind:placeholder=\\"placeholder\\"
x-bind:name=\\"name\\"
x-bind:value=\\"value\\"
x-bind:defaultValue=\\"defaultValue\\"
x-bind:defaultvalue=\\"defaultValue\\"
></textarea>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Expand Down Expand Up @@ -3998,6 +4012,20 @@ exports[`Alpine.js > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
"
`;

exports[`Alpine.js > jsx > Typescript Test > camelCasedAttributes 1`] = `
"<div x-data=\\"myComponent()\\">
<img srcset=\\"http://example.com\\" />
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
name: \\"Steve\\",
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Typescript Test > class + ClassName + css 1`] = `
"<style>
.div {
Expand Down Expand Up @@ -4910,12 +4938,12 @@ exports[`Alpine.js > jsx > Typescript Test > svgComponent 1`] = `
fill=\\"none\\"
role=\\"img\\"
x-data=\\"svgComponent()\\"
x-bind:viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
x-bind:width=\\"42\\"
x-bind:height=\\"42\\"
x-bind:viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
>
<defs>
<filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
<filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
<feFlood result=\\"BackgroundImageFix\\"></feFlood>

<feBlend
Expand All @@ -4926,7 +4954,7 @@ exports[`Alpine.js > jsx > Typescript Test > svgComponent 1`] = `

<feGaussianBlur
result=\\"effect1_foregroundBlur\\"
x-bind:stdDeviation=\\"7\\"
x-bind:stddeviation=\\"7\\"
></feGaussianBlur>
</filter>
</defs>
Expand Down Expand Up @@ -5008,7 +5036,7 @@ exports[`Alpine.js > jsx > Typescript Test > use-style-outside-component 1`] = `

exports[`Alpine.js > svelte > Javascript Test > basic 1`] = `
"<div x-data=\\"myComponent()\\">
<input x-on:change=\\"name = $event.target.value\\" x-bind:value=\\"name\\" />
<input x-bind:value=\\"name\\" x-on:change=\\"name = $event.target.value\\" />

Hello! I can run in React, Vue, Solid, or Liquid!
</div>
Expand Down Expand Up @@ -5162,7 +5190,7 @@ exports[`Alpine.js > svelte > Javascript Test > eventHandlers 1`] = `
`;

exports[`Alpine.js > svelte > Javascript Test > html 1`] = `
"<div x-data=\\"myComponent()\\" x-bind:innerHTML=\\"html\\"></div>
"<div x-data=\\"myComponent()\\" x-bind:innerhtml=\\"html\\"></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
Expand Down Expand Up @@ -5238,8 +5266,8 @@ exports[`Alpine.js > svelte > Javascript Test > reactive 1`] = `

exports[`Alpine.js > svelte > Javascript Test > reactiveWithFn 1`] = `
"<div x-data=\\"myComponent()\\">
<input type=\\"number\\" x-on:change=\\"a = $event.target.value\\" x-bind:value=\\"a\\" />
<input type=\\"number\\" x-on:change=\\"b = $event.target.value\\" x-bind:value=\\"b\\" />
<input type=\\"number\\" x-bind:value=\\"a\\" x-on:change=\\"a = $event.target.value\\" />
<input type=\\"number\\" x-bind:value=\\"b\\" x-on:change=\\"b = $event.target.value\\" />

Result:
<span x-html=\\"result\\"></span>
Expand Down Expand Up @@ -5322,7 +5350,7 @@ exports[`Alpine.js > svelte > Javascript Test > textExpressions 1`] = `

exports[`Alpine.js > svelte > Typescript Test > basic 1`] = `
"<div x-data=\\"myComponent()\\">
<input x-on:change=\\"name = $event.target.value\\" x-bind:value=\\"name\\" />
<input x-bind:value=\\"name\\" x-on:change=\\"name = $event.target.value\\" />

Hello! I can run in React, Vue, Solid, or Liquid!
</div>
Expand Down Expand Up @@ -5476,7 +5504,7 @@ exports[`Alpine.js > svelte > Typescript Test > eventHandlers 1`] = `
`;

exports[`Alpine.js > svelte > Typescript Test > html 1`] = `
"<div x-data=\\"myComponent()\\" x-bind:innerHTML=\\"html\\"></div>
"<div x-data=\\"myComponent()\\" x-bind:innerhtml=\\"html\\"></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
Expand Down Expand Up @@ -5552,8 +5580,8 @@ exports[`Alpine.js > svelte > Typescript Test > reactive 1`] = `

exports[`Alpine.js > svelte > Typescript Test > reactiveWithFn 1`] = `
"<div x-data=\\"myComponent()\\">
<input type=\\"number\\" x-on:change=\\"a = $event.target.value\\" x-bind:value=\\"a\\" />
<input type=\\"number\\" x-on:change=\\"b = $event.target.value\\" x-bind:value=\\"b\\" />
<input type=\\"number\\" x-bind:value=\\"a\\" x-on:change=\\"a = $event.target.value\\" />
<input type=\\"number\\" x-bind:value=\\"b\\" x-on:change=\\"b = $event.target.value\\" />

Result:
<span x-html=\\"result\\"></span>
Expand Down
Loading