This project is a tool to convert a PolymerTS element into a polymer-decorator element.
NOTE: This project is still under active development and no where near ready for use.
npm install --save-dev git+https://github.com/RedPillNow/polymerts-to-polymer-decorators.git
This project is meant to convert a Polymer 1.x PolymerTS Element into an element which is using Polmymer 2.4 (or greater) polymer-decorators instead. This project came from the need to keep an enterprise's custom elements current with the most recent stable version of Polymer.
It was also decided that this tool should support more than just a conversion to polymer-decorators, but also provide documentation for a PolymerTS project via iron-component-page or convert to just plain-jane Polymer.
We make a few assumptions while transforming PolymerTS files to use polymer-decorators. These are listed below:
- Declared Properties are defined before all other types of decorated items (i.e.
Observer
,Listener
,Computed
) - If there is a
ready
function, it is defined before alllistener
decorated items
This project is still in active development. As such there are certain limitations which will eventually be addressed:
- Behavior
- Behaviors are NOT transformed to a Mixin
- Polymer 1.0 Deprecated methods, properties and elements
- We don't currently change these to the Polymer 2.0 supported pattern(s)
Documentation is included in the doc
directory. This documentation is generated with TypeDoc
const toPolymerDecorators = require('polymerts-to-polymer-decorators');
toPolymerDecorators.transformPolymerTs('src/**/*.ts', null);
const toPolymerDecorators = require('polymerts-to-polymer-decorators');
let options = {
changeInline: true,
useMetadataReflection: true,
glob: {
ignore: [
'test/**/*.*',
'bower_components/**/*.*',
'node_modules/**/*.*'
]
}
}
toPolymerDecorators.transformPolymerTs('src/**/*.ts', options);
The following options are available to configure how to Transform your source files:
Option | Type | Default | Description |
---|---|---|---|
changeInline | boolean | false | Set to true to overwrite the original source file |
outputPath | string | ./polymerTsConvert/ | The path where you want the converted files placed |
useMetadataReflection | boolean | false | Set to true to use the Metadata Reflection API |
conversionType | string | polymer-decorators | Currently not used |
targetPolymerVersion | number | 2 | The target version of Polymer to convert your source files to. Currently only version 2 is supported |
moveSinglePropertyObserversToProperty | boolean | true | If an @observe tag is only watching 1 property add an observe property to the property it's observing and remove the @observe decorator if true |
applyDeclarativeEventListenersMixin | boolean | true | If true will add the DeclarativeEventListenersMixin to the class |
applyGestureEventListenersMixin | boolean | false | If true will add the GestureEventListenersMixin to the class |
pathToBowerComponents | string | ../../bower_components | Path to the bower_components directory |
changeComponentClassExtension | boolean | false | If true and the component class doesn't extend Polymer.Element the extension class will be replaced with Polymer.Element |
glob | object | { ignore:[ "bower_components/**/*.*", "node_modules/**/*.*" ] } |
Files we should ignore |
compiler | object | { stripInternal:true, target:ts.ScriptTarget.ES5, experimentalDecorators:true, listEmittedFiles:true } |
TypeScript Compiler options |
The following NPM scripts are available:
compile
- Run the TypeScript compilerbuild
- Will build the source and make ready for distributiondocs
- Will generate the TypeDoc documententation