Application Development Meanderings

codemirror, react and height sizing.md If you use codemirror and react together, say through react-codemirror2 , then you may have run into sizing issues. Out of the box, codemirror has a style height setting to 300px on the outer div with classname CodeMirror . react-codemirror2 wraps this with another div called react-codemirror2 . If you don’t load the CSS correctly, the default height of the component is 300px, which is rarely what you want. You generally want the editor to resize based on your overall layout. However, you may have found it difficult to do so. I certrainly did. The secret is to realize that codemirror add its own scrollbars and manages scrolling in order to optimize content rendering. There are really two modes for setting the height: Set the size of the outer container explicitly with a hight, say 500px using editor.setSize() however this does not refresh when the page changes size. Allow for dynamic resizing but ensure that the the com...

pass through from typescript to babel.md I often use typescript just for types and not for bundling or transpilation to different ES targets. Typescript can play a few different roles that when used with a complex stack, can cause tooling confusion. To avoid confusion, I generally have typescript do as little as possible. To have typescript passthrough everything to babel, which is configured to transpile down to my target, I set tsconfig.json to: module: esnext => target an ES version that understands import/export natively. moduleResolution: node => resolve modules using node semantics. This is the default, but when “module” is used, it seems to get reset to a bad value. target: esnext => target the latest es environment for destructuring, default args, etc. jsx: preserve: => Keep brackets (see below). importHelpers; true => If typescript does happen to transpile, import tslib instead of writing some boilerplate into each output module. Thi...