feat: add tsx/jsx support (#228)

Adding the ability to specify a jsx compiler option in the ng-package.json schema. This allows for libraries to bundle tsx/jsx files, and take depedencies on vendors like React components

Author: KyleBastien

README.md

@@ -115,17 +115,17 @@ All you have to do is create a `package.json` file and put it where you want a s
 One way this can be done is by mimicking the folder structure of the following example which has a testing entry point in addition to its main entry point.
 
 ```
-my_package  
+my_package
 ├── src
-|   └── *.ts  
-├── public_api.ts  
-├── ng-package.json   
+|   └── *.ts
+├── public_api.ts
+├── ng-package.json
 ├── package.json
-├── testing   
+├── testing
     ├── src
-    |   └── *.ts   
-    ├── public_api.ts  
-    └── package.json  
+    |   └── *.ts
+    ├── public_api.ts
+    └── package.json
 ```
 
 The contents of the secondary `package.json` can be as simple as:
@@ -135,7 +135,7 @@ The contents of the secondary `package.json` can be as simple as:
 }
 ```
 
-No, that is not a typo. No name is required. No version is required. 
+No, that is not a typo. No name is required. No version is required.
 It's all handled for you by ng-packagr!
 When built, the primary entry is imported with `@my/library` and the secondary entry with `@my/library/testing`.
 
@@ -154,6 +154,29 @@ For example, the following would use `index.ts` as the secondary entry point:
 }
 ```
 
+##### What if I want to use React Components?
+
+If you have React Components that you're using in your library, and want to use proper JSX/TSX syntax in order to
+construct them, you can set the `jsx` flag for your library through `ng-package` like so:
+
+```json
+{
+  "$schema": "../../../src/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public_api.ts",
+    "externals": {
+      "react": "React",
+      "react-dom": "ReactDOM"
+    },
+    "jsx": "react"
+  }
+}
+```
+
+The `jsx` flag will accept anything that `tsconfig` accepts, more information [here](https://www.typescriptlang.org/docs/handbook/jsx.html).
+
+Note: Don't forget to include `react` and `react-dom` in your `externals` so that you're not bundling those dependencies.
+
 
 ## Further documentation
 

integration/samples/jsx/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../../src/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public_api.ts",
+    "externals": {
+      "react": "React",
+      "react-dom": "ReactDOM"
+    },
+    "jsx": "react"
+  }
+}

integration/samples/jsx/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@sample/jsx",
+  "description": "A sample library with jsx/tsx dependencies.",
+  "version": "1.0.0-pre.0",
+  "private": true,
+  "repository": "https://github.com/dherges/ng-packagr.git",
+  "peerDependencies": {
+    "@angular/common": "^4.1.3",
+    "@angular/core": "^4.1.3",
+    "@angular/router": "^4.1.3",
+    "rxjs": "^5.0.1",
+    "zone.js": "^0.8.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  }
+}

integration/samples/jsx/public_api.ts

@@ -0,0 +1,2 @@
+export * from './src/react-integration.component';
+export * from './src/react-integration.module';

integration/samples/jsx/src/react-integration.component.tsx

@@ -0,0 +1,34 @@
+import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// Simulating the use of an external library that contains React Components
+class ReactLabel extends React.Component {
+  render() {
+    return (
+      <label>Look JSX!</label>
+    );
+  }
+}
+
+@Component({
+  selector: 'react-integration-test',
+  template: `
+    <div></div>
+  `,
+  styles: [``]
+})
+export class AngularReactLabel implements AfterViewInit {
+
+  constructor(private hostRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    const hostElement = this.hostRef.nativeElement;
+    const LabelToShow = () => (
+      // Actual use here, might include data-binding in a real world scenario
+      <ReactLabel></ReactLabel>
+    );
+    ReactDOM.render(<LabelToShow />, hostElement);
+  }
+
+}

integration/samples/jsx/src/react-integration.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AngularReactLabel } from './react-integration.component';
+
+@NgModule({
+  declarations: [ AngularReactLabel ],
+  imports: [ CommonModule ],
+  exports: [ AngularReactLabel ],
+  providers: [],
+})
+export class ReactIntegrationModule {}

package.json

@@ -68,6 +68,8 @@
     "@types/lodash": "^4.14.77",
     "@types/mocha": "^2.2.41",
     "@types/node": "^8.0.0",
+    "@types/react": "^16.0.19",
+    "@types/react-dom": "^16.0.2",
     "@types/sinon": "^2.3.0",
     "chai": "^4.0.1",
     "copyfiles": "^1.2.0",
@@ -77,6 +79,8 @@
     "jasmine": "^2.6.0",
     "json-schema-to-typescript": "^4.4.0",
     "mocha": "^4.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rxjs": "^5.4.0",
     "sinon": "^4.0.0",
     "standard-version": "^4.0.0",

src/lib/model/ng-package-data.ts

@@ -15,6 +15,7 @@ export class NgPackageData {
   public readonly destinationPath: string;
   public readonly buildDirectory: string;
   public readonly libExternals: any;
+  public readonly jsxConfig?: string;
 
   constructor(
     /**
@@ -53,6 +54,7 @@ export class NgPackageData {
       this.libExternals = ngPackageConfig.lib.externals;
       this.flatModuleFileName = ngPackageConfig.lib.flatModuleFile;
       this.entryFile = ngPackageConfig.lib.entryFile;
+      this.jsxConfig = ngPackageConfig.lib.jsx;
     }
 
     if (!this.libExternals) {

src/lib/steps/assets.ts

@@ -29,7 +29,7 @@ export const processAssets = (src: string, dest: string): Promise<any> => {
   return new Promise((resolve, reject) => {
     debug(`processAssets ${src} to ${dest}`);
 
-    vfs.src([`${src}/**/*.ts`, '!node_modules/**/*', '!${dest}/**/*'])
+    vfs.src([`${src}/**/*.ts`, `${src}/**/*.tsx`, `${src}/**/*.jsx`, '!node_modules/**/*', '!${dest}/**/*'])
       .pipe(inlineNg2Template({
         base: `${src}`,
         useRelativePaths: true,

src/lib/steps/ngc.ts

@@ -17,6 +17,11 @@ async function prepareTsConfig(ngPkg: NgPackageData, outFile: string): Promise<v
 
   tsConfig['files'] = [ ngPkg.entryFile ];
 
+  if (ngPkg.jsxConfig) {
+    debug('prepareTsConfig: Applying jsx flag to tsconfig ' + ngPkg.jsxConfig);
+    tsConfig['compilerOptions']['jsx'] = ngPkg.jsxConfig;
+  }
+
   await writeJson(outFile, tsConfig);
 }