Git Product home page Git Product logo

patternplate-transform-typescript's Introduction

TypeScript transform for patternplate patterns

patternplate-transform-typescript

GitHub license npm Travis Coverage Status Commitizen friendly Standard Version

Installation

npm install --save-dev typescript patternplate-transform-typescript

Usage

// configuration/patternplate-server/transforms.js
module.exports = {
  'typescript': {
    inFormat: 'tsx',
    outFormat: 'js',
    opts: {
      target: 'es5',
      module: 'commonjs',
      jsx: 'react'
    }
  },
  'react-to-markup': {
    inFormat: 'js',
    outFormat: 'html',
    opts: {
      automount: true
    }
  }
};

// configuration/patternplate-server/pattern.js
module.exports = {
  formats: {
    js: {
      transforms: ['typescript', 'react-to-markup']
    }
  }
};

Note: Currently there are a few transpiler/compiler defaults which are not overridable


Built by (c) Markus Wolf. Released under the MIT license.

patternplate-transform-typescript's People

Contributors

knisterpeter avatar marcelkottmann avatar marionebl avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

patternplate-transform-typescript's Issues

Cannot find module 'Pattern'

Using the documented way to import the current pattern to use it in a demo fails, because module 'Pattern' cannot be resolved.

import Button from 'Pattern'

leads to

demo.tsx (2,24): Cannot find module 'Pattern'

Also imports from referenced Patterns in pattern.json, lead to a console-error, which are apparently irrelevant, because the Pattern is displayed correctly in patternplate frontend.

Emit error information

For patterns that do compile, but have an error during declaration generation, the generation completes without an error, but sadly without a generated index.d.ts file.

type RGB = [number, number, number];

type ColorOptions = {
  displayName: string;
  rgb: RGB;
};

export default ColorOptions;

This transpiles correctly to a nearly empty index.js with tsc on the commandline. Generating the declaration with -d option fails correctly, because of
error TS4081: Exported type alias 'ColorOptions' has or is using private name 'RGB'.

patternplate-transform-typescript does not emit this error (console/exit code) and generates no d.ts-file silently.

Compiled d.ts do not correspond the pattern implementation

We are trying to execute the build task. Some patterns (not all of them) are not receiving the proper typing definitions. This includes the module exports too.

Dev Pattern

This is an example of one of the develop patterns.
pattern-compiled

Compiled Pattern

This would be the compilation result.
pattern-compiled
As you can see, the exports do not include the typings of the components. What might be important to note is that the compiled d.ts is actually the typing and exports of a completely different component (see below screenshot).

screen shot 2017-05-08 at 18 44 07

Fails for external packages shipping with `index.d.ts` files

For external packages shipping with index.d.ts files such as [email protected] transform-typescript produces the following error:

Cannot read property 'pattern' of undefined
at ~/node_modules/patternplate-transform-typescript/dist/transpiler.js:82:58
at Array.map (native)

Digging in a bit deeper reveals this is caused by transform-typescript trying to access properties on a null Object obtained by accessing ~/node_modules/styled-components/typings/styled-components.d.ts on map in compilerHost.resolveModuleNames.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.