Suspicious transpiled js code of linefill.new(...)

[dcaoyuan]

Test case:

//@version=5
indicator("Dynamic Pivot S/R Lines", overlay=true)

leftBars = 20
rightBars = 20
ph = ta.pivothigh(high, leftBars, rightBars)
pl = ta.pivotlow(low, leftBars, rightBars)


var line resLine = na
var line supLine = na

if not na(ph)
    resLine := line.new(bar_index[rightBars], high[rightBars], bar_index, high[rightBars], color=color.red, width=2, style=line.style_solid, extend=extend.right)

if not na(pl)
    supLine := line.new(bar_index[rightBars], low[rightBars], bar_index, low[rightBars], color=color.green, width=2, style=line.style_dashed, extend=extend.right)

var linefill srZone = na
if not na(resLine) and not na(supLine)
    srZone := linefill.new(supLine, resLine, color=color.blue)

Here's the js code after transpiled:

(async $ => {
  const __maxLoops = $.__maxLoops || 500000;
  const {high, low} = $.data;
  const {ta, color, indicator, na, line, linefill, bar_index, extend} = $.pine;
  const p0 = $.param('Dynamic Pivot S/R Lines', undefined, 'p0');
  const p1 = $.param({
    overlay: true
  }, undefined, 'p1');
  indicator(p0, p1);
  $.let.glb1_leftBars = $.init($.let.glb1_leftBars, 20);
  $.let.glb1_rightBars = $.init($.let.glb1_rightBars, 20);
  const p2 = ta.param(high, undefined, 'p2');
  const p3 = ta.param($.let.glb1_leftBars, undefined, 'p3');
  const p4 = ta.param($.let.glb1_rightBars, undefined, 'p4');
  const temp_1 = ta.pivothigh(p2, p3, p4, "_ta0");
  $.let.glb1_ph = $.init($.let.glb1_ph, temp_1);
  const p5 = ta.param(low, undefined, 'p5');
  const p6 = ta.param($.let.glb1_leftBars, undefined, 'p6');
  const p7 = ta.param($.let.glb1_rightBars, undefined, 'p7');
  const temp_2 = ta.pivotlow(p5, p6, p7, "_ta1");
  $.let.glb1_pl = $.init($.let.glb1_pl, temp_2);
  $.var.glb1_resLine = $.initVar($.var.glb1_resLine, na.__value);
  $.var.glb1_supLine = $.initVar($.var.glb1_supLine, na.__value);
  const p8 = na.param($.let.glb1_ph, undefined, 'p8');
  const temp_3 = na.any(p8);
  const temp_4 = color.red();
  if (!temp_3) {
    const p9 = line.param(bar_index, $.get($.let.glb1_rightBars, 0), 'p9');
    const p10 = line.param(high, $.get($.let.glb1_rightBars, 0), 'p10');
    const p11 = line.param(bar_index, undefined, 'p11');
    const p12 = line.param(high, $.get($.let.glb1_rightBars, 0), 'p12');
    const p13 = line.param(line.style_solid, undefined, 'p13');
    const p14 = line.param(extend.right, undefined, 'p14');
    const p15 = line.param({
      color: temp_4,
      width: 2,
      style: p13,
      extend: p14
    }, undefined, 'p15');
    const temp_5 = line.new(p9, p10, p11, p12, p15);
    $.set($.var.glb1_resLine, temp_5);
  }
  const p16 = na.param($.let.glb1_pl, undefined, 'p16');
  const temp_6 = na.any(p16);
  const temp_7 = color.green();
  if (!temp_6) {
    const p17 = line.param(bar_index, $.get($.let.glb1_rightBars, 0), 'p17');
    const p18 = line.param(low, $.get($.let.glb1_rightBars, 0), 'p18');
    const p19 = line.param(bar_index, undefined, 'p19');
    const p20 = line.param(low, $.get($.let.glb1_rightBars, 0), 'p20');
    const p21 = line.param(line.style_dashed, undefined, 'p21');
    const p22 = line.param(extend.right, undefined, 'p22');
    const p23 = line.param({
      color: temp_7,
      width: 2,
      style: p21,
      extend: p22
    }, undefined, 'p23');
    const temp_8 = line.new(p17, p18, p19, p20, p23);
    $.set($.var.glb1_supLine, temp_8);
  }
  $.var.glb1_srZone = $.initVar($.var.glb1_srZone, na.__value);
  const p24 = na.param($.var.glb1_resLine, undefined, 'p24');
  const temp_9 = na.any(p24);
  const p25 = na.param($.var.glb1_supLine, undefined, 'p25');
  const temp_10 = na.any(p25);
  const temp_11 = color.blue();
  if (!temp_9 && !temp_10) {
    const p26 = linefill.param($.var.glb1_supLine, undefined, 'p26');
    const p27 = linefill.param($.var.glb1_resLine, undefined, 'p27');
    const p28 = linefill.param({
      color: temp_11
    }, undefined, 'p28');
    const temp_12 = linefill.new(p26, p27, p28);
    $.set($.var.glb1_srZone, temp_12);
  }
});

The color parameter is transplied to:

 const p28 = linefill.param({
      color: temp_11
    }, undefined, 'p28');

which returns an object: {color: '#2196F3' } instead of the correct plain value: '#2196F3'

The issue may be from the parsed AST ?

[alaa-eddine]

oh that's weird, I need to take a look at it.

I completely refactored the colors namespace in the latest version to match the other namespaces patterns, and I remember that I considered using objects to represent the colors at some point but no in this format (that approach was never pushed)

I'm wondering if it's not some logic related to that that I forgot to remove.

[alaa-eddine]

just to clarify are you obtaining something like

 const p28 = linefill.param({
      color: {color: '#2196F3' }
    }, undefined, 'p28');

or

 const p28 = linefill.param({
      color: '#2196F3' 
    }, undefined, 'p28');

if the later, this is an expected behavior because

linefill.new(supLine, resLine, color=color.blue)

need to be converted to

linefill.new(var, var, object)

the color=color.blue part is converted to a json object {color:color.blue}

[dcaoyuan]

If so, we need to deal with two different form of the options of linefill.new:

One form is:

linefill.new(supLine, resLine, color.blue)

Which will be converted to:

linefill.new(var, var,  var) // the 3rd var is '#2196F3'

Another form is:

linefill.new(supLine, resLine, color=color.blue)

Which will be converted to:

linefill.new(var, var,  object) // the object  is `{color: '#2196F3'}`

That will be inconsistent?

[alaa-eddine]

yeah I think that the problem is not with the transpiler here, it's with the arguments processing.
I did some fast refactoring to drawing functions and I just realized that I forgot to use parseArgsForPineParams() in linefill, parseArgsForPineParams normalizes the arguments into a json object regardless of the initial arguments, I'll try to push a quick fix