@handbook/typescript-source-sampler NPM

`@handbook/typescript-source-sampler`

What does this do?

You can pickup items on your typescript source code.

When you have a code like below.

/**
 * type
 */
export interface Type {
  /** a */
  a: string;
  /** b */
  b: number;
}

/**
 * class
 */
export class Class {
  constructor() {
    console.log('constructor');
  }

  foo = () => {};

  bar() {}
}

/**
 * function
 */
export function hello() {
  return 'Hello World!';
}

You can get Class code only

import { source } from '@handbook/source';
import { sampling } from '@handbook/typescript-source-sampler';

const module = source(require('./source/hello'));
const samples = sampling({ source: module.source, samples: ['Class'] });

console.log(samples.get('Class'));

It will print without body statements.

/**
 * class
 */
export class Class {}

__tests__/sampling.test.ts

import { sampling } from '@handbook/typescript-source-sampler';
import prettier from 'prettier';

const source: string = `
/**
 * Foo....
 */
export interface X {
  a: string;
  b: number;
}

export interface Y {
  /** foo... */
  a: string;
  
  /** bar... */
  b: number;
}

interface Z {
}

/**
 * hello?
 */
export function x({ a, b }: { a: number, b: number }): number {
  console.log('hello world?');
  return a + b;
}

export function y() {
  console.log('hello world?');
}

/**
 * ????
 */
export const q = () => () => {
  console.log('xxx');
}

/**
 * hello?
 */
function z() {
  console.log('hello world?');
}

/** skjsksjk */
export const xx: string = 'aaaa';

export const yy: number = 12323;

const zz: string = 'sss';

/** kkdkdjdk */
export const nodes = <div>Hello?</div>;

/** fldjkjek */
export class Test {
  constructor(hello: string) {
  }
  
  function x(): string {
    return 'x';
  }
  
  y = () => {
    return 'y';
  }
}
`;

function format(source: string): string {
  return prettier.format(source, { parser: 'typescript' });
}

describe('@handbook/typescript-source-sampler', () => {
  test('should get the interface sample', () => {
    // Act
    const result = sampling({ samples: ['X'], source });

    // Assert
    expect(format(result.get('X') ?? '')).toBe(
      format(`
      /**
       * Foo....
       */
      export interface X {
        a: string;
        b: number;
      }
      `),
    );
  });

  test('should get the class sample', () => {
    // Act
    const result = sampling({ samples: ['Test'], source });

    // Assert
    expect(format(result.get('Test') ?? '')).toBe(
      format(`
      /** fldjkjek */
      export class Test {}
      `),
    );
  });

  test('should get the function sample', () => {
    // Act
    const result = sampling({ samples: ['x'], source });

    // Assert
    expect(format(result.get('x') ?? '')).toBe(
      format(`
      /**
       * hello?
       */
      export function x({ a, b }: { a: number, b: number }): number {};
      `),
    );
  });

  test('should get the variable sample', () => {
    // Act
    const result = sampling({ samples: ['xx'], source });

    // Assert
    expect(format(result.get('xx') ?? '')).toBe(
      format(`
      /** skjsksjk */
      export const xx: string = 'aaaa';
      `),
    );
  });

  test('should get arrow function', () => {
    // Act
    const result = sampling({ samples: ['q'], source });

    // Assert
    expect(format(result.get('q') ?? '')).toBe(
      format(`
      /**
       * ????
       */
      export const q = () => () => {}
      `),
    );
  });
});

API

index.ts

/**
 * pick source codes
 *
 * @return Map<sample name, source code>
 */
export function sampling<S extends string>({
  source,
  samples,
}: SamplingParams<S>): Map<S, string> {}

export interface SamplingParams<S extends string> {
  /** typescript source code */
  source: string;
  /**
   * item names
   *
   * `Name` of `export interface Name {}`
   *
   * Please note that the names must be `export` items
   */
  samples: S[];
}

When you use to Web App

Note that if you use Webpack to Web App, typescript makes a problem to you Webpack building. typescript has a considerable size, making it slower to build performance.

Please add typescript to externals of your Webpack configuration.

// your webpack.config.js
module.exports = {
  externals: {
    typescript: 'ts',
  },
};

And use CDN version typescript

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.0.2/typescript.min.js"></script>
  </head>

  <body></body>
</html>