Congrats!
I’ve given it a test on my project and I noticed that some files came out bigger in size using it, making the final bundle more or less the same size.
I’ve put up a minimal case which I think highlights the issue. I couldn’t spend too much time on this, so maybe I’ve completely missed the mark but I hope that it’s till helping a bit.
module Components.Debug where
import Prelude
import Data.Tuple.Nested ((/\))
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.Hooks as Hooks
import Halogen.Hooks.Extra.Hooks (usePutState)
component :: forall q o m. H.Component q Unit o m
component =
Hooks.component \_ _ -> Hooks.do
bar /\ setBar <- usePutState 0
Hooks.pure do
HH.div_
[ HH.button
[ HE.onClick \_ -> updateBar bar setBar ]
[ HH.text "+" ]
, HH.button
[ HE.onClick \_ -> updateBar bar setBar ]
[ HH.text "+" ]
]
where
updateBar bar setBar =
setBar (bar + 1)
Here’s the output without the optimizer:
import * as Halogen_HTML_Core from "../Halogen.HTML.Core/index.js";
import * as Halogen_HTML_Elements from "../Halogen.HTML.Elements/index.js";
import * as Halogen_HTML_Events from "../Halogen.HTML.Events/index.js";
import * as Halogen_Hooks_Component from "../Halogen.Hooks.Component/index.js";
import * as Halogen_Hooks_Extra_Hooks_UseStateFn from "../Halogen.Hooks.Extra.Hooks.UseStateFn/index.js";
import * as Halogen_Hooks_Hook from "../Halogen.Hooks.Hook/index.js";
var component = /* #__PURE__ */ (function () {
var updateBar = function (bar) {
return function (setBar) {
return setBar(bar + 1 | 0);
};
};
return Halogen_Hooks_Component.component(function (v) {
return function (v1) {
return Halogen_Hooks_Hook.bind(Halogen_Hooks_Extra_Hooks_UseStateFn.usePutState(0))(function (v2) {
return Halogen_Hooks_Hook.pure(Halogen_HTML_Elements.div_([ Halogen_HTML_Elements.button([ Halogen_HTML_Events.onClick(function (v3) {
return updateBar(v2.value0)(v2.value1);
}) ])([ Halogen_HTML_Core.text("+") ]), Halogen_HTML_Elements.button([ Halogen_HTML_Events.onClick(function (v3) {
return updateBar(v2.value0)(v2.value1);
}) ])([ Halogen_HTML_Core.text("+") ]) ]));
});
};
});
})();
export {
component
};
And this is the output with the optimizer:
// @inline export updateBar arity=2
import * as $runtime from "../runtime.js";
import * as Control$dMonad$dFree from "../Control.Monad.Free/index.js";
import * as Data$dCatList from "../Data.CatList/index.js";
import * as Data$dMaybe from "../Data.Maybe/index.js";
import * as Data$dTuple from "../Data.Tuple/index.js";
import * as Halogen$dHooks from "../Halogen.Hooks/index.js";
import * as Halogen$dHooks$dComponent from "../Halogen.Hooks.Component/index.js";
import * as Halogen$dHooks$dHook from "../Halogen.Hooks.Hook/index.js";
import * as Halogen$dHooks$dHookM from "../Halogen.Hooks.HookM/index.js";
import * as Halogen$dQuery$dInput from "../Halogen.Query.Input/index.js";
import * as Halogen$dVDom$dDOM$dProp from "../Halogen.VDom.DOM.Prop/index.js";
import * as Halogen$dVDom$dTypes from "../Halogen.VDom.Types/index.js";
const component = /* #__PURE__ */ Halogen$dHooks$dComponent.memoComponent(v => v1 => false)(v => v1 => Halogen$dHooks$dHook.bind(Halogen$dHooks$dHook.functorHook.map(Data$dTuple.functorTuple.map(Halogen$dHooks$dHookM.put))(Halogen$dHooks.useState(0)))(v2 => Control$dMonad$dFree.$Free(
Control$dMonad$dFree.$FreeView(
"Return",
Halogen$dVDom$dTypes.$VDom(
"Elem",
Data$dMaybe.Nothing,
"div",
[],
[
Halogen$dVDom$dTypes.$VDom(
"Elem",
Data$dMaybe.Nothing,
"button",
[Halogen$dVDom$dDOM$dProp.$Prop("Handler", "click", ev => Data$dMaybe.$Maybe("Just", Halogen$dQuery$dInput.$Input("Action", v2._2(v2._1 + 1 | 0))))],
[Halogen$dVDom$dTypes.$VDom("Text", "+")]
),
Halogen$dVDom$dTypes.$VDom(
"Elem",
Data$dMaybe.Nothing,
"button",
[Halogen$dVDom$dDOM$dProp.$Prop("Handler", "click", ev => Data$dMaybe.$Maybe("Just", Halogen$dQuery$dInput.$Input("Action", v2._2(v2._1 + 1 | 0))))],
[Halogen$dVDom$dTypes.$VDom("Text", "+")]
)
]
)
),
Data$dCatList.CatNil
)));
export {component};
).
on my repo so I’m a happy camper!