Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

playing around

  • Loading branch information...
commit 04e465a9455613411d7b94361ab1f571efae2a07 1 parent 082511e
@benouat authored
View
26 .gitignore
@@ -1,25 +1,3 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# Deployed apps should consider commenting this line out:
-# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
node_modules
+npm-debug.log
+dist
View
86 gulpfile.js
@@ -0,0 +1,86 @@
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var template = require('gulp-template');
+var hsp = require('gulp-hashspace');
+var noder = require('gulp-noder');
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
+
+var rimraf = require('rimraf');
+var connect = require('connect');
+var http = require('http');
+
+var karma = require('karma').server;
+var _ = require('lodash');
+
+var hspVersion = require('hashspace/package.json').version;
+
+var PATHS = {
+ 'index': 'src/**/*.html',
+ 'dynamic': 'src/**/*.+(hsp|js)'
+}
+
+var karmaCommonConf = {
+ browsers: ['Chrome'],
+ files: [
+ 'src/**/*.+(hsp|js)',
+ 'test/**/*.spec.js'
+ ],
+ frameworks: ['mocha', 'chai', 'hsp', 'commonjs'],
+ preprocessors: {
+ 'src/**/*.hsp': ['hsp-compile', 'commonjs'],
+ 'src/**/*.js': ['hsp-transpile', 'commonjs'],
+ 'test/**/*.spec.js': ['commonjs'],
+ './node_modules/hashspace/hsp/**/*.js': ['commonjs']
+ },
+ commonjsPreprocessor: {
+ modulesRoot: './node_modules/hashspace'
+ }
+};
+
+gulp.task('default', ['package']);
+
+gulp.task('clean', function (done) {
+ rimraf('dist', done);
+});
+
+gulp.task('build-index', function(){
+ return gulp.src(PATHS.index).pipe(template({
+ hspVersion: hspVersion,
+ noderVersion: noder.version
+ })).pipe(gulp.dest('dist'));
+});
+
+gulp.task('build-dynamic', function () {
+ return gulp.src(PATHS.dynamic).pipe(hsp.process()).pipe(gulp.dest('dist'));
+});
+
+gulp.task('package', function () {
+ return gulp.src(PATHS.dynamic)
+ .pipe(hsp.process()) //compile and transpile #space files
+ .pipe(noder.package('/src'))//wrap CommonJS so they can be loaded with Noder.js
+ .pipe(concat('all.min.js')) //combine files together
+ .pipe(noder.wrap()) //entire file wrapping needed by Noder.js
+ .pipe(uglify()) //minify
+ .pipe(gulp.dest('dist')); //copy to the destination folder
+});
+
+gulp.task('play', ['clean', 'build-index', 'build-dynamic'], function () {
+
+ var wwwServerPort = 8000;
+
+ //observe files for changes
+ gulp.watch(PATHS.index, ['build-index']);
+ gulp.watch(PATHS.dynamic, ['build-dynamic']);
+
+ gutil.log('Starting WWW server at http://localhost:' + wwwServerPort);
+ http.createServer(connect().use(connect.static('./dist'))).listen(wwwServerPort);
+});
+
+gulp.task('test', function (done) {
+ karma.start(_.assign({}, karmaCommonConf, {singleRun: true}), done);
+});
+
+gulp.task('tdd', function (done) {
+ karma.start(_.assign({}, karmaCommonConf), done);
+});
View
30 package.json
@@ -0,0 +1,30 @@
+{
+ "name": "hsp-web-component",
+ "version": "0.0.1",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/benouat/hsp-web-component.git"
+ },
+ "bugs": {
+ "url": "https://github.com/benouat/hsp-web-component/issues"
+ },
+ "homepage": "https://github.com/benouat/hsp-web-component",
+ "devDependencies": {
+ "gulp": "~3.8.1",
+ "gulp-util": "~2.2.14",
+ "gulp-hashspace": "~0.0.3",
+ "gulp-noder": "~0.0.2",
+ "gulp-concat": "~2.2.0",
+ "gulp-uglify": "~0.3.1",
+ "gulp-template": "~0.1.1",
+ "connect": "~2.14.2",
+ "karma-chrome-launcher": "~0.1.2",
+ "karma-mocha": "~0.1.3",
+ "karma-commonjs": "~0.0.9",
+ "karma-hashspace": "~0.0.2",
+ "chai": "~1.9.1",
+ "karma-chai": "~0.1.0",
+ "lodash": "~2.4.1",
+ "rimraf": "~2.2.8"
+ }
+}
View
50 src/component.hsp
@@ -0,0 +1,50 @@
+function logs(scope) {
+ console.log(scope);
+ return "";
+}
+
+
+{template component(data)}
+ <p>Hello {data.firstname} {data.lastname}!</p>
+{/template}
+
+
+
+var proto = Object.create(HTMLElement.prototype);
+
+proto.data = {};
+
+proto.createdCallback = function() {
+ console.log("an instance of 'my-component' has been created");
+};
+
+proto.attachedCallback = function() {
+ console.log("'my-component' has been attached to the dom");
+
+ var attribs = this.attributes;
+ var count = attribs.length;
+ var attrib;
+
+ while (count-- > 0) {
+ attrib = attribs[count]
+ this.data[attrib.name] = attrib.value;
+ }
+
+ var shadow = this.createShadowRoot();
+ component.controllerConstructor = this;
+ component.call(component, this.data).render(shadow);
+};
+
+proto.detachedCallback = function() {
+ console.log("'my-component' has been removed from the dom");
+};
+
+proto.attributeChangedCallback = function(name, oldValue, newValue) {
+ console.log("attribute changed '" + name + "':", newValue);
+ this.data[name] = newValue;
+};
+
+
+document.registerElement('my-component', {
+ prototype: proto
+});
View
5 src/component.html
@@ -0,0 +1,5 @@
+<script type="text/javascript">
+ (function(scope) {
+ console.log("I have been loaded!");
+ })(window)
+</script>
View
17 src/hello.hsp
@@ -0,0 +1,17 @@
+var HelloCtrl = require('./hello.js');
+
+{template hello using ctrl:HelloCtrl}
+ <h1>Hello, {ctrl.firstname}!</h1>
+ <input model="{ctrl.firstname}"><button onclick="{ctrl.clear()}">Clear</button>
+ <hr>
+ <div>
+ <button onclick="{ctrl.toggle()}">{ctrl.visible ? "Hide" : "Show"} me!</button>
+ <button onclick="{ctrl.modifyAttribute()}">Modify lastname attribute</button>
+ </div>
+ {if ctrl.visible}
+ <my-component firstname="{ctrl.firstname}" lastname="{ctrl.lastname}">
+ </my-component>
+ {/if}
+{/template}
+
+module.exports = hello;
View
22 src/hello.js
@@ -0,0 +1,22 @@
+var HelloCtrl = function(){
+ this.attributes = {
+ firstname: { type: "string", binding: "2-way" },
+ lastname: { type: "string", binding: "2-way" }
+ }
+
+ this.visible = true;
+
+ this.clear = function() {
+ this.firstname = this.lastname = '';
+ }
+
+ this.toggle = function() {
+ this.visible = !this.visible;
+ }
+
+ this.modifyAttribute = function() {
+ this.lastname = "Youpi";
+ }
+}
+
+module.exports = HelloCtrl;
View
23 src/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="charset" content="utf-8">
+ <script type="text/javascript" src="http://noder-js.ariatemplates.com/dist/v<%= noderVersion %>/noder.js"></script>
+ <script type="text/javascript" src="http://hashspace.ariatemplates.com/dist/<%= hspVersion %>/hashspace-noder.js"></script>
+ <style type="text/css" media="screen">
+ h3 {
+ color: purple;
+ }
+ </style>
+ <link rel="import" href="component.html" />
+</head>
+<body>
+ <h3>Playing around with Custom Elements and Hashspace</h3>
+ <div id="out"></div>
+ <script type="application/x-noder">
+ require('component.hsp');
+ var main = require('hello.hsp');
+ main({ firstname: 'Benoit', lastname: 'Charbonnier' } ).render('out');
+ </script>
+</body>
+</html>
View
16 test/hello.hsp.spec.js
@@ -0,0 +1,16 @@
+//var fireEvent = require('hsp/utils/eventgenerator').fireEvent;
+var helloTpl = require('../src/hello.hsp');
+
+describe('Hello World', function() {
+
+ it('should say Hello to the World', function() {
+ var n = helloTpl();
+ expect(n.node.firstChild.textContent).to.equal('Hello, World!');
+ });
+
+ it('should allow clearing a name to greet', function() {
+ var n = helloTpl();
+ //fireEvent('click', n.node.lastChild.click);
+ //expect(n.node.firstChild.textContent).to.equal('Hello, !');
+ });
+});
View
18 test/hello.spec.js
@@ -0,0 +1,18 @@
+var HelloCtrl = require('../src/hello.js');
+
+describe('Hello World controller', function() {
+
+ var ctrl;
+ beforeEach(function(){
+ ctrl = new HelloCtrl();
+ });
+
+ it('should have the "World" name by default', function() {
+ expect(ctrl.name).to.equal('World');
+ });
+
+ it('should allow clearing a name', function() {
+ ctrl.clear();
+ expect(ctrl.name).to.equal('');
+ });
+});
View
25 todo.txt
@@ -0,0 +1,25 @@
+- add some kind of automated tests on Travis-CI to make sure that this thing actually works
+ - this would be a great excuse to introduce Selenium testing :-)
+
+- make the DOM-based test pass
+ - how to include hashtester / evntgenerator?
+ - jQuery is the problem right now
+ - peer dependency => no, it won't solve the issue :-/
+ - ideas:
+ (1) Change all the references so those are relative, move jQuery to be a peer dependency => this is not enough since we need to take care of the thing in a generated template....
+ (2) Add mapping capability to karma / noder -> but this feels wrong somehow...
+ - questions: what are dependencies of the runtime (in a browser): jQuery, ...
+
+ - we still got a problem about the generated require('hsp/...') in the included template!!!
+ - it is always about the same thing - one root folder (!); possible solutions:
+ - a configuration option
+ - for the required thing
+ - for a reference to the runtime
+ - bahhhh.... transpiler also assumes things: var $set=require("hsp/$set");
+
+- improve
+ - can I use jQuery / other stuff to easily get my hand on the DOM?
+ - what is the added value of the wrapper? like refresh?
+
+- how does it influence folder structure of hsp?
+- are there any other points from the backlog around this area => yes, enter text for example
Please sign in to comment.
Something went wrong with that request. Please try again.