Naming the css units class? about feliz HOT 8 CLOSED

Why not call it unit? Which is a more generic name.

Another option is to provide direct function in order to have a lightweight syntax:

let px (value  : float) : ICssUnit = unbox ((unbox<string>value) + "px")

// Usage
px 2.0

The problem is that we lose the overload support for conciseness.

In the future, when dotnet/fsharp#6805 is available, it should be possible to do:

type System.Int32 with
    static member inline toPixel (value : int) =
        (unbox<string> value + "px")

let inline pixel (value : ^a) =
    (^a : (static member inline toPixel: ^a -> string) (value))

let size = pixel 2 // this gives 2 + "px" -> "2px"

A possible workaround is:

type ToPixel = ToPixel with
    static member inline ($) (ToPixel, value: int  ) = unbox<string> value + "px"
    static member inline ($) (ToPixel, value: float) = unbox<string> value + "px"

let inline pixel value = ToPixel $ value 

let pixelFromInt = pixel 2
let prixelFromFloat = pixel 2.

But this version generates a much more verbose JavaScript:

import { union } from "fable-library/Reflection.js";
import { declare, Union } from "fable-library/Types.js";
export const ToPixel = declare(function DragAndDrop_ToPixel(tag, name, ...fields) {
  Union.call(this, tag, name, ...fields);
}, Union);
export function ToPixel$reflection() {
  return union("DragAndDrop.ToPixel", [], ToPixel, () => ["ToPixel"]);
}
export const pixelFromInt = (() => {
  const arg0 = new ToPixel(0, "ToPixel");
  return 2 + "px";
})();
export const prixelFromFloat = (() => {
  const arg0$$1 = new ToPixel(0, "ToPixel");
  return 2 + "px";
})();

It's possible to limit the verbosity by not inlining the ($) methods:

import { union } from "fable-library/Reflection.js";
import { declare, Union } from "fable-library/Types.js";
export const ToPixel = declare(function DragAndDrop_ToPixel(tag, name, ...fields) {
  Union.call(this, tag, name, ...fields);
}, Union);
export function ToPixel$reflection() {
  return union("DragAndDrop.ToPixel", [], ToPixel, () => ["ToPixel"]);
}
export function ToPixel$$$op_Dollar$$Z45FE3DAA(_arg1, value) {
  return value + "px";
}
export function ToPixel$$$op_Dollar$$49846331(_arg2, value$$1) {
  return value$$1 + "px";
}
export const pixelFromInt = ToPixel$$$op_Dollar$$Z45FE3DAA(new ToPixel(0, "ToPixel"), 2);
export const prixelFromFloat = ToPixel$$$op_Dollar$$49846331(new ToPixel(0, "ToPixel"), 2);

Side note:

Also, because you use unbox<string> you are relying entirely on JavaScript behaviour and don't do a F# cast.

This an interesting usage in order to reduce bundle size and have a small optimisation.

(unbox<string> 2) + "px"  
// generates: 2 + "px";

string 2 + "px"
// genertes: int32ToString(2) + "px";

I just wanted to note this behaviour as it's becoming an implementation detail of Feliz now. So using unbox<string> seems indeed the right move, as long as value type is a compatible type/native JavaScript type.

from feliz.

Another implementation possible is:

type Utilities = Utilities with
    static member inline toPixel (value: int  ) = unbox<string> value + "px"
    static member inline toPixel (value: float) = unbox<string> value + "px"

let inline call (_:^Utilities) value = ((^Utilities or  ^a) : (static member inline toPixel: ^a -> string) (value))
let inline pixel value = call Utilities value

let pixelFromInt = pixel 2
let prixelFromFlaot = pixel 2.2

This generates:

import { union } from "fable-library/Reflection.js";
import { declare, Union } from "fable-library/Types.js";
export const Utilities = declare(function DragAndDrop_Utilities(tag, name, ...fields) {
  Union.call(this, tag, name, ...fields);
}, Union);
export function Utilities$reflection() {
  return union("DragAndDrop.Utilities", [], Utilities, () => ["Utilities"]);
}
export const pixelFromInt = (() => {
  const _arg1 = new Utilities(0, "Utilities");

  return 2 + "px";
})();
export const prixelFromFlaot = (() => {
  const _arg1$$1 = new Utilities(0, "Utilities");

  return 2.2 + "px";
})();

from feliz.

Thanks @MangelMaxime for the suggestions, I cannot use unit because it would clash with functions returning unit and the user would have to specify which unit type has to be returned Feliz.unit vs Microsoft.FSharp.Core.unit

Also although I like an overloaded pixel function using srtp, the problem is that the function becomes globally available and you have to remember the names of these functions instead of remembering to dot through one type to get the possible options

Alright, I think I will keep it as is for now, thanks again for the input Maxime ❤️

from feliz.

Ah yes right.

Perhaps size or sizeIn then?

• size.px
• sizeIn.px

I am not convinced with sizeIn but still wanted to mention it :)

Also although I like an overloaded pixel function using srtp, the problem is that the function becomes globally available and you have to remember the names of these functions instead of remembering to dot through one type to get the possible options

Indeed, but we can have a separate library with this syntax in it as Feliz seems easier to extends. :) If I prefer that this syntax perhaps I will work on it. Will first wait to Feliz to bo done :)

from feliz.

I thought of size too and it looks nice for font-size but doesn't make sense for width because usually size is associated with two dimensions (height and width, i.e. size of a rectangle) where length is one-dimensional and most numbers in css are one-dimensional too

from feliz.

Would dotnet/fsharp#6807 help with this? I think then you could open length (or similar) and get access to the overloads without having to type out the full name of the type/class.

from feliz.

@NatElkins I think that when it will be available yes it should help because I have also linked this PR for #2 (comment)

And the problem is similar I think.

from feliz.

@NatElkins Actually at this point I wouldn't recommend opening types such as length, style or Html because you lose the ability to "dot through" the static type so that don't have to remember anything

from feliz.