chore(react): cleans up polyfill logic and provide custom-element pol…

…yfills when choosing wc preset (nrwl#2347) Closes nrwl#1250
juristr · Jan 20, 2020 · f7590cd · f7590cd
1 parent a0299cb
commit f7590cd
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 49 deletions.
diff --git a/packages/react/src/schematics/application/application.ts b/packages/react/src/schematics/application/application.ts
@@ -76,7 +76,7 @@ export default function(schema: Schema): Rule {
       updateJestConfig(options),
       addStyledModuleDependencies(options),
       addRouting(options, context),
-      addBabel(options),
+      addBabelPresetForReact(options),
       setDefaults(options),
       formatFiles(options)
     ]);
@@ -273,49 +273,13 @@ function addRouting(
     : noop();
 }
 
-function addBabel(options: NormalizedSchema): Rule {
-  return chain([
-    addDepsToPackageJson(
-      {},
-      {
-        '@babel/preset-react': babelPresetReactVersion
-      }
-    ),
-    addPolyfillForBabel(options)
-  ]);
-}
-
-function addPolyfillForBabel(options: NormalizedSchema): Rule {
-  return (host: Tree) => {
-    const polyfillsPath = join(
-      options.appProjectRoot,
-      maybeJs(options, `src/polyfills.ts`)
-    );
-    const polyfillsSource = host.read(polyfillsPath)!.toString('utf-8');
-    const polyfillsSourceFile = ts.createSourceFile(
-      polyfillsPath,
-      polyfillsSource,
-      ts.ScriptTarget.Latest,
-      true
-    );
-
-    insert(host, polyfillsPath, [
-      ...addGlobal(
-        polyfillsSourceFile,
-        polyfillsPath,
-        `
-/*
- * Polyfill stable language features.
- * It's recommended to use @babel/preset-env and browserslist
- * to only include the polyfills necessary for the target browsers.
- */
-import 'core-js/stable';
-
-import 'regenerator-runtime/runtime';
-`
-      )
-    ]);
-  };
+function addBabelPresetForReact(options: NormalizedSchema): Rule {
+  return addDepsToPackageJson(
+    {},
+    {
+      '@babel/preset-react': babelPresetReactVersion
+    }
+  );
 }
 
 function setDefaults(options: NormalizedSchema): Rule {

diff --git a/packages/react/src/schematics/application/files/app/src/polyfills.ts__tmpl__ b/packages/react/src/schematics/application/files/app/src/polyfills.ts__tmpl__
@@ -1,3 +1,7 @@
 /**
- * This file contains polyfills loaded on all browsers
- **/
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
diff --git a/packages/web/src/schematics/application/files/app/src/polyfills.ts__tmpl__ b/packages/web/src/schematics/application/files/app/src/polyfills.ts__tmpl__
@@ -1,3 +1,7 @@
 /**
- * This file contains polyfills loaded on all browsers
- **/
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
diff --git a/packages/workspace/src/schematics/preset/preset.ts b/packages/workspace/src/schematics/preset/preset.ts
@@ -10,6 +10,8 @@ import {
 import { Schema } from './schema';
 
 import {
+  addDepsToPackageJson,
+  addGlobal,
   insert,
   insertImport,
   updateWorkspaceInTree
@@ -18,7 +20,7 @@ import {
 import { formatFiles } from '../../utils/rules/format-files';
 
 import * as ts from 'typescript';
-import { toFileName } from '@nrwl/workspace/src/utils/name-utils';
+import { toFileName } from '../../utils/name-utils';
 
 export default function(options: Schema): Rule {
   options = normalizeOptions(options);
@@ -85,6 +87,16 @@ function createPreset(options: Schema): Rule {
         },
         { interactive: false }
       ),
+      addDepsToPackageJson(
+        {},
+        {
+          '@webcomponents/custom-elements': '1.3.2'
+        }
+      ),
+      addPolyfills(`apps/${toFileName(options.name)}/src/polyfills.ts`, [
+        '@webcomponents/custom-elements/custom-elements.min',
+        '@webcomponents/custom-elements/src/native-shim'
+      ]),
       setDefaultCollection('@nrwl/web')
     ]);
   } else if (options.preset === 'angular-nest') {
@@ -365,6 +377,26 @@ function setDefaultCollection(defaultCollection: string) {
   });
 }
 
+function addPolyfills(polyfillsPath: string, polyfills: string[]): Rule {
+  return (host: Tree) => {
+    const polyfillsSource = host.read(polyfillsPath)!.toString('utf-8');
+    const polyfillsSourceFile = ts.createSourceFile(
+      polyfillsPath,
+      polyfillsSource,
+      ts.ScriptTarget.Latest,
+      true
+    );
+
+    insert(host, polyfillsPath, [
+      ...addGlobal(
+        polyfillsSourceFile,
+        polyfillsPath,
+        `\n${polyfills.map(im => `import '${im}';`).join('\n')}\n`
+      )
+    ]);
+  };
+}
+
 function normalizeOptions(options: Schema): Schema {
   options.name = toFileName(options.name);
   return options;