@bolt/core - npm Package Compare versions

Comparing version 0.10.3 to 1.0.0-alpha.5f29a4c1

data/image-sizes.js

@@ -1,3 +0,20 @@
-const imageSizes = require('@bolt/core-data/image-sizes/image-sizes.data.json').boltImageSizes;
+// const imageSizes = require('@bolt/core-data/image-sizes/image-sizes.data.json').boltImageSizes;
 
+// @todo Grab the actual data from `./build/data/` - also duplicated in `image-tasks.js`
+const imageSizes = [
+  50,
+  100,
+  200,
+  320,
+  480,
+  640,
+  800,
+  1024,
+  1366,
+  1536,
+  1920,
+  2560,
+  2880,
+];
+
 module.exports.imageSizes = imageSizes;

data/spacing-sizes.js

@@ -1,3 +0,14 @@
-import * as boltSpacingSizes from '@bolt/core-data/spacing/bolt-spacing-sizes.data.json';
+// import * as boltSpacingSizes from '@bolt/core/data/spacing-sizes.js';
 
-export const spacingSizes = boltSpacingSizes.boltSpacingSizes;
+
+// export const spacingSizes = boltSpacingSizes.boltSpacingSizes;
+// @todo Grab the actual data from `./build/data/spacing/sizes.bolt.json`
+export const spacingSizes = {
+  "xxsmall": "0.25rem",
+  "xsmall": "0.5rem",
+  "small": "1rem",
+  "medium": "2rem",
+  "large": "4rem",
+  "xlarge": "8rem",
+  "xxlarge": "16rem"
+};

index.js

 // Export non-Bolt dependencies shared across virtually all components
-export { define, props, withComponent, withUpdate } from 'skatejs';
-export { h } from 'preact';
+export {
+  define,
+  props,
+  withComponent,
+  withUpdate,
+} from 'skatejs';
 
-// Export Bolt utils
+export { Component, h } from 'preact';
+export { hyper } from 'hyperhtml/cjs';
+
+// Export Utilties + Helpers
 export * from './utils/css';
+export * from './utils/supports-css-vars';
+export * from './utils/color-contrast';
+export * from './utils/rgb2hex';
+export * from './utils/supports-passive-event-listener';
 export { declarativeClickHandler } from './utils/declarative-click-handler';
 export * from './utils/environment';
 
-export { withPreact } from './renderers/renderer-preact';
-export { withHyperHTML } from './renderers/renderer-hyperhtml';
+export { withPreact, wrapPreact } from './renderers/renderer-preact';
+export * from './renderers/renderer-hyperhtml';
 
@@ -42,2 +53,2 @@ // Export Bolt data shared
   return remainingClasses.join(' ').trim();
-}
+}

package.json

 {
   "name": "@bolt/core",
   "description": "Core dependencies, utils, etc.",
-  "version": "0.10.3",
+  "version": "1.0.0-alpha.5f29a4c1",
   "license": "MIT",
   "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/bolt-design-system/bolt"
-  },
+  "style": "styles/index.scss",
+  "repository": "https://github.com/bolt-design-system/bolt/tree/master/packages/core",
   "dependencies": {
-    "@bolt/core-data": "^0.9.0",
     "@webcomponents/custom-elements": "^1.0.8",
-    "@webcomponents/html-imports": "^1.1.1",
     "@webcomponents/shadycss": "^1.1.1",
-    "@webcomponents/shadydom": "^1.0.12",
+    "@webcomponents/shadydom": "github:muan/shadydom#qsa",
     "@webcomponents/template": "^1.2.2",
     "@webcomponents/webcomponents-platform": "^1.0.0",
     "@webcomponents/webcomponentsjs": "^1.1.0",
+    "breakpoint-sass": "^2.7.1",
+    "breakpoint-slicer": "bolt-design-system/breakpoint-slicer",
     "core-js": "^2.5.1",
@@ -25,5 +23,8 @@ "document-register-element": "^1.7.2",
     "preact": "^8.2.7",
+    "sassy-maps": "github:at-import/Sassy-Maps#0.x.x",
     "skatejs": "^5.1.1",
     "yocss": "^0.5.1"
-  }
+  },
+  "bugs": "https://github.com/bolt-design-system/bolt/issues",
+  "homepage": "https://bolt-design-system.com"
 }

polyfills/polyfill-loader.js

@@ -5,5 +5,10 @@ require('es6-promise').polyfill();
 require('core-js/modules/es6.array.from');
+require('core-js/modules/es6.string.starts-with');
 require('core-js/modules/es7.array.includes');
 require('core-js/modules/es6.array.for-each');
+require('core-js/modules/es6.object.assign');
+require('core-js/library/es6/reflect');
 
+let polyfills = [];
+
 // ex. NodeList.forEach --> IE 11
@@ -27,5 +32,5 @@ if (window.NodeList && !NodeList.prototype.forEach) {
     var evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
+  evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+  return evt;
+}
   CustomEvent.prototype = window.Event.prototype;
