feat: migrate over the customElements.define-related replacement + component dependency updates from #1579

Author: sghoweri

docs-site/src/components/bolt-select/bolt-select.standalone.js

@@ -1,20 +1,15 @@
 // Initially inspired by https://github.com/adidas/choicesjs-stencil/blob/master/src/components/choicesjs-stencil/choicesjs-stencil.tsx
 
-import { props, define } from '@bolt/core/utils';
+import { props } from '@bolt/core/utils';
+import { customElement, html } from '@bolt/element';
 import Choices from 'choices.js';
-import {
-  withLitHtml,
-  html,
-  // render,
-} from '@bolt/core/renderers/renderer-lit-html';
+import { withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 import { filterObject, isDefined, createSelectOptionData } from './utils';
 
 import styles from './bolt-select.scss';
 
-@define
-class BoltSelect extends withLitHtml() {
-  static is = 'bolt-select';
-
+@customElement('bolt-select')
+class BoltSelect extends withLitHtml {
   static props = {
     type: props.string, // single | multiple | text
     value: props.string,

docs-site/src/components/docs-search/docs-search.js

@@ -1,13 +1,11 @@
-import { props, define } from '@bolt/core/utils';
-import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { props } from '@bolt/core/utils';
+import { customElement, unsafeHTML, html } from '@bolt/element';
+import { withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 import docsearch from 'docsearch.js/dist/npm/src/lib/main.js';
 import qs from 'querystring';
 
-@define
-class BoltDocsSearch extends withLitHtml() {
-  static is = 'bds-docs-search';
-
+@customElement('bds-docs-search')
+class BoltDocsSearch extends withLitHtml {
   static props = {
     apiKey: props.string,
     indexName: props.string,

docs-site/src/components/radio-switch/change-case.js

@@ -1,11 +1,10 @@
-import { props, define } from '@bolt/core/utils';
-import { html, withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
+import { props } from '@bolt/core/utils';
+import { customElement, html } from '@bolt/element';
+import { withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 const changeCase = require('change-case');
 
-@define
-class BoltChangeCase extends withLitHtml() {
-  static is = 'bolt-change-case';
-
+@customElement('bolt-change-case')
+class BoltChangeCase extends withLitHtml {
   static props = {
     mode: props.string,
   };

docs-site/src/components/radio-switch/radio-switch.js

@@ -1,13 +1,11 @@
-import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
-import { html, withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
+import { html, customElement } from '@bolt/element';
+import { withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 import classNames from 'classnames/bind';
 import styles from './radio-switch.scss';
 // let cx = classNames.bind(styles);
 
-@define
-class BoltRadioSwitch extends withLitHtml() {
-  static is = 'bolt-radio-switch';
-
+@customElement('bolt-radio-switch')
+class BoltRadioSwitch extends withLitHtml {
   // static props = {
   //   schema: props.object,
   //   formData: props.object,

docs-site/src/components/schema-form/component-explorer.js

@@ -1,11 +1,10 @@
 import qs from 'querystring';
-import { define, props, defineContext, withContext } from '@bolt/core/utils';
+import { props, defineContext, withContext } from '@bolt/core/utils';
 import { prepSchema } from './utils';
 import isEqual from 'react-fast-compare';
-import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { withLitHtml,  } from '@bolt/core/renderers/renderer-lit-html';
 import { guard } from 'lit-html/directives/guard';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { styleMap, html, unsafeHTML, customElement } from '@bolt/element';
 
 // define which specific props to provide to children that subscribe
 export const ComponentExplorerContext = defineContext({
@@ -18,10 +17,9 @@ export const ComponentExplorerContext = defineContext({
 import styles from './component-explorer.scss';
 import globalStyles from '@bolt/global/styles/index.scss';
 
-@define
-export default class ComponentExplorer extends withContext(withLitHtml()) {
-  static is = 'bolt-component-explorer';
 
+@customElement('bolt-component-explorer')
+export default class ComponentExplorer extends withContext(withLitHtml) {
   static props = {
     schemaUuid: props.string,
     schema: props.object,

docs-site/src/components/schema-form/schema-form.js

@@ -4,10 +4,10 @@ import { h, withPreact } from '@bolt/core/renderers';
 import isEqual from 'react-fast-compare';
 import { ComponentExplorerContext } from './component-explorer';
 
-@define
-export default class SchemaForm extends withContext(withPreact()) {
-  static is = 'bolt-schema-form';
+import { customElement } from '@bolt/element';
 
+@customElement('bolt-schema-form')
+export default class SchemaForm extends withContext(withPreact) {
   static props = {
     schema: props.object,
     formData: props.object,

packages/base-element/index.js

@@ -9,7 +9,10 @@ export {
   findParentTag,
 } from './src/lib/utils';
 
+export { convertInitialTags } from './src/lib/decorators';
 export { customElement, unsafeCSS } from 'lit-element';
 export { render, html } from 'lit-html';
 export { ifDefined } from 'lit-html/directives/if-defined';
+export { classMap } from 'lit-html/directives/class-map.js';
 export { styleMap } from 'lit-html/directives/style-map.js';
+export { unsafeHTML } from 'lit-html/directives/unsafe-html';

packages/base-element/src/BoltElement.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-expressions */
-import { LitElement } from 'lit-element';
 import { supportsAdoptingStyleSheets } from 'lit-element/lib/css-tag.js';
 import { Slotify } from './Slotify.js';
 import {
@@ -11,7 +10,7 @@ import {
 @renderAndRenderedEvents()
 @lazyStyles()
 @conditionalShadowDom()
-class BoltElement extends Slotify(LitElement) {
+class BoltElement extends Slotify {
   // patch to https://github.com/Polymer/lit-element/blob/master/src/lit-element.ts#L208
   // as a temp workaround to constructible stylesheets not working when
   // rendering inside + outside an iframe. Filing a bug with lit-element shortly!

packages/components/bolt-accordion/src/AccordionItem/index.js

@@ -1,15 +1,13 @@
-import { withContext, define, props, css } from '@bolt/core/utils';
-import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
-
+import { html, customElement } from '@bolt/element';
+import { withContext, props, css } from '@bolt/core/utils';
+import { withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 import styles from './accordion-item.scss';
 import { AccordionItemTrigger } from './AccordionItemTrigger';
 import { AccordionItemContent } from './AccordionItemContent';
 import { AccordionContext } from '../accordion';
 
-@define
-class AccordionItem extends withContext(withLitHtml()) {
-  static is = 'bolt-accordion-item';
-
+@customElement('bolt-accordion-item')
+class AccordionItem extends withContext(withLitHtml) {
   static props = {
     open: props.boolean,
     contentSpacing: props.string,

packages/components/bolt-accordion/src/accordion.js

@@ -1,15 +1,8 @@
-import {
-  defineContext,
-  withContext,
-  define,
-  props,
-  css,
-} from '@bolt/core/utils';
-import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
-
+import { html, customElement } from '@bolt/element';
+import { defineContext, withContext, props, css } from '@bolt/core/utils';
+import { withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 import styles from './accordion.scss';
 import schema from '../accordion.schema.yml';
-
 import { Accordion } from './_accordion-handorgel';
 
 // define which specific props to provide to children that subscribe
@@ -20,10 +13,8 @@ export const AccordionContext = defineContext({
   iconValign: schema.properties.icon_valign.default,
 });
 
-@define
-class BoltAccordion extends withContext(withLitHtml()) {
-  static is = 'bolt-accordion';
-
+@customElement('bolt-accordion')
+class BoltAccordion extends withContext(withLitHtml) {
   static props = {
     single: props.boolean,
     noSeparator: props.boolean,