fable-splitter doesn't seem to preserve folder structure

[TheAngryByrd]

Description

Given the structure

.
├── FableTestSplitter.fsproj
├── Main.fs
├── Pages
│   ├── feature1
│   │   └── list.fs
│   └── feature2
│       └── dashboard.fs
├── SomeSharedCode.fs
└── paket.references

fsproj

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>  
  
    <Compile Include="SomeSharedCode.fs" />
    <Compile Include="Pages/**/*.fs" />
    <Compile Include="Main.fs" />
  </ItemGroup>
  <Import Project="..\.paket\Paket.Restore.targets" />
</Project>

I get the output:

├── Main.js
├── SomeSharedCode.js
├── fable
│   ├── cmd.js
│   ├── common.js
│   ├── program.js
│   └── react.js
├── fable-core
│   ├── Array.js
│   ├── Async.js
│   ├── AsyncBuilder.js
│   ├── Choice.js
│   ├── Comparer.js
│   ├── CurriedLambda.js
│   ├── Date.js
│   ├── DateOffset.js
│   ├── List.js
│   ├── ListClass.js
│   ├── MailboxProcessor.js
│   ├── Map.js
│   ├── Option.js
│   ├── Reflection.js
│   ├── RegExp.js
│   ├── Seq.js
│   ├── Serialize.js
│   ├── Set.js
│   ├── String.js
│   ├── Symbol.js
│   └── Util.js
├── feature1
│   └── list.js
└── feature2
    └── dashboard.js

Repro code

https://github.com/TheAngryByrd/FableInLegacyApps

cd src && dotnet restore && dotnet fable npm-run splitter

Expected and actual results

I would expect the output feature1 and feature2 folders to be under a Pages folder not the root output directory.

Related information

• Fable version (dotnet fable --version):

$ dotnet fable --version
1.3.7

• Operating system:

$ dotnet --info
.NET Command Line Tools (2.1.3)

Product Information:
 Version:            2.1.3
 Commit SHA-1 hash:  a0ca411ca5

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.12
 OS Platform: Darwin
 RID:         osx.10.12-x64
 Base Path:   /usr/local/share/dotnet/sdk/2.1.3/

Microsoft .NET Core Shared Framework Host

  Version  : 2.0.4
  Build    : 7f262f453d8c8479b9af91d34c013b3aa05bc1ff

[alfonsogarciacaro]

When @ncave wrote fable-splitter the purpose wasn't to replicate the folder structure, just to generate different files for cases where the bundle size was too big (e.g. when compiling the REPL) or when there's already another bundler (e.g. React Native). Because of this the solution was an almost-flattened structure where only the last folder of the file is used. This has been enough for fable-splitter use cases so we haven't revisited this.

Trying to replicate the folder structure in Fable 0.7 gave me a lot of headaches because there are many edge cases (e.g. you can have two files named Util.fs and Util.js in the same folder) and it's difficult to avoid collisions and resolve the references among the target files, specially when you pull files from folders external to the project. Having said that, if you want to give it a shot this is where the paths are being edited, I guess that (and the target file save location) is what needs to be updated to achieve the desired result.

[TheAngryByrd]

Thank you for the detailed response as always. And thanks for pointing to where i should get started. Is there a set of tests that exercise fable-splitter?

[alfonsogarciacaro]

No, sorry. Actually we don't have tests for any of the JS clients (Webpack, Rollup, splitter) besides the fact that Fable tests are being bundled with Webpack. Integration tests is one of the things we're really missing... 😕

[alfonsogarciacaro]

Related: #1648 (comment)

BTW, now there's one! test for fable-splitter here, maybe we can add another one after fixing the folder structure.

[TheAngryByrd]

Since this is Fable 2 related I'm ok with closing if you want 👍

[alfonsogarciacaro]

Thanks @TheAngryByrd! Ok, let's close this. Hopefully the folder structure in Fable 3 works for you. There's still some mangling to prevent file duplication in some cases, but for the most part it should reflect the original structure 👍