From 4be051998ba8eae97f14b55da4e7aff07139cc6f Mon Sep 17 00:00:00 2001
From: tpluscode <tpluscode@users.noreply.github.com>
Date: Thu, 2 Nov 2017 21:18:00 +0100
Subject: [PATCH] remove bower and update readme

---
 LICENSE     |   2 +-
 README.md   | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 augeas.html |   1 -
 bower.json  |   8 ----
 index.html  |  27 -------------
 5 files changed, 108 insertions(+), 38 deletions(-)
 delete mode 100644 augeas.html
 delete mode 100644 bower.json
 delete mode 100644 index.html

diff --git a/LICENSE b/LICENSE
index 0984422..6daafe2 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 wikibus
+Copyright (c) 2016-2017 Tomasz Pluskiewicz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index d74ab50..97c795b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,107 @@
-# augeas
\ No newline at end of file
+# lit-any
+
+Building late-bound User Interface with `lit-html` without actually creating (too many) custom elements
+
+## Quick guide
+
+### 1. Install
+
+``` bash
+yarn add lit-any
+```
+
+### 2. Set up how to render your content
+
+You want to display an object which represents a person but the avatar comes in two flavors. Of course,
+it's possible to keep abusing `if` statements or drop in a `<template is="dom-if">` (old syntax, I know).
+
+With `lit-any` you can deconstruct your HTML by defining partial templates which will be rendered when
+they are really needed.
+
+```javascript
+import { ViewTemplates } from 'lit-any';
+import { html } from 'lit-html';
+
+ViewTemplates.when
+    .value(isPerson)
+    .renders((renderFunc, person) => html`
+        <person-element name="${person.name}">
+            <span slot="avatar">
+                ${renderFunc(person.avatar, 'person-element-avatar')}
+            </span>
+        </person-element>
+    `);
+
+ViewTemplates.when
+    .scope('person-element-avatar')
+    .value(v => v.url)
+    .renders((_, image) => html`
+        <img src="${image.url}" alt="avatar" />
+    `);
+
+ViewTemplates.when
+    .scope('person-element-avatar')
+    .value(v => v.large)
+    .renders((_, image) => html`
+        <a href="${image.url}">
+            <img src="${image.large}" alt="avatar" />
+        </a>        
+    `);
+
+function isPerson(value) {
+    return value.type === 'Person';
+}
+```
+
+This will set up the rendering so that `<person-element>` is displayed for a person but the avatar will
+be rendered based on the presence of the `large` property. 
+
+### 3a. Render anywhere
+
+To do actual rendering you don't really need a dedicated custom element. Any container will be fine
+
+```html
+<div id="personCoontainer"></div>
+```
+
+```javascript
+import { render } from 'lit-any';
+
+const person = {
+    type: 'Person',
+    image: {
+        url: 'https://s.gravatar.com/avatar/1497654c2d1af3cef4987234d1aced57?s=80',
+        large: 'https://s.gravatar.com/avatar/1497654c2d1af3cef4987234d1aced57?s=800'
+    }
+};
+
+const personContainer = document.querySelector('#personContainer');
+
+render({ value: person }, personContainer);
+```
+
+### 3b. Render element
+
+Alternatively you can use the `lit-view` instead of rendering directly to any node.
+
+```html
+<lit-view id="personCoontainer"></lit-view>
+```
+
+```javascript
+const person = {
+    type: 'Person',
+    image: {
+        url: 'https://s.gravatar.com/avatar/1497654c2d1af3cef4987234d1aced57?s=80',
+        large: 'https://s.gravatar.com/avatar/1497654c2d1af3cef4987234d1aced57?s=800'
+    }
+};
+
+const personContainer = document.querySelector('#personContainer');
+
+personContainer.value = person;
+```
+
+## To Do
+
+1. `lit-form` element to build forms with individual input controls
diff --git a/augeas.html b/augeas.html
deleted file mode 100644
index 209a212..0000000
--- a/augeas.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="dist/augeas.browser.js"></script>
diff --git a/bower.json b/bower.json
deleted file mode 100644
index a9ca05d..0000000
--- a/bower.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "augeas",
-  "private": true,
-  "devDependencies": {
-    "web-component-tester": "^6.3.0",
-    "webcomponentsjs": "^1.0.10"
-  }
-}
diff --git a/index.html b/index.html
deleted file mode 100644
index d44b067..0000000
--- a/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-<head>
-
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../iron-component-page/iron-component-page.html">
-    <link rel="import" href="augeas.html">
-
-</head>
-<body>
-
-<iron-component-page></iron-component-page>
-
-</body>
-</html>
\ No newline at end of file