diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ab3246c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# @TheLarkInn +# http://editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ec35ce7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,39 @@ +# Compiled source # +################### +*.com +*.class +*.dll +*.exe +*.o +*.so + +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +/node_modules/ diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..efdbade --- /dev/null +++ b/.npmignore @@ -0,0 +1,20 @@ +lib-cov +*.seed +*.log +*.csv +*.dat +*.out +*.pid +*.gz + +pids +logs +results + +npm-debug.log +node_modules +coverage +examples +test +assets +.idea diff --git a/index.js b/index.js new file mode 100644 index 0000000..34580c6 --- /dev/null +++ b/index.js @@ -0,0 +1,36 @@ +module.exports = function(source) { + // using: regex, capture groups, and capture group variables. + var templateUrlRegex = new RegExp(/templateUrl:\s*['"](.*?)['"]/gm) + var stylesRegex = new RegExp(/styleUrls:(.*)/) + + // replace: templateUrl: './path/to/template.html' + // with: template: require('./path/to/template.html') + function replaceHTMLTemplatePathWithRequire(source) { + if (templateUrlRegex.test(source)) { + var newSource = source.replace(templateUrlRegex, "template: require('$1')"); + return newSource; + } + + return source; + } + + // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"] + // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] + function replaceStylesheetPathWithRequire(source) { + var stylesMatch = source.match(stylesRegex); + var styles; + + if ( stylesRegex.test(source) ) { + styles = stylesMatch[0] + .replace(/['"](.*?)['"]/g, "require('$1')") + .replace(/styleUrls/g, 'styles'); + + var newSource = source.replace(stylesRegex, styles); + return newSource; + } + + return source; + } + + return replaceStylesheetPathWithRequire(replaceHTMLTemplatePathWithRequire(source)); +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..6ac055e --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "angular2-template-loader", + "version": "0.0.0", + "description": "Angular2 webpack loader that inlines your angular2 templates and stylesheets into angular components. ", + "main": "index.js", + "scripts": { + "test": "mocha --reporter spec" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/TheLarkInn/angular2-template-loader.git" + }, + "keywords": [ + "angular2", + "webpack", + "angularjs", + "loader", + "angular2-loader" + ], + "author": "Sean Larkin", + "license": "MIT", + "bugs": { + "url": "https://github.com/TheLarkInn/angular2-template-loader/issues" + }, + "homepage": "https://github.com/TheLarkInn/angular2-template-loader#readme", + "devDependencies": { + "mocha": "^2.5.3", + "should": "^9.0.0" + }, + "dependencies": { + "loader-utils": "^0.2.15" + } +} diff --git a/test/fixtures/index.js b/test/fixtures/index.js new file mode 100644 index 0000000..24bc2f6 --- /dev/null +++ b/test/fixtures/index.js @@ -0,0 +1,4 @@ +var sampleAngular2ComponentSimpleFixture = require('./sample_angular2_component_file_string_simple.js'); + +exports.simpleAngular2TestComponentFileStringSimple = sampleAngular2ComponentSimpleFixture; + diff --git a/test/fixtures/sample_angular2_component_file_string_simple.js b/test/fixtures/sample_angular2_component_file_string_simple.js new file mode 100644 index 0000000..3f0c35c --- /dev/null +++ b/test/fixtures/sample_angular2_component_file_string_simple.js @@ -0,0 +1,12 @@ +var simpleAngular2TestComponentFileStringSimple = ` + import {Component} from '@angular/core'; + + @Component({ + selector: 'test-component', + templateUrl: './some/path/to/file.html', + styleUrls: ['./app/css/styles.css'] + }) + export class TestComponent {} +`; + +module.exports = simpleAngular2TestComponentFileStringSimple; diff --git a/test/loader.spec.js b/test/loader.spec.js new file mode 100644 index 0000000..d77db36 --- /dev/null +++ b/test/loader.spec.js @@ -0,0 +1,41 @@ +var should = require("should"); +var loader = require("../index.js"); + +var fixtures = require("./fixtures"); + +describe("loader", function() { + it("Should convert html and style file strings to require()s", function(){ + + loader.call({}, fixtures.simpleAngular2TestComponentFileStringSimple) + .should + .be + .eql(` + import {Component} from '@angular/core'; + + @Component({ + selector: 'test-component', + template: require('./some/path/to/file.html'), + styles: [require('./app/css/styles.css')] + }) + export class TestComponent {} +` + ) + + }); + + it("Should return original source if there are no matches", function() { + loader.call({}, 'foo') + .should + .be + .eql('foo'); + }); + + it("Should convert partial string match requires", function() { + loader.call({}, `templateUrl: './index/app.html'`) + .should + .be + .eql(`template: require('./index/app.html')`); + }); + + +});