Comments (2)
hello @mittnavnermike 👋 all ts-belt
functions are tree-shakeable in the modern bundlers (webpack, rollup, parcel) even if you import the entire function set like the current recommended approach:
import { A } from '@mobily/ts-belt
I have already double-checked this by adding ts-belt
in the following "benchmark" locally: https://github.com/mischnic/tree-shaking-example (esbuild on the other hand generates a much bigger bundle for all tested libraries)
file size error
------------------ -------- -----
webpack/ts-belt 0.8kb
parcel/ts-belt 0.8kb
rollup/ts-belt 0.8kb
esbuild/ts-belt 39.9kb
rollup/lodash-es 18.0kb
parcel/lodash-es 18.3kb
webpack/lodash-es 20.2kb
esbuild/lodash-es 57.9kb
rollup/lodash 70.6kb
parcel/lodash 70.7kb
webpack/lodash 71.1kb
esbuild/lodash 217.4kb
webpack/rxjs 9.3kb
parcel/rxjs 10.1kb
rollup/rxjs 10.1kb
esbuild/rxjs 37.6kb
webpack/remeda 2.1kb
rollup/remeda 2.2kb
esbuild/remeda 5.4kb
parcel/remeda 7.1kb
parcel/ramda 6.3kb
webpack/ramda 6.4kb
rollup/ramda 6.4kb
esbuild/ramda 13.8kb
rollup/ramdaBabel 6.5kb
parcel/ramdaBabel 6.6kb
webpack/ramdaBabel 7.6kb
esbuild/ramdaBabel 20.8kb
rollup/rambda 1.2kb
webpack/rambda 2.8kb
parcel/rambda 2.8kb
esbuild/rambda 7.0kb
rollup/rambdax 4.9kb
parcel/rambdax 6.4kb
webpack/rambdax 6.5kb
esbuild/rambdax 14.0kb
the ts-belt
file content used in tree-shaking-example
:
import { pipe, A } from '@mobily/ts-belt'
const isOdd = x => {
return x % 2 === 0
}
const fn = x => {
return pipe(
A.range(2, x),
A.filter(isOdd),
A.join(', '),
)
}
export const answer = fn(10)
you can import functions explicitly from each namespace but it requires some config changes, here's the example:
import { pipe } from '@mobily/ts-belt/pipe'
import { flatMap,mapWithDefault } from '@mobily/ts-belt/Option'
import { dropExactly, head } from '@mobily/ts-belt/Array'
const value = pipe(
[1, 2, 3],
dropExactly(2),
flatMap(head),
mapWithDefault(0, x => x * 3)
)
Configure path mapping in tsconfig.json
:
"paths": {
"@mobily/ts-belt/*": ["./node_modules/@mobily/ts-belt/dist/esm/*"]
}
Add babel-plugin-transform-imports
and use it in babel.config.js
:
['transform-imports', {
"@mobily\/ts-belt\/((?!dist)\\w+)": {
transform: function(importName, matches) {
return path.resolve(__dirname, './node_modules/@mobily/ts-belt/dist/esm', matches[1])
},
"skipDefaultConversion": true,
}
}]
let me know if this is what you wanted to achieve 😊
from ts-belt.
Thank you for a very detailed answer! I'll try your approach
from ts-belt.
Related Issues (20)
- Can you tell me how to handle multiple Option types? HOT 4
- A.dropWhile is completely broken HOT 1
- What is the recommended way of testing the value in an object? HOT 5
- a very simple request : N.toString HOT 1
- Handling generic typing for D.toPairs()
- Would a D.deleteOtherKeys be useful as part of the core? HOT 1
- F.getWithDefault Coercion type problem HOT 5
- Unsafe `isNone()` and `isSome()` type predicates HOT 1
- Ts-belt is 4x slower because it uses the arguments object
- Why an Option type instead of `type` | undefined? HOT 4
- Using unions for a result HOT 11
- ts-belt usage example flagged by TypeScript HOT 2
- why not `Do Notation` and `Applicative`
- Misleading annotations for Array.range
- Is this library still being maintained? HOT 1
- 🚧 Announcement: the current state of ts-belt 🚧 HOT 2
- `AR.isOk` and `AR.isError` not defined
- `AR.toOption` for `undefined` promise resolutions resulting in `{ BS_PRIVATE_NESTED_SOME_NONE: 0 }` HOT 1
- O.Option's functions with null literal value behaves differ from with undefined literal values HOT 1
- Bad Typing Ok / Error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ts-belt.