diff --git a/fixture/.gitignore b/fixture/.gitignore new file mode 100644 index 0000000..f6adf79 --- /dev/null +++ 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 new file mode 100644 index 0000000..7129f97 --- /dev/null +++ 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 new file mode 100644 index 0000000..dcef135 --- /dev/null +++ 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 new file mode 100644 index 0000000..baf9fd0 --- /dev/null +++ b/fixture/index.html @@ -0,0 +1,26 @@ + + + + + components + + +
+
+

Date Picker

+ + +
+

Calendar

+
+
+
+ + + + diff --git a/fixture/install b/fixture/install new file mode 100755 index 0000000..e83388a --- /dev/null +++ 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 new file mode 100644 index 0000000..696e572 --- /dev/null +++ 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 new file mode 100644 index 0000000..acaaede --- /dev/null +++ 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 new file mode 100644 index 0000000..2b7b0ad --- /dev/null +++ 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 (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 new file mode 100644 index 0000000..616a2b2 --- /dev/null +++ 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 new file mode 100644 index 0000000..fe2038e --- /dev/null +++ b/fixture/standalone.html @@ -0,0 +1,25 @@ + + + + + dist + + +
+
+

Date Picker

+ + +
+

Calendar

+
+
+
+ + + diff --git a/fixture/styles.css b/fixture/styles.css new file mode 100644 index 0000000..2a53877 --- /dev/null +++ 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 new file mode 100644 index 0000000..f11d1d8 --- /dev/null +++ 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 index 9ab0025..d5957f5 100644 --- 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 new file mode 100644 index 0000000..5fb1eb0 --- /dev/null +++ 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.