webpack-contrib · st32lthx · Sep 18, 2015 · Sep 18, 2015 · Sep 18, 2015 · Sep 18, 2015
diff --git a/fixture/.gitignore b/fixture/.gitignore
@@ -0,0 +1,36 @@
+# 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
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# DS_Store
+.DS_Store
+
+#dist
+dist
+
+# components
+components
diff --git a/fixture/component.json b/fixture/component.json
@@ -0,0 +1,18 @@
+{
+  "name": "my-component",
+  "scripts": [
+    "client.js"
+  ],
+  "main": "client.js",
+  "styles": [
+    "styles.css"
+  ],
+  "paths": [],
+  "development": {
+    "local-comp": "*"
+  },
+  "dependencies": {
+    "component/calendar": "~0.2.0",
+    "component/datepicker": "^1.0.1"
+  }
+}
diff --git a/fixture/entry.js b/fixture/entry.js
@@ -0,0 +1,66 @@
+var l = require('local-comp');
+console.log(l);
+// some styles
+require('./styles.css');
+require('datepicker/1.0.1/datepicker.css');
+
+// more fixture
+var Calendar = require('calendar');
+require('calendar/0.2.0/lib/calendar.css');
+// require('datepicker/1.0.1/datepicker.css');
+
+var one = new Calendar().showMonthSelect().showYearSelect();
+
+one.on('view change', function(date, action){
+  console.log('change %s', action);
+  var twoDate = new Date(date);
+  twoDate.setMonth(date.getMonth() + 1)
+  small.show(twoDate);
+});
+
+one.on('change', function(date){
+  console.log('selected: %s of %s %s',
+    date.getDate(),
+    date.getMonth(),
+    date.getFullYear());
+  var newDate = new Date(date);
+  newDate.setMonth(date.getMonth() + 1);
+  large.select(newDate);
+});
+
+var container = document.querySelector('#standard');
+container.appendChild(one.el);
+
+var small = new Calendar;
+small.addClass('small');
+container.appendChild(small.el);
+small.next();
+
+var frLocale = {
+  months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+  weekdaysMin : 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
+};
+var large = new Calendar;
+large
+  .addClass('large')
+  .locale(frLocale);
+container.appendChild(large.el);
+
+
+container = document.querySelector('#restricted');
+var restricted = new Calendar(new Date(2004, 6, 11))
+  .min(new Date(2004, 5, 12))
+  .max([2004, 7, 19])
+  .select(new Date(2004, 7, 19));
+container.appendChild(restricted.el);
+restricted = new Calendar(new Date(2004, 6, 11))
+  .max(new Date(2004, 5, 12))
+  .min([2004, 5, 18])
+  .show(new Date(2004, 5, 19));
+container.appendChild(restricted.el);
+
+
+// date picker
+var picker = require('datepicker');
+var el = document.querySelector('[name=date]');
+picker(el);
diff --git a/fixture/index.html b/fixture/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>components</title>
+</head>
+<body>
+  <div>
+  <div>
+    <h1>Date Picker</h1>
+    <style>
+    .calendar.datepicker-calendar {
+      z-index: 55;
+      background-color: #fff;
+    }
+    </style>
+      <input type="text" name="date" placeholder="Choose a date">
+  </div>
+    <h1>Calendar</h1>
+    <div id='standard'></div>
+    <div id='restricted'></div>
+  </div>
+
+  <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/fixture/install b/fixture/install
@@ -0,0 +1,6 @@
+#! /bin/bash
+## usage: ./install nameofcomponent
+## used by `get` inside package json
+## to use it from npm `>2.0` do: `npm run get_comp -- nameofcompoennt`
+## or you can use the alias: `npm run gc -- nameofcompoennt`
+./node_modules/component/bin/component install component/$1
diff --git a/fixture/my-components/local-comp/1.0.0/component.json b/fixture/my-components/local-comp/1.0.0/component.json
@@ -0,0 +1,7 @@
+{
+  "name": "local-comp",
+  "version": "1.0.1",
+  "scripts": ["main.js"],
+  "main": "main.js",
+  "license": "MIT"
+}
diff --git a/fixture/my-components/local-comp/1.0.0/main.js b/fixture/my-components/local-comp/1.0.0/main.js
@@ -0,0 +1 @@
+module.exports = 'I am local comp';
diff --git a/fixture/package.json b/fixture/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "fixture",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "component": "./node_modules/component/bin/component",
+    "get_comp": "./install",
+    "gc": "npm run get_comp",
+    "dev": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 9191",
+    "build": "./node_modules/webpack/bin/webpack.js -p"
+  },
+  "author": "Amin Meyghani <[email protected]> (http://meyghani.com)",
+  "license": "ISC",
+  "devDependencies": {
+    "component": "^1.1.0",
+    "css-loader": "^0.18.0",
+    "raw-loader": "^0.5.1",
+    "style-loader": "^0.12.4",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.11.0"
+  },
+  "dependencies": {
+    "clone-component": "^0.2.2",
+    "component-props": "^1.1.1",
+    "component-type": "^1.2.0",
+    "ms": "^0.7.1",
+    "type-component": "0.0.1"
+  }
+}
diff --git a/fixture/readme.md b/fixture/readme.md
@@ -0,0 +1,11 @@
+# Setup
+
+`npm i && npm run component -- install`
+
+# Start dev server
+
+`npm run dev` and then go to `http://localhost:9191/webpack-dev-server/index.html`
+
+# build
+
+`npm run build`
diff --git a/fixture/standalone.html b/fixture/standalone.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>dist</title>
+</head>
+<body>
+  <div>
+  <div>
+    <h1>Date Picker</h1>
+    <style>
+    .calendar.datepicker-calendar {
+      z-index: 55;
+      background-color: #fff;
+    }
+    </style>
+      <input type="text" name="date" placeholder="Choose a date">
+  </div>
+    <h1>Calendar</h1>
+    <div id='standard'></div>
+    <div id='restricted'></div>
+  </div>
+<script src="dist/bundle.js"></script>
+</body>
+</html>
diff --git a/fixture/styles.css b/fixture/styles.css
@@ -0,0 +1,44 @@
+  body {
+    font: 14px "Helvetica Neue", Helvetica, Arial;
+    /*padding: 80px;*/
+    color: #333;
+  }
+
+  .calendar.large {
+    float: left;
+    clear: both;
+  }
+
+  .calendar.large tbody td {
+    padding: 50px;
+    border: 1px solid #eee;
+    position: relative;
+  }
+
+  .calendar.large tbody a {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+
+  .calendar.small th {
+    font-size: 10px;
+  }
+
+  .calendar.small td a {
+    font-size: 10px;
+    padding: 3px;
+  }
+
+  .calendar td a.invalid {
+    opacity: .2;
+    background-color: rgba(0, 0, 0, .2);
+    cursor: default;
+  }
+
+  #restricted {
+    clear: left;
+  }
+  #restricted .calendar {
+    float: left;
+  }
diff --git a/fixture/webpack.config.js b/fixture/webpack.config.js
@@ -0,0 +1,35 @@
+var ComponentPlugin = require('../index');
+var resolve = require('path').resolve;
+module.exports = {
+  entry: {
+    bundle: './entry.js'
+  },
+  output: {
+    path: resolve('./dist'),
+    filename: '[name].js'
+  },
+  resolve: {
+    modulesDirectories: ['node_modules', 'component', 'components/component']
+  },
+  module: {
+    loaders: [
+      {test: /\.html$|\.htm$/, loader: 'raw'},
+      {test: /\.css$/, loader: 'style!css'}
+    ]
+  },
+  plugins: [
+      new ComponentPlugin({
+          // This is equal to: xyz: "[file]"
+
+          // Load xyz field with the xyz-loader
+           // scripts: "!babel-loader![file]"
+
+      }, [
+          // Lookup paths
+          "my-components",
+          "components",
+          "components/component"
+      ]
+      )
+  ]
+};
diff --git a/index.js b/index.js
@@ -57,13 +57,22 @@ ComponentPlugin.prototype.apply = function(compiler) {
 
 		// 2. get the full name for the module
 		// i. e. "emitter" -> "sokra/emitter"
+
+		// when you install a component, it gets registered as:
+		// component/name. We can just get rid of the `component/` part:
+		function normalizeCompName (arr) { return arr.map(function (c) { return c.replace("component/", ""); }); }
+
 		function findModule() {
 			var modules = componentFileContent.local ? componentFileContent.local : [];
 			if(componentFileContent.dependencies) {
-				modules = modules.concat(Object.keys(componentFileContent.dependencies));
+				modules = modules.concat(
+					normalizeCompName(Object.keys(componentFileContent.dependencies))
+					);
 			}
 			if(componentFileContent.development) {
-				modules = modules.concat(Object.keys(componentFileContent.development));
+				modules = modules.concat(
+					normalizeCompName(Object.keys(componentFileContent.development))
+				);
 			}
 			var fullName, requestName = request.request;
 			for(var i = 0; i < modules.length; i++) {
@@ -107,7 +116,25 @@ ComponentPlugin.prototype.apply = function(compiler) {
 					paths = paths.concat(lookupPaths);
 					this.forEachBail(paths, function(path, callback) {
 						var modulesFolderPath = this.join(componentPath, path);
-						var modulePath = this.join(modulesFolderPath, fullName.replace(/\//g, "-"));
+
+						var modulePath = this.join(modulesFolderPath, fullName);
+						// The module path is more like `component/version/`
+						// This is a quick fix to get the correct path of the
+						// component. It seems like all the components follow the same
+						// pattern with some small variation:
+						// `component/v.x.y.z`
+						// or
+						// `component/x.y.z
+						// not the most robust solution but at least it makes it work.
+						try {
+							var versionFolder = require('fs').readdirSync(modulePath);
+						} catch(e) {
+							log('This path does not contain a module' + e);
+						}
+						if (versionFolder) {
+							versionFolder = versionFolder.filter(function (c) { return !/^\./.test(c) && /^v|\d\.\d\.\d/.test(c);  });
+							modulePath = this.join(modulePath, versionFolder[0]);
+						}
 						fs.stat(modulePath, function(err, stat) {
 							if(err || !stat) {
 								log(modulePath + " doesn't exist");

diff --git a/loading-pattern.doc.md b/loading-pattern.doc.md
@@ -0,0 +1,23 @@
+## loading-pattern
+
+It seems like the folder structure of components have changed. When you install a component, the folder structure for each component looks something like the following:
+
+```
+component-name
+    |_ x.y.z
+        |_ component.json
+        |_ index.js
+
+```
+It seems like this pattern is consistent for all of the components and there might not even be a need to read all the `component.json` files for every component and figure out version values. There might still be value for getting the name of the component, but as a quick fix, it should be ok to rely on the pattern.
+
+The other difference is the name of components in the `component.json` file. When a component is installed with `component install component/nameofcompoennt` the dependency fields gets updated and looks something like this:
+
+```
+"dependencies": {
+  "component/calendar": "~0.2.0",
+  "component/datepicker": "^1.0.1"
+}
+```
+
+The `component/` is added which as a quick fix can be replaced with empty string when parsed.