nerdic-coder

#! /usr/bin/env node
var shell = require("shelljs");
const path = require('path');

// The path to the installation directory if this tool
var cliPath = path.join(path.dirname(__filename), '..');

// Check that a command is given
if (!process.argv[2]) {
    shell.echo('Please tell me what you want me todo!');

nerdic-coder

"main": "bin/stencil-cli.js",
"bin": {
  "stencil": "bin/stencil-cli.js"
}

nerdic-coder

import { Component, Prop, Watch } from '@stencil/core';

@Component({
  tag: 'st-container',
  shadow: true
})
export class StContainer {

  @Prop() private stIf: string;
  @Prop({ mutable: true }) private shouldRender = true;

nerdic-coder

import { TestWindow } from '@stencil/core/testing';
import { StContainer } from './st-container';

describe('st-container', () => {
  it('should build', () => {
    expect(new StContainer()).toBeTruthy();
  });

  describe('rendering', () => {
    let element;

nerdic-coder

{
  "name": "stencil-container",
  "version": "0.0.2",
  "description": "Stencil Container with if-statements and for-loops",
  "module": "dist/esm/index.js",
  "main": "dist/index.js",
  "types": "dist/types/components.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "files": [
    "dist/"

nerdic-coder

git clone https://github.com/ionic-team/stencil-component-starter stencil-container
cd my-component
git remote rm origin
npm install

nerdic-coder

import { Component, State } from '@stencil/core';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';

import { Observable, Subject } from 'rxjs';

import {
   debounceTime, distinctUntilChanged, switchMap
 } from 'rxjs/operators';

nerdic-coder

import { render } from '@stencil/core/testing';
import { HeroeSearch } from './hero-search';

describe('app-hero-search', () => {
  it('should build', () => {
    expect(new HeroeSearch()).toBeTruthy();
  });

  describe('rendering', () => {
    beforeEach(async () => {

nerdic-coder

    /* HeroSearch private styles */
    .search-result li {
      border-bottom: 1px solid gray;
      border-left: 1px solid gray;
      border-right: 1px solid gray;
      width:195px;
      height: 16px;
      padding: 5px;
      background-color: white;
      cursor: pointer;

nerdic-coder

/* GET heroes whose name contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  if (!term.trim()) {
    // if not search term, return empty hero array.
    return of([]);
  }

  return Observable.create((observer) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', CONFIG.SERVER_URL + `heroes/?q=${term}`);