Adding Stencil TodoMVC

examples/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

examples/stencil/.gitignore

@@ -0,0 +1,27 @@
+dist/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+package-lock.json
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+*.iml

examples/stencil/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "todo-mvc-stencil",
+  "version": "1.0.0",
+  "description": "Todo MVC implementation using Stencil",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/stencil-comp/stencil-comp.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/core": "^1.12.2",
+    "@types/jest": "24.9.1",
+    "@types/puppeteer": "2.0.1",
+    "jest": "24.9.0",
+    "jest-cli": "24.9.0",
+    "puppeteer": "2.1.1"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "todomvc-common": "^1.0.5"
+  }
+}

examples/stencil/readme.md

@@ -0,0 +1,29 @@
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+## Stencil TodoMVC Example
+
+> Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.
+
+> _[Stencil](https://stenciljs.com/)_
+
+
+## Learning Stencil
+
+The [Stencil introduction](https://stenciljs.com/docs/introduction) is a great way to get started.
+
+Here are some links you may find helpful:
+
+* [Getting Started](https://stenciljs.com/docs/getting-started)
+* [Introduction](https://stenciljs.com/docs/introduction)
+* [Component API](https://stenciljs.com/docs/decorators)
+
+
+## Running
+
+The app is built with [Stencil init component](https://stenciljs.com/docs/getting-started) as a Stencil web component and compiled at built time. 
+
+To run the app:
+```bash
+npm install
+npm start
+```

examples/stencil/src/components.d.ts

@@ -0,0 +1,82 @@
+/* eslint-disable */
+/* 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 { TodoItemModel, TodoModel } from "./components/todo/todo-model";
+export namespace Components {
+    interface TodoApp {
+        "model": TodoModel;
+    }
+    interface TodoFooter {
+        "completedCount": number;
+        "count": number;
+        "nowShowing": string;
+    }
+    interface TodoItem {
+        "editing": boolean;
+        "todo": TodoItemModel;
+    }
+}
+declare global {
+    interface HTMLTodoAppElement extends Components.TodoApp, HTMLStencilElement {
+    }
+    var HTMLTodoAppElement: {
+        prototype: HTMLTodoAppElement;
+        new (): HTMLTodoAppElement;
+    };
+    interface HTMLTodoFooterElement extends Components.TodoFooter, HTMLStencilElement {
+    }
+    var HTMLTodoFooterElement: {
+        prototype: HTMLTodoFooterElement;
+        new (): HTMLTodoFooterElement;
+    };
+    interface HTMLTodoItemElement extends Components.TodoItem, HTMLStencilElement {
+    }
+    var HTMLTodoItemElement: {
+        prototype: HTMLTodoItemElement;
+        new (): HTMLTodoItemElement;
+    };
+    interface HTMLElementTagNameMap {
+        "todo-app": HTMLTodoAppElement;
+        "todo-footer": HTMLTodoFooterElement;
+        "todo-item": HTMLTodoItemElement;
+    }
+}
+declare namespace LocalJSX {
+    interface TodoApp {
+        "model"?: TodoModel;
+    }
+    interface TodoFooter {
+        "completedCount"?: number;
+        "count"?: number;
+        "nowShowing"?: string;
+        "onClearCompleted"?: (event: CustomEvent<void>) => void;
+    }
+    interface TodoItem {
+        "editing"?: boolean;
+        "onCancel"?: (event: CustomEvent<void>) => void;
+        "onDestroy"?: (event: CustomEvent<string>) => void;
+        "onEdit"?: (event: CustomEvent<string>) => void;
+        "onSave"?: (event: CustomEvent<{todoId: string, text: string}>) => void;
+        "onToggle"?: (event: CustomEvent<string>) => void;
+        "todo"?: TodoItemModel;
+    }
+    interface IntrinsicElements {
+        "todo-app": TodoApp;
+        "todo-footer": TodoFooter;
+        "todo-item": TodoItem;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "todo-app": LocalJSX.TodoApp & JSXBase.HTMLAttributes<HTMLTodoAppElement>;
+            "todo-footer": LocalJSX.TodoFooter & JSXBase.HTMLAttributes<HTMLTodoFooterElement>;
+            "todo-item": LocalJSX.TodoItem & JSXBase.HTMLAttributes<HTMLTodoItemElement>;
+        }
+    }
+}

examples/stencil/src/components/todo/readme.md

@@ -0,0 +1,42 @@
+# todo-app
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description | Type            | Default     |
+| --------- | --------- | ----------- | --------------- | ----------- |
+| `editing` | `editing` |             | `boolean`       | `undefined` |
+| `todo`    | --        |             | `TodoItemModel` | `undefined` |
+
+
+## Events
+
+| Event     | Description | Type                                             |
+| --------- | ----------- | ------------------------------------------------ |
+| `cancel`  |             | `CustomEvent<void>`                              |
+| `destroy` |             | `CustomEvent<string>`                            |
+| `edit`    |             | `CustomEvent<string>`                            |
+| `save`    |             | `CustomEvent<{ todoId: string; text: string; }>` |
+| `toggle`  |             | `CustomEvent<string>`                            |
+
+
+## Dependencies
+
+### Used by
+
+ - [todo-app](.)
+
+### Graph
+```mermaid
+graph TD;
+  todo-app --> todo-item
+  style todo-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

examples/stencil/src/components/todo/showing-state.ts

@@ -0,0 +1,5 @@
+export const ALL_TODOS = 'all';
+export const ACTIVE_TODOS = 'active';
+export const COMPLETED_TODOS = 'completed';
+
+export type ShowingState = 'all' | 'active' | 'completed';

examples/stencil/src/components/todo/todo-footer.css

@@ -0,0 +1,90 @@
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.footer {
+  color: #777;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+}
+
+.todo-count strong {
+  font-weight: 300;
+}
+
+.filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.filters li {
+  display: inline;
+}
+
+.filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filters li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.clear-completed:hover {
+  text-decoration: underline;
+}