Emit top directive

[lukaszkrzywizna]

Description

Hi! I'm testing Fable + Next js solution and I tried to use client-side rendering. In order to do this, there must added 'use client' directive to top of the file. I tried use emit, however Fable puts it under imports. Is there any other mechanism providing this kind of a feature?

Repro code

module Index

Fable.Core.JsInterop.emitJsStatement () "'use client'"

open Fable.Core
open Feliz
open Feliz.JSX.React


[<JSX.Component>]
[<ExportDefault>]
let private home () =
    let counter, setCounter = React.useStateWithUpdater 0
    Html.div [
        Attr.style [
            Css.displayFlex
            Css.justifyContentCenter
        ]
        Html.children [
            Html.button [
                Ev.onClick(fun _ -> setCounter ((+) 1))
                Html.children [
                    Html.text $"Counter: {counter}"
                ]
            ]
        ]
    ]

JS outcome:

import { React_useStateWithUpdater_1505 } from "../fable_modules/Feliz.2.6.0/React.fs.js";

'use client'; // should be above import

function home() {
    const patternInput = React_useStateWithUpdater_1505(0);
    const setCounter = patternInput[1];
    const counter = patternInput[0] | 0;
    return <div style={{
            display: "flex",
            justifyContent: "center",
        }}>
        <button onClick={(_arg) => {
                setCounter((y) => (1 + y));
            }}>
            {`Counter: ${counter}`}
        </button>
    </div>;
}

export default home;

Expected and actual results

Please provide the expected and actual results.

Related information

• Fable version: 4.1.4
• Operating system: mac OS

[MangelMaxime]

Hello @lukaszkrzywizna,

Right now I don't think there is a way for that. I think the Fable always put the import at the top of the file.

A workaround for you could be to compile the F# files in a directory, have a script watch that directory and copy the files with the additional line in the final destination. It is a bit convoluted but should unlock you for now I think.