From 56f2961e4f78612cefade10626e91d45c7fbe14f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 2 Oct 2019 12:10:34 +0200 Subject: [PATCH 1/5] fix angular2-template-loader / raw-loader version conflicts --- .../src/server/framework-preset-angular.ts | 3 +- .../src/server/ngx-template-loader/index.ts | 75 +++++++++++++++++++ 2 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 app/angular/src/server/ngx-template-loader/index.ts diff --git a/app/angular/src/server/framework-preset-angular.ts b/app/angular/src/server/framework-preset-angular.ts index 22b8e00efe7f..5f28ea8cd797 100644 --- a/app/angular/src/server/framework-preset-angular.ts +++ b/app/angular/src/server/framework-preset-angular.ts @@ -22,7 +22,8 @@ export function webpack( loader: 'ts-loader', options: tsLoaderOptions, }, - { loader: 'angular2-template-loader' }, + { loader: path.resolve(__dirname, 'ngx-template-loader') }, + // { loader: 'angular2-template-loader' }, ], }, { diff --git a/app/angular/src/server/ngx-template-loader/index.ts b/app/angular/src/server/ngx-template-loader/index.ts new file mode 100644 index 000000000000..fdabf4bef868 --- /dev/null +++ b/app/angular/src/server/ngx-template-loader/index.ts @@ -0,0 +1,75 @@ +/* + * By the time this file was added the repository for angular2-template-loader received no updates in 3 years + * This is just a copy of https://github.com/TheLarkInn/angular2-template-loader/blob/master/index.js in order + * to fix a bug that prevents Storybook from updating raw-loader > ^1.0.0 + * + * As suggested in https://github.com/storybookjs/storybook/issues/7877#issuecomment-536556755 this code was + * modified to be compatible with newer versions of raw-loader as well as backwards compatible with raw-loader ^1.0.0 + */ + +// eslint-disable-next-line import/no-extraneous-dependencies +// const loaderUtils = require('loader-utils'); + +// using: regex, capture groups, and capture group variables. +const templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*([,}]))/gm; +const stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +const stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +function replaceStringsWithRequires(string: string) { + // eslint-disable-next-line func-names + return string.replace(stringRegex, function(match, quote, url) { + if (url.charAt(0) !== '.') { + // eslint-disable-next-line no-param-reassign + url = `./${url}`; + } + return `(require('${url}').default || require('${url}'))`; + }); +} + +// eslint-disable-next-line consistent-return,func-names +export default function(source: any, sourcemap: any) { + const config: any = {}; + // const query = loaderUtils.parseQuery(this.query); + let styleProperty = 'styles'; + let templateProperty = 'template'; + + if (this.options != null) { + Object.assign(config, this.options.angular2TemplateLoader); + } + + // Object.assign(config, query); + + if (config.keepUrl === true) { + styleProperty = 'styleUrls'; + templateProperty = 'templateUrl'; + } + + // Not cacheable during unit tests; + // eslint-disable-next-line no-unused-expressions + this.cacheable && this.cacheable(); + + const newSource = source + // eslint-disable-next-line func-names + .replace(templateUrlRegex, function(match: any, url: any) { + // replace: templateUrl: './path/to/template.html' + // with: template: require('./path/to/template.html') + // or: templateUrl: require('./path/to/template.html') + // if `keepUrl` query parameter is set to true. + return `${templateProperty}:${replaceStringsWithRequires(url)}`; + }) + // eslint-disable-next-line func-names + .replace(stylesRegex, function(match: any, urls: any) { + // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"] + // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] + // or: styleUrls: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] + // if `keepUrl` query parameter is set to true. + return `${styleProperty}:${replaceStringsWithRequires(urls)}`; + }); + + // Support for tests + if (this.callback) { + this.callback(null, newSource, sourcemap); + } else { + return newSource; + } +} From bbed3b0bf3a4d7abc140b437b4e15056b349e74a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 2 Oct 2019 16:48:23 +0200 Subject: [PATCH 2/5] fix lint issues; remove unused code --- .../src/server/ngx-template-loader/index.ts | 61 +++++-------------- yarn.lock | 8 +++ 2 files changed, 24 insertions(+), 45 deletions(-) diff --git a/app/angular/src/server/ngx-template-loader/index.ts b/app/angular/src/server/ngx-template-loader/index.ts index fdabf4bef868..4ab1c7226860 100644 --- a/app/angular/src/server/ngx-template-loader/index.ts +++ b/app/angular/src/server/ngx-template-loader/index.ts @@ -7,69 +7,40 @@ * modified to be compatible with newer versions of raw-loader as well as backwards compatible with raw-loader ^1.0.0 */ -// eslint-disable-next-line import/no-extraneous-dependencies -// const loaderUtils = require('loader-utils'); - // using: regex, capture groups, and capture group variables. const templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*([,}]))/gm; const stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; const stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; -function replaceStringsWithRequires(string: string) { - // eslint-disable-next-line func-names - return string.replace(stringRegex, function(match, quote, url) { +const replaceStringsWithRequires = (string: string) => { + return string.replace(stringRegex, (match, quote, url) => { + let newUrl = url; if (url.charAt(0) !== '.') { - // eslint-disable-next-line no-param-reassign - url = `./${url}`; + newUrl = `./${url}`; } - return `(require('${url}').default || require('${url}'))`; + return `(require('${newUrl}').default || require('${newUrl}'))`; }); -} - -// eslint-disable-next-line consistent-return,func-names -export default function(source: any, sourcemap: any) { - const config: any = {}; - // const query = loaderUtils.parseQuery(this.query); - let styleProperty = 'styles'; - let templateProperty = 'template'; - - if (this.options != null) { - Object.assign(config, this.options.angular2TemplateLoader); - } +}; - // Object.assign(config, query); +export default function(source: string) { + const styleProperty = 'styles'; + const templateProperty = 'template'; - if (config.keepUrl === true) { - styleProperty = 'styleUrls'; - templateProperty = 'templateUrl'; - } - - // Not cacheable during unit tests; - // eslint-disable-next-line no-unused-expressions - this.cacheable && this.cacheable(); - - const newSource = source - // eslint-disable-next-line func-names - .replace(templateUrlRegex, function(match: any, url: any) { + return source + .replace(templateUrlRegex, (_, templateUrlString: string) => { // replace: templateUrl: './path/to/template.html' // with: template: require('./path/to/template.html') // or: templateUrl: require('./path/to/template.html') // if `keepUrl` query parameter is set to true. - return `${templateProperty}:${replaceStringsWithRequires(url)}`; + return `${templateProperty}:${replaceStringsWithRequires(templateUrlString)}`; }) - // eslint-disable-next-line func-names - .replace(stylesRegex, function(match: any, urls: any) { + .replace(stylesRegex, (_, styleUrlsString: string) => { + console.log(styleUrlsString); // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"] // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] // or: styleUrls: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] // if `keepUrl` query parameter is set to true. - return `${styleProperty}:${replaceStringsWithRequires(urls)}`; + console.log(`${styleProperty}:${replaceStringsWithRequires(styleUrlsString)}`); + return `${styleProperty}:${replaceStringsWithRequires(styleUrlsString)}`; }); - - // Support for tests - if (this.callback) { - this.callback(null, newSource, sourcemap); - } else { - return newSource; - } } diff --git a/yarn.lock b/yarn.lock index 36780625cbda..bb375311b0d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4053,6 +4053,14 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/loader-utils@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@types/loader-utils/-/loader-utils-1.1.3.tgz#82b9163f2ead596c68a8c03e450fbd6e089df401" + integrity sha512-euKGFr2oCB3ASBwG39CYJMR3N9T0nanVqXdiH7Zu/Nqddt6SmFRxytq/i2w9LQYNQekEtGBz+pE3qG6fQTNvRg== + dependencies: + "@types/node" "*" + "@types/webpack" "*" + "@types/lodash.zipobject@^4.1.4": version "4.1.6" resolved "https://registry.yarnpkg.com/@types/lodash.zipobject/-/lodash.zipobject-4.1.6.tgz#75e140f44ac7d7682a18d3aae8ee4594fad094d7" From 334cc202d2ac00f7118dba1b4854dd21d6b3150c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 2 Oct 2019 17:05:21 +0200 Subject: [PATCH 3/5] fix bug that causes an error when style files are empty --- app/angular/src/server/ngx-template-loader/index.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/angular/src/server/ngx-template-loader/index.ts b/app/angular/src/server/ngx-template-loader/index.ts index 4ab1c7226860..6e2d2381ee14 100644 --- a/app/angular/src/server/ngx-template-loader/index.ts +++ b/app/angular/src/server/ngx-template-loader/index.ts @@ -18,7 +18,11 @@ const replaceStringsWithRequires = (string: string) => { if (url.charAt(0) !== '.') { newUrl = `./${url}`; } - return `(require('${newUrl}').default || require('${newUrl}'))`; + const requireString = `(require('${newUrl}').default || require('${newUrl}'))`; + + // without the length check an empty style file will throw + // "Expected 'styles' to be an array of strings" + return `${requireString}.length ? ${requireString} : ''`; }); }; @@ -35,12 +39,10 @@ export default function(source: string) { return `${templateProperty}:${replaceStringsWithRequires(templateUrlString)}`; }) .replace(stylesRegex, (_, styleUrlsString: string) => { - console.log(styleUrlsString); // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"] // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] // or: styleUrls: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] // if `keepUrl` query parameter is set to true. - console.log(`${styleProperty}:${replaceStringsWithRequires(styleUrlsString)}`); return `${styleProperty}:${replaceStringsWithRequires(styleUrlsString)}`; }); } From 9b744f41d6c5e7abe17e50bcf86b70fe462b2c48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 2 Oct 2019 17:21:55 +0200 Subject: [PATCH 4/5] yarn.lock --- yarn.lock | 8 -------- 1 file changed, 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index bb375311b0d8..36780625cbda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4053,14 +4053,6 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= -"@types/loader-utils@^1.1.3": - version "1.1.3" - resolved "https://registry.yarnpkg.com/@types/loader-utils/-/loader-utils-1.1.3.tgz#82b9163f2ead596c68a8c03e450fbd6e089df401" - integrity sha512-euKGFr2oCB3ASBwG39CYJMR3N9T0nanVqXdiH7Zu/Nqddt6SmFRxytq/i2w9LQYNQekEtGBz+pE3qG6fQTNvRg== - dependencies: - "@types/node" "*" - "@types/webpack" "*" - "@types/lodash.zipobject@^4.1.4": version "4.1.6" resolved "https://registry.yarnpkg.com/@types/lodash.zipobject/-/lodash.zipobject-4.1.6.tgz#75e140f44ac7d7682a18d3aae8ee4594fad094d7" From 1c9320e986a45f19494d5125452e51c3652627e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 11 Oct 2019 16:59:49 +0200 Subject: [PATCH 5/5] remove angular2-template-loader dep --- app/angular/package.json | 1 - app/angular/src/server/framework-preset-angular.ts | 1 - yarn.lock | 9 +-------- 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/app/angular/package.json b/app/angular/package.json index 65912af58df8..6e505cca6a6e 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -36,7 +36,6 @@ "@storybook/addons": "5.3.0-alpha.17", "@storybook/core": "5.3.0-alpha.17", "@storybook/node-logger": "5.3.0-alpha.17", - "angular2-template-loader": "^0.6.2", "core-js": "^3.0.1", "fork-ts-checker-webpack-plugin": "^1.3.4", "global": "^4.3.2", diff --git a/app/angular/src/server/framework-preset-angular.ts b/app/angular/src/server/framework-preset-angular.ts index 5f28ea8cd797..8521d9c07b88 100644 --- a/app/angular/src/server/framework-preset-angular.ts +++ b/app/angular/src/server/framework-preset-angular.ts @@ -23,7 +23,6 @@ export function webpack( options: tsLoaderOptions, }, { loader: path.resolve(__dirname, 'ngx-template-loader') }, - // { loader: 'angular2-template-loader' }, ], }, { diff --git a/yarn.lock b/yarn.lock index b92463811388..4becb4eccdf3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4870,13 +4870,6 @@ analytics-node@3.3.0: remove-trailing-slash "^0.1.0" uuid "^3.2.1" -angular2-template-loader@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/angular2-template-loader/-/angular2-template-loader-0.6.2.tgz#c0d44e90fff0fac95e8b23f043acda7fd1c51d7c" - integrity sha1-wNROkP/w+sleiyPwQ6zaf9HFHXw= - dependencies: - loader-utils "^0.2.15" - ansi-align@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb" @@ -18277,7 +18270,7 @@ loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1. emojis-list "^2.0.0" json5 "^1.0.1" -loader-utils@^0.2.15, loader-utils@^0.2.16: +loader-utils@^0.2.16: version "0.2.17" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=