Skip to content

Commit

Permalink
matches react type camelcase for standard events
Browse files Browse the repository at this point in the history
  • Loading branch information
benjaminknox committed Nov 11, 2023
1 parent 70f8198 commit e8f9a50
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 5 deletions.
13 changes: 12 additions & 1 deletion src/components/svelte-react.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import {
useCallback,
type ForwardedRef,
type PropsWithChildren,
useState
useState,
type DOMAttributes
} from 'react'
import type { SvelteComponentTyped } from 'svelte'

Expand Down Expand Up @@ -43,6 +44,16 @@ export type ReactProps<Props, Events> = Props & {
[P in IntrinsicProps]?: JSX.IntrinsicElements['div'][P]
}

type EventPropsNames = keyof DOMAttributes<unknown>

type EventPropsNameMap = {
[P in EventPropsNames as Lowercase<P>]: P
}
export type EventProps<T> = {
[P in keyof T as P extends Lowercase<EventPropsNames>
? EventPropsNameMap[P]
: P]: T[P]
}
const useEventHandlers = (props: any) => {
const [el, setEl] = useState<HTMLElement>()
const lastValue = useRef<{ [key: string]: (...args: any[]) => any }>({})
Expand Down
8 changes: 4 additions & 4 deletions src/scripts/gen-react-bindings.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ const getEventsTypeDefinition = (
componentEventNames,
svelteFilePath
) => `
export type ${componentName}EventProps = {
export type ${componentName}EventProps = EventProps<{
${componentEventNames
.map(
({ eventName, detailType }) =>
` ${eventName}?: (event: ${detailType}) => void`
)
.join(';\n')}
}
}>
`

const findEventsTypeDefinition = async (svelteFilePath, componentName) => {
Expand All @@ -37,7 +37,7 @@ const findEventsTypeDefinition = async (svelteFilePath, componentName) => {
const componentEventNames = [
...fileContents.toString().matchAll(typeRegex)
].map((match) => ({
eventName: `on${match[1][0].toUpperCase()}${match[1].substring(1)}`,
eventName: `on${match[1]}`,
detailType: match[2]
}))

Expand Down Expand Up @@ -125,7 +125,7 @@ export * from '../web-components/${fileNameWithoutExtension}.js'

const typeDef = `
import type * as React from 'react'
import type { ReactProps } from '../src/components/svelte-react'
import type { ReactProps, EventProps } from '../src/components/svelte-react'
import type { ${componentName}Events as SvelteEvents, ${componentName}Props as SvelteProps } from '../types/components/${containingFolder}/${fileName}';
${eventTypeDefinition && eventTypeDefinition}
export type ${componentName}Props${funcConstraints} = ${
Expand Down

0 comments on commit e8f9a50

Please sign in to comment.