diff --git a/app/angular/package.json b/app/angular/package.json index d424df372466..426bb0332883 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -36,7 +36,6 @@ "@storybook/addons": "5.2.3", "@storybook/core": "5.2.3", "@storybook/node-logger": "5.2.3", - "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 22b8e00efe7f..8521d9c07b88 100644 --- a/app/angular/src/server/framework-preset-angular.ts +++ b/app/angular/src/server/framework-preset-angular.ts @@ -22,7 +22,7 @@ export function webpack( loader: 'ts-loader', options: tsLoaderOptions, }, - { loader: 'angular2-template-loader' }, + { loader: path.resolve(__dirname, 'ngx-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..6e2d2381ee14 --- /dev/null +++ b/app/angular/src/server/ngx-template-loader/index.ts @@ -0,0 +1,48 @@ +/* + * 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 + */ + +// 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; + +const replaceStringsWithRequires = (string: string) => { + return string.replace(stringRegex, (match, quote, url) => { + let newUrl = url; + if (url.charAt(0) !== '.') { + newUrl = `./${url}`; + } + 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} : ''`; + }); +}; + +export default function(source: string) { + const styleProperty = 'styles'; + const templateProperty = 'template'; + + 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(templateUrlString)}`; + }) + .replace(stylesRegex, (_, styleUrlsString: string) => { + // 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(styleUrlsString)}`; + }); +} diff --git a/yarn.lock b/yarn.lock index d39ca74f9cad..bff16628e45b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5120,13 +5120,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" @@ -18479,7 +18472,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=