revert: revert combining withLitHTML base with withLitContext for now

boltdesignsystem · Oct 3, 2019 · ca828da · ca828da
1 parent 11b9448
commit ca828da
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 30 deletions.
diff --git a/packages/core/renderers/renderer-lit-html.js b/packages/core/renderers/renderer-lit-html.js
@@ -34,14 +34,6 @@ export const withLit = (Base = HTMLElement) =>
       super(...args);
     }
 
-    contextChangedCallback(name, oldValue, value) {
-      // console.log(
-      //   this.constructor.name,
-      //   `context "${name}" changed from "${oldValue}" to "${value}"`,
-      // );
-      this.triggerUpdate();
-    }
-
     renderStyles(styles) {
       if (styles) {
         // [1]
@@ -80,9 +72,13 @@ export const withLit = (Base = HTMLElement) =>
     }
   };
 
-export const withLitHtml = (Base = HTMLElement) =>
-  class extends withLit(
+export function withLitHtml(Base = HTMLElement) {
+  return class extends withLit(withComponent(BoltBase(Base))) {};
+}
+
+export const withLitContext = (Base = HTMLElement) =>
+  withLit(
     withContext(
       withLifecycle(withChildren(withUpdate(withRenderer(BoltBase(Base))))),
     ),
-  ) {};
+  );
diff --git a/packages/micro-journeys/src/bolt-svg-animations/svg-animations.js b/packages/micro-journeys/src/bolt-svg-animations/svg-animations.js
@@ -1,5 +1,5 @@
 import { define, hasNativeShadowDomSupport } from '@bolt/core/utils';
-import { withLitHtml, html, convertSchemaToProps } from '@bolt/core';
+import { withLitContext, html, convertSchemaToProps } from '@bolt/core';
 import classNames from 'classnames/bind';
 import * as SVGs from './svg';
 import styles from './svg-animations.scss';
@@ -8,7 +8,7 @@ import schema from './svg-animations.schema';
 let cx = classNames.bind(styles);
 
 @define
-class SVGAnimations extends withLitHtml() {
+class SVGAnimations extends withLitContext() {
   static is = 'bolt-svg-animations';
 
   static props = {
@@ -26,6 +26,10 @@ class SVGAnimations extends withLitHtml() {
     return ['theme'];
   }
 
+  contextChangedCallback(name, oldValue, value) {
+    this.triggerUpdate();
+  }
+
   render() {
     const props = this.validateProps(this.props);
     const theme = this.context.theme || this.theme || '';

diff --git a/packages/micro-journeys/src/connection.js b/packages/micro-journeys/src/connection.js
@@ -1,13 +1,13 @@
 import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
-import { withLitHtml, html, convertSchemaToProps } from '@bolt/core';
+import { withLitContext, html, convertSchemaToProps } from '@bolt/core';
 import classNames from 'classnames/bind';
 import styles from './connection.scss';
 import schema from './connection.schema';
 
 let cx = classNames.bind(styles);
 
 @define
-class BoltConnection extends withLitHtml() {
+class BoltConnection extends withLitContext() {
   static is = 'bolt-connection';
 
   static props = {

diff --git a/packages/micro-journeys/src/interactive-pathway.js b/packages/micro-journeys/src/interactive-pathway.js
@@ -3,10 +3,9 @@ import {
   define,
   hasNativeShadowDomSupport,
   query,
-  withContext,
   convertSchemaToProps,
 } from '@bolt/core/utils';
-import { withLitHtml, html } from '@bolt/core';
+import { withLitContext, html } from '@bolt/core';
 import classNames from 'classnames';
 import debounce from 'lodash.debounce';
 import styles from './interactive-pathway.scss';
@@ -15,7 +14,7 @@ import schema from './interactive-pathway.schema';
 let cx = classNames.bind(styles);
 
 @define
-class BoltInteractivePathway extends withLitHtml() {
+class BoltInteractivePathway extends withLitContext() {
   static is = 'bolt-interactive-pathway';
 
   static props = {
@@ -31,6 +30,10 @@ class BoltInteractivePathway extends withLitHtml() {
     return ['theme'];
   }
 
+  contextChangedCallback(name, oldValue, value) {
+    this.triggerUpdate();
+  }
+
   // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
   // @ts-ignore
   constructor(self) {

diff --git a/packages/micro-journeys/src/interactive-pathways.js b/packages/micro-journeys/src/interactive-pathways.js
@@ -1,11 +1,5 @@
-import {
-  props,
-  define,
-  hasNativeShadowDomSupport,
-  withContext,
-  defineContext,
-} from '@bolt/core/utils';
-import { withLitHtml, html, convertSchemaToProps } from '@bolt/core';
+import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
+import { withLitContext, html, convertSchemaToProps } from '@bolt/core';
 import classNames from 'classnames/bind';
 import debounce from 'lodash.debounce';
 import themes from '@bolt/global/styles/06-themes/_themes.all.scss';
@@ -17,7 +11,7 @@ import pathwaysLogo from './images/interactive-pathways-logo.png';
 let cx = classNames.bind(styles);
 
 @define
-class BoltInteractivePathways extends withLitHtml() {
+class BoltInteractivePathways extends withLitContext() {
   static is = 'bolt-interactive-pathways';
 
   static props = {

diff --git a/packages/micro-journeys/src/interactive-step.js b/packages/micro-journeys/src/interactive-step.js
@@ -2,9 +2,8 @@ import {
   props,
   define,
   hasNativeShadowDomSupport,
-  withContext,
 } from '@bolt/core/utils';
-import { withLitHtml, html, convertSchemaToProps } from '@bolt/core';
+import { withLitContext, html, convertSchemaToProps } from '@bolt/core';
 import { triggerAnims } from '@bolt/components-animate/utils';
 import classNames from 'classnames/bind';
 import styles from './interactive-step.scss';
@@ -13,7 +12,7 @@ import schema from './interactive-step.schema';
 const cx = classNames.bind(styles);
 
 @define
-class BoltInteractiveStep extends withLitHtml() {
+class BoltInteractiveStep extends withLitContext() {
   static is = 'bolt-interactive-step';
 
   static props = {