Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WNMGDS-3009][WNMGDS-3010] Add Angular example project and fix Angula…
…r web component content issue (#3275) * Add a basic Angular example that imports the design system styles * Configure it to allow web components and add a couple simple ones * Copy and paste the other wc examples without the scripts * Update version after patch * Add some debug logging * Strip the example down to just a few components These components show the current issue, which is that our custom elements don't have any initial `innerHTML`, which causes various symptoms. For the month picker, we don't get the default checked state or the disabled months. For the alert content, we don't get any of the alert content, but we get the header because it was defined with an attribute. * I think this fixes it! When Angular renders the web component at first, it doesn't have any innerHTML, but then it inserts the content later and comes in under the watchful eye of our MutationObserver. This might be a bad assumption, but the code I've added just now assumes the same kind of thing that we assumed before that if we're getting mutations to the root content, it means that we want to replace the previous content and re-render everything. Instead of the mutation kicking off the `renderPreactComponent` function and trying to read the `innerHTML` that isn't really settled with the new content, it will take the new content from the mutations and use that instead as the new content to render. For this to work, we're not taking into account previously defined template elements. I have to think about this a bit more, but I think after our changes to make the web components more stateful, we don't actually need to keep the old template around...that could be wrong. I need to think about it more. * Get rid of debug logging * A unit test in `define.test.tsx` caught an issue It was the `correctly caches children when moved in the DOM` test, and it caught that when a component was moved in the DOM it ended up with nested templates. The fix for that is to bring back the old logic of only creating a template if one doesn't already exist WHEN we're not dealing with inner content mutations. * Add some web component examples back in * Revert "A unit test in `define.test.tsx` caught an issue" This reverts commit 32237c1. Apparently we can't both make this unit test happy and have working Angular examples. I'm going to have to think about this scenario some more. If I bring back the code that will look for previous templates when `addedNodes` doesn't exist, nested web components don't work right in the Angular examples. Try checking out 32237c1 and running the `examples/angular` project. * Fix c578c7c (see note) I think next I'll try actually removing the template if it is empty so even the empty template doesn't get duplicated inside the new template * This is a better version of the previous fix where we not only create a new template if the previous one was empty, but we remove the empty template before creating the new one so that it doesn't make its way into the content of the new one. Before this fix, the Angular-rendered alert example with a nested button would end up looking like this in the DOM: ```html <ds-button> <button type="button" class="ds-c-button ds-c-button--alternate ds-c-button--solid" > <template><span></span></template> Break things </button> <template> <span> <template><span></span></template> Break things </span> </template> </ds-button> ``` The above HTML has an empty content inside the actual button content, and the top-level template for the `ds-button` element has a another template inside of it! After this fix, it looks as we expect it: ```html <ds-button> <button type="button" class="ds-c-button ds-c-button--alternate ds-c-button--solid" > Break things </button> <template><span>Break things</span></template> </ds-button> ``` * Edited the comment to try to make it clearer * Update our nvm node version for testing * Fix bad ds version after bump * Move the template content into a separate HTML file—thanks, Michael! * Update lockfile (automatically removing bad entries) * An ugly solution: polling for changes to the template The way I got to this solution is that I observed that Angular was actually making changes to the web component's `template` element contents whenever Angular was re-rendering (probably because of [this line](https://github.com/CMSgov/design-system/blob/pwolfert/angular-example/packages/design-system/src/components/web-components/preactement/define.ts#L393)). The problem is that I can't use a MutationObserver on template content because it's only a document fragment and not part of the DOM. Polling for changes works, but I don't think this is a production-level solution. * Remove the polling part of my last commit I just wanted to get that code in version control, but I don't think this is the long-term solution * Polling now working in the Angular wrapper instead of the design system Ideally if we have to have an Angular wrapper, we could detect changes made by Angular and trigger a re-render, but nothing has seemed to work. This is the only thing so far that has worked. * Looks like custom event binding works even without the wrapper * Remove experimental solutions for ticket 3041 * Add new comment and remove old one * Add a README for the project * Add some more unit tests around this functionality * Using `flatMap` is more succinct and readible here * Get rid of debug logs
- Loading branch information
