Fix frameworks using constant context value

demo/advanced/props/index.htm

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="../../common/index.css" />
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/props/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/props/login.js

@@ -1,25 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href,
-
-    // The properties they can (or must) pass down to my component
-
-    props: {
-
-        prefilledEmail: {
-            type: 'string',
-            required: false
-        },
-
-        onLogin: {
-            type: 'function'
-        }
-    }
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/advanced/react-end-to-end/index.htm

@@ -9,6 +9,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 
@@ -17,7 +18,7 @@
 
     <script type="text/babel">
 
-        let LoginZoidReactComponent = LoginZoidComponent.driver('react', {
+        let LoginZoidReactComponent = MyLoginZoidComponent.driver('react', {
             React: window.React,
             ReactDOM: window.ReactDOM
         });

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

@@ -8,6 +8,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

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

@@ -1,11 +1,2 @@
 
-window.LoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/advanced/remote-popup/index.htm

@@ -7,6 +7,7 @@
     <script src="../../../dist/zoid.js"></script>
 
     <script src="./login-button.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/remote-popup/login-button.htm

@@ -9,6 +9,7 @@
     <script src="../../../dist/zoid.js"></script>
 
     <script src="./login-button.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/remote-popup/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/remote-popup/login.js

@@ -1,11 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/advanced/remote/index.htm

@@ -7,6 +7,7 @@
     <script src="../../../dist/zoid.js"></script>
 
     <script src="./login-button.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/remote/login-button.htm

@@ -9,6 +9,7 @@
     <script src="../../../dist/zoid.js"></script>
 
     <script src="./login-button.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/remote/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/advanced/remote/login.js

@@ -1,11 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/basic/iframe/index.htm

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="../../common/index.css" />
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/basic/iframe/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/basic/iframe/login.js

@@ -1,15 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-    dimensions: {
-        width: '300px',
-        height: '150px',
-    },
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/basic/popup/index.htm

@@ -6,6 +6,7 @@
 
     <script src="https://unpkg.com/[email protected]/dist/jsx-pragmatic.js"></script>
     <script src="../../../dist/zoid.js"></script>
+    <script src="./../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/basic/popup/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.js"></script>
+    <script src="./../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/basic/popup/login.js

@@ -1,21 +1,8 @@
 
 window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href,
-
-    dimensions: {
-        width:  '300px',
-        height: '150px'
-    },
+    ...MyLoginZoidComponentDef,
 
     // The background overlay
-
     containerTemplate: ({ uid, tag, context, focus, close, doc }) => {
 
         function closeComponent(event) {

demo/common/LoginZoidComponentDef.js

@@ -0,0 +1,16 @@
+const MyLoginZoidComponentDef = {
+  // The html tag used to render my component
+  tag: 'my-login-component',
+  // The url that will be loaded in the iframe or popup, when someone includes my component on their page
+  url: new URL('login.htm', window.location.href).href,
+  props: {
+    prefilledEmail: {
+      type: 'string',
+      required: false
+    },
+    onLogin: {
+      type: 'function'
+    }
+  },
+  dimensions: { width: '300px', height: '150px' }
+};

demo/frameworks/angular/index.htm

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

demo/frameworks/angular/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/angular/login.js

@@ -1,11 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/frameworks/angular2/index.htm

@@ -12,6 +12,7 @@
     <script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
     <script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/angular2/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/angular2/login.js

@@ -1,11 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/frameworks/angular2_TypeScript/config.js

@@ -12,12 +12,12 @@ System.config({
     map: {
 
         'app': './',
-        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-        'rxjs': 'npm:rxjs',
+        '@angular/core': 'npm:@angular/core@2/bundles/core.umd.js',
+        '@angular/common': 'npm:@angular/common@2/bundles/common.umd.js',
+        '@angular/compiler': 'npm:@angular/compiler@2/bundles/compiler.umd.js',
+        '@angular/platform-browser': 'npm:@angular/platform-browser@2/bundles/platform-browser.umd.js',
+        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2/bundles/platform-browser-dynamic.umd.js',
+        'rxjs': 'npm:rxjs@5.0.0',
         'typescript': 'npm:[email protected]/lib/typescript.js'
     },
   // packages defines our app package

demo/frameworks/angular2_TypeScript/index.htm

@@ -12,8 +12,9 @@
     <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
     <script src="https://unpkg.com/[email protected]/Reflect.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
-    <script src="config.js"></script>
+    <script src="./config.js"></script>
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
     <script>
     System.import('app')

demo/frameworks/angular2_TypeScript/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/angular2_TypeScript/login.js

@@ -1,24 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href,
-
-    props: {
-
-        prefilledEmail: {
-            type: 'string',
-            required: false
-        },
-
-        onLogin: {
-            type: 'function',
-            required: true
-        }
-    }
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);

demo/frameworks/react/index.htm

@@ -9,6 +9,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/react/login.htm

@@ -7,6 +7,7 @@
     <!-- Pull in zoid and the login component we defined -->
 
     <script src="../../../dist/zoid.frameworks.js"></script>
+    <script src="../../common/LoginZoidComponentDef.js"></script>
     <script src="./login.js"></script>
 </head>
 

demo/frameworks/react/login.js

@@ -1,11 +1,2 @@
 
-window.MyLoginZoidComponent = zoid.create({
-
-    // The html tag used to render my component
-
-    tag: 'my-login-component',
-
-    // The url that will be loaded in the iframe or popup, when someone includes my component on their page
-
-    url: new URL('login.htm', window.location.href).href
-});
+window.MyLoginZoidComponent = zoid.create(MyLoginZoidComponentDef);