Merge pull request #14 from canjs/can6

Updates for CanJS6

examples/basics/app.stache

@@ -1 +1 @@
-{{message}}
+{{ this.message }}

examples/import/app.js

@@ -1,13 +1,13 @@
-var renderer = require('./app.stache');
-var partial = require('./partial.stache');
-var stache = require('can-stache');
+import renderer from './app.stache';
+import partial from './partial.stache';
+import {stache} from 'can';
 
 stache.registerPartial( "partial.stache", partial );
 
 document.addEventListener("DOMContentLoaded", function() {
-    var frag = renderer({
+	var frag = renderer({
 		message: 'Hello loaders',
 		inlineMessage: 'Hello from inline partial'
-    })
-    document.body.appendChild(frag);
+	});
+	document.body.appendChild(frag);
 });

examples/import/app.stache

@@ -1,11 +1,11 @@
 <div>
-	{{message}}
+	{{this.message}}
 </div>
 
 <can-dynamic-import from="./imported" />
 
 {{<inlinePartial}}
-    <div>{{inlineMessage}}</div>
+    <div>{{this.inlineMessage}}</div>
 {{/inlinePartial}}
 
 {{> partial.stache}}

examples/import/imported.js

@@ -1,13 +1,19 @@
-var Component = require('can-component');
-var tpl = require('./tpl.stache');
+import {StacheElement} from 'can';
+import tpl from './tpl.stache';
 
-Component.extend({
-	tag: 'x-comp',
-	view: tpl,
-	ViewModel: {
-		message: {
-			type:'string',
-			default: 'Hello Imported'
-		}
+export default class XComp extends StacheElement {
+	static get view() {
+		return tpl;
 	}
-});
+
+	static get props() {
+		return {
+			message: {
+				type: String,
+				default: 'Hello Imported'
+			}
+		};
+	}
+}
+
+customElements.define('x-comp', XComp);

examples/import/tpl.stache

@@ -1 +1,5 @@
-{{message}}
+{{ this.message }}
+
+<p>
+	<input value:bind="this.message">
+</p>

package.json

@@ -22,18 +22,15 @@
     "mustache"
   ],
   "dependencies": {
+    "can-stache-ast": "^1.1.0",
     "loader-utils": "^1.1.0"
   },
   "devDependencies": {
-    "can-component": "^4.2.2",
-    "can-stache": "^4.0.0",
-    "can-stache-ast": "^1.0.0",
-    "can-stache-bindings": "^4.0.0",
-    "can-view-import": "^4.2.0",
+    "can": "^6.4.0",
     "qunit": "^2.6.1",
-    "steal": "^1.12.4",
-    "steal-qunit": "^1.0.2",
-    "testee": "^0.8.1",
+    "steal": "^2.0.0",
+    "steal-qunit": "^2.0.0",
+    "testee": "^0.9",
     "webpack": "^4.15.1",
     "webpack-cli": "^3.0.8"
   },
@@ -43,7 +40,7 @@
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/macku/can-stache-loader/issues"
+    "url": "https://github.com/canjs/can-stache-loader/issues"
   },
-  "homepage": "https://github.com/macku/can-stache-loader#readme"
+  "homepage": "https://github.com/canjs/can-stache-loader#readme"
 }

tests/apps/app.js

@@ -2,41 +2,60 @@ var renderer = require('./app.stache');
 var importsRenderer = require('./imports.stache');
 var dynamicImportsRenderer = require('./dynamic-imports.stache');
 var partialsRenderer = require('./partials.stache');
-var Component = require('can-component');
-var stache = require('can-stache');
+var {stache, StacheElement} = require('can');
 var aPartial = require('./partials/partial.stache');
 
 // basic test
-Component.extend({
-	tag: 'my-app',
-	view: renderer,
-	ViewModel: {
-		message: {
-			default: function() {
-				return 'Greetings from stache loader'
+class MyApp extends StacheElement {
+
+	static get view() {
+		return renderer
+	}
+
+	static get props() {
+		return {
+			message: { 
+				type: String, 
+				default: 'Greetings from stache loader'
 			}
-		}
+		};
 	}
-});
+}
+
+customElements.define('my-app', MyApp);
 
 // import test
-Component.extend({
-	tag: "imports-app",
-	view: importsRenderer
-});
+class Imports extends StacheElement{
+	static get view() { return importsRenderer; }
+};
+
+customElements.define('imports-app', Imports);
 
 // dynamic import test
-Component.extend({
-	tag: "dynamic-imports-app",
-	view: dynamicImportsRenderer
-});
+class DynamicImports extends StacheElement {
+	static get view() {
+		return dynamicImportsRenderer;
+	}
+};
 
-// partial test
+customElements.define('dynamic-imports-app', DynamicImports);
 
+// partial test
 stache.registerPartial('aPartial.stache', aPartial);
 
-Component.extend({
-	tag: "for-partials",
-	view: partialsRenderer
-})
+class Partials extends StacheElement {
+	static get view() { return partialsRenderer; }
+};
+
+customElements.define('for-partials', Partials);
+
+class Bindings extends StacheElement {
+	static get view() {
+
+		return `
+			<my-app message:raw="Foo"></my-app>
+		`;
+	}
+}
 
+customElements.define('bindings-app', Bindings);

tests/apps/app.stache

@@ -1 +1 @@
-<div id="msg">{{message}}</div>
+<div id="msg">{{this.message}}</div>

tests/apps/basics.html

@@ -8,12 +8,12 @@
 	<script type="text/javascript" src="bundle.js"></script>
 	<script type="text/javascript">
 		(function(){
-			var QUnit = window.parent.QUnit;
+			var assert = window.parent.assert;
 			var removeMyself = window.parent.removeMyself;
 			var msg = document.querySelector("#msg");
-			if(QUnit) {
-				QUnit.ok(!!msg, "It rendered");
-				QUnit.equal(msg.innerHTML, 'Greetings from stache loader');
+			if(assert) {
+				assert.ok(!!msg, "It rendered");
+				assert.equal(msg.innerHTML, 'Greetings from stache loader', "Correct");
 				removeMyself();
 			} else {
 				console.log("Got element", msg);

tests/apps/bindings.html

@@ -4,16 +4,16 @@
 	<title></title>
 </head>
 <body>
-	<my-app message:raw="Foo"></my-app>
+	<bindings-app></bindings-app>
 	<script type="text/javascript" src="bundle.js"></script>
 	<script type="text/javascript">
 		(function(){
-			var QUnit = window.parent.QUnit;
+			var assert = window.parent.assert;
 			var removeMyself = window.parent.removeMyself;
 			var msg = document.querySelector("#msg");
-			if(QUnit) {
-				QUnit.ok(!!msg, "It rendered");
-				QUnit.equal(msg.innerHTML, 'Foo');
+			if(assert) {
+				assert.ok(!!msg, "It rendered");
+				assert.equal(msg.innerHTML, 'Foo');
 				removeMyself();
 			} else {
 				console.log("Got element", msg);