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); });