From 23eb6d6a28f3ec3443ffba5e61fa85dd10d75b0f Mon Sep 17 00:00:00 2001 From: moaad Date: Fri, 24 Mar 2023 18:22:54 +0200 Subject: [PATCH 01/10] add fill property to useSvgAttributes --- packages/core/jsx-runtime.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/jsx-runtime.d.ts b/packages/core/jsx-runtime.d.ts index b4c51a6568..244d9da08d 100644 --- a/packages/core/jsx-runtime.d.ts +++ b/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 From a6c115a361ea02ff5a00cae0c0790b08c92cd9b6 Mon Sep 17 00:00:00 2001 From: moaad Date: Thu, 13 Apr 2023 19:05:20 +0200 Subject: [PATCH 02/10] map camle cased attributes --- .../__snapshots__/camle-case.test.ts.snap | 13 ++++++++ .../core/src/__tests__/camle-case.test.ts | 11 +++++++ .../data/map-camle-cased-attributes.raw.tsx | 12 +++++++ packages/core/src/generators/svelte/svelte.ts | 7 +++- .../src/helpers/is-first-letter-lower-case.ts | 5 +++ .../map-camel-cased-html-attributes.ts | 33 +++++++++++++++++++ 6 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap create mode 100644 packages/core/src/__tests__/camle-case.test.ts create mode 100644 packages/core/src/__tests__/data/map-camle-cased-attributes.raw.tsx create mode 100644 packages/core/src/helpers/is-first-letter-lower-case.ts create mode 100644 packages/core/src/helpers/map-camel-cased-html-attributes.ts diff --git a/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap b/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap new file mode 100644 index 0000000000..b847e1390d --- /dev/null +++ b/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`] = ` +" + +
+ +
" +`; diff --git a/packages/core/src/__tests__/camle-case.test.ts b/packages/core/src/__tests__/camle-case.test.ts new file mode 100644 index 0000000000..e60a0e2c64 --- /dev/null +++ b/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(); + }) +}) \ No newline at end of file diff --git a/packages/core/src/__tests__/data/map-camle-cased-attributes.raw.tsx b/packages/core/src/__tests__/data/map-camle-cased-attributes.raw.tsx new file mode 100644 index 0000000000..08279084c9 --- /dev/null +++ b/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 ( +
+ +
+ ); +} \ No newline at end of file diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts index 71bf9005ab..54443dccf4 100644 --- a/packages/core/src/generators/svelte/svelte.ts +++ b/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 = .filter((x) => !props.includes(x)); json = runPostJsonPlugins(json, options.plugins); - + //@ts-ignore + mapCamelCasedHtmlAttributes(json) + const css = collectCss(json); stripMetaProperties(json); diff --git a/packages/core/src/helpers/is-first-letter-lower-case.ts b/packages/core/src/helpers/is-first-letter-lower-case.ts new file mode 100644 index 0000000000..a938e035df --- /dev/null +++ b/packages/core/src/helpers/is-first-letter-lower-case.ts @@ -0,0 +1,5 @@ +export const isFirstLetterLowerCase = (elementName: string) => { + const firstLetterCode = elementName[0] + + return firstLetterCode >= 'a' && firstLetterCode <= 'z' +} \ No newline at end of file diff --git a/packages/core/src/helpers/map-camel-cased-html-attributes.ts b/packages/core/src/helpers/map-camel-cased-html-attributes.ts new file mode 100644 index 0000000000..f83d9d997a --- /dev/null +++ b/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]; + } + } +} \ No newline at end of file From f15e6e9527015401b728f261a5502366b00e6ab6 Mon Sep 17 00:00:00 2001 From: moaad Date: Fri, 14 Apr 2023 11:50:14 +0200 Subject: [PATCH 03/10] refactor isFirstLetterLowerCase --- packages/core/src/helpers/is-first-letter-lower-case.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/helpers/is-first-letter-lower-case.ts b/packages/core/src/helpers/is-first-letter-lower-case.ts index a938e035df..7c27811ca9 100644 --- a/packages/core/src/helpers/is-first-letter-lower-case.ts +++ b/packages/core/src/helpers/is-first-letter-lower-case.ts @@ -1,5 +1,5 @@ export const isFirstLetterLowerCase = (elementName: string) => { - const firstLetterCode = elementName[0] + const firstLetter = elementName[0] - return firstLetterCode >= 'a' && firstLetterCode <= 'z' + return firstLetter >= 'a' && firstLetter <= 'z' } \ No newline at end of file From 732f6030b3835d9efacc9098824079d65c6d1ebc Mon Sep 17 00:00:00 2001 From: moaad Date: Fri, 21 Apr 2023 19:12:52 +0200 Subject: [PATCH 04/10] complete changes --- .../__snapshots__/camle-case.test.ts.snap | 4 ++- .../core/src/__tests__/camle-case.test.ts | 11 ------- ...tsx => map-camel-cased-attributes.raw.tsx} | 0 packages/core/src/__tests__/shared.ts | 2 ++ .../core/src/generators/alpine/generate.ts | 9 ++++- packages/core/src/generators/lit/generate.ts | 10 +++++- .../core/src/generators/marko/generate.ts | 16 ++++++--- .../qwik/component-generator.ts.rej | 17 ++++++++++ packages/core/src/generators/solid/index.ts | 3 +- .../core/src/generators/stencil/generate.ts | 9 ++++- packages/core/src/generators/svelte/svelte.ts | 8 ++--- packages/core/src/generators/vue/vue.ts | 31 ++++++++++++++--- .../map-camel-cased-html-attributes.ts | 33 ++++++++++++------- .../plugins/map-camel-cased-attributes.ts | 12 +++++++ 14 files changed, 122 insertions(+), 43 deletions(-) delete mode 100644 packages/core/src/__tests__/camle-case.test.ts rename packages/core/src/__tests__/data/{map-camle-cased-attributes.raw.tsx => map-camel-cased-attributes.raw.tsx} (100%) create mode 100644 packages/core/src/generators/qwik/component-generator.ts.rej create mode 100644 packages/core/src/helpers/plugins/map-camel-cased-attributes.ts diff --git a/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap b/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap index b847e1390d..9674f7a346 100644 --- a/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap @@ -8,6 +8,8 @@ exports[`map camle cased > map camle cased 1`] = `
- +
+ +
" `; diff --git a/packages/core/src/__tests__/camle-case.test.ts b/packages/core/src/__tests__/camle-case.test.ts deleted file mode 100644 index e60a0e2c64..0000000000 --- a/packages/core/src/__tests__/camle-case.test.ts +++ /dev/null @@ -1,11 +0,0 @@ -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(); - }) -}) \ No newline at end of file diff --git a/packages/core/src/__tests__/data/map-camle-cased-attributes.raw.tsx b/packages/core/src/__tests__/data/map-camel-cased-attributes.raw.tsx similarity index 100% rename from packages/core/src/__tests__/data/map-camle-cased-attributes.raw.tsx rename to packages/core/src/__tests__/data/map-camel-cased-attributes.raw.tsx diff --git a/packages/core/src/__tests__/shared.ts b/packages/core/src/__tests__/shared.ts index 263c1c2820..5fb26351e1 100644 --- a/packages/core/src/__tests__/shared.ts +++ b/packages/core/src/__tests__/shared.ts @@ -23,6 +23,7 @@ const expressionState = getRawFile('./data/expression-state.raw.tsx'); const contentState = getRawFile('./data/context-state.raw.tsx'); const basic = getRawFile('./data/basic.raw.tsx'); +const camelCasedAttributes = getRawFile('./data/map-camel-cased-attributes.raw.tsx') const basicAttribute = getRawFile('./data/basic-attribute.raw.tsx'); const basicMitosis = getRawFile('./data/basic-custom-mitosis-package.raw.tsx'); const basicChildComponent = getRawFile('./data/basic-child-component.raw.tsx'); @@ -199,6 +200,7 @@ const BASIC_TESTS: Tests = { referencingFunInsideHook, svgComponent, renderBlock, + camelCasedAttributes }; const SLOTS_TESTS: Tests = { diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts index b0657326d1..1932d5d227 100644 --- a/packages/core/src/generators/alpine/generate.ts +++ b/packages/core/src/generators/alpine/generate.ts @@ -22,6 +22,8 @@ import { hasRootUpdateHook, renderUpdateHooks } from './render-update-hooks'; import { renderMountHook } from './render-mount-hook'; import { babelTransformCode } from '../../helpers/babel-transform'; import { replaceIdentifiers } from '../../helpers/replace-identifiers'; +import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes'; +import { mergeOptions } from 'src/helpers/merge-options'; export interface ToAlpineOptions extends BaseTranspilerOptions { /** @@ -190,9 +192,14 @@ const blockToAlpine = (json: MitosisNode | ForNode, options: ToAlpineOptions = { }>`; }; +const DEFAULT_OPTIONS:ToAlpineOptions = { + plugins: [CAMEL_CASE_PLUGIN] +} + export const componentToAlpine: TranspilerGenerator = - (options = {}) => + (userOptions = {}) => ({ component }) => { + const options = mergeOptions(DEFAULT_OPTIONS, userOptions) let json = fastClone(component); if (options.plugins) { json = runPreJsonPlugins(json, options.plugins); diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts index 1ce9a06a63..499657db28 100644 --- a/packages/core/src/generators/lit/generate.ts +++ b/packages/core/src/generators/lit/generate.ts @@ -25,6 +25,8 @@ import { getRefs } from '../../helpers/get-refs'; import { camelCase, some } from 'lodash'; import { isUpperCase } from '../../helpers/is-upper-case'; import { has } from '../../helpers/has'; +import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes'; +import { mergeOptions } from 'src/helpers/merge-options'; const getCustomTagName = (name: string, options: ToLitOptions) => { if (!name || !isUpperCase(name[0])) { @@ -127,8 +129,14 @@ function processBinding(code: string) { } export const componentToLit: TranspilerGenerator = - (options = {}) => + (userOptions = {}) => ({ component }) => { + const DEFAULT_OPTIONS:ToLitOptions = { + plugins: [CAMEL_CASE_PLUGIN] + } + + const options = mergeOptions(DEFAULT_OPTIONS, userOptions) + let json = fastClone(component); if (options.plugins) { json = runPreJsonPlugins(json, options.plugins); diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts index 65936f3ba6..68f9b8159a 100644 --- a/packages/core/src/generators/marko/generate.ts +++ b/packages/core/src/generators/marko/generate.ts @@ -25,6 +25,8 @@ import { getRefs } from '../../helpers/get-refs'; import { camelCase } from 'lodash'; import hash from 'hash-sum'; import { getForArguments } from '../../helpers/nodes/for'; +import { mergeOptions } from 'src/helpers/merge-options'; +import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes'; export interface ToMarkoOptions extends BaseTranspilerOptions {} @@ -147,14 +149,20 @@ function processBinding( } } + export const componentToMarko: TranspilerGenerator = (userOptions = {}) => ({ component }) => { + const DEFAULT_OPTIONS:InternalToMarkoOptions = { + component, + plugins: [CAMEL_CASE_PLUGIN] + } let json = fastClone(component); - const options: InternalToMarkoOptions = { - ...userOptions, - component: json, - }; + // const options: InternalToMarkoOptions = { + // ...userOptions, + // component: json, + // }; + const options: InternalToMarkoOptions = mergeOptions(DEFAULT_OPTIONS, userOptions); if (options.plugins) { json = runPreJsonPlugins(json, options.plugins); } diff --git a/packages/core/src/generators/qwik/component-generator.ts.rej b/packages/core/src/generators/qwik/component-generator.ts.rej new file mode 100644 index 0000000000..a2ae5704cb --- /dev/null +++ b/packages/core/src/generators/qwik/component-generator.ts.rej @@ -0,0 +1,17 @@ +diff a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts (rejected hunks) +@@ -25,6 +25,7 @@ import { + StateInit, + } from './helpers/state'; + import { convertTypeScriptToJS } from './helpers/transform-code'; ++import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes'; + + Error.stackTraceLimit = 9999; + +@@ -42,6 +43,7 @@ const PLUGINS: Plugin[] = [ + }, + }, + }), ++ CAMEL_CASE_PLUGIN + ]; + + const DEFAULT_OPTIONS: ToQwikOptions = { diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts index edea8e896c..bb5f58d454 100644 --- a/packages/core/src/generators/solid/index.ts +++ b/packages/core/src/generators/solid/index.ts @@ -33,6 +33,7 @@ import { hasGetContext } from '../helpers/context'; import { blockToSolid } from './blocks'; import { createSingleBinding } from '../../helpers/bindings'; import { isRootTextNode } from '../../helpers/is-root-text-node'; +import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes'; // Transform to function processDynamicComponents(json: MitosisComponent, options: ToSolidOptions) { @@ -88,7 +89,7 @@ function addProviderComponents(json: MitosisComponent, options: ToSolidOptions) const DEFAULT_OPTIONS: ToSolidOptions = { state: 'signals', stylesType: 'styled-components', - plugins: [], + plugins: [CAMEL_CASE_PLUGIN], }; export const componentToSolid: TranspilerGenerator> = diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts index 0f3f53d885..4b820c21e4 100644 --- a/packages/core/src/generators/stencil/generate.ts +++ b/packages/core/src/generators/stencil/generate.ts @@ -22,6 +22,8 @@ import { collectCss } from '../../helpers/styles/collect-css'; import { indent } from '../../helpers/indent'; import { mapRefs } from '../../helpers/map-refs'; import { getForArguments } from '../../helpers/nodes/for'; +import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes'; +import { mergeOptions } from 'src/helpers/merge-options'; export interface ToStencilOptions extends BaseTranspilerOptions {} @@ -96,9 +98,14 @@ function processBinding(code: string) { return stripStateAndPropsRefs(code, { replaceWith: 'this.' }); } +const DEFAULT_OPTIONS:ToStencilOptions = { + plugins: [CAMEL_CASE_PLUGIN] +} + export const componentToStencil: TranspilerGenerator = - (options = {}) => + (userOptions = {}) => ({ component }) => { + const options = mergeOptions(DEFAULT_OPTIONS, userOptions) let json = fastClone(component); if (options.plugins) { json = runPreJsonPlugins(json, options.plugins); diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts index 54443dccf4..0dc0a4f01d 100644 --- a/packages/core/src/generators/svelte/svelte.ts +++ b/packages/core/src/generators/svelte/svelte.ts @@ -27,15 +27,13 @@ import { flow, pipe } from 'fp-ts/lib/function'; import { hasGetContext, hasSetContext } from '../helpers/context'; import { isSlotProperty } from '../../helpers/slots'; import { FUNCTION_HACK_PLUGIN } from '../helpers/functions'; +import {CAMEL_CASE_PLUGIN} from '../../helpers/plugins/map-camel-cased-attributes' import { mergeOptions } from '../../helpers/merge-options'; import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code'; 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; @@ -110,7 +108,7 @@ const useBindValue = (json: MitosisComponent, options: ToSvelteOptions) => { const DEFAULT_OPTIONS: ToSvelteOptions = { stateType: 'variables', prettier: true, - plugins: [FUNCTION_HACK_PLUGIN], + plugins: [FUNCTION_HACK_PLUGIN, CAMEL_CASE_PLUGIN], }; export const componentToSvelte: TranspilerGenerator = @@ -149,8 +147,6 @@ export const componentToSvelte: TranspilerGenerator = .filter((x) => !props.includes(x)); json = runPostJsonPlugins(json, options.plugins); - //@ts-ignore - mapCamelCasedHtmlAttributes(json) const css = collectCss(json); stripMetaProperties(json); diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts index bba823f672..6db1615fc1 100644 --- a/packages/core/src/generators/vue/vue.ts +++ b/packages/core/src/generators/vue/vue.ts @@ -13,12 +13,13 @@ import { runPreCodePlugins, runPreJsonPlugins, } from '../../modules/plugins'; +import {CAMEL_CASE_PLUGIN} from '../../helpers/plugins/map-camel-cased-attributes' import { stripMetaProperties } from '../../helpers/strip-meta-properties'; import { isMitosisNode } from '../../helpers/is-mitosis-node'; import traverse from 'traverse'; import { pickBy, size, uniq } from 'lodash'; import { processHttpRequests } from '../../helpers/process-http-requests'; -import { TranspilerGenerator } from '../../types/transpiler'; +import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler'; import { pipe } from 'fp-ts/lib/function'; import { isSlotProperty } from '../../helpers/slots'; import { FUNCTION_HACK_PLUGIN } from '../helpers/functions'; @@ -276,11 +277,31 @@ const componentToVue: TranspilerGenerator> = return str; }; -export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) => - componentToVue({ ...vueOptions, vueVersion: 2 }); -export const componentToVue3 = (vueOptions?: VueOptsWithoutVersion) => - componentToVue({ ...vueOptions, vueVersion: 3 }); +const DEFAULT_OPTIONS_VUE_2: ToVueOptions = { + api: 'options', + vueVersion: 2, + prettier: true, + plugins: [CAMEL_CASE_PLUGIN], +}; +export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) =>{ + const options = mergeOptions(DEFAULT_OPTIONS_VUE_2, { ...vueOptions, vueVersion: 2 }) + return componentToVue(options); +} + +const DEFAULT_OPTIONS_VUE_3: ToVueOptions = { + api: 'composition', + vueVersion: 3, + prettier: true, + plugins: [CAMEL_CASE_PLUGIN], +}; + +export const componentToVue3 = (vueOptions?: VueOptsWithoutVersion) =>{ + const options = mergeOptions(DEFAULT_OPTIONS_VUE_3, { ...vueOptions, vueVersion: 3 }) + return componentToVue(options); +} + + // Remove unused artifacts like empty script or style tags const removePatterns = [ diff --git a/packages/core/src/helpers/map-camel-cased-html-attributes.ts b/packages/core/src/helpers/map-camel-cased-html-attributes.ts index f83d9d997a..74cd8b5897 100644 --- a/packages/core/src/helpers/map-camel-cased-html-attributes.ts +++ b/packages/core/src/helpers/map-camel-cased-html-attributes.ts @@ -9,25 +9,34 @@ export const mapCamelCasedHtmlAttributes = (json: MitosisNode) => { 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]; + if (!isBuiltInHtmlAttrName) continue + const newKey = key.toLowerCase() as keyof MitosisNode['bindings'] + if(newKey in json) { + console.warn(`${newKey} already exists in json`) + continue } + 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]; + + if (!isBuiltInHtmlAttrName) continue + + const newKey = key.toLowerCase() + + if(newKey in json) { + console.warn(`${newKey} already exists in json`) + continue } + + json.properties[newKey] = json.properties[key]; + delete json.properties[key]; + } } \ No newline at end of file diff --git a/packages/core/src/helpers/plugins/map-camel-cased-attributes.ts b/packages/core/src/helpers/plugins/map-camel-cased-attributes.ts new file mode 100644 index 0000000000..a8d619c47e --- /dev/null +++ b/packages/core/src/helpers/plugins/map-camel-cased-attributes.ts @@ -0,0 +1,12 @@ +import { Plugin } from '../../types/plugins'; +import { traverseNodes } from '../traverse-nodes'; +import {mapCamelCasedHtmlAttributes} from '../map-camel-cased-html-attributes' +export const CAMEL_CASE_PLUGIN: Plugin = () => ({ + json: { + post: (json) => { + traverseNodes(json, (node) => { + mapCamelCasedHtmlAttributes(node); + }); + }, + }, +}) \ No newline at end of file From a1a5b15bae873ac128c746a448110cdb904d2448 Mon Sep 17 00:00:00 2001 From: moaad Date: Fri, 21 Apr 2023 19:14:18 +0200 Subject: [PATCH 05/10] update snapshots --- .../__snapshots__/alpine.test.ts.snap | 1958 ++--- .../__snapshots__/angular.import.test.ts.snap | 58 + .../__snapshots__/angular.mapper.test.ts.snap | 60 + .../__snapshots__/angular.test.ts.snap | 122 + .../__tests__/__snapshots__/html.test.ts.snap | 14 + .../__snapshots__/liquid.test.ts.snap | 14 + .../__tests__/__snapshots__/lit.test.ts.snap | 2868 +++--- .../__snapshots__/marko.test.ts.snap | 1994 +++-- .../__snapshots__/parse-jsx.test.ts.snap.rej | 171 + .../__snapshots__/preact.test.ts.snap | 48 +- .../__tests__/__snapshots__/qwik.test.ts.snap | 3192 ++++--- .../__snapshots__/qwik.test.ts.snap.rej | 143 + .../__snapshots__/react-native.test.ts.snap | 62 +- .../__snapshots__/react.test.ts.snap | 46 +- .../__tests__/__snapshots__/rsc.test.ts.snap | 56 +- .../__snapshots__/solid.test.ts.snap | 4660 +++++----- .../__snapshots__/stencil.test.ts.snap | 1961 +++-- .../__snapshots__/svelte.test.ts.snap | 2315 +++-- .../__tests__/__snapshots__/taro.test.ts.snap | 48 +- .../vue-composition.test.ts.snap | 2476 +++--- .../__tests__/__snapshots__/vue.test.ts.snap | 7654 ++--------------- .../__snapshots__/webcomponent.test.ts.snap | 184 + 22 files changed, 12264 insertions(+), 17840 deletions(-) create mode 100644 packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap.rej create mode 100644 packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap.rej diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap index c5be85650a..ef1d726635 100644 --- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap @@ -7,30 +7,27 @@ exports[`Alpine.js > jsx > Javascript Test > AdvancedRef 1`] = ` }
+
- - Hello - - - ! I can run in React, Qwik, Vue, Solid, or Web Component! +
+
+
+" +`; + exports[`Alpine.js > jsx > Javascript Test > class + ClassName + css 1`] = ` " -
- Hello! I can run in React, Vue, Solid, or Liquid! -
+
+" +`; + exports[`Alpine.js > jsx > Typescript Test > class + ClassName + css 1`] = ` " -
- Hello! I can run in React, Vue, Solid, or Liquid! -
+
-" +"
+ + +
+
+ + + + +

+

+

+

" `; exports[`Alpine.js > svelte > Javascript Test > bindProperty 1`] = ` -" +" -" +"
+ + +
+
+ + + + +

+

+

+

" `; exports[`Alpine.js > svelte > Typescript Test > bindProperty 1`] = ` -" +"
+
{#if showInput} +
{ onBlur(); }} - bind:value={name} /> - - - - +
+