Webpack config to make ember-validated-form work with embroider optimized

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\/ember-validated-form\/.+\/validated-button\.hbs$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            {
              search: 'component buttonComponent',
              replace: 'component "validated-button/button"',
              strict: true,
            },
            {
              search: 'component button}',
              flags: 'g',
              replace:
                'component "validated-button/button" onclick=action disabled=disabled label=label type=type class=class}',
              strict: true,
            },
          ],
        },
      },
      {
        test: /\/ember-validated-form\/.+\/validated-input\.hbs$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            // Pass extra arguments to the render component that are normally
            // curried into the passed components
            {
              search: '{{component renderComponent',
              replace: [
                '{{component renderComponent',
                'label=label',
                'required=required',
                'hint=hint',
                'showValidity=showValidity',
                'errors=errors',
              ].join('\n'),
            },
            // Make the passed components static
            {
              search: 'component (\\w+)Component',
              flags: 'g',
              replace: 'component "validated-input/$1"',
              strict: true,
            },
          ],
        },
      },
      {
        test: /\/ember-validated-form\/.+\/validated-input\/render.hbs$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            // make label/hint/error components static, conditionally render
            // them based on how the validated-input conditionally defines them,
            // and pass in arguments that would have been currient into the
            // dynamic definition
            {
              search: 'component labelComponent',
              flags: 'g',
              replace:
                'component "validated-input/label" label=label required=required isValid=isValid isInvalid=isInvalid inputId=inputId',
            },
            {
              search: '{{component hintComponent}}',
              flags: 'g',
              replace:
                '{{#if hint}}{{component "validated-input/hint" hint=hint}}{{/if}}',
            },
            {
              search: '{{component errorComponent}}',
              flags: 'g',
              replace:
                '{{#if (and showValidity errors)}}{{component "validated-input/error" errors=errors}}{{/if}}',
            },
            // input-type components
            {
              search: 'component ([a-z]+)Component',
              flags: 'g',
              replace: 'component "validated-input/types/$1"',
            },
            {
              search: 'component radioGroupComponent',
              flags: 'g',
              replace: 'component "validated-input/types/radio-group"',
            },
          ],
        },
      },
      {
        test: /\/ember-validated-form\/.+\/validated-input\/types\//,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            {
              search: 'component labelComponent',
              flags: 'g',
              replace: 'component "validated-input/label"',
            },
            // embroider can't find the queue helper, but it's just used to
            // respond to click events in multiple ways, which we can do with a
            // modifier
            {
              search: '{{action \\(queue (\\(.+?\\)) setDirty\\)}}',
              flags: 'g',
              replace: '{{action $1}} {{on "click" setDirty}}',
            },
          ],
        },
      },
      {
        test: /\/ember-one-way-select\/.+\/one-way-select\/option\.hbs$/,
        loader: 'string-replace-loader',
        options: {
          search: '{{component @optionComponent[\\s\\S]+?}}',
          flags: 'g',
          replace: '',
          strict: true,
        },
      },
    ],
  },
};