Posts

codemirror, react and height sizing.md

codemirror, react and height sizing.mdIf 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 component knows how tall it is.Generall…

pass through from typescript to babel.md

pass through from typescript to babel.mdI 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. This saves spacenoEmitHelpers: true =&g…

typescript ambient declarations, global.d.ts, lib and typeRoot.md

typescript ambient declarations, global.d.ts, lib and typeRoot.mdWhen using typescript, you may have global ambient declarations you need to add.For example, my HTML defines several variables prior to my main .js file being loaded and executed. The .js file, packed using webscript and written in typescript, needs access to those variables.Accesing the HTML variables is much like accessing “window” inside of a .ts file. The typescript compiler declares a window object for us and makes it available without import in our .ts files.We clearly need something like that.google searching did not yield alot of insight, but the key thoughts you need to know are:typescript reads all your files in your compiler path e.g. src then compiles the file you want to compile and output.typescript has a search path algorithm that is used when importing modules. This search path is not relevant to solving the global ambient problem.Global ambient can be declared in a global.d.ts file:declareconst myvar:boo…

skip scalajs-bundler, use npm with sbt/scalajs.md

skip scalajs-bundler, use npm with sbt/scalajs.mdMany people are using scalajs-bundler to specify their javascript dependencies using npm-style (sbt first, npm second) declarations.You don’t need to use scalajs-bundler, which can be confusing to use. You can still retain the flexibility of running npm after your compile triggers on source code change.First, set up a webpack config. Only the relevant parts are shown:const common ={...whatever you want....}const prod ={ entry: path.resolve(__dirname,"target/scala-2.12/me-opt.js"), plugins:[newwebpack.DefinePlugin({"proces.env":{"NODE_ENV":'"production"'}}),newUglifyJsPlugin({ parallel:4, cache:true, sourceMap:"inline",})]}const dev ={ entry: path.resolve(__dirname,"target/scala-2.12/me-fastopt.js")}switch(process.env.npm_lifecycle_event){case'afterScalaJSFast': config =merge(common, dev)breakcase'afterScala…

attributes with react and typescript.md

If you use typescript with react you may wonder what the right signature is for your “properties” interface.Obviously, your component will have few to many specific properties that reflect your domain. However, you may wish to also provide for the ability to add other attributes, such as those valid for a div property. In other words, you want to extend your props interface with that of the properties from a div element. How do you do that?There are really two issues:How do you extend your props interfacesHow do you filter the props once you receive them to just those that apply.Extend Your Prop Interface or Use Sum TypesIt’s not uncommon to seeinterfaceProps{ className?:string yourProp?:number}with the idea of using it in class MyComponent extends React.Component<Props, any> somewhere. If your component will have an outer div, you may also pass in a react element so that its configurable. But let’s say your outer element is a div and you want to be able to allow clients to ad…

creating extensible components.md

We would like to create a flexible set of functions for rendering a view on checkboxes. Many libraries try to take “control” of the rendering process and introduce brittleness into the component by making too many assumptions and then trying to provide too many “options” to allow you to customize the more monolithic comopnent. By breaking apart our functions into smaller ones, while offering defaults with all the bells and whistles, we can make a much more flexible library that can be used in many different scenarios.You can use ramda and recompose “in the small” assuming you are using it elswhere in your library that justifies its inclusion in your bundle.Here is a simple example of how we can use these extra tools to create a very simple, non-aria enabled check box list. It is not optimized for large lists either i.e. its not “virtualized.”import React from"react"import{ defaultProps }from"recompose"import R from"ramda"import{ firstOrElse, noop, compose…

typescript and react types

It can be confusing to move from javascript to typescript if you are not used to types.If you want to use more advanced react component creation techniques, it can be even more confusing.Passing Down “Created” ElementsIf you pass in elements, such as a message to display when there is no data, you need to pass in either a react element or someting you pass to JSX/createElement (see Pass in Elements for Your Component).If you already have an element that you created in the parent element, then you have an element you want to pass. You may just want to pass in something that is renderable. Should you pass in a RectElement or something more general that is renderable? What type should you use?If you think of the element you want to pass like children, then you can find the definition for what is passed is children by looking at some of the other definitoions. You’ll find ReactNode[].//// React Nodes// http://facebook.github.io/react/docs/glossary.html// ----------------------------------…