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?
inline progressLine (props : ProgressProps list) (elems : ReactElement list) : ReactElement =
ofImport "Line" "rc-progress" (keyValueList CaseRules.LowerFirst props) elems
includes dotnet-websharper/core#1114
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> = DatePickerImportand 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 moduleSPA.min.js is autogenerated from W#, I can't import it manually as a js module....
[<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(...)
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 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.
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 [] [
datePickershowTimeSelect 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"
/>
);
};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
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
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.
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.
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
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
if I return to the original
"build": "react-scripts build", in package.jsonand 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'