Upgrade to Nagareyama #43
Conversation
alfonsogarciacaro
force-pushed
the
nagareyama
branch
2 times, most recently
from
9c2bae4
to
ff42f01
Compare
alfonsogarciacaro
force-pushed
the
nagareyama
branch
from
ff42f01
to
1f653c3
Compare
alfonsogarciacaro
force-pushed
the
nagareyama
branch
from
1f653c3
to
4f78bde
Compare
|
Can |
|
It depends on your target, if you only need to target modern browsers I believe you can remove it. But if you need to be compatible with say, Internet Explorer, I think you still need babel-loader to inject the polyfills and transform the JS syntax. |
|
since this is the canonical upgrade sample. I suggest you add the optional but important --outDir parameter as suggestion |
|
what about Fable.Core and other libs. should we paket update those to prerelease channel? |
|
Funny thing is Fable.Core has been v3 for a while :) The nice thing is most libs shouldn't need to do anything to compile with Nagareyama. There will likely be a Fable.Core 4 (pre)release for a couple of new features: mangled interfaces and |
|
Only one thing is missing (in the issue's description at least). You should change the |
|
It's the second point in the description above but maybe the wording is not good and it's easy to miss 🤔 |
|
|
|
Fable is installed now by "dotnet tool restore" (if it's already in the dotnet tools manifest), but you still need yarn (or npm) for JS tooling, like we pack, and other dependencies. |
|
Following the upgrade recipe, everything seems to work, only I get error messages from everything related to material ui theme functions like:
|
|
There was an issue with Feliz.MaterialUI in Fable 3 but it should be fixed now. Are you using the latest version? If not, can you please try upgrading Feliz.MaterialUI? |
|
@alfonsogarciacaro Thanks for the quick reply! But unfortunately this hasn't been resolved in the latest release: Shmew/Feliz.MaterialUI#59. Looking into the error it seems that a const is resolved as a function. In the error example the following constant is called: /* tslint:disable max-line-length */
/**
*              
*/
declare const indigo: {
/**
* Preview: 
*/
50: '#e8eaf6';While in the generated javascript file it is called as: mkStyle("color", indigo()["50"])This is the line of F# code that causes the above problem: prop.style [
style.padding 10
style.color Colors.indigo.``50``
]So, where does this problem originate? It seems the errors mentioned in Feliz.MaterialUI are not specific to that lib, I would guess it is either Feliz or the Nagareyama? |
|
Ah, I wasn't aware of this issue. Thanks for pointing it out, I will check. |
Great! Everything works. I tried it just know following the above recipe. Just two caveats: When optioning for a different outDir, the order matters: dotnet fable watch --outDir build --run webpack-dev-serverworks dotnet fable watch --run webpack-dev-server --outDir builddoesn't work. the outDir isn't used. Also, when using the outDir, the generated files just have the js extension. So you need to change you're webpack entry point accordingly. |
|
Great, thanks for confirming it works @halcwb! About the |
based on MangelMaxime/fulma-demo#43 build script isn't updated yet. Use ` dotnet fable .\src\Fable.Ionide.VSCode.Helpers.fsproj --outDir release`
based on MangelMaxime/fulma-demo#43 build script isn't updated yet. Use ` dotnet fable .\src\Fable.Ionide.VSCode.Helpers.fsproj --outDir release`
|
Source maps are back in Fable 3.1! Check this commit, these are the instructions to enable them:
|
alfonsogarciacaro
force-pushed
the
nagareyama
branch
from
a91ff95
to
3d7ad93
Compare
|
@alfonsogarciacaro I am really impressed by all the hard work you put in Fable 3. 👍 👍 👍 👍 👍 I am finally becoming comfortable with Fable 3 as I am starting to use it at work and on some projects. So I should soon be able to accept this PR and upgrade the tool chain to webpack5 too. It seems like I have it working on my projects. |
This is normal: Release note of source-map-loader
I am using version 2.0.0 with Webpack 5 on my project without problem. |
|
@MangelMaxime, did you manage to make hot reload work in Webpack 5 in the end? I'm using a beta version of webpack-dev-server but no dice. Sass hot reload works though... |
|
@kerams From memory, I think I had it working on https://github.com/MangelMaxime/Herebris/ repo. The repo is open sourced but not at all ready for people to easily use it. I am working on the Express bindinds right now and I am kind of stuck in a binding hell ^^ Here is the webpack config file: https://github.com/MangelMaxime/Herebris/blob/5edb8eb75e0e1f5e7684aea9ddb39dc89f2a6d26/Client/webpack.config.js It contains Even if you try to use |
SourceMaps need `source-map-loader` to work with webpack. See: MangelMaxime/fulma-demo#43 (comment)
SourceMaps need `source-map-loader` to work with webpack. See: MangelMaxime/fulma-demo#43 (comment)
|
Thank you @alfonsogarciacaro and everybody who contributed to this PR |
EDIT: Source maps are back in Fable 3.1, check this comment below for additional instructions.
To upgrade a project using Webpack to Nagareyama do the following steps:
dotnet new tool-manifestin your repo..jsas the entry in webpack.config.js (see how it's done in this PR)dotnet tool install fabledotnet fable watch src/Client --run webpack-dev-serverdotnet fable src/Client --run webpackCleanup
*.fs.jsto .gitignore:Notes
--runargument must always come last, everything after it will be applied to the subprocess, e.g.dotnet fable src --run webpack --config my.config.js.fs.jsextension. If you want to put them in another directory use--outDir, e.g.dotnet fable src --outDir build. When specifying an output directory, the default extension becomes.js. You can set the extension explicitly in any case with the--extensionargument. Adjust the entry point in webpack.config.js accordingly. (Note: only .fs files will be moved to the output directory.)