search

plotly / dash-component-boilerplate

Get started creating your own Dash components here.
266 stars 182 forks source link

compatability with typescript? #100

Open Mark-Abadir opened 4 years ago

Mark-Abadir commented 4 years ago

I have a react component written in typescript. Is there any way to use the boilerplate to create a dash component out of my typescript component?

alexcjohnson commented 4 years ago

Not yet - see discussion here: https://github.com/plotly/dash/issues/719 Dash-table is written in typescript; there we simply give a plain js wrapper that restates the types using the prop-types package - not ideal but that's the best answer at the moment.

masaadkhan commented 2 years ago

Hey, I wanted to give a bit of a background of what I know before I started to ask some questions. Essentially, I'm a student who has a background in hardware, have spent a lot of time writing firmware and tools in Python, C, and C++. I've recently started to look into learning web-development, so in general, I've started to play around in React, Javascript, and more. So I'm definitely on the outer bounds of my comfort zone here. If I don't understand something, or if you think there's something I may not understand, please dumb it down for me. Also, this is the first time I've written an issue so if there is a better way to do this, let me know.

My goal is to make a website hosting diagrams. Essentially, I found this diagram tool from a git repo, I thought it looked nice and it has a lot of the features that I'm looking for. Just to remind you, I had no background in React, Javascript, or any other web-development language prior to this. However, I was able to start developing the diagrams in the format that I wanted, which so far has been great.

Now that I have the diagrams, I wanted to integrate it into a pre-existing website I have. Obviously, doing the conversion from React to Dash is not a direct transfer, which is why this boilerplate code exists. Now here's a couple of the problems I've started to see:

  1. The files in the other repository are mainly in typescript, however, from my understanding your repository only accepts javascript as of right now?
  2. You mentioned using a "plain js wrapper" but it seems your current link is broken, so I wasn't sure what to do about that...
  3. Could I transpile this typescript code into javascript using tsc, and then feed it into your tool? Technically, babel also does transpiling, could I use babel as well (that's what the other repo is using right now from my understanding)?

I've spent some time over the last few days to read up on this boilerplate tool from the docs (https://dash.plotly.com/react-for-python-developers, https://dash.plotly.com/plugins) as well as a random article I found about it https://markgituma.medium.com/adding-custom-components-to-python-dash-cfafdbfb22f9. However, there are things I'm still confused about:

  1. What are defaultProps? Simultaneously are propTypes just supposed to be any variables that hold the state of the website itself?
  2. If I want to convert this react project to dash, other than listing the different propTypes in {{cookiecutter.component_name}}.react.js, is there anything else I need to do manual labor of when converting? Perhaps for callbacks?
  3. I know there was a {{cookiecutter.component_name}}.react.js file created in src/lib, do I need to create a similar file holding all the propTypes for each component that is defined in this react repo? So if I have a component on the top level, and I have a nested component, will that nested component need its own file?

Sorry for all of these questions, I realize this post is rather long... If there's a piece of documentation I did not see, please let me know about it, especially if you have any examples you could provide to me. Hoping to hear back

alexcjohnson commented 2 years ago

Welcome @mkhan825 - I'll answer a bit here, but I encourage you to check out https://community.plotly.com/ - that's the best place to ask questions like this, and many of them have likely already been answered there 😄

dash-table has moved here: https://github.com/plotly/dash/tree/dev/components/dash-table so the wrapper referred to above is now here: https://github.com/plotly/dash/blob/dev/components/dash-table/src/dash-table/dash/DataTable.js

You'll see that propTypes and defaultProps are both there, and attached to the top-level component

The component props (as described in propTypes) are intended to describe the complete state of the component, except for very transient interaction state such as hover effects, whether a dropdown/menu is open, that sort of thing.