Typescript transformer which adds references to inner JSX components to parent React components. 

florianrappl

herrkris

typescript-plugin-inner-jsx

- Inner object now contains components which come from parent function parameters (HOC components).

Object.defineProperty(exports, "__esModule", { value: true });

const typescript_1 = require("typescript");

 * Gets import names if node is an import declaration.

 * import { var1, var2 as var3 } from 'somewhere';

 * import defaultVariable from 'somelib';

    if (typescript_1.isImportDeclaration(node) && node.importClause) {

            imports[importClause.name.text] = importClause.name;

        if (importClause.namedBindings) {

            const { namedBindings } = importClause;

            if (typescript_1.isNamespaceImport(namedBindings) && namedBindings.name.text !== 'from') {

                imports[namedBindings.name.text] = namedBindings.name;

            else if (typescript_1.isNamedImports(namedBindings)) {

                namedBindings.elements.forEach(importSpecifier => {

                    imports[importSpecifier.name.text] = importSpecifier.name;

    if (node && (typescript_1.isFunctionExpression(node) || typescript_1.isArrowFunction(node))) {

        node.parameters.forEach(parameter => {

            if (typescript_1.isIdentifier(parameter.name)) {

                parameters[parameter.name.text] = parameter.name;

    if (typescript_1.isVariableStatement(node)) {

        node.declarationList.declarations.forEach(({ name }) => {

            if (typescript_1.isIdentifier(name)) {

                variables[name.text] = name;

            else if (typescript_1.isObjectBindingPattern(name)) {

                name.elements.forEach(({ name }) => {

                    if (typescript_1.isIdentifier(name)) {

                        variables[name.text] = name;

 * If function declaration then reutrns function name

    if (typescript_1.isFunctionDeclaration(node) && node.name) {

 * If class decalration then return class name

    if (typescript_1.isClassDeclaration(node) && node.name) {

 * class SomeComponentName extends React.* {

    if (typescript_1.isClassDeclaration(node) &&

        node.heritageClauses[0].types[0].expression &&

        typescript_1.isPropertyAccessExpression(node.heritageClauses[0].types[0].expression) &&

        typescript_1.isIdentifier(node.heritageClauses[0].types[0].expression.expression) &&

        node.heritageClauses[0].types[0].expression.expression.text === 'React') {

 * const SomeComponent: React.* = () => ....

 * let SomeComponent2: React.* = function() {}

function isReactFunctionDeclaration(node) {

    if (typescript_1.isVariableStatement(node) &&

        node.declarationList.declarations &&

        node.declarationList.declarations.length === 1) {

        const declaration = node.declarationList.declarations[0];

        const { type, initializer } = declaration;

            (typescript_1.isArrowFunction(initializer) || typescript_1.isFunctionExpression(initializer)) &&

            typescript_1.isTypeReferenceNode(type) &&

            typescript_1.isQualifiedName(type.typeName) &&

            typescript_1.isIdentifier(type.typeName.left) &&

            type.typeName.left.text === 'React') {

 * Gets all variable, function, class declaration names

 * which are in the same or higher scope of the node.

        const functionName = getFunctionName(cbNode);

        dict = Object.assign({}, dict, getImports(cbNode), getVariables(cbNode), getScope(node.parent));

        dict = Object.assign({}, dict, getImports(cbNode), getVariables(cbNode), getFunctionParameters(cbNode.parent));

    dict = Object.assign({}, dict, getScope(node.parent));

 * Creates an inner object from available jsx tags list:

 *     get A() { return A as typeof A; },

 *     get B() { return B as typeof B; },

 *     get C() { return C as typeof C; },

    return typescript_1.createObjectLiteral(jsxTags.map(tag => typescript_1.createGetAccessor(undefined, undefined, tag.text, [], undefined, typescript_1.createBlock([typescript_1.createReturn(typescript_1.createAsExpression(tag, typescript_1.createTypeQueryNode(tag)))]))), true);

 * Identifies if node is react class or variable statement.

    if (typescript_1.isClassDeclaration(node)) {

    else if (typescript_1.isVariableStatement(node)) {

        return isReactFunctionDeclaration(node);

 * Visits each node and finds JSX tags. Then assigns them to Map() where keys are references to

 * React class/variable declarations which contain these JSX tags. Assigns only those tags which lay

 * in the same or higher scope as React class/variable declaration.

function buildJsxMap(node, reactStatement, scopeVariables, result = new Map()) {

        if (scopeVariables && reactStatement && (typescript_1.isJsxOpeningElement(child) || typescript_1.isJsxSelfClosingElement(child))) {

            const tagName = child.tagName;

            if (typescript_1.isIdentifier(tagName)) {

                const { text } = tagName;

                if (scopeVariables[text]) {

                    result.set(reactStatement, Object.assign({}, result.get(reactStatement), { [text]: scopeVariables[text] }));

        else if (isReactStatement(child)) {

            buildJsxMap(child, child, getScope(child), result);

            buildJsxMap(child, reactStatement, scopeVariables, result);

 * Adds static inner object to React class.

 * class Component extends React.Component {

 * ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 *       get Component(){ return Component; }

function updateReactClassStatement(statement, inner) {

    const property = typescript_1.createProperty(undefined, [typescript_1.createToken(typescript_1.SyntaxKind.StaticKeyword)], 'inner', undefined, undefined, inner);

    const members = typescript_1.createNodeArray([...statement.members, property]);

    return typescript_1.updateClassDeclaration(statement, statement.decorators, statement.modifiers, statement.name, statement.typeParameters, statement.heritageClauses, members);

 * const Component: React.SFC<{}> = () => <InnerComponent />

 * const Component = Object.assign(() => <InnerComponent />) as React.SFC<{}>, { inner: { get Component(){ return Component; } } } }

function updateReactVariableStatement(statement, inner) {

  "description": "Typescript transformer which adds references to inner JSX components to parent React components.",

    "url": "git@github.com:ZEISS/typescript-plugin-inner-jsx.git"

    "build:prod": "tsc --outDir dist --sourceMap false",

    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",

    "test:unit": "jest --config ./jest.config.json",

    "test:watch": "npm run test:baselines -- --watch",

    "test": "npm run lint && npm run test:unit",

    "watch": "nodemon --exec ts-node -- src/index.ts",

    "prettier": "prettier --config prettier.config.js --write src/**/*.{ts,tsx}"

    "build-with-transform-jsx": "./bin/build"

    "@phenomnomnominal/tsquery": "^3.0.0",

[![Build Status](https://travis-ci.org/ZEISS/typescript-plugin-inner-jsx.svg?branch=master)](https://travis-ci.org/ZEISS/typescript-plugin-inner-jsx)

[![NPM](https://img.shields.io/npm/v/typescript-plugin-inner-jsx.svg)](https://www.npmjs.com/package/typescript-plugin-inner-jsx)

[![Node](https://img.shields.io/node/v/typescript-plugin-inner-jsx.svg)](https://www.npmjs.com/package/typescript-plugin-inner-jsx)

[![GitHub tag](https://img.shields.io/github/tag/ZEISS/typescript-plugin-inner-jsx.svg)](https://github.com/ZEISS/typescript-plugin-inner-jsx/releases)

[![GitHub issues](https://img.shields.io/github/issues/ZEISS/typescript-plugin-inner-jsx.svg)](https://github.com/ZEISS/typescript-plugin-inner-jsx/issues)

[![CLA assistant](https://cla-assistant.io/readme/badge/ZEISS/precise-ui)](https://cla-assistant.io/ZEISS/precise-ui)

TypeScript transformer to extract compile-time render information for runtime use. Available on npm as `typescript-plugin-inner-jsx`.

This is a TypeScript transformer that searches for JSX tags inside of React components and attaches them to the components declarations in which way exposes inner components structure to the consumer.

const SomeComponent: React.SFC<SomeComponentProps> = () => (

    readonly InnerComponent1: typeof InnerComponent1;

    readonly InnerComponent2 typeof InnerComponent2;

The following command adds the packages to the project as a development-time dependency:

`npm i typescript-plugin-inner-jsx --dev`

Right now, one of the rough edges of TypeScript custom transforms is in how they are used ([hopefully to be resolved soon](https://github.com/Microsoft/TypeScript/issues/14419)). At least at the time of writing (December 2018), there are no compiler options (for command line or tsconfig.json) for specifying transforms, so typically the compiler API must be used to run transforms.

To build with transformer please use provided custom compiler `bin/build`.

To build with transformer please use provided custom compiler `build-with-transform-jsx`.

./node_modules/typescript-plugin-inner-jsx/bin/build -t es5 --outDir dist/es5 --declaration --inlineSourceMap --inlineSources --config ./tsconfig.json

build-with-transform-jsx -t es5 --outDir dist/es5 --declaration --inlineSourceMap --inlineSources --config ./tsconfig.json

This section describes how to integrate the plugin into the build/bundling process driven by [**Webpack**](https://webpack.js.org/) and its TypeScript loaders.

There are two popular TypeScript loaders that support specifying custom transformers:

- [**awesome-typescript-loader**](https://github.com/s-panferov/awesome-typescript-loader), supports custom transformers since v3.1.3

- [**ts-loader**](https://github.com/TypeStrong/ts-loader), supports custom transformers since v2.2.0

Both loaders use the same setting `getCustomTransformers` which is an optional function that returns `{ before?: Transformer[], after?: Transformer[] }`.

In order to inject the transformer into compilation, add it to `before` transformers array, like: `{ before: [innerJsxTransformer] }`.

In the `webpack.config.js` file in the section where **awesome-typescript-loader** is configured as a loader:

// 1. import default from the plugin module

const createInnerJsxTransformer = require('typescript-plugin-inner-jsx').default;

// the factory additionally accepts an options object which described below

const innerJsxTransformer = createInnerJsxTransformer();

// 3. add getCustomTransformer method to the loader config

        loader: 'awesome-typescript-loader',

          getCustomTransformers: () => ({ before: [innerJsxTransformer] })

Please note, that in the development mode, `awesome-typescript-loader` uses multiple separate processes to speed up compilation. In that mode the above configuration cannot work because functions, which `getCustomTransformers` is, are not transferrable between processes.

To solve this please refer to [Forked process configuration](#forked-process-configuration) section.

In the `webpack.config.js` file in the section where **ts-loader** is configured as a loader:

Please note, when `awesome-typescript-loader` is used with `HappyPack` or `thread-loader`, they use multiple separate processes to speed up compilation. In that mode the above configuration cannot work because functions, which `getCustomTransformers` is, are not transferrable between processes.

function createTransformer(): TransformerFactory<SourceFile>;

A factory that creates an instance of a TypeScript transformer (which is a factory itself).

Precise UI is released using the MIT license. For more information see the [license file](LICENSE).

		# Typescript Inner JSX Plugin Changelog

		## 0.1.5

		- Inner object now contains components which come from parent function parameters (HOC components).

		## 0.1.4
		@@ -4,0 +8,0 @@

		{
		"name": "typescript-plugin-inner-jsx",
		"version": "0.1.4",
		"version": "0.1.5",
		"description": "Typescript transformer which adds references to inner JSX components to parent React components.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

		@@ -57,7 +57,7 @@ # Typescript Inner JSX Plugin

		To build with transformer please use provided custom compiler `bin/build`.
		To build with transformer please use provided custom compiler `build-with-transform-jsx`.

		Example:
		```
		./node_modules/typescript-plugin-inner-jsx/bin/build -t es5 --outDir dist/es5 --declaration --inlineSourceMap --inlineSources --config ./tsconfig.json
		build-with-transform-jsx -t es5 --outDir dist/es5 --declaration --inlineSourceMap --inlineSources --config ./tsconfig.json
		```
		@@ -64,0 +64,0 @@

		@@ -34,2 +34,17 @@ "use strict";
		/**
		* Gets function parameters
		* @param node
		*/
		function getFunctionParameters(node) {
		const parameters = {};
		if (node && (typescript_1.isFunctionExpression(node) \|\| typescript_1.isArrowFunction(node))) {
		node.parameters.forEach(parameter => {
		if (typescript_1.isIdentifier(parameter.name)) {
		parameters[parameter.name.text] = parameter.name;
		}
		});
		}
		return parameters;
		}
		/**
		* Gets all node's variable names
		@@ -142,4 +157,5 @@ * @param node
		}
		dict = Object.assign({}, dict, getImports(cbNode), getVariables(cbNode), getScope(node.parent));
		dict = Object.assign({}, dict, getImports(cbNode), getVariables(cbNode), getFunctionParameters(cbNode.parent));
		});
		dict = Object.assign({}, dict, getScope(node.parent));
		return dict;
		@@ -146,0 +162,0 @@ }

Improved metrics