Multiline decorators fix + debugPackaging option

@RWSView now operates on multiline decorator usage style

@RWSView('calendar2', { 
  fastElementOptions: {mode: 'open'} 
})
class Calendar2 extends RWSViewComponent {
  connectedCallback () {
  (...)

debugPackaging: true in @RWSView

Important

With this decorator option RWS builder will create component.debug.ts file next to the component class file - it is a preview of what code webpack RWS TS loader creates, before transpiling it into JS

@RWSView('calendar2', { 
  debugPackaging: true
})
class Calendar2 extends RWSViewComponent {
  connectedCallback () {
  (...)

the created file:

import * as T from '@microsoft/fast-element';

import './template.html';            
let rwsTemplate:any = null;

async function handleError(error: Error | any) {      
  const errorMessage = `RWS HTML Error:
${error.stack}`;
  console.error('RWS HTML error', errorMessage);      
  return T.html`<div class="rws-error"><h1>RWS HTML template error</h1>${errorMessage}</div>`;
}

try {        
  //@ts-ignore
  rwsTemplate = 
T.html`
    <section>  <div class="box calendar">    <div class="calendar__header">      <div class="box__title flex">        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">          <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm80-80h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm200-190q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z"/>        </svg>        Assignments      </div>      <div class="calendar__header--link">        View Calendar      </div>    </div>    <ul class="calendar__list due">      ${T.repeat(x => x.due_dates, T.html`        <li class="due__margin">          <div class="due__header">            <div class="due__thin">              <span class="due__bold">${x => x.due}</span>              (${x => x.assignments.length})            </div>            <div class="due__header--flex">              <div class="due__header--optional">                Submitted              </div>              <div class="due__header--optional">                Avg Score              </div>            </div>        </div>        <ul class="calendar__list">          ${T.repeat(x => x.assignments, T.html`            <li class="due__assignment assignment">              <div class="assignment__date">                <span class="font--bold">                  ${x => x.due_date}                </span>                ${x => x.due_time}              </div>              <div class="assignment__flex--col">                <div class="assignment__flex">                  <div class="assignment__title">                    ${x => x.title}                  </div>                  <div class="due__header--flex">                    <div class="assignment__all">                      ${x => x.submitted} / ${x => x.total}                    </div>                    <div class="assignment__score">                      ${x => x.avg_score}%                    </div>                  </div>                </div>                <a class="assignment__quiz" href="${x => x.link}">                  ${x => x.quiz}                </a>              </div>            </li>          `)}        </ul>      </li>`)}    </ul>  </div>  </section>`;
} catch (error: Error | any) {
  rwsTemplate = handleError(error);
}
                
import styles from './styles/layout.scss';
const mode = "open";

import { observable, RWSViewComponent, RWSView } from "@rws-framework/client";

type TaskType = {
  [key: string]: any
};

type CallbackType = (data: { data: TaskType[]; }) => void;

@RWSView('calendar2', null, { template: rwsTemplate, styles, options: {mode} })
class Calendar2 extends RWSViewComponent  {