schickling / calculate-size Goto Github PK

In CRA 5.0, the build will fail when using this library stating:

WARNING in ./node_modules/calculate-size/lib/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/austin/dev/asdf/ui/node_modules/calculate-size/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/austin/dev/asdf/ui/node_modules/calculate-size/src/index.ts'

Reference: facebook/create-react-app#11752

Hi, I am using your module and it works quite ok, but I found a minor issue when building my app with grunt.

I receive the following message:

Running "wiredep:app" (wiredep) task
app/index.html modified.

calculate-size was not injected in your file.
Please go take a look in "<path>/bower_components/calculate-size" for the file you need, then manually include it in your file.  

I can not add that manually, because wiredep cleans and rebuilds the section of the installed bower modules. The fix is to add the following code in the bower.json

"main": [
      "./src/calculate-size.js"
  ],

does it work on non browser environment

"Hello World" and "Hello World" have the same width. Looks like it is only counting all the spaces as one space.

Not sure if it's in the scope of the library but I've stumbled upon this.

If a string contains newlines like 'ab\ncdefg' should width and height be max of width, height per line?

|ab.  | ⏫  h
|cdefg| ⏬ 
 <--->
   w

By using npm install, I obtained a ts file and a js file.
I tried using the following code in my ts file
import { calculateSize } from 'calculate-size';
but there is no exported module of such. How do I use this exactly? Size does not work either.

I have some text with variable size ( font-size: clamp() )
I added a resize event listener that calls calculateSize
It seems to return the same result even if the text size changes

Thank you, great tool 👍

Hi,

When using your library with following options, I got a miscomputation of the width:

font: 'Helvetica';
fontSize: '14px';
fontWeight: '400'

For example, Lalande de Pomerol and Bordeaux Supérieur get the same width (125px), while they shouldn't have.

The fix could be to use getBoundingClientRect().width instead of offsetWidth() in the computation (same for height).

I was going to write this myself, you saved me a ton of effort. Thank you so much @schickling
worked a treat! :) 👍