Harmonize with components about webpack HOT 25 CLOSED

Maybe it's just writing a loader for component.json and setup component.json as default module file. I have to check it.

from webpack.

As far as I understood everything a module needs is defined in the component.json. A require() within a module can simply be resolved by examining the component.json. For instance:

component.json

{
  "name": "test",
  "repo": "jhnns/test",
  "dependencies": {
      "component/emitter": "*"
  },
  "development": {},
  "scripts": [
    "index.js",
    "template.js"
  ]
}

index.js

// requires starting with a dot are located relative to the current module (like node)
var template = require("./template.js"),

// requires not starting with a dot are expected to be under ./components
// the / is replaced by a -
// this module for instance would be located at ./components/component-emitter
    emitter = require("component/emitter"),

// this is not valid as the referenced module is not included in the scripts-array
// currently 'component build' prints no warning, but by runtime require() will
// throw an exception
    bla = require("./bla.js");

As I mentioned in #47 component uses a flat dependency hierarchy. This means that every component an application uses is installed directly under ./components/<user>-<project>.

Regarding styles webpack should not automatically include the styles via the style-loader. This decision should be up to the developer imho.

You can find more information in the spec. I'm currently not sure how this will turn out but components brings some good ideas (e.g. simplicity, no opinionated styling, no or just a few dependencies). On the other hand it adds another fragmentation to the community.

from webpack.

Thanks for the explaination. The resolving process is more complex than i thought. We may need some plugin system for the resolver...

from webpack.

Yes. This could work well with your latest changes on webpack. 😄

from webpack.

webpack 0.9 is nearly a complete rewrite ;)

from webpack.

I think it can be quite easy to make webpack work with component. I'm not sure but maybe webpack just has to add ./components as a lookup path (like node_modules and web_modules). Relative requires require("../b.js") inside the modules should work like expected (as they are the same as in node) and dependency requires require("moduleA") should resolve than too - oh wait ... there is this thing that dependencies are stored differently within the components folder.

Hopefully they'll change this 😄 componentjs/component#212

from webpack.

emitter = require("component/emitter"),

That may be how they're namespaced (github-style) but that's not how they're requirable. You have to use emitter = require("component-emitter"), from root namespace (where you're usually not).
When you're, say, in index.js of your component (with index.js being referenced from scripts: [] property), it's just require('emitter') because it's aliased.

from webpack.

Ah ok. Didn't get that 😄

from webpack.

I think he want to point out, that you write require("emitter"), which checks the dependencies and load component/emitter if you depend on it, or sokra/emitter if you depend on it.

from webpack.

I do mean that, but never sokra/emitter. That just won't work. It is sokra-emitter.
ie my components/ folder : http://i.imgur.com/QaGgy5G.png

from webpack.

Ok thanks for making that clear.

Another point, @jhnns mentioned: Should be stylesheets applied to the DOM on require? Why not? I didn't find anything about that in the spec.

from webpack.

You just <link /> build.css

from webpack.

ok... I think I will make it configurable how the mapping between fields in component.json and loaders should be:

{
  // field in component.json ":" require request with "[file]" replaced
  scripts: "[file]", // normal require
  styles: "style!css![file]", // apply styles
  less: "style!css!val!less![file]", // apply also less styles
  coffee: "coffee![file]", // load also coffeescript
}

default:

{
  scripts: "[file]",
  styles: "style!css![file]"
}

so you can opt-out from applying styles by: {scripts: "[file]"}

from webpack.

Mhmm I don't think that the component should decide whether to apply styles or not. It's the developers decision who uses the component in an application.

Also relying on the loader-syntax will break other module loaders / bundlers who don't support this syntax.

from webpack.

So I refactored the enhanced-resolve module to support plugins.

So it's now possible to write a ComponentsPlugin for webpack, which

• adds resolving logic for components
• registers a component-loader for component.json

The component-loader process the component.json and applies fields.

new ComponentPlugin({
  styles: "!style!css![file]",
});

require("emitter");

• Lookup the nearest component.json
• Reads the component.json and the the full name of the dependency
• Resolves to .../components/sokra-emitter/component.json
• The component-loader is applied. And generates something like this:

// component.json
{
  "main": "main.js",
  "styles": [
    "style.css"
  ]
}

// !component-loader!component.json
require("!style!css!.../components/sokra-emitter/style.css");
module.exports = require(".../components/sokra-emitter/main.js");

• The remaining process is as normal...

from webpack.

Ah cool. So requiring components should work with webpack 0.9?

from webpack.

I think less than 200 LOC... :)

from webpack.

Wow. Let's hope that they don't change the specification too often.

from webpack.

Where can I find the ComponentPlugin?

from webpack.

I haven't made it yet....

from webpack.

Ah sorry, I misunderstood your comment. 😄

from webpack.

Wolla... here it is: component-webpack-plugin

example

from webpack.

as promised less then 200 LOC 😄

from webpack.

Great !

from webpack.

Awesome!!! 👍

from webpack.