copy stencil example from vercel/vercel (#1033)

framework-boilerplates/stencil/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

framework-boilerplates/stencil/.gitignore

@@ -0,0 +1,27 @@
+dist/
+!www/favicon.ico
+www/
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+.vercel

framework-boilerplates/stencil/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

framework-boilerplates/stencil/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "stencil",
+  "private": true,
+  "version": "0.0.1",
+  "description": "Stencil App Starter",
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^1.3.3",
+    "@stencil/router": "^1.0.1"
+  },
+  "license": "MIT"
+}

framework-boilerplates/stencil/readme.md

@@ -0,0 +1,19 @@
+# Stencil Example
+
+This directory is a brief example of a [Stencil](https://stenciljs.com/) app that can be deployed to Vercel with zero configuration
+
+## Deploy Your Own
+
+Deploy your own Stencil project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/stencil&template=stencil)
+
+_Live Example: https://stencil-template.vercel.app_
+
+### How We Created This Example
+
+To get started with Stencil deployed with Vercel, you can use the [Stencil project initializer](https://stenciljs.com/docs/getting-started#starting-a-new-project) to initialize the project:
+
+```shell
+$ npm init stencil
+```

framework-boilerplates/stencil/src/components.d.ts

@@ -0,0 +1,65 @@
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
+import { MatchResults } from '@stencil/router';
+
+export namespace Components {
+  interface AppHome {}
+  interface AppProfile {
+    match: MatchResults;
+  }
+  interface AppRoot {}
+}
+
+declare global {
+  interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {}
+  var HTMLAppHomeElement: {
+    prototype: HTMLAppHomeElement;
+    new (): HTMLAppHomeElement;
+  };
+
+  interface HTMLAppProfileElement
+    extends Components.AppProfile,
+      HTMLStencilElement {}
+  var HTMLAppProfileElement: {
+    prototype: HTMLAppProfileElement;
+    new (): HTMLAppProfileElement;
+  };
+
+  interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {}
+  var HTMLAppRootElement: {
+    prototype: HTMLAppRootElement;
+    new (): HTMLAppRootElement;
+  };
+  interface HTMLElementTagNameMap {
+    'app-home': HTMLAppHomeElement;
+    'app-profile': HTMLAppProfileElement;
+    'app-root': HTMLAppRootElement;
+  }
+}
+
+declare namespace LocalJSX {
+  interface AppHome extends JSXBase.HTMLAttributes<HTMLAppHomeElement> {}
+  interface AppProfile extends JSXBase.HTMLAttributes<HTMLAppProfileElement> {
+    match?: MatchResults;
+  }
+  interface AppRoot extends JSXBase.HTMLAttributes<HTMLAppRootElement> {}
+
+  interface IntrinsicElements {
+    'app-home': AppHome;
+    'app-profile': AppProfile;
+    'app-root': AppRoot;
+  }
+}
+
+export { LocalJSX as JSX };
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+  }
+}

framework-boilerplates/stencil/src/components/app-home/app-home.css

@@ -0,0 +1,26 @@
+.app-home {
+  padding: 10px;
+}
+
+button {
+  background: #5851ff;
+  color: white;
+  margin: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 16px 20px;
+  border-radius: 2px;
+  box-shadow: 0 8px 16px rgba(0,0,0,.1), 0 3px 6px rgba(0,0,0,.08);
+  outline: 0;
+  letter-spacing: .04em;
+  transition: all .15s ease;
+  cursor: pointer;
+}
+
+button:hover {
+  box-shadow: 0 3px 6px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.1);
+  transform: translateY(1px);
+}
+

framework-boilerplates/stencil/src/components/app-home/app-home.e2e.ts

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-home', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-home></app-home>');
+
+    const element = await page.find('app-home');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('contains a "Profile Page" button', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-home></app-home>');
+
+    const element = await page.find('app-home >>> button');
+    expect(element.textContent).toEqual('Profile page');
+  });
+});

framework-boilerplates/stencil/src/components/app-home/app-home.spec.ts

@@ -0,0 +1,7 @@
+import { AppHome } from './app-home';
+
+describe('app', () => {
+  it('builds', () => {
+    expect(new AppHome()).toBeTruthy();
+  });
+});

framework-boilerplates/stencil/src/components/app-home/app-home.tsx

