Merge pull request #22 from PieLabs/feature/work-pie-pie-player-2

work with pie player 2.0.0

Author: edeustace

.gitignore

@@ -2,7 +2,7 @@
 .idea
 .vscode
 jsconfig.json
-lib
+/lib
 node_modules
 typings
 typings.json

test/integration/example-components/hello-world/lib/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tester from './tester';
+
+export default class HelloWorld extends HTMLElement {
+  createdCallback() {
+    console.log('created..');
+  }
+
+  attachedCallback() {
+    console.log('attached..');
+    this.dispatchEvent(new CustomEvent('pie.register', { bubbles: true }));
+  }
+
+  set model(m) {
+    this._model = m;
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+
+  _render() {
+    if (this._model && this._session) {
+      let el = React.createElement(Tester, { msg: this._model.value });
+      ReactDOM.render(el, this);
+    }
+  }
+}

test/integration/example-components/hello-world/lib/tester.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class Tester extends React.Component{
+  render(){
+    return <div>hello world: {this.props.msg}</div>;
+  }
+}

test/integration/example-components/vue-component/lib/component.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>I am a vue component here is my <code>msg</code>:
+	<span class="example">{{msg}}</span></div>
+</template>
+<script>
+export default {
+  props: { msg : {type: String, default: 'default' }}
+}
+</script>
+
+<style>
+	.example {
+		color: red;
+	}
+</style>

test/integration/example-components/vue-component/lib/index.js

@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import Component from './component.vue';
+
+export default class CorespringMultipleChoiceVueElement extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+  }
+
+  get model() {
+    return this._model;
+  }
+
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  set session(s) {
+    this._session = s;
+    this._rerender();
+  }
+
+  createdCallback() {
+    this._rerender();
+  }
+
+  attachedCallback() {
+    console.log('attached');
+
+    this.dispatchEvent(new CustomEvent('pie.register', { bubbles: true }));
+  }
+
+  _rerender() {
+    console.log('_rerender...');
+
+    if (this._model) {
+      new Vue({
+        el: this,
+        render: h => h(Component, { props: { msg: this._model.prompt } }),
+      });
+    }
+  }
+}

test/integration/example-questions/one/index.html

@@ -1 +1 @@
-<hello-world data-id="1"></hello-world>
+<hello-world pie-id="1"></hello-world>

test/integration/example-questions/react-and-vue-question/index.html

@@ -1,6 +1,6 @@
 <h1>This is a test of a vue component</h1>
-<vue-component data-id="1">
+<vue-component pie-id="1">
 </vue-component>
 <h1>This is a test of a react component</h1>
-<hello-world data-id="2">
+<hello-world pie-id="2">
 </hello-world>

test/integration/example-questions/vue-question/index.html

@@ -1,2 +1,2 @@
 <h1>This is a test of a vue component</h1>
-<vue-component data-id="1"></vue-component>
+<vue-component pie-id="1"></vue-component>