check custom elements v1 api (#26)

edeustace · web-flow · commit b170183f6709 · 2016-10-20T09:00:57.000+01:00
* tweaks for custom elements v1

* fix import

* rm babel-preset-es2015

* rm registerElements reference

* reset branches

* use develop branch by default
diff --git a/package.json b/package.json
@@ -44,7 +44,6 @@
   "dependencies": {
     "babel-core": "^6.16.0",
     "babel-loader": "^6.2.5",
-    "babel-preset-es2015": "^6.16.0",
     "babel-register": "^6.16.3",
     "commander": "^2.9.0",
     "fs-extra": "^0.30.0",
diff --git a/src/code-gen/element-bundle.js b/src/code-gen/element-bundle.js
@@ -13,16 +13,6 @@ let baseConfig = (root) => {
   return {
     module: {
       loaders: [
-        {
-          test: /\.js$/,
-          loader: resolve.sync('babel-loader', { basedir: root }),
-          query: {
-            babelrc: false,
-            presets: [
-              resolve.sync('babel-preset-es2015', { basedir: root })
-            ]
-          },
-        },
         {
           test: /\.css$/,
           loader: 'style!css'
@@ -43,19 +33,27 @@ const ENTRY_JS = 'entry.js';
 
 function writeEntryJs(root, pies) {
 
-  let registerElementSrc = (p, index) => `import comp${index} from '${p}';
-document.registerElement('${p}', comp${index});
-`;
+  let preamble = `if(!customElements){
+    throw new Error('Custom Elements arent supported');
+  }`;
+
+  let defineCustomElement = (p, index) => `
+  import comp${index} from '${p}';
+  //customElements v1 
+  customElements.define('${p}', comp${index});
+  `;
 
   let init = (p, index) => {
     if (p.hasOwnProperty('initSrc')) {
       return p.initSrc;
     } else {
-      return registerElementSrc(p, index);
+      return defineCustomElement(p, index);
     }
   };
 
-  let js = _.map(pies, init).join('\n');
+  let js = `${preamble}
+  ${_.map(pies, init).join('\n')};
+  `;
 
   return new Promise((resolve, reject) => {
     let entryPath = path.join(root, ENTRY_JS);
@@ -69,7 +67,6 @@ document.registerElement('${p}', comp${index});
   });
 }
 
-
 /**
  * @param loaders {Array[{(resolve) => Object}]}
  */
diff --git a/src/code-gen/markup-example.js b/src/code-gen/markup-example.js
@@ -1,6 +1,5 @@
 import jsesc from 'jsesc';
 import fs from 'fs-extra';
-import path from 'path';
 import { removeFiles } from '../file-helper';
 
 let mkExampleMarkup = (markup, model, controllerFile, controllerUid) => `
@@ -12,23 +11,22 @@ let mkExampleMarkup = (markup, model, controllerFile, controllerUid) => `
     <script src="pie.js" type="text/javascript"></script>
     <script src="${controllerFile}" type="text/javascript"></script>
     <script type="text/javascript">
-    
-      document.addEventListener('DOMContentLoaded', function(){
 
-        env = {mode: 'gather'};
-        model = ${jsesc(model)};
-        session = [];
+        window.pie = window.pie || {};
+        window.pie.env = {mode: 'gather'};
+        window.pie.model = ${jsesc(model)};
+        window.pie.session = [];
         
-        var player = document.querySelector('pie-player');
-
-        player.addEventListener('pie.player-ready', function(event){
-          var pieController = new pie.Controller(model, window['${controllerUid}']);
+        document.addEventListener('pie.player-ready', function(event){
+          var player = event.target;
+          var pieController = new pie.Controller(window.pie.model, window['${controllerUid}']);
           player.controller = pieController;
-          player.env = env;
-          player.session = session;
+          player.env = window.pie.env;
+          player.session = window.pie.session;
           
           var panel = document.querySelector('pie-control-panel');
-          panel.env = { mode: 'gather' };
+          panel.env = window.pie.env; 
+          
           panel.addEventListener('envChanged', function(event){
             console.log('envChanged', event.target.env);
             player.env = event.target.env;    
@@ -41,7 +39,6 @@ let mkExampleMarkup = (markup, model, controllerFile, controllerUid) => `
             }
           });
         });
-      });
     </script>
   </head>
   <body>
diff --git a/src/framework-support/frameworks/react.js b/src/framework-support/frameworks/react.js
@@ -15,18 +15,18 @@ export function support(dependencies) {
 
   return {
     npmDependencies: {
-      'babel-preset-es2015': '~6.16.0',
       'babel-preset-react': '~6.16.0'
     },
-    webpackLoaders: (resolve) => {
+    webpackLoaders: () => {
       return [
         {
           test: /.(jsx)?$/,
           loader: 'babel-loader',
+          //Don't read in .babelrc files from the dependencies
           query: {
+            babelrc: false,
             presets: [
-              resolve('babel-preset-es2015'),
-              resolve('babel-preset-react')
+              'babel-preset-react'
             ]
           }
         }
diff --git a/src/question/packer.js b/src/question/packer.js
@@ -95,11 +95,11 @@ export default class Packer {
 
 export let DEFAULT_DEPENDENCIES = (branch) => {
 
-  branch = branch || 'master';
+  branch = branch || 'develop';
 
   let branchSpecific = {
-    'pie-player': `PieLabs/pie-player#${branch}`,
     'pie-controller': `PieLabs/pie-controller#${branch}`,
+    'pie-player': `PieLabs/pie-player#${branch}`,
     'pie-control-panel': `PieLabs/pie-control-panel#${branch}`
   }
 
diff --git a/test/integration/example-components/hello-world/lib/index.js b/test/integration/example-components/hello-world/lib/index.js
@@ -3,11 +3,8 @@ import ReactDOM from 'react-dom';
 import Tester from './tester';
 
 export default class HelloWorld extends HTMLElement {
-  createdCallback() {
-    console.log('created..');
-  }
 
-  attachedCallback() {
+  connectedCallback() {
     console.log('attached..');
     this.dispatchEvent(new CustomEvent('pie.register', { bubbles: true }));
   }
diff --git a/test/integration/example-components/vue-component/demo/entry.js b/test/integration/example-components/vue-component/demo/entry.js
@@ -1,4 +1,4 @@
 import VueComponent from '../lib/index';
 
-document.registerElement('vue-component', VueComponent);
+customElements.define('vue-component', VueComponent);
 
diff --git a/test/integration/example-components/vue-component/lib/index.js b/test/integration/example-components/vue-component/lib/index.js
@@ -26,13 +26,8 @@ export default class CorespringMultipleChoiceVueElement extends HTMLElement {
     this._rerender();
   }
 
-  createdCallback() {
-    this._rerender();
-  }
-
-  attachedCallback() {
-    console.log('attached');
-
+  connectedCallback() {
+    console.log('connected');
     this.dispatchEvent(new CustomEvent('pie.register', { bubbles: true }));
   }
 
diff --git a/test/integration/question/packer-vue-test.js b/test/integration/question/packer-vue-test.js
@@ -5,7 +5,7 @@ import { expect } from 'chai';
 import { join } from 'path';
 import fs from 'fs-extra';
 import path from 'path';
-import testHelper from '../integration-test-helper';
+import { setUpTmpQuestionAndComponents } from '../integration-test-helper';
 
 describe('Packer.pack :: Vue', () => {
 
@@ -14,8 +14,8 @@ describe('Packer.pack :: Vue', () => {
   before(function (done) {
 
     this.timeout(50000);
-    let tmpPath = testHelper.setUpTmpQuestionAndComponents('packer-vue-test');
-    let questionPath = join(tmpPath, 'example-questions/vue-question');
+    let tmpPath = setUpTmpQuestionAndComponents('packer-vue-test');
+    questionPath = join(tmpPath, 'example-questions/vue-question');
 
     frameworkSupport = FrameworkSupport.bootstrap([
       path.join(__dirname, '_vue-support')

Original file line number	Diff line number	Diff line change
`@@ -15,18 +15,18 @@ export function support(dependencies) {`
`15`	`15`
`16`	`16`	`return {`
`17`	`17`	`npmDependencies: {`
`18`		`- 'babel-preset-es2015': '~6.16.0',`
`19`	`18`	`'babel-preset-react': '~6.16.0'`
`20`	`19`	`},`
`21`		`- webpackLoaders: (resolve) => {`
	`20`	`+ webpackLoaders: () => {`
`22`	`21`	`return [`
`23`	`22`	`{`
`24`	`23`	`test: /.(jsx)?$/,`
`25`	`24`	`loader: 'babel-loader',`
	`25`	`+ //Don't read in .babelrc files from the dependencies`
`26`	`26`	`query: {`
	`27`	`+ babelrc: false,`
`27`	`28`	`presets: [`
`28`		`- resolve('babel-preset-es2015'),`
`29`		`- resolve('babel-preset-react')`
	`29`	`+ 'babel-preset-react'`
`30`	`30`	`]`
`31`	`31`	`}`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`import VueComponent from '../lib/index';`
`2`	`2`
`3`		`-document.registerElement('vue-component', VueComponent);`
	`3`	`+customElements.define('vue-component', VueComponent);`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -26,13 +26,8 @@ export default class CorespringMultipleChoiceVueElement extends HTMLElement {`
`26`	`26`	`this._rerender();`
`27`	`27`	`}`
`28`	`28`
`29`		`- createdCallback() {`
`30`		`- this._rerender();`
`31`		`- }`
`32`		`-`
`33`		`- attachedCallback() {`
`34`		`- console.log('attached');`
`35`		`-`
	`29`	`+ connectedCallback() {`
	`30`	`+ console.log('connected');`
`36`	`31`	`this.dispatchEvent(new CustomEvent('pie.register', { bubbles: true }));`
`37`	`32`	`}`
`38`	`33`