Fable optimizing FS files that it thinks are not in used?

[leolorenzoluis]

Given I have a FS script that has no dependencies and just LitComponents, when I try to reference it in the other FS files inside the HTML it does not work. It doesn't include the FS that it should generate as part of the script. Maybe Fable was thinking it's not used so it didn't transpiled out a JS since it's inside HTML?

It compiles fine it's just that the generated output is not there.

[alfonsogarciacaro]

This is strange, we had a similar effect in Fable 2 because Webpack managed dependencies so files not referenced weren't being compiled. But with Fable 3 every file that's included in the .fsproj should get compiled. Would it be possible to share a bit of your project structure? Did you add the file to the .fsproj in the middle of a watch compilation? We recently added an optimization to ignore files if the output didn't change, maybe this could have caused a regresion.

[leolorenzoluis]

I made sure that I recompiled without watch compilation, so after adding the file I rebuilt it from scratch and still no output. This is using vitejs instead of webpack based off the FableLitTemplate from @JordanMarr

Here's the .fsproj where the top file Components.fs contains just LitComponents

fsharp
<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="Components.fs" />
    <Compile Include="Libraries.fs" />
    <Compile Include="ChartJS.fs" />
    <Compile Include="Server.fs" />
    <Compile Include="Registrations.fs" />
    <Compile Include="Utils.fs" />
    <Compile Include="ViewCatFactPage.fs" />
    <Compile Include="ListCatFactsPage.fs" />
    <Compile Include="ListMonitorsPage.fs" />
    <Compile Include="WelcomePage.fs" />
    <Compile Include="App.fs" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Elmish.Bridge.Client" Version="6.0.1" />
    <PackageReference Include="Fable.Form" Version="1.2.0" />
    <PackageReference Include="Fable.Form.Simple" Version="3.1.0" />
    <PackageReference Include="Fable.Lit" Version="1.4.1" />
    <PackageReference Include="Fable.Lit.Elmish" Version="1.4.0" />
    <PackageReference Include="Fable.Remoting.Client" Version="7.19.0" />
    <PackageReference Include="Fable.SimpleHttp" Version="3.3.0" />
    <PackageReference Include="Feliz.Plotly" Version="2.1.0" />
    <PackageReference Include="Thoth.Json" Version="6.0.0" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\..\Shared\Shared.fsproj" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Update="FSharp.Core" Version="6.0.4" />
  </ItemGroup>
</Project>

[alfonsogarciacaro]

So if you use Jordan's template, the output dir for Fable files should be WebLit/build/client. If you list the contents of that folder after a compilation, Components.js is not there?

[leolorenzoluis]

Component.js is there, but if I open chrome and display the sources it's not including it. Maybe it's vitejs configuration?

The command is just pointing to that folder "dotnet fable watch src -s -o build/client --run vite".

import mkcert from 'vite-plugin-mkcert'
import {splitVendorChunkPlugin} from 'vite';


export default {
    // config options
    build: {
        commonjsOptions: {
            include: ["/node_modules"]
        }
    },
    configureServer: ({ app }) => {
        app.use(cors({ origin: '*' }));
    },
    server: {
        cors: true,
        https: true,
        proxy: {
            '/signin': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
            '/signout': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
            '/api': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
            '/socket': {
                target: 'wss://localhost:5001/',
                ws: true,
                secure: false
            }
        }
    }
    ,

    plugins: [mkcert(), splitVendorChunkPlugin()]
}

[alfonsogarciacaro]

Ah, ok. Then probably components need registering. If there's no reference to the file Vite will ignore it. To prevent this you can add a dummy register function and call it from the app's entry file. Example: https://fable.io/Fable.Lit/docs/web-components.html#registering

[leolorenzoluis]

@alfonsogarciacaro Yeah that's what I end up doing lol. I just didn't know if that was the right way. Not sure how I missed that docs. Thanks!