BLD: Release 1.18.0

README.md

@@ -1,10 +1,16 @@
 # UIFactory
 
-UIFactory is a small easy-to-learn HTML web component library.
+UIFactory is a small, easy library that creates web components.
 
-- **It's small**. <4 KB minified, gzipped.
-- **There's nothing new to learn**. No shadow DOM. No virtual DOM. Just regular HTML, CSS and JS.
-- **It's open-source**. [See GitHub](https://github.com/gramener/uifactory).
+[Angular](https://angularjs.org/), [React](https://reactjs.org/), [Vue](https://vuejs.org/) and similar frameworks focus on building web applications.
+
+**UIFactory builds re-usable web components**. These can be used in Angular, React, Vue, or even plain HTML.
+
+- **It's small**. <4 KB compressed
+- **It's compliant** with the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) standard. Works on all modern browsers
+- **It's easy to learn**. Write any HTML, CSS and JS and wrap it in a `<template>` componentize it.
+
+It's [MIT licensed](LICENSE).
 
 ## Tutorial
 
@@ -516,6 +522,10 @@ Notes:
 - You can add a listener to multiple events, like `<script onprerender onrender>`
 - You can add multiple listeners to an event, e.g. by repeating `<script onrender>...</script>`
 - You can add listeners using `this.addEventListener('render', ...)` too
+- You can use these variables in `<script onrender>`, etc:
+  - [`this` is the component itself](#access-component-as-this-inside-templates)
+  - [All properties are available as variables](#access-properties-as-variables-inside-templates)
+  - `e` is the [custom event](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) fired by the component
 
 
 ## Add listeners using lifecycle events
@@ -1220,8 +1230,11 @@ npm publish
 
 ## Change log
 
-- 0.0.17: Remove lodash dependency
-- 0.0.16:
+- 1.18.0 (19 Sep 2021):
+  - Major API rewrite. See [migration to v1](docs/migration-v1.md)
+  - [Lifecycle events](#use-lifecycle-events-to-render-components-using-javascript)
+- 0.0.17 (18 Sep 2021): Remove lodash dependency
+- 0.0.16 (1 Sep 2021):
   - `<style scoped>` applies style only to component
   - `el.property = value` re-renders `el`
   - `el.update({'attr:type': ...})` supported

docs/migration-v1.md

@@ -0,0 +1,41 @@
+# Migration to UIFactory v1.0
+
+To migrate your component from UIFactory v0.x, make these changes in your component (where applicable):
+
+1. Replace `<template component="...">` with `<template $name="...">`
+2. Replace `<template @render:js="...">` with `<template $render:js="...">`
+3. Replace `this` with `this.$contents`
+4. Replace `$target` with `this`
+5. Replace `this.data` with `this.$data`
+6. Rewrite any `<style scoped>` styles without the scoped attribute -- by prefixing all selectors with `component-name`
+7. Rewrite properties specified as `<script type="application/json">` as attributes.
+   For example:
+   ```html
+   <template component="...">
+     <script type="application/json">
+       { "properties": [ { "name": "list", "type": "array", "value": [] } ] }
+     </script>
+   </template>
+   ```
+   should be written as:
+   ```html
+   <template $name="..." list:array="[]">
+   </template>
+   ```
+8. Rewrite the `properties` in `uifactory.register({properties})` as a dict, not list.
+   For example:
+   ```js
+   uifactory.register({
+     properties: [
+       { "name": "list", "type": "array", "value": [] }
+     ]
+   })
+   ```
+   should be written as:
+   ```js
+   uifactory.register({
+     properties: {
+       "list": { "type": "array", "value": [] }
+     }
+   })
+   ```

docs/quickstart/README.md

@@ -19,7 +19,7 @@ We'll build a simple dashboard showing KPI cards that looks like this:
 Add these 2 lines to the HTML. This links directly to UIFactory from CDNJS, and you don't need to install anything.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/uifactory@0.0.17/dist/uifactory.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/uifactory@1.18.0/dist/uifactory.min.js"></script>
 ```
 
 [See on CodePen](https://codepen.io/sanand0/pen/QWgaXmg?editors=1000)
@@ -312,7 +312,7 @@ convention. This component is saved at [`kpi-dashboard.html`](kpi-dashboard.html
 To use it in your application, add:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/uifactory@0.0.17/dist/uifactory.min.js" import="kpi-dashboard.html"></script>
+<script src="https://cdn.jsdelivr.net/npm/uifactory@1.18.0/dist/uifactory.min.js" import="kpi-dashboard.html"></script>
 ```
 
 Note the `import="kpi-dashboard.html"` in the 2nd line. That makes `<kpi-dashboard>` available to

docs/svg-chart.md

@@ -18,7 +18,7 @@ This is useful when creating:
 Add this code anywhere in your HTML page:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/uifactory@0.0.17/dist/uifactory.min.js" import="@svg-chart"></script>
+<script src="https://cdn.jsdelivr.net/npm/uifactory@1.18.0/dist/uifactory.min.js" import="@svg-chart"></script>
 
 <svg-chart src:urltext="https://cdn.glitch.com/00ca098e-1db3-4b35-aa48-6155f65df538%2Fphone.svg?v=1623937023597"
      data:js="{ phone: 'iPhone', hours: 2.3 }"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifactory",
-  "version": "0.0.17",
+  "version": "1.18.0",
   "description": "Simple HTML components",
   "main": "dist/uifactory.min.js",
   "jsdelivr": "dist/uifactory.min.js",