Some questions concerning PluggableWidget boilerplate

1
Hi everyone, I tried the new generator of widget according to https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one And here are some of my questions ( i run “npm run dev”) If i look at development tool of Chrome, the tsx files show the compiled code instead of typecript code.  So how can I see the original tsx/ts code?    I wonder where is the best place to put function previously in “update” of old way creating widget (is it componentWillReceiveProps or new instance of widget will be created anyway)?    I want to try webpack-bundle-analyser on my build, how to add plugins to webpack config?    If i change some code, the watchTs detect and rebuild stuff, but then file widget.js is deleted and causes errors. (maybe the path to test project is wrong? but i see the widget mpk is in right place)   I intent to create a bug in my component (classname instead of className), but when i run the project, there is no warning/error when open the widget.  Is it correct?     I want to use react development build (more detailed bug report, performance analysis), is it possible now?    Now react 16.6 is used, when will the 16.8  used (people say with react Hooks, we may have more options to write react component)   If you know the answers, please share with me! I think many other people also be interested to know too.   Best regards,
asked
1 answers
2

Thanks for using our generator and how-to documentation!!

We really appreciate your questions and we already implemented and published the extensibility you mentioned in item 3 in the version 0.1.1 of the Pluggable Widgets Tools :)

About your questions, here are the answers:

  1. Typescript is transpiled to Javascript before the server run, so to find the Generated TS Files, you can look at your "Sources" tab of your Chrome Dev Tools, then look for webpack:// → Your widget folder → src. You can extend your webpack config in the version 0.1.1 of the Pluggable Widgets Tools with devtools: "source-map", then webpack will keep the original TS file in the same folder structure I mentioned before.
  2. Nowadays we have some limitation using Pluggable Widgets (like use of lists as attributes), please be aware about this. About the update, I think you can use componentWillReceiveProps, that is before the render or componentWillUpdate/componentDidUpdate, but if you need to re-render the component, use the state, then the component will be automatically re-rendered.
  3. As the generator and build tools are beta versions we are still improving these tools. In the version (0.1.1) of the Pluggable Widgets Tools you will can extend your webpack configurations. See the README at Widget Tools to learn how to extend.
  4. Can you please provide more details about this question (also package.json content), because we don't have any reference to widget.js inside our tools. I think this file is related to Dojo widgets.
  5. Imports are case sensitive depending on the OS. In MacOS you can configure to be sensitive, by default is case insensitive. Also windows. If you are talking about the component attribute, in TS it will fail during the build phase, in JS it will fail during the runtime.
  6. You can install the react extensions for your Chrome Dev Tools or FF Dev Tools → https://github.com/facebook/react-devtools
  7. We are following the same dependencies delivered with the Mendix Studio pro, so when Mendix Studio Pro bump the version we will also updated our tools.

 

Thanks again for your contribution and if you have any other questions, let us know.

answered