Major overhaul

.flowconfig

@@ -2,6 +2,7 @@
 .*/node_modules/babel-plugin-flow-runtime
 .*/node_modules/flow-runtime
 .*/node_modules/npm
+.*/node_modules/jsonlint
 .*/dist/module
 [include]
 [libs]

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
-   - "6"
+   - "8"
 script: npm test

README.md

@@ -50,15 +50,15 @@ Render the component on the parent page:
 
 <script src="script-where-my-login-component-is-defined.js"></script>
 <script>
-    MyLoginComponent.render({
+    MyLoginComponent({
 
         prefilledEmail: 'foo@bar.com',
 
         onLogin: function(email) {
             console.log('User logged in with email:', email);
         }
 
-    }, '#container');
+    }).render('#container');
 </script>
 ```
 

babel.config.js

@@ -0,0 +1,6 @@
+/* @flow */
+
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+    extends: 'grumbler-scripts/config/.babelrc-node'
+};

demo/advanced/props/index.htm

@@ -20,7 +20,7 @@ <h3>Log in on xyz.com</h3>
 
         // Render the component
 
-        MyLoginZoidComponent.render({
+        MyLoginZoidComponent({
 
             prefilledEmail: 'foo@bar.com',
 
@@ -29,7 +29,7 @@ <h3>Log in on xyz.com</h3>
                 document.querySelector('#result').innerText = email + ' logged in!';
             }
 
-        }, '#container');
+        }).render('#container');
 
     </script>
 

demo/advanced/props/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/advanced/props/login.js

@@ -7,7 +7,7 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm',
+    url: './login.htm',
 
     // The properties they can (or must) pass down to my component
 

demo/advanced/react-end-to-end/login.js

@@ -7,5 +7,5 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm'
+    url: './login.htm'
 });

demo/advanced/remote/index.htm

@@ -20,11 +20,11 @@ <h3>Log in on xyz.com</h3>
     <div id="loginContainer"></div>
 
     <script>
-        MyLoginButtonComponent.render({
+        MyLoginButtonComponent({
 
             loginContainer: '#loginContainer'
 
-        }, '#container');
+        }).render('#container');
     </script>
 
 </body>

demo/advanced/remote/login-button.htm

@@ -24,7 +24,7 @@
 
             // document.querySelector('#openLoginButton').style.display = 'none';
 
-            MyLoginZoidComponent.renderTo(window.parent, {
+            MyLoginZoidComponent({
 
                 prefilledEmail: 'foo@bar.com',
 
@@ -34,7 +34,8 @@
                 }
 
             }, window.xprops.loginContainer);
-        });
+
+        }).renderTo(window.parent);
 
     </script>
 

demo/advanced/remote/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/advanced/remote/login.js

@@ -7,5 +7,5 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm'
+    url: './login.htm'
 });

demo/basic/iframe/index.htm

@@ -20,7 +20,7 @@ <h3>Log in on xyz.com</h3>
 
         // Render the component
 
-        MyLoginZoidComponent.render({
+        MyLoginZoidComponent({
 
             prefilledEmail: 'foo@bar.com',
 
@@ -29,7 +29,7 @@ <h3>Log in on xyz.com</h3>
                 document.querySelector('#result').innerText = email + ' logged in!';
             }
 
-        }, '#container');
+        }).render('#container');
 
     </script>
 

demo/basic/iframe/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/basic/iframe/login.js

@@ -7,5 +7,5 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm'
+    url: './login.htm'
 });

demo/basic/lightbox/index.htm

@@ -20,7 +20,7 @@ <h3>Log in on xyz.com</h3>
 
         // Render the component
 
-        MyLoginZoidComponent.render({
+        MyLoginZoidComponent({
 
             prefilledEmail: 'foo@bar.com',
 
@@ -29,7 +29,7 @@ <h3>Log in on xyz.com</h3>
                 document.querySelector('#result').innerText = email + ' logged in!';
             }
 
-        }, '#container');
+        }).render('#container');
 
     </script>
 

demo/basic/lightbox/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/basic/popup/index.htm

@@ -28,15 +28,15 @@ <h3>Log in on xyz.com</h3>
 
             // Render the component
 
-            MyLoginZoidComponent.render({
+            MyLoginZoidComponent({
 
                 prefilledEmail: 'foo@bar.com',
 
                 onLogin: function(email) {
                     console.log('User logged in with email:', email);
                     document.querySelector('#result').innerText = email + ' logged in!';
                 }
-            });
+            }).render('body');
         });
 
     </script>

demo/basic/popup/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/basic/popup/login.js

@@ -110,8 +110,6 @@ window.MyLoginZoidComponent = zoid.create({
                     #${ id } .${ CLASS.ZOID }-close:after {
                         transform: rotate(-45deg);
                     }
-                `
-            )
-        );
+                `));
     }
 });

src/lib/fn.js → demo/common/common.js

@@ -1,9 +1,5 @@
-/* @flow */
-
-export function getCurrentScriptDir() : string {
-    // eslint-disable-next-line no-console
-    console.warn(`Do not use zoid.getCurrentScriptDir() in production -- browser support is limited`);
 
+function getCurrentScriptDir() {
     // eslint-disable-next-line compat/compat
     if (document.currentScript) {
         // eslint-disable-next-line compat/compat

demo/frameworks/angular/index.htm

@@ -6,7 +6,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
 
-    <script src="../../../dist/zoid.js"></script>
+    <script src="../../../dist/zoid.frameworks.js"></script>
     <script src="./login.js"></script>
 
     <script>

demo/frameworks/angular/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/frameworks/angular/login.js

@@ -7,5 +7,5 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm'
+    url: './login.htm'
 });

demo/frameworks/angular2/index.htm

@@ -3,7 +3,6 @@
 <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
     <link rel="stylesheet" href="../../common/index.css" />
-    <script src="https://npmcdn.com/core-js@2.4.1/client/shim.min.js"></script>
     <script src="https://npmcdn.com/zone.js@0.8.12?main=browser"></script>
     <script src="https://npmcdn.com/reflect-metadata@0.1.10"></script>
     <script src="https://npmcdn.com/rxjs@5.4.1/bundles/Rx.min.js"></script>
@@ -12,7 +11,7 @@
     <script src="https://npmcdn.com/@angular/compiler@4.2.3/bundles/compiler.umd.js"></script>
     <script src="https://npmcdn.com/@angular/platform-browser@4.2.3/bundles/platform-browser.umd.js"></script>
     <script src="https://npmcdn.com/@angular/platform-browser-dynamic@4.2.3/bundles/platform-browser-dynamic.umd.js"></script>
-    <script src="../../../dist/zoid.js"></script>
+    <script src="../../../dist/zoid.frameworks.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/angular2/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/frameworks/angular2/login.js

@@ -7,5 +7,5 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm'
+    url: './login.htm'
 });

demo/frameworks/angular2_TypeScript/index.htm

@@ -13,7 +13,7 @@
     <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
     <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
     <script src="config.js"></script>
-    <script src="../../../dist/zoid.js"></script>
+    <script src="../../../dist/zoid.frameworks.js"></script>
     <script src="./login.js"></script>
     <script>
     System.import('app')

demo/frameworks/angular2_TypeScript/login.htm

@@ -60,7 +60,7 @@
                 // Since we had a successful login, call-back the parent page to let them know which user logged in:
 
                 window.xprops.onLogin(email);
-                window.xchild.close();
+                window.xprops.close();
 
             }, 2000);
         });

demo/frameworks/angular2_TypeScript/login.js

@@ -7,7 +7,7 @@ window.MyLoginZoidComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: zoid.getCurrentScriptDir() + '/login.htm',
+    url: './login.htm',
 
     props: {