@@ -0,0 +1,28 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'app-home',
+  styleUrl: 'app-home.css',
+  shadow: true
+})
+export class AppHome {
+
+  render() {
+    return (
+      <div class='app-home'>
+        <p>
+          Welcome to the Stencil App Starter.
+          You can use this starter to build entire apps all with
+          web components using Stencil!
+          Check out our docs on <a href='https://stenciljs.com'>stenciljs.com</a> to get started.
+        </p>
+
+        <stencil-route-link url='/profile/stencil'>
+          <button>
+            Profile page
+          </button>
+        </stencil-route-link>
+      </div>
+    );
+  }
+}

framework-boilerplates/stencil/src/components/app-profile/app-profile.css

@@ -0,0 +1,3 @@
+.app-profile {
+  padding: 10px;
+}

framework-boilerplates/stencil/src/components/app-profile/app-profile.e2e.ts

@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-profile', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-profile></app-profile>');
+
+    const element = await page.find('app-profile');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('displays the specified name', async () => {
+    const page = await newE2EPage({ url: '/profile/joseph' });
+
+    const profileElement = await page.find('app-root >>> app-profile');
+    const element = profileElement.shadowRoot.querySelector('div');
+    expect(element.textContent).toContain('Hello! My name is Joseph.');
+  });
+
+  // it('includes a div with the class "app-profile"', async () => {
+  //   const page = await newE2EPage({ url: '/profile/joseph' });
+
+  // I would like to use a selector like this above, but it does not seem to work
+  //   const element = await page.find('app-root >>> app-profile >>> div');
+  //   expect(element).toHaveClass('app-profile');
+  // });
+});

framework-boilerplates/stencil/src/components/app-profile/app-profile.spec.ts

@@ -0,0 +1,34 @@
+import { AppProfile } from './app-profile';
+
+describe('app-profile', () => {
+  it('builds', () => {
+    expect(new AppProfile()).toBeTruthy();
+  });
+
+  describe('normalization', () => {
+    it('returns a blank string if the name is undefined', () => {
+      const component = new AppProfile();
+      expect(component.normalize(undefined)).toEqual('');
+    });
+
+    it('returns a blank string if the name is null', () => {
+      const component = new AppProfile();
+      expect(component.normalize(null)).toEqual('');
+    });
+
+    it('capitalizes the first letter', () => {
+      const component = new AppProfile();
+      expect(component.normalize('quincy')).toEqual('Quincy');
+    });
+
+    it('lower-cases the following letters', () => {
+      const component = new AppProfile();
+      expect(component.normalize('JOSEPH')).toEqual('Joseph');
+    });
+
+    it('handles single letter names', () => {
+      const component = new AppProfile();
+      expect(component.normalize('q')).toEqual('Q');
+    });
+  });
+});

framework-boilerplates/stencil/src/components/app-profile/app-profile.tsx

@@ -0,0 +1,31 @@
+import { Component, Prop, h } from '@stencil/core';
+import { MatchResults } from '@stencil/router';
+
+@Component({
+  tag: 'app-profile',
+  styleUrl: 'app-profile.css',
+  shadow: true
+})
+export class AppProfile {
+  @Prop() match: MatchResults;
+
+  normalize(name: string): string {
+    if (name) {
+      return name.slice(0, 1).toUpperCase() + name.slice(1).toLowerCase();
+    }
+    return '';
+  }
+
+  render() {
+    if (this.match && this.match.params.name) {
+      return (
+        <div class="app-profile">
+          <p>
+            Hello! My name is {this.normalize(this.match.params.name)}. My name was passed in
+            through a route param!
+          </p>
+        </div>
+      );
+    }
+  }
+}

framework-boilerplates/stencil/src/components/app-root/app-root.css

@@ -0,0 +1,15 @@
+header {
+  background: #5851ff;
+  color: white;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+
+h1 {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: #fff;
+  padding: 0 12px;
+}

framework-boilerplates/stencil/src/components/app-root/app-root.e2e.ts

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-root', () => {
+  it('renders', async () => {
+    const page = await newE2EPage({ url: '/' });
+
+    const element = await page.find('app-root');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders the title', async () => {
+    const page = await newE2EPage({ url: '/' });
+
+    const element = await page.find('app-root >>> h1');
+    expect(element.textContent).toEqual('Stencil App Starter');
+  });
+});

framework-boilerplates/stencil/src/components/app-root/app-root.spec.ts

@@ -0,0 +1,7 @@
+import { AppRoot } from './app-root';
+
+describe('app-root', () => {
+  it('builds', () => {
+    expect(new AppRoot()).toBeTruthy();
+  });
+});