These are chat archives for systemjs/systemjs

5th
Oct 2015
Sean Anderson
@MeoMix
Oct 05 2015 02:03
@guybedford / all -- I was hoping to use PostCSS plugins along with a SystemJS CSS loader. I've spent a while looking at @geelen's current solution, but it doesn't appear to simply support bundling. The regular CSS loader does support bundling, but doesn't appear to be configurable enough for other PostCSS plugins. Is that correct / the current state of things?
Glen Maddern
@geelen
Oct 05 2015 03:13
sounds about right
you wanting css modules or just plain-old-css + postcss?
Sean Anderson
@MeoMix
Oct 05 2015 03:21
Well, I was hoping to explore using CSS modules as well as I liked the premise behind them rather than namespacing my CSS
but if that's not production ready yet then I can just stuff that
Peter Müller
@Munter
Oct 05 2015 08:06
I recommend not bundling in development
Sean Anderson
@MeoMix
Oct 05 2015 14:53
Well duh
but I'm not going to become dependent on something if I can't take it to production :p
setting up the boilerplate for everything I need these tools to do before moving forward with using them
Josh Burgess
@joshburgess
Oct 05 2015 16:33
If any JS diehards in here are big on prototypal inheritance, composition over inheritance, JS OOP, etc. and believe ES6 classes were a mistake, I've made an informational repo on GitHub that might interest you: https://github.com/joshburgess/not-awesome-es6-classes/
adamstortz
@adamstortz
Oct 05 2015 16:43
I have a dependency on a library that loads one of it’s dependencies like this: require("./picker”)
is there a way I can setup the systemjs config to intercept that require and point it somewhere else?
I have tried a few variations like the following to no avail:
"./picker.js": "npm:materialize-css@0.97.1/js/date_picker/picker.js”
Guy Bedford
@guybedford
Oct 05 2015 17:24
@adamstortz you can use package map configuration here:
System.config({
  packages: {
    'path/to/library-using-picker': {
      map: {
        './picker.js': 'npm:materialize-css@0.97.1/js/date_picker/picker.js'
      }
    }
  }
});
adamstortz
@adamstortz
Oct 05 2015 17:38
@guybedford Thanks. I’m giving that a try now
adamstortz
@adamstortz
Oct 05 2015 17:44

@guybedford I am struggling a bit. This is what my config.js looks like

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "module": "commonjs",
    "emitDecoratorMetadata": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*",
    "bower:*": "jspm_packages/bower/*"
  },
  packages: {
    "app": {
      "main": "app",
      "defaultExtension": "ts"
    },
    'materialize': {
      main: "npm:materialize-css@0.97.1/dist/js/materialize.js",
      map: {
        './picker': 'npm:materialize-css@0.97.1/js/date_picker/picker.js'
      }
    }
  }
}

but when I run my app with a line like System.import('materialize’) I get a 404: GET http://localhost:3000/materialize/npm:materialize-css@0.97.1/dist/js/materialize.js 404 (Not Found)

what am I doing wrong?
adamstortz
@adamstortz
Oct 05 2015 17:51
@guybedford I reread your suggestion and made the following change and now it is complaining about process.js…
'jspm_packages/npm/materialize-css@0.97.1/dist/js/materialize.js': {
      map: {
        './picker': 'npm:materialize-css@0.97.1/js/date_picker/picker.js'
      }
    }
so I might be making progress...

ok, I have fixed the process issue and my config.js looks like this now:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "module": "commonjs",
    "emitDecoratorMetadata": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*",
    "bower:*": "jspm_packages/bower/*"
  },
  packages: {
    "app": {
      "main": "app",
      "defaultExtension": "ts"
    },
    'jspm_packages/npm/materialize-css@0.97.1/dist/js/materialize.js': {
      map: {
        './picker': 'npm:materialize-css@0.97.1/js/date_picker/picker.js',
        'process': 'npm:process@0.10.1'
      }
    }
  }
}

but I am still getting a 404 for picker. it is trying to retrieve it from the following URL: http://localhost:3000/jspm_packages/npm/materialize-css@0.97.1/dist/js/picker.js

adamstortz
@adamstortz
Oct 05 2015 17:56
The line that tries to load picker looks like this: require("./picker”)
is there something I need to do to escape the ./ at the begining?
adamstortz
@adamstortz
Oct 05 2015 18:24
@guybedford it works if I modify the require to do this: require(“picker”) and then set my package to this:
'jspm_packages/npm/materialize-css@0.97.1/dist/js/materialize.js': {
      map: {
        'picker': 'npm:materialize-css@0.97.1/js/date_picker/picker.js',
        'process': 'npm:process@0.10.1'
      }
    }
so it seems like the ./ at the beginning is a problem
@guybedford can you confirm/deny my assertion?
Guy Bedford
@guybedford
Oct 05 2015 19:45
@adamstortz the map for picker would need to be ./dist/js/picker.js in that case
adamstortz
@adamstortz
Oct 05 2015 20:02
@guybedford I am not sure I understand. I have tried the following, both have the same issue: GET http://localhost:3000/jspm_packages/npm/materialize-css@0.97.1/dist/js/picker.js 404 (Not Found)
'jspm_packages/npm/materialize-css@0.97.1/dist/js/materialize.js': {
      map: {
        './dist/js/picker.js': 'npm:materialize-css@0.97.1/js/date_picker/picker.js',
        'process': 'npm:process@0.10.1'
      }
    }
'jspm_packages/npm/materialize-css@0.97.1/dist/js/materialize.js': {
      map: {
        './picker': './dist/js/picker.js',
        'process': 'npm:process@0.10.1'
      }
    }
Guy Bedford
@guybedford
Oct 05 2015 20:09
@adamstortz
packages: {
  'npm:materialize-css@0.97.1': {
    map: {
      './dist/js/picker.js': './js/date_picker/picker.js'
    }
  }
}
it may be advisable though to just use jspm install materialize
adamstortz
@adamstortz
Oct 05 2015 20:14
jspm install materialize doesn’t work either
something is messed up with the distribution
neither does the map you sent, same issue
Guy Bedford
@guybedford
Oct 05 2015 20:43
@adamstortz perhaps post a jspm registry issue and share the issues you're getting with jspm install materialize and the map
also make sure you're runnign the latest version of jspm
adamstortz
@adamstortz
Oct 05 2015 20:43
roger that. thanks for the help
Guy Bedford
@guybedford
Oct 05 2015 20:43
haha ok there's already an issue for that - jspm/registry#592
adamstortz
@adamstortz
Oct 05 2015 20:47
it seems like the package that is published to the registry is messed up and missing much of it’s code
the bower version of the package suffers from similar problems
even if you remove jspm from the equation