feat(template): add widget template for react #456
Conversation
| // import { defineConfig } from 'vite' -> fails when type:module in package.json | ||
| // it seems related to https://github.com/vitejs/vite/issues/1560 | ||
| // so far this is the workaround. | ||
| const { defineConfig } = vite; |
src/templates/React InstantSearch widget/tsconfig.declaration.json
Outdated
Show resolved
Hide resolved
| placeholder?: string; | ||
| }; | ||
|
|
||
| export const {{ pascalCaseName }}: ElementType<WidgetParams> = |
There was a problem hiding this comment.
I'm not sure ElementType is the right one, but anything else like ReactElement, Component, etc didn't work.
By "didn't work", I mean TS gave me error messages like
There was a problem hiding this comment.
as far as I can tell ElementType is correct
There was a problem hiding this comment.
it could also be ReactNode, did you try that?
There was a problem hiding this comment.
yes, ReactNode, ReactElement, all didn't work
| // TODO: this is the object returned by `getProvidedProps` from the connector. | ||
| }; | ||
|
|
||
| export const {{ pascalCaseName }}Component = ({}: Props) => { |
There was a problem hiding this comment.
What do we want to do? Here the Props is loose. It's not connected with the return of getProvidedProps from the connector. Do we want to type this template at that level? Or this is okay enough?
There was a problem hiding this comment.
can it not be imported from the connector file?
There was a problem hiding this comment.
The return type of getProvidedProps won't include refine function, but the Props here in the component will. And we might want to specify in the connector as a generic, what kind of type the refine function will take. So these thoughts kept leading to another, and I wonder maybe the current version is incomplete but simple to start with.
There was a problem hiding this comment.
could it be ReturnType & { refine } or something?
There was a problem hiding this comment.
what do you think?
eunjae-lee
requested review from
a team,
Haroenv,
francoischalifour and
tkrugg
and removed request for
a team
src/templates/React InstantSearch widget/src/lib/__tests__/dummy-test.tsx.hbs
Outdated
Show resolved
Hide resolved
src/templates/React InstantSearch widget/tsconfig.declaration.json
Outdated
Show resolved
Hide resolved
Co-authored-by: Haroen Viaene <hello@haroen.me>
| "instantsearch-widget", | ||
| "instantsearch", | ||
| "react-instantsearch", | ||
| "react-instantsearch-widget-{{ packageName }}" |
There was a problem hiding this comment.
the package name includes the scope, it should probably be kebabCaseName
src/cli/getConfiguration.js
Outdated
| widgetType: `${organization}.${name}`, | ||
| camelCaseName: camelCase(name), | ||
| pascalCaseName: capitalize(camelCase(name)), | ||
| kebabCaseName: kebabCase(name), |
There was a problem hiding this comment.
the name itself should probably already be kebab case, but since you're converting, you should also use it for wigdetType / packageName, right?
Haroenv
left a comment
Haroenv
left a comment
There was a problem hiding this comment.
I think this is good as a starting point, improvements in the questions asked can be done for both templates at the same time
…search-app#456) Co-authored-by: Haroen Viaene <hello@haroen.me>
Summary
This PR adds a template to create a widget in React InstantSearch.
yarn start ~/somewhere/my-fancy-widget