Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
giuliohome
@giuliohome

I'm trying to make it work

    type DatePickerProps =
        {
            selected: Date;
            onChange: Date -> unit;
        }

    [<JavaScript>]
    module HelloWorld =
        open System

        let Example () =

            let count, setCount = React.UseState 0
            let myDate, setMyDate = React.UseState DateTime.Today.JS
            let datePicker =
                React.CreateElement ("DatePicker", 
                    {
                        selected = myDate 
                        onChange = setMyDate 
                    })
            React.setCount <- setCount
            div [] [
                datePicker
                p [] [Html.textf "You selected %s date" (myDate.ToDateString())]

I think I have to create a react app via npm, then npm install react-datepicker and finally move the static build from npm under Content of VS for W# SPA and somehow make the script links to the static scripts from npm via the template markup.... am I on the right track?

giuliohome
@giuliohome
How can I compile import DatePicker from 'react-date-picker'; into W# React? Is it something that I can quickly "inline" from the js script linked in the html?
giuliohome
@giuliohome
Basically I'm looking at the equivalent of Fable
inline progressLine (props : ProgressProps list) (elems : ReactElement list) : ReactElement = ofImport "Line" "rc-progress" (keyValueList CaseRules.LowerFirst props) elems
András Jankó
@Jand42
Yes, it would be useful to add this finally. I am looking into adding JS.Import/JS.ImportAll/JS.ImportDefault helpers, I will ping you when there is a daily build
giuliohome
@giuliohome
@Jand42 Awesome! Thank you so much! For my W# projects would be cool to import some nice react components like the datepicker and the data table, I think. Thank for all your work on W#! I also hope to learn how to do some development on those W# projects in order to be more collaborative in the future...
giuliohome
@giuliohome
In the meantime, is there a quick&dirty workaround to get the react-datepicker imported in W# React? No worries if the answer is no, I will wait for the official daily build
András Jankó
@Jand42
My fix will include special handling "import" within inlines to be able to use on-demand import too. But sadly that needs a small fix too yet
giuliohome
@giuliohome
Great, thank you again very much and keep up with the good work
András Jankó
@Jand42
Thanks, I'm a bit too occupied with projects but I should try to sneak some more time on WS...
András Jankó
@Jand42
@guiliohome Build version 4.6.8.411 is available on http://daily.websharper.com/nuget
includes dotnet-websharper/core#1114
giuliohome
@giuliohome
Where should I write the import statement?

Is this code correct? In a W# Library?

[<JavaScriptExport>]
type ReactDatePicker() = 
    [<Inline>]
    let DatePickerImport : Func<obj,React.Element> = 
        JS.Import("DatePicker", "https://unpkg.com/react-datepicker@0.53.0/dist/react-datepicker.js")

    member this.DatePicker : Func<obj,React.Element> = DatePickerImport

and is this the usage in a W# SPA?

let Example () =

    let count, setCount = React.UseState 0
    let myDate, setMyDate = React.UseState DateTime.Today.JS
    let reactDatePicker = new ReactDatePicker()

    let datePicker =
        React.CreateElement ( reactDatePicker.DatePicker, //"react-datepicker" , 
                    {
                        selected = myDate 
                        onChange = setMyDate 
                    })

And how am I supposed to solve the following error?

SPA.min.js:7 Uncaught SyntaxError: Cannot use import statement outside a module

SPA.min.js is autogenerated from W#, I can't import it manually as a js module....

giuliohome
@giuliohome
and btw I guess I need the JSX import of the react component into the react app from W# react, not the vanilla javascript import (I already have the cdn script in the html) or am I confused about that? what about a simple demo/snippet showing just a simple DatePicker from react-datepicker in W# react?
András Jankó
@Jand42
Thanks for testing, I thought there will be some rough edges yet. On the "Cannot use import" error - what if you add type="module" on the <script ...` tag?
Do you have a full test project that you can share? What would the jsx import require differently, I could not find definite source on that yet.
giuliohome
@giuliohome
@Jand42 yes, me too, I could not find a documented difference, maybe nothing... I don't know. Let's assume it is not a problem. Regarding the type module, wait a moment...
András Jankó
@Jand42
Also, on JS.Import - you should be able to use it anywhere within code, using same arguments with JS.Import will only generate one import statement. I suggested to put inside a let with [<Inline>] in ticket because it can be typed there once. So you can equally have [<Inline>] member this.DatePicker : Func<obj,React.Element> = JS.Import(...)
giuliohome
@giuliohome
I'm talking about the script generated by websharper, I have the hole in the html not the script tag... But, as a dirty trick, I can save the index and the script from chrome dev tools ... and in that case the import is fine, but 1) I don't think this is a real solution and 2) ... I'm still having issues after the import in the react component. Ok yeah let me share my project
giuliohome
@giuliohome
@Jand42 I'm sharing my project here https://github.com/giuliohome/WS.React.DatePicker Thank you again!
I've opened an issue in my demo project (it's more or less a snippet) atm: giuliohome/WS.React.DatePicker#1
giuliohome
@giuliohome
If I use a saved from crome index and script where I can manually set the type module, the error is The requested module 'https://unpkg.com/react-datepicker@0.53.0/dist/react-datepicker.js' does not provide an export named 'DatePicker'
I think that is the difference between vanilla javascript import and jsx import, there is node and webpack in the middle... afaik...
giuliohome
@giuliohome
I see, in my opinion, one needs to build with npm and then, after the compiled scripts of the webpacke bundle, invoke the React$2.createElement(DatePicker.default,{ ... do you agree? but it is not a trivial change to do for W#... what do you think?
András Jankó
@Jand42
Yes, I am thinking npm+webpack is needed, maybe you can bundle together using the SPA.min.js output as entry point.
Also, JS.ImportDefault gives the import that you need (not a named one)
giuliohome
@giuliohome
I have compiled and bundled all together (without SPA(.min).js) and then invoked the W# React createcomponent on that build (from a manually modified SPA.js), it "sort of" works but it is very far from a practical solution

Yes, I am thinking npm+webpack is needed, maybe you can bundle together using the SPA.min.js output as entry point.

Oh.... I don't know if this is a simpler trick

I'm not an expert of webpack, it has been difficult for me to understand what was going on up till now... so, unless I'm missing something trivial, I would suspect that W# requires a medium/big change to import react components like this one...
giuliohome
@giuliohome

I have compiled and bundled all together (without SPA(.min).js) and then invoked the W# React createcomponent on that build (from a manually modified SPA.js), it "sort of" works but it is very far from a practical solution

My detailed - manual - solution is here in this commit giuliohome/WS.React.DatePicker@1f6c3b1. So, aside from the fact that react-datepicker wants a moment date (not a js date), which is not a problem at all, all boils down to calling the npm+webpack bundled, static script from the javascript produecd by W#... we need a npm/webpack expert here but yes, I think you're right @Jand42 I should configure it in such a way that the SPA is the entry point... (maybe this SO Q&A can help) ... well, in W# React a tool should be implemented to systematically do that.

giuliohome
@giuliohome
simplified to a minimum! Almost all the obscure part has been deleted giuliohome/WS.React.DatePicker@83a50bc I hope I've resolved my issue... let me get back to W# and try again...
giuliohome
@giuliohome
Done!!!!! WOW !!! react-datepicker comonent imported in WebSharper React!!!
let myDate, setMyDate = React.UseState (Moment(DateTime.Today.JS))
let importDatePicker = JS.Eval("DatePicker.default") :?> React.Class 
let datePicker =
    React.CreateElement ( importDatePicker , 
                {
                    selected = myDate 
                    onChange = setMyDate 
                }, [||])

React.setCount <- setCount
div [] [
    datePicker
giuliohome
@giuliohome
giuliohome
@giuliohome
no idea how to add the showTimeSelect prop though, like in
() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};
giuliohome
@giuliohome
ehm... the problem is that I used an old version of react-datepicker to make it work via cdn. So to use a current version, it seems that cdn is not viable and so I'm back to the original point

Yes, I am thinking npm+webpack is needed, maybe you can bundle together using the SPA.min.js output as entry point.

if I copy and rename SPA.min.js as index.js, I get 'IntelliFactory' is not defined and a bunch of errors

giuliohome
@giuliohome

I'm not an expert of webpack, it has been difficult for me to understand what was going on up till now... so, unless I'm missing something trivial, I would suspect that W# requires a medium/big change to import react components like this one...

I quote myself again, I don't think that W# React is really usable to import React Components without W# and WebPack integration, that is not going to come any soon I believe

giuliohome
@giuliohome
Asked on stackoverflow and opened a Hacker0x01/react-datepicker#2418 on github react-datepicker.
giuliohome
@giuliohome
I think that the main problem is that W# scripts are not JS Modules. :-/ In that case it should be immediate to import an external module or make the SPA.js as the webpack main entry. Do you agree? Is there any plan to migrate W# autogenerated script to a javascript Module?
Adam Granicz
@granicz
that should be the way, yes, @Jand42 and others have been working on changing the current output to support modules and a better TS interoperability - this has been on the agenda for years, so closing it would be a good step forward
giuliohome
@giuliohome
András Jankó
@Jand42
@giuliohome Thanks. Yes, I see, current JS.Import... hacks only get us half the way, seems that SPA bundling logic can introduce some non-valid code for JS module.
Have you tried using a JS.ImportDefault<React.Class>("react-datepicker") with installing react/react-dom/react-datepicker by nmp? Then webpack does not complain about my SPA.js, and produces a single bundle file, but IntelliFactory.Runtime helpers does not follow the same "use strict" scoping rules right now, and that seems to break on runtime, fixing that.
András Jankó
@Jand42
@giuliohome Latest WS+UI build on http://daily.websharper.com/nuget has webpackability fixes. What I have tried: with your SPA project, I have used
let datePicker = JS.ImportDefault<React.Class>("react-datepicker") and then React.CreateElement (datePicker, ... to create the element. Installed npm packages react/react-dom/react-datepicker, webpack now worked using SPA.js as entry point. Linked webpack output in index.html instead of original SPA.js. No JS errors and date picker renders.
I am thinking how this can be leveraged to make WS.React use imports instead of fixed compiled .js, but it is a WIG-based binding, so it would need some extra support
giuliohome
@giuliohome
Uncaught TypeError: Cannot read property 'Element' of undefined
    at eval (SPA.js:324)
    at eval (SPA.js:326)
    at Module../src/SPA.js (bundle.js:1923)
    at __webpack_require__ (bundle.js:20)
    at eval (SPA.js:1)
    at Object.0 (bundle.js:1934)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:84
    at bundle.js:87
image.png
giuliohome
@giuliohome

This is what I've done

npx create-react-app npm_react_compile (quite long... before I tried skip this and start with npm init )

copy SPA.js into .src/

create webpack.config.js in npm_react_compile

module.exports = {
  entry: ['./src/SPA.js'],
  mode: 'development',
  output: {
    filename: 'bundle.js'
  }
}

of course npm i react-datepicker

update package.json and set "build": "webpack", inside "scripts": { ... }

then npm run build

install webpack-cli: yes

copy build.js from ./dist into my SPA/Content and link it from the W# SPA html template

Above error persists, @Jand42 let me know what I'm doing wrong

giuliohome
@giuliohome
yet another test:
if I return to the original "build": "react-scripts build", in package.json
and I rename the SPA.js as index.js and leave it alone in .src and I npm run build, now I see
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/index.js
  Line 139:16:    'IntelliFactory' is not defined                                        no-undef
  Line 209:18:    'IntelliFactory' is not defined                                        no-undef
  Line 270:30:    'WebSharper' is not defined                                            no-undef
  Line 270:54:    'WebSharper' is not defined                                            no-undef
  Line 271:7:     'WebSharper' is not defined                                            no-undef
  Line 303:14:    'ignore' is not defined                                                no-undef
  Line 304:12:    'ignore' is not defined                                                no-undef
  Line 305:14:    'ignore' is not defined                                                no-undef
  Line 306:14:    'ignore' is not defined                                                no-undef
  Line 307:17:    'ignore' is not defined                                                no-undef
  Line 308:13:    'ignore' is not defined                                                no-undef
  Line 309:12:    'ignore' is not defined                                                no-undef
  Line 310:16:    'ignore' is not defined                                                no-undef
  Line 311:19:    'ignore' is not defined                                                no-undef
  Line 312:13:    'ignore' is not defined                                                no-undef
  Line 313:16:    'ignore' is not defined                                                no-undef
  Line 314:14:    'ignore' is not defined                                                no-undef
  Line 315:13:    'ignore' is not defined                                                no-undef
  Line 318:3:     Unexpected use of 'self'                                               no-restricted-globals
  Line 322:146:   'e' is not defined                                                     no-undef
  Line 349:1:     Import in body of module; reorder to top                               import/first
  Line 659:7:     Unexpected use of 'self'                                               no-restricted-globals
  Line 665:5:     Unexpected use of 'self'                                               no-restricted-globals
  Line 673:18:    Unexpected use of 'self'                                               no-restricted-globals
  Line 771:3:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 771:109:   Unexpected use of 'self'                                               no-restricted-globals
  Line 802:6:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 856:3:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 856:108:   Unexpected use of 'self'                                               no-restricted-globals
  Line 857:12:    Unexpected use of 'self'                                               no-restricted-globals
  Line 864:12:    Unexpected use of 'self'                                               no-restricted-globals
  Line 987:6:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1036:3:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1118:3:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1188:3:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1386:8:    Unexpected use of 'self'                                               no-restricted-globals
  Line 1387:58:   Unexpected use of 'self'
Well, in the end, since I have already resolved the problem in my way and I don't understand the full, detailed, correct procedure you are suggesting, sorry @Jand42 , but I would prefer to stay with my solution