Skip to content

Instantly share code, notes, and snippets.

@bendemboski
Created May 18, 2021 23:55
Show Gist options
  • Save bendemboski/962fd6afd1e425c8e47460e370ae4153 to your computer and use it in GitHub Desktop.
Save bendemboski/962fd6afd1e425c8e47460e370ae4153 to your computer and use it in GitHub Desktop.
Webpack config to make ember-validated-form work with embroider optimized
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,
},
},
],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment