fix(patch): include project root, app root, and .bowerrc directories …

…for bower components #75
hotforfeature · Mar 12, 2018 · f59d62f · f59d62f
1 parent 1aceacc
commit f59d62f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -55,17 +55,6 @@ npm i -g bower
 bower init
 ```
 
-Create a `.bowerrc` file in your project root folder to move the default `bower_components/` directory to your app's root.
-
-`.bowerrc`
-```json
-{
-  "directory": "src/bower_components"
-}
-```
-
-You should not check in `src/bower_components/` to your project's repository. Add it to `.gitignore`. When cloning a fresh install, run `npm install && bower install`.
-
 ### 3. Load polyfills
 
 ```sh
@@ -81,15 +70,16 @@ Modify `.angular-cli.json` and add the following to your app's assets.
 {
   "apps": [
     {
-      ...
+      "root": "src",
       "assets": [
-        ...
-        "bower_components/webcomponentsjs/custom*.js",
-        "bower_components/webcomponentsjs/web*.js"
+        /* include other assets such as manifest.json */
+        "../bower_components/webcomponentsjs/custom*.js",
+        "../bower_components/webcomponentsjs/web*.js"
       ],
-      ...
+      /* remaining app config */
     }
-  ]
+  ],
+  /* remaining CLI config */
 }
 ```
 
@@ -106,7 +96,18 @@ Next, modify the `index.html` shell to include the polyfills.
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <!-- This div is needed when targeting ES5. 
+  It will add the adapter to browsers that support customElements, which 
+  require ES6 classes -->
+  <div id="ce-es5-shim">
+    <script type="text/javascript">
+      if (!window.customElements) {
+        var ceShimContainer = document.querySelector('#ce-es5-shim');
+        ceShimContainer.parentElement.removeChild(ceShimContainer);
+      }
+    </script>
+    <script type="text/javascript" src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  </div>
   <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
 </head>
 <body>
@@ -126,15 +127,24 @@ import { webcomponentsReady } from '@codebakery/origami';
 
 import { AppModule } from './app/app.module';
 
+webcomponentsReady().then(() => {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+});
+```
+
+#### Angular 4 templates
+
+Angular 4 consumes native `<template>` tags, which are commonly used in web components. Add the following configuration to the app's bootstrap to prevent this.
+
+`main.ts`
+```ts
 webcomponentsReady().then(() => {
   platformBrowserDynamic().bootstrapModule(AppModule, {
     enableLegacyTemplate: false // Required for Angular 4 to use native <template>s
   });
 });
 ```
 
-#### Angular 4 only
-
 `enableLegacyTemplate: false` will prevent Angular 4 from turning native `<template>` elements into `<ng-template>`s. Bootstrap options must also be specified in your `tsconfig.json` for Ahead-of-Time compilation.
 
 `tsconfig.app.json`
@@ -149,7 +159,7 @@ webcomponentsReady().then(() => {
 }
 ```
 
-Angular 5 defaults this value to `false`. You do not need to include it in your bootstrap function or `tsconfig.json`.
+Angular 5+ defaults this value to `false`. You do not need to include it in your bootstrap function or `tsconfig.json`.
 
 ### 4. Import Origami
 

diff --git a/patch-cli.js b/patch-cli.js
@@ -7,15 +7,36 @@ const stylesPath = path.resolve(__dirname, '../../@angular/cli/models/webpack-co
 let data = fs.readFileSync(commonPath, 'utf8');
 if (!data.includes('/* Origami Patched */')) {
   data = '/* Origami Patched */\n' + data;
-  data = data.replace(/(modules:\s*\[)/g, '$1path.resolve(appRoot, \'bower_components\'), ');
-  data = data.replace(/{.*html\$.*},/, `
+  data = data.replace(/(appRoot =.*;)/, `$1
+    /* origami patch start */
+    const bowerDirs = [
+      path.resolve(appRoot, 'bower_components'),
+      path.resolve(projectRoot, 'bower_components')
+    ];
+
+    try {
+      const bowerrc = JSON.parse(require('fs').readFileSync(path.resolve(projectRoot, './.bowerrc')));
+      if (bowerrc && bowerrc.directory) {
+        bowerDirs.push(path.resolve(projectRoot, bowerrc.directory));
+      }
+    } catch (e) {
+      // .bowerrc not present
+    }
+    /* origami patch end */
+  `);
+  data = data.replace(/(modules:\s*\[)/g, '$1/* origami patch start */...bowerDirs, /* origami patch end */');
+  data = data.replace(/({.*html\$.*}),/, `
+    /* origami patch start */
+    /*
+    $1
+    */
     // Use polymer-webpack-loader for element html files and raw-loader for all
     // other Angular html files
     {
       test: /\.html$/,
       loader: 'raw-loader',
       exclude: [
-        path.resolve(appRoot, 'bower_components'),
+        ...bowerDirs,
         path.resolve(appRoot, 'elements')
       ]
     },
@@ -31,7 +52,7 @@ if (!data.includes('/* Origami Patched */')) {
         { loader: 'polymer-webpack-loader' }
       ],
       include: [
-        path.resolve(appRoot, 'bower_components'),
+        ...bowerDirs,
         path.resolve(appRoot, 'elements')
       ]
     },
@@ -48,7 +69,7 @@ if (!data.includes('/* Origami Patched */')) {
         { loader: 'script-loader' }
       ],
       include: [
-        path.resolve(appRoot, 'bower_components'),
+        ...bowerDirs,
         path.resolve(appRoot, 'elements')
       ]
     },
@@ -64,6 +85,7 @@ if (!data.includes('/* Origami Patched */')) {
         }
       ]
     }],
+    /* origami patch end */
   `);
 
   fs.writeFileSync(commonPath, data);