Update types publishing, readme and documentation
This commit is contained in:
Nev Wylie
Родитель
6219de988e
Коммит
55263b349a
92
README.md
92
README.md
|
|
@ -15,13 +15,6 @@ While this does require some additional CPU and memory at the point of creating
|
|||
* Smaller code as the internal properties and methods when defined within the instance can be minified.
|
||||
* As the resulting generated code can be better minified this *should* result in a smaller minified result and therefore better load times for your users.
|
||||
|
||||
## When to use
|
||||
While this helper was originally created to support better minification for generated code via TypeScript, it is not limited to only being used from within TypeScript.
|
||||
|
||||
And as with including any additional code into your project there is a trade off that you need to make before using this helper which is the size of the additional code of this utility vs the minification gains that *may* be obtained. As in most cases of creating JavaScript code for better minfication if your code doesn't expose or provide a lot of public methods or only uses un-minifiable "names" less than 2 times then the potential gains may not be worth the additional bytes.
|
||||
|
||||
And yes at the end of the day, if you are creating JS classes directly in Javascript you *should* be able to create a simplier one-off solution that would result in smaller output as this project needs to be generic to be able to support all use-cases.
|
||||
|
||||
## Basic Usage
|
||||
```typescript
|
||||
import dynamicProto from "@microsoft/dynamicproto-js";
|
||||
|
|
@ -84,12 +77,87 @@ If you are changing package versions or adding/removing any package dependencies
|
|||
|
||||
## Performance
|
||||
|
||||
The minified version of this adds a negligible amount of code and loadtime to your source code and by using this library your generated code can be better minified as it removes most references of Classname.prototype.XXX methods from the generated code.
|
||||
The minified version of this adds a negligible amount of code and loadtime to your source code and by using this library, your generated code can be better minified as it removes most references of Classname.prototype.XXX methods from the generated code.
|
||||
|
||||
> Summary:
|
||||
>
|
||||
> - **~2 KB** minified (uncompressed)
|
||||
|
||||
## Example usage and resulting minified code
|
||||
|
||||
In this first example of code that is typically emitted by TypeScript it contains several references to the Classname.prototype and "this" references, both of which cannot be minfied.
|
||||
|
||||
```Javascript
|
||||
var NormalClass = /** @class */ (function () {
|
||||
function NormalClass() {
|
||||
this.property1 = [];
|
||||
this.property1.push("Hello");
|
||||
}
|
||||
InheritTest1.prototype.function1 = function () {
|
||||
//...
|
||||
doSomething();
|
||||
};
|
||||
InheritTest1.prototype.function2 = function () {
|
||||
//...
|
||||
doSomething();
|
||||
};
|
||||
InheritTest1.prototype.function3 = function () {
|
||||
//...
|
||||
doSomething();
|
||||
};
|
||||
return NormalClass;
|
||||
}());
|
||||
```
|
||||
|
||||
So the result would look something like this which represents a ~45% compression, note that the Classname.prototype appears several times.
|
||||
|
||||
```JavaScript
|
||||
var NormalClass=(InheritTest1.prototype.function1=function(){doSomething()},InheritTest1.prototype.function2=function(){doSomething()},InheritTest1.prototype.function3=function(){doSomething()},function(){this.property1=[],this.property1.push("Hello")});
|
||||
```
|
||||
|
||||
While in this example when using the dynamicProto helper to create the same resulting class and objects there are no references to Classname.prototype and only 1 reference to this.
|
||||
|
||||
```JavaScript
|
||||
var DynamicClass = /** @class */ (function () {
|
||||
function DynamicClass() {
|
||||
dynamicProto(DynamicClass, this, function (_self, base) {
|
||||
_self.property1 = [];
|
||||
_self.property1.push("Hello()");
|
||||
_self.function1 = function () {
|
||||
//...
|
||||
doSomething();
|
||||
};
|
||||
_self.function1 = function () {
|
||||
//...
|
||||
doSomething();
|
||||
};
|
||||
_self.function1 = function () {
|
||||
//...
|
||||
doSomething();
|
||||
};
|
||||
});
|
||||
}
|
||||
return DynamicClass;
|
||||
}());
|
||||
```
|
||||
|
||||
Which results in the following minified code which is much smaller and represents ~63% compression.
|
||||
|
||||
```Javascript
|
||||
var DynamicClass=function n(){dynamicProto(n,this,function(n,o){n.property1=[],n.property1.push("Hello()"),n.function1=function(){doSomething()},n.function1=function(){doSomething()},n.function1=function(){doSomething()}})};
|
||||
```
|
||||
|
||||
So when looking at the code for NormalClass and DynamicClass, both end up with 1 instance property called ```property1``` and the 3 functions ```function1```, ```function2``` and ```function3```, in both cases the functions are defined ONLY on the "class" prototype and ```property1``` is defined on the instance. So anyone, whether using JavaScript or TypeScript will be able to "extend" either of class without any concerns about overloading instance functions and needing to save any previous method. And you are extending a 3rd party library you no longer have to worry about them changing the implementation as ```dynamicProto()``` handles converting overriden instance functions into prototype level ones. Yes, this means that if you don't override instance function it will continue to be an instance function.
|
||||
|
||||
## When to use
|
||||
|
||||
While this helper was created to support better minification for generated code via TypeScript code, it is not limited to only being used from within TypeScript, you can use the helper function directly in the same way as the examples above.
|
||||
|
||||
As with including any additional code into your project there are trade offs that you need to make, including if you are looking at this helper, one of the primary items is the overall size of the additional code that you will be including vs the minification gains that you *may* obtained. This project endeavours to keep it's impact (bytes) as small as possible while supporting you to create readable and maintainable code that will create a smaller minified output.
|
||||
|
||||
In most cases when creating JavaScript to support better minfication, when your code doesn't expose or provide a lot of public methods or only uses un-minifiable "names" less than 2 times, then you may not see enough potential gains to counteract the additional bytes required from the helper code. However, for any significant project you should.
|
||||
|
||||
So at the end of the day, if you are creating JS classes directly you *should* be able to create a simplier one-off solution that would result in smaller output (total bytes). This is how this project started, but, once we had several of these one-off solutions it made more sense to build it once.
|
||||
|
||||
## Browser Support
|
||||
|
||||
|
|
@ -97,10 +165,6 @@ The minified version of this adds a negligible amount of code and loadtime to yo
|
|||
--- | --- | --- | --- | --- | --- |
|
||||
Latest ✔ | Latest ✔ | 8+ Full ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
||||
|
||||
## Contributing
|
||||
|
||||
Read our [contributing guide](./CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Application Insights.
|
||||
|
||||
## ES3/IE8 Compatibility
|
||||
|
||||
As an library there are numerous users which cannot control the browsers that their customers use. As such we need to ensure that this library continues to "work" and does not break the JS execution when loaded by an older browser. While it would be ideal to just not support IE8 and older generation (ES3) browsers there are numerous large customers/users that continue to require pages to "work" and as noted they may or cannot control which browser that their end users choose to use.
|
||||
|
|
@ -128,3 +192,7 @@ This table does not attempt to include ALL of the ES3 unsuported features, just
|
|||
| ```Object.isSealed(obj)``` | Not provided by ES3 and not used | N/A |
|
||||
| ```Object.freeze(obj)``` | Not provided by ES3 and not used | N/A |
|
||||
| ```Object.isFrozen(obj)``` | Not provided by ES3 and not used | N/A |
|
||||
|
||||
## Contributing
|
||||
|
||||
Read our [contributing guide](./CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Application Insights.
|
||||
|
|
|
|||
|
|
@ -12,6 +12,21 @@
|
|||
"from": "@babel/highlight@^7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz"
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
"from": "@nodelib/fs.scandir@2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz"
|
||||
},
|
||||
"@nodelib/fs.stat": {
|
||||
"version": "2.0.3",
|
||||
"from": "@nodelib/fs.stat@^2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz"
|
||||
},
|
||||
"@nodelib/fs.walk": {
|
||||
"version": "1.2.4",
|
||||
"from": "@nodelib/fs.walk@^1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz"
|
||||
},
|
||||
"@rush-temp/dynamicproto-js": {
|
||||
"version": "0.0.0",
|
||||
"from": "projects\\dynamicproto-js.tgz",
|
||||
|
|
@ -22,6 +37,26 @@
|
|||
"from": "@types/estree@0.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
|
||||
},
|
||||
"@types/events": {
|
||||
"version": "3.0.0",
|
||||
"from": "@types/events@*",
|
||||
"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz"
|
||||
},
|
||||
"@types/fs-extra": {
|
||||
"version": "8.0.1",
|
||||
"from": "@types/fs-extra@^8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.0.1.tgz"
|
||||
},
|
||||
"@types/glob": {
|
||||
"version": "7.1.1",
|
||||
"from": "@types/glob@^7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz"
|
||||
},
|
||||
"@types/minimatch": {
|
||||
"version": "3.0.3",
|
||||
"from": "@types/minimatch@*",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz"
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "12.12.7",
|
||||
"from": "@types/node@*",
|
||||
|
|
@ -101,6 +136,11 @@
|
|||
"from": "array-slice@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz"
|
||||
},
|
||||
"array-union": {
|
||||
"version": "2.1.0",
|
||||
"from": "array-union@^2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
|
||||
},
|
||||
"array-unique": {
|
||||
"version": "0.3.2",
|
||||
"from": "array-unique@>=0.3.2 <0.4.0",
|
||||
|
|
@ -289,6 +329,11 @@
|
|||
"from": "color-name@1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
|
||||
},
|
||||
"colorette": {
|
||||
"version": "1.1.0",
|
||||
"from": "colorette@^1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz"
|
||||
},
|
||||
"colors": {
|
||||
"version": "1.1.2",
|
||||
"from": "colors@>=1.1.2 <1.2.0",
|
||||
|
|
@ -416,6 +461,18 @@
|
|||
"from": "diff@^4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz"
|
||||
},
|
||||
"dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"from": "dir-glob@^3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
"dependencies": {
|
||||
"path-type": {
|
||||
"version": "4.0.0",
|
||||
"from": "path-type@^4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"duplexer": {
|
||||
"version": "0.1.1",
|
||||
"from": "duplexer@>=0.1.1 <0.2.0",
|
||||
|
|
@ -562,11 +619,58 @@
|
|||
"from": "fast-deep-equal@^2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz"
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.1.0",
|
||||
"from": "fast-glob@^3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.0.tgz",
|
||||
"dependencies": {
|
||||
"braces": {
|
||||
"version": "3.0.2",
|
||||
"from": "braces@^3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
|
||||
},
|
||||
"fill-range": {
|
||||
"version": "7.0.1",
|
||||
"from": "fill-range@^7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "5.1.0",
|
||||
"from": "glob-parent@^5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz"
|
||||
},
|
||||
"is-glob": {
|
||||
"version": "4.0.1",
|
||||
"from": "is-glob@^4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz"
|
||||
},
|
||||
"is-number": {
|
||||
"version": "7.0.0",
|
||||
"from": "is-number@>=7.0.0 <8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
|
||||
},
|
||||
"micromatch": {
|
||||
"version": "4.0.2",
|
||||
"from": "micromatch@^4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz"
|
||||
},
|
||||
"to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"from": "to-regex-range@^5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"fast-json-stable-stringify": {
|
||||
"version": "2.0.0",
|
||||
"from": "fast-json-stable-stringify@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz"
|
||||
},
|
||||
"fastq": {
|
||||
"version": "1.6.0",
|
||||
"from": "fastq@>=1.6.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz"
|
||||
},
|
||||
"fd-slicer": {
|
||||
"version": "1.0.1",
|
||||
"from": "fd-slicer@>=1.0.1 <1.1.0",
|
||||
|
|
@ -696,6 +800,18 @@
|
|||
"from": "global-prefix@>=1.0.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz"
|
||||
},
|
||||
"globby": {
|
||||
"version": "10.0.1",
|
||||
"from": "globby@10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
|
||||
"dependencies": {
|
||||
"glob": {
|
||||
"version": "7.1.6",
|
||||
"from": "glob@^7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graceful-fs": {
|
||||
"version": "4.2.3",
|
||||
"from": "graceful-fs@^4.1.2",
|
||||
|
|
@ -891,6 +1007,11 @@
|
|||
"from": "iconv-lite@~0.4.13",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
|
||||
},
|
||||
"ignore": {
|
||||
"version": "5.1.4",
|
||||
"from": "ignore@^5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz"
|
||||
},
|
||||
"indent-string": {
|
||||
"version": "2.1.0",
|
||||
"from": "indent-string@>=2.1.0 <3.0.0",
|
||||
|
|
@ -1240,20 +1361,25 @@
|
|||
"from": "merge-stream@^2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
|
||||
},
|
||||
"merge2": {
|
||||
"version": "1.3.0",
|
||||
"from": "merge2@^1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz"
|
||||
},
|
||||
"micromatch": {
|
||||
"version": "3.1.10",
|
||||
"from": "micromatch@^3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.40.0",
|
||||
"from": "mime-db@1.40.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz"
|
||||
"version": "1.42.0",
|
||||
"from": "mime-db@1.42.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz"
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.24",
|
||||
"version": "2.1.25",
|
||||
"from": "mime-types@~2.1.19",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz"
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.25.tgz"
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
|
|
@ -1481,6 +1607,11 @@
|
|||
"from": "phantomjs-prebuilt@>=2.1.3 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz"
|
||||
},
|
||||
"picomatch": {
|
||||
"version": "2.1.1",
|
||||
"from": "picomatch@^2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.1.1.tgz"
|
||||
},
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"from": "pify@>=2.0.0 <3.0.0",
|
||||
|
|
@ -1616,6 +1747,11 @@
|
|||
"from": "ret@>=0.1.10 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz"
|
||||
},
|
||||
"reusify": {
|
||||
"version": "1.0.4",
|
||||
"from": "reusify@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "2.6.3",
|
||||
"from": "rimraf@~2.6.2",
|
||||
|
|
@ -1633,6 +1769,33 @@
|
|||
"from": "rollup@^0.66.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-0.66.6.tgz"
|
||||
},
|
||||
"rollup-plugin-copy": {
|
||||
"version": "3.1.0",
|
||||
"from": "rollup-plugin-copy@^3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-3.1.0.tgz",
|
||||
"dependencies": {
|
||||
"fs-extra": {
|
||||
"version": "8.1.0",
|
||||
"from": "fs-extra@^8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz"
|
||||
},
|
||||
"is-plain-object": {
|
||||
"version": "3.0.0",
|
||||
"from": "is-plain-object@^3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.0.tgz"
|
||||
},
|
||||
"isobject": {
|
||||
"version": "4.0.0",
|
||||
"from": "isobject@^4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz"
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "4.0.0",
|
||||
"from": "jsonfile@>=4.0.0 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"rollup-plugin-node-resolve": {
|
||||
"version": "3.4.0",
|
||||
"from": "rollup-plugin-node-resolve@^3.4.0",
|
||||
|
|
@ -1653,6 +1816,11 @@
|
|||
"from": "rollup-pluginutils@^2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz"
|
||||
},
|
||||
"run-parallel": {
|
||||
"version": "1.1.9",
|
||||
"from": "run-parallel@>=1.1.9 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz"
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"from": "safe-buffer@~5.1.1",
|
||||
|
|
@ -1700,6 +1868,11 @@
|
|||
"from": "signal-exit@>=3.0.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz"
|
||||
},
|
||||
"slash": {
|
||||
"version": "3.0.0",
|
||||
"from": "slash@^3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
|
||||
},
|
||||
"snapdragon": {
|
||||
"version": "0.8.2",
|
||||
"from": "snapdragon@>=0.8.1 <0.9.0",
|
||||
|
|
@ -1967,9 +2140,9 @@
|
|||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
|
||||
},
|
||||
"typescript": {
|
||||
"version": "2.5.3",
|
||||
"from": "typescript@2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.3.tgz"
|
||||
"version": "3.7.2",
|
||||
"from": "typescript@3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz"
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.10",
|
||||
|
|
@ -1998,6 +2171,11 @@
|
|||
"from": "union-value@^1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz"
|
||||
},
|
||||
"universalify": {
|
||||
"version": "0.1.2",
|
||||
"from": "universalify@>=0.1.0 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
|
||||
},
|
||||
"unset-value": {
|
||||
"version": "1.0.0",
|
||||
"from": "unset-value@>=1.0.0 <2.0.0",
|
||||
|
|
|
|||
|
|
@ -2398,12 +2398,6 @@ img {
|
|||
<li>Smaller code as the internal properties and methods when defined within the instance can be minified.</li>
|
||||
<li>As the resulting generated code can be better minified this <em>should</em> result in a smaller minified result and therefore better load times for your users. </li>
|
||||
</ul>
|
||||
<a href="#when-to-use" id="when-to-use" style="color: inherit; text-decoration: none;">
|
||||
<h2>When to use</h2>
|
||||
</a>
|
||||
<p>While this helper was originally created to support better minification for generated code via TypeScript, it is not limited to only being used from within TypeScript.</p>
|
||||
<p>And as with including any additional code into your project there is a trade off that you need to make before using this helper which is the size of the additional code of this utility vs the minification gains that <em>may</em> be obtained. As in most cases of creating JavaScript code for better minfication if your code doesn't expose or provide a lot of public methods or only uses un-minifiable "names" less than 2 times then the potential gains may not be worth the additional bytes.</p>
|
||||
<p>And yes at the end of the day, if you are creating JS classes directly in Javascript you <em>should</em> be able to create a simplier one-off solution that would result in smaller output as this project needs to be generic to be able to support all use-cases. </p>
|
||||
<a href="#basic-usage" id="basic-usage" style="color: inherit; text-decoration: none;">
|
||||
<h2>Basic Usage</h2>
|
||||
</a>
|
||||
|
|
@ -2459,13 +2453,70 @@ img {
|
|||
<a href="#performance" id="performance" style="color: inherit; text-decoration: none;">
|
||||
<h2>Performance</h2>
|
||||
</a>
|
||||
<p>The minified version of this adds a negligible amount of code and loadtime to your source code and by using this library your generated code can be better minified as it removes most references of Classname.prototype.XXX methods from the generated code.</p>
|
||||
<p>The minified version of this adds a negligible amount of code and loadtime to your source code and by using this library, your generated code can be better minified as it removes most references of Classname.prototype.XXX methods from the generated code.</p>
|
||||
<blockquote>
|
||||
<p>Summary:</p>
|
||||
<ul>
|
||||
<li><strong>~2 KB</strong> minified (uncompressed)</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<a href="#example-usage-and-resulting-minified-code" id="example-usage-and-resulting-minified-code" style="color: inherit; text-decoration: none;">
|
||||
<h2>Example usage and resulting minified code</h2>
|
||||
</a>
|
||||
<p>In this first example of code that is typically emitted by TypeScript it contains several references to the Classname.prototype and "this" references, both of which cannot be minfied.</p>
|
||||
<pre><code class="language-Javascript"><span class="hljs-keyword">var</span> NormalClass = <span class="hljs-comment">/** @class */</span> (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">NormalClass</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">this</span>.property1 = [];
|
||||
<span class="hljs-keyword">this</span>.property1.push(<span class="hljs-string">"Hello"</span>);
|
||||
}
|
||||
InheritTest1.prototype.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
InheritTest1.prototype.function2 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
InheritTest1.prototype.function3 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
<span class="hljs-keyword">return</span> NormalClass;
|
||||
}());</code></pre>
|
||||
<p>So the result would look something like this which represents a ~45% compression, note that the Classname.prototype appears several times.</p>
|
||||
<pre><code class="language-JavaScript"><span class="hljs-keyword">var</span> NormalClass=(InheritTest1.prototype.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},InheritTest1.prototype.function2=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},InheritTest1.prototype.function3=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{<span class="hljs-keyword">this</span>.property1=[],<span class="hljs-keyword">this</span>.property1.push(<span class="hljs-string">"Hello"</span>)});</code></pre>
|
||||
<p>While in this example when using the dynamicProto helper to create the same resulting class and objects there are no references to Classname.prototype and only 1 reference to this.</p>
|
||||
<pre><code class="language-JavaScript"><span class="hljs-keyword">var</span> DynamicClass = <span class="hljs-comment">/** @class */</span> (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">DynamicClass</span>(<span class="hljs-params"></span>) </span>{
|
||||
dynamicProto(DynamicClass, <span class="hljs-keyword">this</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">_self, base</span>) </span>{
|
||||
_self.property1 = [];
|
||||
_self.property1.push(<span class="hljs-string">"Hello()"</span>);
|
||||
_self.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
_self.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
_self.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
});
|
||||
}
|
||||
<span class="hljs-keyword">return</span> DynamicClass;
|
||||
}());</code></pre>
|
||||
<p>Which results in the following minified code which is much smaller and represents ~63% compression.</p>
|
||||
<pre><code class="language-Javascript"><span class="hljs-keyword">var</span> DynamicClass=<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">n</span>(<span class="hljs-params"></span>)</span>{dynamicProto(n,<span class="hljs-keyword">this</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">n,o</span>)</span>{n.property1=[],n.property1.push(<span class="hljs-string">"Hello()"</span>),n.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},n.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},n.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()}})};</code></pre>
|
||||
<p> So when looking at the code for NormalClass and DynamicClass, both end up with 1 instance property called <code>property1</code> and the 3 functions <code>function1</code>, <code>function2</code> and <code>function3</code>, in both cases the functions are defined ONLY on the "class" prototype and <code>property1</code> is defined on the instance. So anyone, whether using JavaScript or TypeScript will be able to "extend" either of class without any concerns about overloading instance functions and needing to save any previous method. And you are extending a 3rd party library you no longer have to worry about them changing the implementation as <code>dynamicProto()</code> handles converting overriden instance functions into prototype level ones. Yes, this means that if you don't override instance function it will continue to be an instance function.</p>
|
||||
<a href="#when-to-use" id="when-to-use" style="color: inherit; text-decoration: none;">
|
||||
<h2>When to use</h2>
|
||||
</a>
|
||||
<p>While this helper was created to support better minification for generated code via TypeScript code, it is not limited to only being used from within TypeScript, you can use the helper function directly in the same way as the examples above.</p>
|
||||
<p>As with including any additional code into your project there are trade offs that you need to make, including if you are looking at this helper, one of the primary items is the overall size of the additional code that you will be including vs the minification gains that you <em>may</em> obtained. This project endeavours to keep it's impact (bytes) as small as possible while supporting you to create readable and maintainable code that will create a smaller minified output.</p>
|
||||
<p>In most cases when creating JavaScript to support better minfication, when your code doesn't expose or provide a lot of public methods or only uses un-minifiable "names" less than 2 times, then you may not see enough potential gains to counteract the additional bytes required from the helper code. However, for any significant project you should.</p>
|
||||
<p>So at the end of the day, if you are creating JS classes directly you <em>should</em> be able to create a simplier one-off solution that would result in smaller output (total bytes). This is how this project started, but, once we had several of these one-off solutions it made more sense to build it once.</p>
|
||||
<a href="#browser-support" id="browser-support" style="color: inherit; text-decoration: none;">
|
||||
<h2>Browser Support</h2>
|
||||
</a>
|
||||
|
|
@ -2489,10 +2540,6 @@ img {
|
|||
<td>Latest ✔</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
|
||||
<h2>Contributing</h2>
|
||||
</a>
|
||||
<p>Read our <a href="./CONTRIBUTING.md">contributing guide</a> to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Application Insights.</p>
|
||||
<a href="#es3ie8-compatibility" id="es3ie8-compatibility" style="color: inherit; text-decoration: none;">
|
||||
<h2>ES3/IE8 Compatibility</h2>
|
||||
</a>
|
||||
|
|
@ -2577,6 +2624,10 @@ img {
|
|||
<td>N/A</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
|
||||
<h2>Contributing</h2>
|
||||
</a>
|
||||
<p>Read our <a href="./CONTRIBUTING.md">contributing guide</a> to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Application Insights.</p>
|
||||
</div>
|
||||
<section class="tsd-panel-group tsd-index-group">
|
||||
<h2>Index</h2>
|
||||
|
|
|
|||
|
|
@ -2398,12 +2398,6 @@ img {
|
|||
<li>Smaller code as the internal properties and methods when defined within the instance can be minified.</li>
|
||||
<li>As the resulting generated code can be better minified this <em>should</em> result in a smaller minified result and therefore better load times for your users. </li>
|
||||
</ul>
|
||||
<a href="#when-to-use" id="when-to-use" style="color: inherit; text-decoration: none;">
|
||||
<h2>When to use</h2>
|
||||
</a>
|
||||
<p>While this helper was originally created to support better minification for generated code via TypeScript, it is not limited to only being used from within TypeScript.</p>
|
||||
<p>And as with including any additional code into your project there is a trade off that you need to make before using this helper which is the size of the additional code of this utility vs the minification gains that <em>may</em> be obtained. As in most cases of creating JavaScript code for better minfication if your code doesn't expose or provide a lot of public methods or only uses un-minifiable "names" less than 2 times then the potential gains may not be worth the additional bytes.</p>
|
||||
<p>And yes at the end of the day, if you are creating JS classes directly in Javascript you <em>should</em> be able to create a simplier one-off solution that would result in smaller output as this project needs to be generic to be able to support all use-cases. </p>
|
||||
<a href="#basic-usage" id="basic-usage" style="color: inherit; text-decoration: none;">
|
||||
<h2>Basic Usage</h2>
|
||||
</a>
|
||||
|
|
@ -2459,13 +2453,70 @@ img {
|
|||
<a href="#performance" id="performance" style="color: inherit; text-decoration: none;">
|
||||
<h2>Performance</h2>
|
||||
</a>
|
||||
<p>The minified version of this adds a negligible amount of code and loadtime to your source code and by using this library your generated code can be better minified as it removes most references of Classname.prototype.XXX methods from the generated code.</p>
|
||||
<p>The minified version of this adds a negligible amount of code and loadtime to your source code and by using this library, your generated code can be better minified as it removes most references of Classname.prototype.XXX methods from the generated code.</p>
|
||||
<blockquote>
|
||||
<p>Summary:</p>
|
||||
<ul>
|
||||
<li><strong>~2 KB</strong> minified (uncompressed)</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<a href="#example-usage-and-resulting-minified-code" id="example-usage-and-resulting-minified-code" style="color: inherit; text-decoration: none;">
|
||||
<h2>Example usage and resulting minified code</h2>
|
||||
</a>
|
||||
<p>In this first example of code that is typically emitted by TypeScript it contains several references to the Classname.prototype and "this" references, both of which cannot be minfied.</p>
|
||||
<pre><code class="language-Javascript"><span class="hljs-keyword">var</span> NormalClass = <span class="hljs-comment">/** @class */</span> (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">NormalClass</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">this</span>.property1 = [];
|
||||
<span class="hljs-keyword">this</span>.property1.push(<span class="hljs-string">"Hello"</span>);
|
||||
}
|
||||
InheritTest1.prototype.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
InheritTest1.prototype.function2 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
InheritTest1.prototype.function3 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
<span class="hljs-keyword">return</span> NormalClass;
|
||||
}());</code></pre>
|
||||
<p>So the result would look something like this which represents a ~45% compression, note that the Classname.prototype appears several times.</p>
|
||||
<pre><code class="language-JavaScript"><span class="hljs-keyword">var</span> NormalClass=(InheritTest1.prototype.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},InheritTest1.prototype.function2=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},InheritTest1.prototype.function3=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{<span class="hljs-keyword">this</span>.property1=[],<span class="hljs-keyword">this</span>.property1.push(<span class="hljs-string">"Hello"</span>)});</code></pre>
|
||||
<p>While in this example when using the dynamicProto helper to create the same resulting class and objects there are no references to Classname.prototype and only 1 reference to this.</p>
|
||||
<pre><code class="language-JavaScript"><span class="hljs-keyword">var</span> DynamicClass = <span class="hljs-comment">/** @class */</span> (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">DynamicClass</span>(<span class="hljs-params"></span>) </span>{
|
||||
dynamicProto(DynamicClass, <span class="hljs-keyword">this</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">_self, base</span>) </span>{
|
||||
_self.property1 = [];
|
||||
_self.property1.push(<span class="hljs-string">"Hello()"</span>);
|
||||
_self.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
_self.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
_self.function1 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">//...</span>
|
||||
doSomething();
|
||||
};
|
||||
});
|
||||
}
|
||||
<span class="hljs-keyword">return</span> DynamicClass;
|
||||
}());</code></pre>
|
||||
<p>Which results in the following minified code which is much smaller and represents ~63% compression.</p>
|
||||
<pre><code class="language-Javascript"><span class="hljs-keyword">var</span> DynamicClass=<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">n</span>(<span class="hljs-params"></span>)</span>{dynamicProto(n,<span class="hljs-keyword">this</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">n,o</span>)</span>{n.property1=[],n.property1.push(<span class="hljs-string">"Hello()"</span>),n.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},n.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()},n.function1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{doSomething()}})};</code></pre>
|
||||
<p> So when looking at the code for NormalClass and DynamicClass, both end up with 1 instance property called <code>property1</code> and the 3 functions <code>function1</code>, <code>function2</code> and <code>function3</code>, in both cases the functions are defined ONLY on the "class" prototype and <code>property1</code> is defined on the instance. So anyone, whether using JavaScript or TypeScript will be able to "extend" either of class without any concerns about overloading instance functions and needing to save any previous method. And you are extending a 3rd party library you no longer have to worry about them changing the implementation as <code>dynamicProto()</code> handles converting overriden instance functions into prototype level ones. Yes, this means that if you don't override instance function it will continue to be an instance function.</p>
|
||||
<a href="#when-to-use" id="when-to-use" style="color: inherit; text-decoration: none;">
|
||||
<h2>When to use</h2>
|
||||
</a>
|
||||
<p>While this helper was created to support better minification for generated code via TypeScript code, it is not limited to only being used from within TypeScript, you can use the helper function directly in the same way as the examples above.</p>
|
||||
<p>As with including any additional code into your project there are trade offs that you need to make, including if you are looking at this helper, one of the primary items is the overall size of the additional code that you will be including vs the minification gains that you <em>may</em> obtained. This project endeavours to keep it's impact (bytes) as small as possible while supporting you to create readable and maintainable code that will create a smaller minified output.</p>
|
||||
<p>In most cases when creating JavaScript to support better minfication, when your code doesn't expose or provide a lot of public methods or only uses un-minifiable "names" less than 2 times, then you may not see enough potential gains to counteract the additional bytes required from the helper code. However, for any significant project you should.</p>
|
||||
<p>So at the end of the day, if you are creating JS classes directly you <em>should</em> be able to create a simplier one-off solution that would result in smaller output (total bytes). This is how this project started, but, once we had several of these one-off solutions it made more sense to build it once.</p>
|
||||
<a href="#browser-support" id="browser-support" style="color: inherit; text-decoration: none;">
|
||||
<h2>Browser Support</h2>
|
||||
</a>
|
||||
|
|
@ -2489,10 +2540,6 @@ img {
|
|||
<td>Latest ✔</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
|
||||
<h2>Contributing</h2>
|
||||
</a>
|
||||
<p>Read our <a href="./CONTRIBUTING.md">contributing guide</a> to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Application Insights.</p>
|
||||
<a href="#es3ie8-compatibility" id="es3ie8-compatibility" style="color: inherit; text-decoration: none;">
|
||||
<h2>ES3/IE8 Compatibility</h2>
|
||||
</a>
|
||||
|
|
@ -2577,6 +2624,10 @@ img {
|
|||
<td>N/A</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
|
||||
<h2>Contributing</h2>
|
||||
</a>
|
||||
<p>Read our <a href="./CONTRIBUTING.md">contributing guide</a> to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Application Insights.</p>
|
||||
</div>
|
||||
<div style="position:relative;"><a name="typedoc-main-index" class="tsd-anchor"></a></div>
|
||||
<section class="tsd-panel-group tsd-index-group">
|
||||
|
|
|
|||
|
|
@ -2414,7 +2414,7 @@ img {
|
|||
<div class="tsd-signature tsd-kind-icon">Dynamic<wbr>Proto<wbr>Delegate<DPType><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">function</span></div>
|
||||
<aside class="tsd-sources">
|
||||
<ul>
|
||||
<li>Defined in <a href="https://github.com/microsoft/DynamicProto-JS/blob/7359d14/lib/src/DynamicProto.ts#L318">DynamicProto.ts:318</a></li>
|
||||
<li>Defined in <a href="https://github.com/microsoft/DynamicProto-JS/blob/904bc1e/lib/src/DynamicProto.ts#L318">DynamicProto.ts:318</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
<div class="tsd-comment tsd-typography">
|
||||
|
|
@ -2481,7 +2481,7 @@ img {
|
|||
<li class="tsd-description">
|
||||
<aside class="tsd-sources">
|
||||
<ul>
|
||||
<li>Defined in <a href="https://github.com/microsoft/DynamicProto-JS/blob/7359d14/lib/src/DynamicProto.ts#L371">DynamicProto.ts:371</a></li>
|
||||
<li>Defined in <a href="https://github.com/microsoft/DynamicProto-JS/blob/904bc1e/lib/src/DynamicProto.ts#L371">DynamicProto.ts:371</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
<div class="tsd-comment tsd-typography">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@microsoft/dynamicproto-js",
|
||||
"author": "Microsoft Application Insights Team",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.4",
|
||||
"description": "Microsoft Dynamic Proto Utility",
|
||||
"keywords": [
|
||||
"javascript",
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
],
|
||||
"main": "./dist/dynamicproto-js.js",
|
||||
"module": "./dist/dynamicproto-js.js",
|
||||
"types": "./dist/dynamicproto-js.d.ts",
|
||||
"types": "./types/dynamicproto-js.d.ts",
|
||||
"directories": {
|
||||
"doc": "./docs"
|
||||
},
|
||||
|
|
@ -49,7 +49,8 @@
|
|||
"tslint": "^5.19.0",
|
||||
"tslint-microsoft-contrib": "^5.2.1",
|
||||
"tslint-config-prettier": "^1.18.0",
|
||||
"typescript": "2.5.3",
|
||||
"typescript": "3.7.2",
|
||||
"rollup-plugin-copy": "^3.1.0",
|
||||
"rollup-plugin-node-resolve": "^3.4.0",
|
||||
"rollup-plugin-replace": "^2.1.0",
|
||||
"rollup-plugin-uglify": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import nodeResolve from "rollup-plugin-node-resolve";
|
||||
import copy from "rollup-plugin-copy";
|
||||
import {uglify} from "rollup-plugin-uglify";
|
||||
import replace from "rollup-plugin-replace";
|
||||
|
||||
const version = require("./package.json").version;
|
||||
const inputName = "dynamicproto-js";
|
||||
const outputName = "dynamicproto-js";
|
||||
const banner = [
|
||||
"/*!",
|
||||
|
|
@ -13,7 +15,7 @@ const banner = [
|
|||
|
||||
const bundleRollupConfigFactory = isProduction => {
|
||||
const bundleRollupConfig = {
|
||||
input: `./dist-esm/${outputName}.js`,
|
||||
input: `./dist-esm/${inputName}.js`,
|
||||
output: {
|
||||
file: `./bundle/${outputName}.js`,
|
||||
banner: banner,
|
||||
|
|
@ -60,7 +62,7 @@ const bundleRollupConfigFactory = isProduction => {
|
|||
|
||||
const nodeUmdRollupConfigFactory = (isProduction) => {
|
||||
const nodeRollupConfig = {
|
||||
input: `./dist-esm/${outputName}.js`,
|
||||
input: `./dist-esm/${inputName}.js`,
|
||||
output: {
|
||||
file: `./dist/${outputName}.js`,
|
||||
banner: banner,
|
||||
|
|
@ -96,6 +98,14 @@ const nodeUmdRollupConfigFactory = (isProduction) => {
|
|||
}
|
||||
})
|
||||
);
|
||||
|
||||
nodeRollupConfig.plugins.push(
|
||||
copy({
|
||||
targets: [
|
||||
{ src: `./dist-esm/${inputName}.d.ts`, dest: "./types/", rename: `${outputName}.d.ts` }
|
||||
]
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return nodeRollupConfig;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"noEmitHelpers": true,
|
||||
"alwaysStrict": true,
|
||||
"declaration": true,
|
||||
//"declarationDir": "lib/types",
|
||||
//"declarationDir": "./types",
|
||||
"outFile": "./dist-esm/dynamicproto-js.js",
|
||||
"rootDir": "lib/src",
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
declare module "DynamicProto" {
|
||||
/**
|
||||
* The delegate signature for the function used as the callback for dynamicProto()
|
||||
* @typeparam DPType This is the generic type of the class, used to keep intellisense valid for the proxy instance, even
|
||||
* though it is only a proxy that only contains the functions
|
||||
* @param theTarget This is the real "this" of the current target object
|
||||
* @param baseFuncProxy The is a proxy object which ONLY contains this function that existed on the "this" instance before
|
||||
* calling dynamicProto, it does NOT contain properties of this. This is basically equivalent to using the "super" keyword.
|
||||
*/
|
||||
export type DynamicProtoDelegate<DPType> = (theTarget: DPType, baseFuncProxy?: DPType) => void;
|
||||
/**
|
||||
* Helper function when creating dynamic (inline) functions for classes, this helper performs the following tasks :-
|
||||
* - Saves references to all defined base class functions
|
||||
* - Calls the delegateFunc with the current target (this) and a base object reference that can be used to call all "super" functions.
|
||||
* - Will populate the class prototype for all overridden functions to support class extension that call the prototype instance.
|
||||
* Callers should use this helper when declaring all function within the constructor of a class, as mentioned above the delegateFunc is
|
||||
* passed both the target "this" and an object that can be used to call any base (super) functions, using this based object in place of
|
||||
* super.XXX() (which gets expanded to _super.prototype.XXX()) provides a better minification outcome and also ensures the correct "this"
|
||||
* context is maintained as TypeScript creates incorrect references using super.XXXX() for dynamically defined functions i.e. Functions
|
||||
* defined in the constructor or some other function (rather than declared as complete typescript functions).
|
||||
* ### Usage
|
||||
* ```typescript
|
||||
* import dynamicProto from "@microsoft/dynamicproto-js";
|
||||
* class ExampleClass extends BaseClass {
|
||||
* constructor() {
|
||||
* dynamicProto(ExampleClass, this, (_self, base) => {
|
||||
* // This will define a function that will be converted to a prototype function
|
||||
* _self.newFunc = () => {
|
||||
* // Access any "this" instance property
|
||||
* if (_self.someProperty) {
|
||||
* ...
|
||||
* }
|
||||
* }
|
||||
* // This will define a function that will be converted to a prototype function
|
||||
* _self.myFunction = () => {
|
||||
* // Access any "this" instance property
|
||||
* if (_self.someProperty) {
|
||||
* // Call the base version of the function that we are overriding
|
||||
* base.myFunction();
|
||||
* }
|
||||
* ...
|
||||
* }
|
||||
* _self.initialize = () => {
|
||||
* ...
|
||||
* }
|
||||
* // Warnings: While the following will work as _self is simply a reference to
|
||||
* // this, if anyone overrides myFunction() the overridden will be called first
|
||||
* // as the normal JavaScript method resolution will occur and the defined
|
||||
* // _self.initialize() function is actually gets removed from the instance and
|
||||
* // a proxy prototype version is created to reference the created method.
|
||||
* _self.initialize();
|
||||
* });
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* @typeparam DPType This is the generic type of the class, used to keep intellisense valid
|
||||
* @typeparam DPCls The type that contains the prototype of the current class
|
||||
* @param theClass This is the current class instance which contains the prototype for the current class
|
||||
* @param target The current "this" (target) reference, when the class has been extended this.prototype will not be the 'theClass' value.
|
||||
* @param delegateFunc The callback function (closure) that will create the dynamic function
|
||||
*/
|
||||
export default function dynamicProto<DPType, DPCls>(theClass: DPCls, target: DPType, delegateFunc: DynamicProtoDelegate<DPType>): void;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@microsoft/dynamicproto-js",
|
||||
"description": "Microsoft Dynamic Proto Utility",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.4",
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"dynamic prototype",
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
"tslint": "^5.19.0",
|
||||
"tslint-microsoft-contrib": "^5.2.1",
|
||||
"tslint-config-prettier": "^1.18.0",
|
||||
"typescript": "2.5.3",
|
||||
"typescript": "3.7.2",
|
||||
"rollup": "^0.66.0",
|
||||
"typedoc": "^0.15.0"
|
||||
},
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче