Path imported by `[<ReactComponent(import="...", from="...")>] should not be relative to the caller side

[MangelMaxime]

I have a Code.tsx file with a Components.fs file where I am binding the component for usage in F#:

[<ReactComponent(import="default", from="./${outDir}/Code.tsx")>]
let Code (code: string) (language : string) = React.imported()

Then in another file from another directory, I am calling the F# Code function to use the component. The generated code is:

import Code from "./Code.tsx";

The issue is that ./Code.tsx is invalid because the caller file is not inside of the same directory as Components.fs:

.
├── Components
│   ├── Code.tsx
│   ├── Components.fs
│   └── Components.fs.js
├── Utils
│   ├── Html.fs

The import path should be relative to where the API is defined.

IHMO this should be the default behaviour otherwise, it means that if you need to use a JSX component then you need to re-declare it several times 😅

A workaround, is to create a standard Feliz binding using Interop.reactApi.createElement to we can use Fable special macro${outDir}:

type Components =

    static member Code (code: string) (language: string) =
        Interop.reactApi.createElement (
            import "default" "${outDir}/Code.tsx",
            {|
                code = code
                language = language
            |}
        )

It is important to not mark this member as inline otherwise it will not work because the call site is not stable.

[Zaid-Ajaj]

Hi there @MangelMaxime so the problem here is that we need access to the value of outDir from the compiler. Here is where use it:

let makeImport (selector: string) (path: string) =
    Fable.Import({ Selector = selector.Trim()
                   Path = path.Trim()
                   Kind = Fable.UserImport(false) }, Fable.Any, None)

Maybe Fable compiler should automatically replace ${outDir} with its value when encountering Fable.Import AST node? 🤔

OR Fable could expose the outDir as an environment variable such that we get access to it in compile-time:

let path = 
  match env "FABLE_OUT_DIR" with
  | Some outDir -> path.Replace("${outDir}", outDir).Trim()
  | None -> path.Trim()

[MangelMaxime]

Replacing ${outDir} automatically was my idea but I need to check when it happens in Fable.

One reason to do it this way, is like that plugins don't know to worry about path and we don't have to duplicate the logic once per plugin.

[Zaid-Ajaj]

One reason to do it this way, is like that plugins don't know to worry about path and we don't have to duplicate the logic once per plugin.

Yeah it makes more sense to do that in the compiler ✅ you probably need to traverse the resulting AST from compiler plugins, check for Fable.Import nodes and update their Path if it contains the${outDir} macro

[pradeepr-roboticist]

Thanks for all the work on Feliz. The dev experience has been great!

I am hitting this issue right now. I tried the ${outDir} approach but it did not work. Has there been any work towards this?

More context:
I made a Fable library and it has some jsx file that are referenced by the ReactComponent attributes.

My application is using this library and I am encountering related to .jsx files not being accessible.

I hard coded the from path to be ../../fable_modules/<libname-with-version>/.../abc.jsx and it worked fine. So, I know that this problem is related to how the paths are finally written to the *.fs.js file.

Thanks!

[Freymaurer]

Hey @pradeepr-roboticist! I am afraid there is currently no full solution for this yet.

Here is a workaround until then!

[<Erase; Mangle(false)>]
type MyJSX = 

    [<ReactComponent>]
    static member Main() : ReactElement = Fable.Core.JsInterop.importDefault "./MyJSX.jsx"

This is not a true binding, as it creates minimal additional js code, but because the import is handled locally in the file, you can import Main anywhere you like

import MyJSX from "./MyJSX.jsx";

export const Main = MyJSX;

I didnt encounter this issue yet, this should be adressed correctly.

EDIT: Swap out Fable.Core.JsInterop.importDefault, for whatever import helper you need/want

[pradeepr-roboticist]

Hey @pradeepr-roboticist! I am afraid there is currently no full solution for this yet.

Here is a workaround until then!

[<Erase; Mangle(false)>]
type MyJSX =

[<ReactComponent>]
static member Main() : ReactElement = Fable.Core.JsInterop.importDefault "./MyJSX.jsx"

This is not a true binding, as it creates minimal additional js code, but because the import is handled locally in the file, you can import Main anywhere you like

import MyJSX from "./MyJSX.jsx";

export const Main = MyJSX;
I didnt encounter this issue yet, this should be adressed correctly.

EDIT: Swap out Fable.Core.JsInterop.importDefault, for whatever import helper you need/want

Awesome! This worked for me. Thanks @Freymaurer !

Here is some code for posterity.

What I had earlier:

    [<ReactComponent(import = "Viewport", from = "../../fable_modules/Components.0.0.1/Viewport/Viewport.jsx")>]
    let Viewport
        (props: 
            {|
                mouseMoveCallback: Browser.Types.MouseEvent -> unit
            |}
        ) = React.imported ()

I changed it to:

    let Viewport
        (props: 
            {|
                mouseMoveCallback: Browser.Types.MouseEvent -> unit
            |}
        ) = Fable.Core.JsInterop.import "Viewport" "./Viewport.jsx"

My Viewport.jsx is just next to the .fs file that defines the Viewport.

The contents of Viewport.jsx looks like this:

import { ... } from "..."
import { ... } from "..."

export function Viewport(props) {
...
}

[Freymaurer]

Something that might enhance your experience with fsharp and feliz. The [<ReactComponent>] attribute actually transforms your arguments into a javascript object.

So for a jsx components like this:

import React from 'react';

export default function MyJSX({init}) {
    const [count, setCount] = React.useState(init);
    return (
        <div>
            <h1>Hello, World!</h1>
            <p>This is a simple JSX component.</p>
            <button onClick={() => setCount(count + 1)}>
                Click me! Count: {count}
            </button>
        </div>
    );
}

It expects a javascript object with a field called init. You can use the following fsharp syntax:

[<Erase; Mangle(false)>] // This just removes any references to the type in the js file and makes it cleaner/smaller
type MyJSX = 

    [<ReactComponent>]
    static member Main(init: int) : ReactElement = Fable.Core.JsInterop.importDefault "./MyJSX.jsx"

Here the init: int will be transformed to be part of a js object. The same as {|init: int|}. But this syntax has a major upside, using optional parameters is extremely nice to do.

export default function MyJSX({init, optional1, optional2}) {

Can be done like this:

[<Erase; Mangle(false)>] // This just removes any references to the type in the js file and makes it cleaner/smaller
type MyJSX = 

    [<ReactComponent>]
    static member Main(init: int, ?optional1, ?optional2) : ReactElement = Fable.Core.JsInterop.importDefault "./MyJSX.jsx"

// and called like this

MyJSX.Main(42)

MyJSX.Main(42, "Hello")

MyJSX.Main(42, "Hello", "World")

//or even

MyJSX.Main(42, optional2 = "World")