feat: implement css injector in archetype (#308)

EMP-1230

Co-authored-by: Mavi Fdez <[email protected]>

cypress.json

@@ -9,5 +9,6 @@
   "screenshotOnRunFailure": false,
   "video": false,
   "testFiles": "**/*.feature",
-  "retries": 1
+  "retries": 1,
+  "includeShadowDom": true
 }

package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.33",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
-    "@empathyco/x-archetype-utils": "^0.1.0-alpha.15",
+    "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
     "@empathyco/x-components": "^3.0.0-alpha.400",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
     "@empathyco/x-types": "^10.0.0-alpha.72",

public/snippet-script.js

@@ -44,6 +44,12 @@ function getEnv() {
   return undefined;
 }
 
+function getIsolationStrategy() {
+  const isolation = popFromURLParameters('isolation');
+
+  return isolation === undefined ? undefined : isolation === 'true';
+}
+
 const instance = popFromURLParameters('instance') || 'empathy';
 const env = getEnv();
 const scope = popFromURLParameters('scope') || 'desktop';
@@ -54,6 +60,7 @@ const currency = popFromURLParameters('currency') || 'EUR';
 const consent = popFromURLParameters('consent') !== 'false';
 const documentDirection = popFromURLParameters('doc-dir') || 'ltr';
 const store = popFromURLParameters('store') || undefined;
+const isolate = getIsolationStrategy();
 popFromURLParameters('query'); // prevent the query from be included as extra param
 popFromURLParameters('filter'); // Prevent the filters to be included as extra param
 
@@ -69,6 +76,7 @@ window.initX = {
   consent,
   documentDirection,
   store,
+  isolate,
   ...URLParameters,
   queriesPreview: [
     {

rollup.config.js

@@ -1,4 +1,5 @@
 import { createConfig } from './build/instrumentation.build';
+import { rollupCssInjectorConfig } from "@empathyco/x-archetype-utils";
 
 export default createConfig({
   /*
@@ -19,5 +20,6 @@ export default createConfig({
   },
   plugins: {
     // Modify plugins options here.
+    ...rollupCssInjectorConfig
   }
 });

src/main.ts

@@ -1,3 +1,4 @@
+import { CssInjector } from "@empathyco/x-archetype-utils";
 import { XInstaller } from '@empathyco/x-components';
 import Vue from 'vue';
 import { installXOptions } from './x-components/plugin.options';
@@ -11,4 +12,5 @@ declare global {
 Vue.config.productionTip = false;
 Vue.config.devtools = window.__enableVueDevtools__ ?? false;
 
+new CssInjector(true);
 new XInstaller(installXOptions).init();

src/x-components/plugin.options.ts

@@ -1,5 +1,5 @@
-import { InstallXOptions } from '@empathyco/x-components';
-import { I18n } from '@empathyco/x-archetype-utils';
+import { InstallXOptions, SnippetConfig } from '@empathyco/x-components';
+import { I18n, cssInjector } from '@empathyco/x-archetype-utils';
 import App from '../App.vue';
 import * as messages from '../i18n/messages';
 import store from '../store';
@@ -11,6 +11,7 @@ export const installXOptions: InstallXOptions = {
   adapter,
   store,
   app: App,
+  domElement: getDomElement,
   xModules: {
     facets: {
       config: {
@@ -40,3 +41,26 @@ export const installXOptions: InstallXOptions = {
     };
   }
 };
+
+/**
+ * Creates a DOM element to mount the X Components app.
+ *
+ * @param snippetConfig - The snippet configuration.
+ * @returns The DOM element.
+ */
+function getDomElement({ isolate }: SnippetConfig): Element {
+  const domElement = document.createElement('div');
+
+  if (isolate || process.env.NODE_ENV === 'production') {
+    const container = document.createElement('div');
+    const shadowRoot = container.attachShadow({ mode: 'open' });
+    shadowRoot.appendChild(domElement);
+    document.body.appendChild(container);
+    cssInjector.setHost(shadowRoot);
+  } else {
+    document.body.appendChild(domElement);
+    cssInjector.setHost(document.head);
+  }
+
+  return domElement;
+}

tests/e2e/cucumber/common-steps.spec.ts

@@ -14,12 +14,14 @@ Then('search bar is clicked', () => {
 
 // Search
 When('a {string} is typed', (query: string) => {
+  cy.getByDataTest('search-input').should('exist').click();
   cy.typeQuery(query).then(() => {
     cy.getByDataTest('search-input').invoke('val').as('searchedQuery');
   });
 });
 
 When('{string} is searched', (query: string) => {
+  cy.getByDataTest('search-input').should('exist').click();
   cy.searchQuery(query).then(() => {
     cy.getByDataTest('search-input').invoke('val').as('searchedQuery');
   });

tests/e2e/support/index.ts

@@ -101,14 +101,14 @@ type AddPreviousParam<Functions extends Record<keyof Functions, AnyFunction>> =
 type CypressCommandOptions = Partial<Loggable & Timeoutable & Withinable & Shadow>;
 
 const customCommands: CustomCommands = {
-  searchQuery: query => cy.typeQuery(query).type('{enter}'),
+  searchQuery: query => cy.typeQuery(query).type('{enter}', { force: true }),
   searchQueries: (...queries) => {
     queries.forEach(query => {
-      cy.getByDataTest('search-input').clear();
-      cy.typeQuery(query).type('{enter}');
+      cy.getByDataTest('search-input').clear({ force: true });
+      cy.typeQuery(query).type('{enter}', { force: true });
     });
   },
-  typeQuery: query => cy.getByDataTest('search-input').type(query),
+  typeQuery: query => cy.getByDataTest('search-input').type(query, { force: true }),
   focusSearchInput: () => cy.getByDataTest('search-input').click(),
   clearSearchInput: () => cy.getByDataTest('clear-search-input').click()
 };