Asteroid 2.0 in a chrome extension

[grinono]

i'm trying to work with the 2.0 version of this package from a chrome extension. But somehow it's not working. older version worked just fine.

import {createClass} from "asteroid";

looks like import is not accepted from within a chrome extensions. do we require ES6?

linking in the backgrouds.html to the packages is also not working:

  <script src="/lib/asteroid/src/base-mixins/ddp.js"></script>
  <script src="/lib/asteroid/src/asteroid.js"></script>

any idea how to fix this.

[grinono]

fixed it with using > babel > browserify

[udisun]

@grinono could you describe the full solution and how did you use asteroid?

[grinono]

i created a boilerplate chrome extension with : https://github.com/yeoman/generator-chrome-extension
then added npm i --save browserify and added it to the gulp tasks. something like;

var browserify = require('browserify');
var source = require('vinyl-source-stream');
var watch = require('gulp-watch');

// generated on 2016-03-11 using generator-chrome-extension 0.5.4
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import runSequence from 'run-sequence';
import {stream as wiredep} from 'wiredep';

const $ = gulpLoadPlugins();

gulp.task('browserify', function() {
return browserify('./dist/scripts/background.js')

    .bundle()
    //Pass desired output filename to vinyl-source-stream
    .pipe(source('background.js'))
    // Start piping stream to tasks!
    .pipe(gulp.dest('./dist/scripts'));

});

gulp.task('extras', () => {
return gulp.src([
'app/.',
'app/locales/*',
'!app/scripts.babel',
'!app/_.json',
'!app/*.html',
], {
base: 'app',
dot: true
}).pipe(gulp.dest('dist'));
});

function lint(files, options) {
return () => {
return gulp.src(files)
.pipe($.eslint(options))
.pipe($.eslint.format());
};
}

gulp.task('lint', lint('app/scripts.babel/*/.js', {
env: {
es6: true
}
}));

gulp.task('images', () => {
return gulp.src('app/images/*/')
.pipe($.if($.if.isFile, $.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
}))
.on('error', function (err) {
console.log(err);
this.end();
})))
.pipe(gulp.dest('dist/images'));
});

gulp.task('html', () => {
return gulp.src('app/.html')
.pipe($.sourcemaps.init())
.pipe($.if('.js', $.uglify()))
.pipe($.if('.css', $.minifyCss({compatibility: ''})))
.pipe($.sourcemaps.write())
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});

gulp.task('chromeManifest', () => {
return gulp.src('app/manifest.json')
.pipe($.chromeManifest({
buildnumber: true,
background: {
target: 'scripts/background.js',
exclude: [
'scripts/chromereload.js'
]
}
}))
.pipe($.if('.css', $.minifyCss({compatibility: ''})))
.pipe($.if('.js', $.sourcemaps.init()))
.pipe($.if('.js', $.uglify()))
.pipe($.if('*.js', $.sourcemaps.write('.')))
.pipe(gulp.dest('dist'));
});

gulp.task('babel', () => {
return gulp.src('app/scripts.babel/*/.js')
.pipe($.babel({
presets: ['es2015']
}))
.pipe(gulp.dest('app/scripts'));
});

gulp.task('clean', del.bind(null, ['.tmp', 'dist']));

gulp.task('watch', ['build'], () => {
// $.livereload.listen();

// gulp.watch([
// 'app/.html',
// 'app/scripts/__/.js',
// 'app/images//*',
// 'app/styles//_',
// 'app/locales/__/.json'
// ]).on('change', $.livereload.reload);

gulp.watch('app/scripts.babel/*/.js', ['build']);
// gulp.watch('bower.json', ['wiredep']);
});

gulp.task('size', () => {
return gulp.src('dist/*/').pipe($.size({title: 'build', gzip: true}));
});

gulp.task('wiredep', () => {
gulp.src('app/.html')
.pipe(wiredep({
ignorePath: /^(../)../
}))
.pipe(gulp.dest('app'));
});

gulp.task('package', function () {
var manifest = require('./dist/manifest.json');
return gulp.src('dist/**')
.pipe($.zip('werk-' + manifest.version + '.zip'))
.pipe(gulp.dest('package'));
});

gulp.task('build', (cb) => {
runSequence(
'lint', 'babel', 'chromeManifest',
['html', 'images', 'extras',"browserify"],
'size', cb);
});

gulp.task('default', ['clean'], cb => {
runSequence('build', cb);
});