@@ -35,19 +40,50 @@ window.CustomEvent = CustomEvent;
 
+// Detect Shadow Dom Support
+if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
+  (window.ShadyDOM && window.ShadyDOM.force)) {
+  polyfills.push('sd');
+}
 
+// Detect Custom Element Support
+if (!window.customElements || window.customElements.forcePolyfill) {
+  polyfills.push('ce');
+}
 
+// NOTE: any browser that does not have template or ES6 features
+// must load the full suite (called `lite` for legacy reasons) of polyfills.
+if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
+  // Edge has broken fragment cloning which means you cannot clone template.content
+  !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
+  polyfills = ['lite'];
+}
 
-export const polyfillLoader = new Promise(function (resolve, reject) {
-  if (window.customElements !== undefined) {
+
+const webComponentPolyfillPath = `bolt-webcomponents-${polyfills.join('-')}.js`;
+
+
+export const polyfillLoader = new Promise((resolve) => {
+  if (polyfills.length > 0) {
     Promise.all([
-      import(/* webpackChunkName: "webcomponents-sd-ce" */ './wc-polyfill-ce-sd.js')
-    ]).then(() => {
+      import(/* webpackChunkName: `${webComponentPolyfillPath}` */ `./${webComponentPolyfillPath}`),
+    ])
+    .then(() => {
       resolve();
+    })
+    .catch((error) => {
+      throw new Error(`Could not load ${webComponentPolyfillPath}. Error: ${error}`);
     });
   } else {
     Promise.all([
-      import(/* webpackChunkName: "webcomponents-lite" */ './webcomponents-hi-sd-ce-pf-index.js')
-    ]).then(() => {
+      import(/* webpackChunkName: "custom-elements-es5-adapter" */
+      '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'),
+    ])
+    .then(() => {
       resolve();
+    })
+    .catch((error) => {
+      throw new Error(`Could not load @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js. Error: ${error}`);
     });
   }
+}).catch((error) => {
+  throw new Error(`Error: unexpected polyfill-loader.js error. ${error}`);
 });

renderers/renderer-hyperhtml.js

@@ -1,7 +0,17 @@
-/** @jsx h */
 // HyperHTML Renderer ported to SkateJS
-
-import { shadow, props } from 'skatejs';
+import {
+  withLifecycle,
+  withChildren,
+  withContext,
+  withRenderer,
+  withUpdate,
+  // withComponent,
+  shadow,
+  props,
+} from 'skatejs';
+import { hyper, bind } from 'hyperhtml/cjs';
 import { hasNativeShadowDomSupport } from '../utils/environment';
 
+// const defineProperty = Object.defineProperty;
+
 import {
@@ -12,8 +22,6 @@ declarativeClickHandler,
 
-const { hyperHTML, hyper, wire, bind, Component } = require('hyperhtml/cjs');
 
+export function BoltComponent(Base = HTMLElement) {
+  return class extends withLifecycle(withChildren(withContext(withUpdate(withRenderer(Base))))) {
 
-export function withHyperHTML(Base = class extends HTMLElement { }) {
-  return class extends Base {
-
     static props = {
@@ -27,2 +35,6 @@ onClick: props.string,
 
+
+      this.hyper = hyper;
+
+
       if (findParentTag(this, 'FORM') || this.getAttribute('no-shadow') !== null) {
@@ -36,19 +48,42 @@ this.useShadow = false;
     connectedCallback() {
+      if (this.dataset.ssrContent) {
+        this.innerHTML = JSON.parse(this.dataset.ssrContent);
+      }
+
       this._checkSlots();
 
-      // Handles external click event hooks
-      this.addEventListener('click', this.clickHandler);
+      this.connecting && this.connecting();
+      // super.connectedCallback && super.connectedCallback();
+      // this.connected && this.connected();
     }
 
     disconnectedCallback() {
-      super.disconnectedCallback();
-      this.removeEventListener('click', this.clickHandler);
+      this.disconnecting && this.disconnecting();
     }
 
-    // Attach external events declaratively
-    clickHandler(event) {
-      declarativeClickHandler(this);
-    }
 
+    // lazily bind once hyperHTML logic
+    // to either the shadowRoot, if present and open,
+    // the _shadowRoot property, if set due closed shadow root,
+    // or the custom-element itself if no Shadow DOM is used.
+    // get html() {
+    //   return this._html$ || (this.html = bind(this.renderRoot));
 
+    //   //   // in case of Shadow DOM {mode: "open"}, use it
+    //   //   this.shadowRoot ||
+    //   //   // in case of Shadow DOM {mode: "close"}, use it
+    //   //   // this needs the following reference created upfront
+    //   //   // this._shadowRoot = this.attachShadow({mode: "close"});
+    //   //   this._shadowRoot ||
+    //   //   // if no Shadow DOM is used, simply use the component
+    //   //   // as container for its own content (it just works too)
+    //   //   this
+    //   // ));
+    // }
+
+    // // it can be set too if necessary, it won't invoke render()
+    // set html(value) {
+    //   defineProperty(this, '_html$', { configurable: true, value: value });
+    // }
+
     addStyles(stylesheet) {
@@ -60,3 +95,3 @@ let styles = Array.from(stylesheet);
         return hyper.wire() `
-          <style>${ styles } </style>
+          <style>${ styles} </style>
         `;
@@ -66,22 +101,46 @@ }
 
+    slot(name) {
+      if (this.useShadow && hasNativeShadowDomSupport) {
+        if (name === 'default') {
+          return hyper.wire() `
+            <slot />
+          `;
+        } else {
+          return hyper.wire() `
+            <slot name="${name}" />
+          `;
+        }
+      } else {
+        if (this.slots[name]) {
+          return hyper.wire() `
+            ${this.slots.default}
+          `;
+        }
+        else {
+          console.log(`The ${name} slot doesn't appear to exist...`);
+        }
+      }
+    }
 
+
     // Inspired by https://codepen.io/jovdb/pen/ddRZKo
     _checkSlots() {
-      const children = this.childNodes;
       this.slots = {
         default: []
       };
-      if (children.length > 0) {
-        [...children].map(child => {
-          const slotName = child.getAttribute ? child.getAttribute("slot") : null;
-          if (!slotName) {
-            this.slots.default.push(child);
-          } else {
-            this.slots[slotName] = child;
-          }
-        });
-      }
+
+      const elem = this;
+
+      // Loop through nodelist
+      this.childNodes.forEach(function (child, index, nodelist) {
+        const slotName = child.getAttribute ? child.getAttribute("slot") : null;
+
+        if (!slotName) {
+          elem.slots.default.push(child);
+        } else {
+          elem.slots[slotName] = child;
+        }
+      });
     }
 
-
     get renderRoot() {
@@ -96,17 +155,7 @@ if (hasNativeShadowDomSupport && this.useShadow === true) {
 
-    renderer(renderRoot, renderCallback) {
-      this._renderRoot = renderRoot;
-      this.html = this.html || bind(this._renderRoot);
-      renderCallback();
+    renderer(root, render) {
+      this.html = this.html || bind(root);
+      render();
     }
-
-
-    updated(...args) {
-      super.updated && super.updated(...args);
-      this.rendering && this.rendering();
-      this.renderer(this.renderRoot, () => this.render && this.render(this));
-      this.rendered && this.rendered();
-    }
-
   }
 };

renderers/renderer-preact.js

@@ -8,3 +8,3 @@ /** @jsx h */
 
-export function withPreact(Base = class extends HTMLElement { }){
+export function withPreact(Base = HTMLElement) {
   return class extends Base {
@@ -36,3 +36,3 @@ get props() {
     }
-  }
-};
+  };
+}

utils/css.js

@@ -1,2 +0,2 @@
-// Utility function used for outputting correctly formatted CSS classes in JSX. 
+// Utility function used for outputting correctly formatted CSS classes in JSX.
 // Ported over from https://github.com/wc-catalogue/blaze-elements/blob/master/packages/common/css.ts
@@ -7,10 +7,10 @@
 
-  for ( const arg of args ) {
-    if ( arg ) {
-      if ( typeof arg === 'string' ) {
-        classes.push( arg );
+  for (const arg of args) {
+    if (arg) {
+      if (typeof arg === 'string') {
+        classes.push(arg);
       } else {
-        for ( const key in arg ) {
-          if ( arg[ key ] ) {
-            classes.push( key );
+        for (const key in arg) {
+          if (arg[key]) {
+            classes.push(key);
           }
@@ -22,3 +22,3 @@ }
 
-  return classes.join( ' ' );
+  return classes.join(' ');
 }

utils/environment.js

@@ -8,2 +8,2 @@ // Helper util to check the current node environment + check if the browser supports shadow DOM for shimming purposes
 
-export const hasNativeShadowDomSupport = attachShadow && attachShadow.toString().indexOf( 'native code' ) > -1;
+export const hasNativeShadowDomSupport = attachShadow && attachShadow.toString().indexOf('native code') > -1;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

GitHub dependency

Supply chain risk

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

Found 3 instances in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141925

increased by233.49%

Number of package files

109

increased by303.7%

Lines of code

1544

increased by28.77%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

10

increased byInfinity%

Worsened metrics

Dependency count

16

increased by6.67%

Number of high supply chain risk alerts

3

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedbreakpoint-sass@^2.7.1

• + Addedbreakpoint-slicer@bolt-design-system/breakpoint-slicer

• + Addedsassy-maps@github:at-import/Sassy-Maps#0.x.x

• + Addedbreakpoint-sass@2.7.1(transitive)

• - Removed@bolt/core-data@^0.9.0

• - Removed@webcomponents/html-imports@^1.1.1

• - Removed@bolt/core-data@0.9.0(transitive)

• - Removed@webcomponents/html-imports@1.3.1(transitive)

• - Removed@webcomponents/shadydom@1.11.0(transitive)

• Updated@webcomponents/shadydom@github:muan/shadydom#qsa