How to use the @mathigon/boost.$N function in @mathigon/boost

$step.model.watch((state) => {
    // TODO Reuse elements for better performance.
    triangle.removeChildren();
    $circle.removeChildren();

    for (let i = 0; i < state.n2; ++i) {
      $N('path', {}, triangle);
      $N('path', {}, $circle);
    }

    drawRings($circle, 0);
    drawRings(triangle, $slider.current / $slider.steps);
  });

constructor(shape: ShapeOptions, initial: {x: number, y: number, a?: number},
              private readonly $parent: Tessellation) {

    this.$el = $N('g', {class: 'shape'});
    this.$shape =
        $N('polygon', {points: shape.points, fill: shape.colour}, this.$el);
    const $rotate = $N('circle', {r: 8, cy: -30}, this.$el);

    this.polygon = polygonFromPoints(shape.points);
    this.setPosition(new Point(initial.x, initial.y), initial.a || 0);

    let offset: Point;
    slide(this.$shape, {
      start: p => {
        $parent.$svg.append(this.$el);  // Move element to the front.
        offset = p.subtract(this.posn);  // If you're not clicking in the center.
      },
      move: p => this.setPosition(p.subtract(offset), this.angle)
    });

    slide($rotate, {
      move: p => this.setPosition(this.posn, getAngle(p, this.posn))
    });

export function similar($step: Step) {
  const $svg = $step.$('svg.similar-circles')!;
  const $strokes = $N('g', {}, $svg);
  const burst = new Burst($N('g', {class: 'burst'}, $svg) as SVGParentView, 20);
  const $gesture = $N('x-gesture', {}, $step) as Gesture;

  $N('circle', {class: 'handle fixed', r: 10, cx: 320, cy: 180, style: 'fill: #22ab24'}, $svg);
  $N('circle', {class: 'outline', r: 60, cx: 320, cy: 180, style: 'stroke: #22ab24'}, $strokes);

  const circles = [[140, 120, 100, 0], [220, 300, 40, 1], [500, 240, 120, 2]];
  const isCompleted = [false, false, false];
  let hasShownResizeGesture = false;

  function complete(i: number, $handle: ElementView, $outline: ElementView,
                    $outlineHalo: ElementView) {
    if (isCompleted[i]) return;
    isCompleted[i] = true;

    $handle.exit('fade');
    $outline.exit('fade');
    $outlineHalo.exit('fade');
    $step.score('circle-' + i);
    $step.addHint('correct');

ready() {

    const $svg = $N('svg', {width: 740, height: 480}, this);

    const center = new Point(50, 400);
    const ball = new Point(50, 400);

    const $slingshot = $N('circle', {r: 5}, $svg) as SVGView;
    const $ball = $N('circle', {r: 10, fill: 'red'}, $svg) as SVGView;
    const $line = $N('line', {stroke: 'red'}, $svg) as SVGView;

    $slingshot.setCenter(center);
    $ball.setCenter(ball);

    slide($ball, {
      move(posn) {
        $ball.setCenter(posn);
        $line.setLine(posn, center);

      },
      end(posn) {
        const speed = Point.distance(posn, center) * 10;
        const angle = new Line(posn, center).angle;

        const ux = speed * Math.cos(angle);
        const uy = speed * Math.sin(angle);

loadBackground(src: string) {
    const $canvas = $N('canvas', {width: this.rx, height: this.ry}) as CanvasView;
    const image = new Image();

    image.onload = () => {
      $canvas.ctx.drawImage(image, 0, 0, this.rx, this.ry);
      const pixels = $canvas.ctx.getImageData(0, 0, this.rx, this.ry);
      this.imagePixels = pixels.data;
      this.$canvas.ctx.putImageData(pixels, 0, 0);
    };
    image.src = src;
  }

ready() {
    const $svg = $N('svg', {width: 160, height: 160}, this) as SVGParentView;
    this.$text = $N('span', {html: this.attr('text')}, this);
    this.burst = new Burst($svg, 20);

    this.on('attr:text', e => this.$text.text = e.newVal);
  }

[3, 5, 7, 11, 13, 17, 19, 23, 29].forEach(function (p, i) {
    $N('line', {
      x1: (p - 1) * dx, y1: y0, x2: (p - 1) * dx,
      y2: y0 - dy * (i + 1)
    }, $smallPrimes);
  });

$section.model.watch((state) => {
    $result.html = $section.getText(
        isOneOf(state.x, 1, 2, 3, 6) ? 'gcd-yes' : 'gcd-no');

    $tiles.removeChildren();

    for (let x = 0; x < 30; x += state.x) {
      for (let y = 0; y < 18; y += state.x) {
        $N('rect', {
          x: 40 + 10 * x,
          y: 40 + 10 * y,
          width: 10 * state.x,
          height: 10 * state.x,
          stroke: '#736357',
          'stroke-width': 2,
          fill: 'url(#tile)'
        }, $tiles);
      }
    }
  });
}

$step.model.watch((state) => {
    $circle.removeChildren();
    $rect.removeChildren();

    angle = 2 * Math.PI / state.n1;
    dx = r * Math.sqrt(2 - 2 * Math.cos(angle)) / 2;
    dy = r * Math.cos(angle / 2);

    for (let i = 0; i < state.n1; ++i) {
      $N('path', {path: sector(c, r, angle, i * angle)}, $rect);
      $N('path', {}, $circle);
    }

    applyTransforms();
  });