fix: add optionalPrams properties in JSON data

[huang-julien]

fix #58

Hey 👋 this PR move optional params into an optionalParam array. It also adds default values to code.

This should allow integrations to avoid adding default values that can be handled by tpc or google scripts.

[huang-julien]

cc @flashdesignory @housseindjirdeh @kara

[huang-julien]

This PR does not introduce any breaking change. But in a future major version, optional params should be removed from param

[harlan-zw]

Can we please consider moving away from json, this template is getting crazy.

[flashdesignory]

I'm still struggling with the conditional in the code block, especially since the optional param is wrapped in strings, which would result in 'undefined'.

Do you all think, we could give optional params a default value? Maybe something like this?

"code": "window['{{l}}']=window['{{l}}']||[];window['{{l}}'].push({'js':new Date()});window['{{l}}'].push({'config':'{{id}}'})",
"params": ["id"],
"optionalParams": [{"l": "dataLayer"}],

The code block has to get transformed somewhere, correct?
our internal formatCode function could look like this (loosely typed):

export function formatCode(code: string, args?: Inputs, optionalParams?: any[]) {
  return code.replace(/{{(.*?)}}/g, (match) => {
    const key = match.split(/{{|}}/).filter(Boolean)[0];
    const value = args?.[key] ?? optionalParams?.find(entry => entry[key])?.[key];
    return value;
  });
}

[huang-julien]

yeah indeed, let's stringify the input at code replacement time then. This way, integrations relying on runtime code won't break

[huang-julien]

#59 (comment)

wouldn't that be a breaking change if some users are using formatCode since this is exported by the package ?

[housseindjirdeh]

Can we please consider moving away from json, this template is getting crazy.

I think this warrants a larger discussion but I'm beginning to agree. I'll start a Discord thread about this and maybe we can figure out a cleaner way to do all of this.

[flashdesignory]

couple additions needed in the index.ts file (filter for // add this lines)

export function formatData(data: Data, args: Inputs): Output {
  const allScriptParams = data.scripts?.reduce(
    (acc, script) => [
        ...acc,
        ...(Array.isArray(script.params) ? script.params : []),
        ...(script.optionalParams ? Object.keys(script.optionalParams) : []) // add this
      ],
    [] as string[],
  );


  // First, find all input arguments that map to parameters passed to script URLs
  const scriptUrlParamInputs = filterArgs(args, allScriptParams);

  // Second, find all input arguments that map to parameters passed to the HTML src attribute
  const htmlUrlParamInputs = filterArgs(
    args,
    data.html?.attributes.src?.params,
  );

  // Third, find the input argument that maps to the slug parameter passed to the HTML src attribute if present
  const htmlSlugParamInput = filterArgs(args, [
    data.html?.attributes.src?.slugParam!,
  ]);

  // Lastly, all remaining arguments are forwarded as separate HTML attributes
  const htmlAttrInputs = filterArgs(
    args,
    [
      ...Object.keys(scriptUrlParamInputs),
      ...Object.keys(htmlUrlParamInputs),
      ...Object.keys(htmlSlugParamInput),
    ],
    true,
  );

  return {
    ...data,
    // Pass any custom attributes to HTML content
    html: data.html
      ? createHtml(
          data.html.element,
          data.html.attributes,
          htmlAttrInputs,
          htmlUrlParamInputs,
          htmlSlugParamInput,
        )
      : undefined,
    // Pass any required query params with user values for relevant scripts
    scripts: data.scripts
      ? data.scripts.map((script) => {
          return isExternalScript(script)
            ? {
                ...script,
                url: formatUrl(script.url, allScriptParams, scriptUrlParamInputs, undefined, script.optionalParams), // add this
              }
            : {
                ...script,
                code: formatCode(script.code, scriptUrlParamInputs, script.optionalParams), // add this
              };
        })
      : undefined,
  };
}

[flashdesignory]

🚀