elm-performance-debugging

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

elm-performance-debugging

(★ 14)

Simple way how to improve experience from performance profiling and debugging in Elm output code.

elm-performance-debugging Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# elm-performance-debugging

:warning: This code could potentially break your Elm output code, so never ever use this for production. It intended only for development purposes :warning:

Simple way how to improve experience from performance profiling and debugging in Elm output code.

Usually during performance profiling you god list of many anonymous function calls and you need to manually go and click through them. 
But with simple regex aplied on compiled output, you can get more human friendly names.

```JavaScript
/* replace FX nested anonymous functions with simple nesting
  Example:

var $elm$core$List$filter = F2(
      function (isGood, list) {
        //some logic here
      }
  );

Anonymous function will be named by
  __$elm$core$List$filter
*/

const rule = /var ([^=]+)( = F\d\([^f]+function)[^(]\(/gmi;
const replacement = `var $1$2 __$1( `;
```

And another aditional expression:
```JavaScript
/* AX functions where FX is called like
  Example:
  return A3(
      $elm$core$List$foldr,
      F2(
        function THIS_WILL_BE_REPLACED (x, xs) {
          return isGood(x) ? A2($elm$core$List$cons, x, xs) : xs;
        }),
      _List_Nil,
      list);
  And THIS_WILL_BE_REPLACED will be replaced by `___$elm$core$List$foldr`
*/
consrt rule = /(\sA\d\([\s]+)([^,]+)(,[\s]+)(function[^(]+)\(/gm;
const replacement = `$1$2$3$4___$2(`;
```

Example how this can be used with webpack. This code is using `string-replace-loader` webpack loader.

```JavaScript
{
  test: /\.elm$/,
  exclude: [/elm-stuff/, /node_modules/],
  use: [
    // this crazy magic is only for localhost development
    devMode && perfDebug ? {
      loader: 'string-replace-loader',
      options: {
        multiple: [
          { /* replace FX nested anonymous functions with simple nesting
              Example:

var $elm$core$List$filter = F2(
                  function (isGood, list) {
                    //some logic here
                  }
              );

Anonymous function will be named by
              __$elm$core$List$filter
            */
            search:  /var ([^=]+)( = F\d\([^f]+function)[^(]\(/gmi,
            replace: `var $1$2 __$1( `,
          },
          { /* AX functions where FX is called like
              Example:
              return A3(
                  $elm$core$List$foldr,
                  F2(
                    function THIS_WILL_BE_REPLACED (x, xs) {
                      return isGood(x) ? A2($elm$core$List$cons, x, xs) : xs;
                    }),
                  _List_Nil,
                  list);
              And THIS_WILL_BE_REPLACED will be replaced by `___$elm$core$List$foldr`
            */
            search: /(\sA\d\([\s]+)([^,]+)(,[\s]+)(function[^(]+)\(/gm,
            replace: `$1$2$3$4___$2(`,
          }
        ]
      }
    } : null,
    devMode ? 'elm-hot-webpack-loader' : null,
    {
      loader: 'elm-webpack-loader',
      options: {
        optimize: !devMode,
        pathToElm: 'node_modules/.bin/elm'
      },
    },
  ].filter(x => x), // non-nulls
  }
}
```

And here example of performance recording in Chrome dev tools. 
![Performance recording example](https://raw.githubusercontent.com/janjelinek/elm-performance-debugging/master/usage-example.png)

elm-performance-debugging

elm-performance-debugging Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

elm-performance-debugging

elm-performance-debugging Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README