panel - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

hot/controller-loader.js

@@ -8,10 +8,11 @@ /* eslint-env commonjs */
 
-module.exports.pitch = function(remainingReq) {
-  if (!helpers.isDevServerHot(this.options)) {
-    return;
+module.exports.pitch = function(request) {
+  const options = loaderUtils.getOptions(this) || {};
+  const moduleId = loaderUtils.stringifyRequest(this, `!!${request}`);
+  const elemName = helpers.getElemName(this.resourcePath, options);
+
+  if (!options.hot) {
+    return `module.exports = require(${moduleId});`;
   }
 
-  const moduleId = loaderUtils.stringifyRequest(this, `!!${remainingReq}`);
-  const elemName = helpers.getElemName(this.resourcePath);
-
   return `
@@ -28,3 +29,3 @@ module.hot.accept(${moduleId}, () => {
     const oldExports = module.exports = require(${moduleId});
-    `.trim().replace(/^ {4}/gm, ``);
+  `;
 };

hot/loader-helpers.js

 /* eslint-env commonjs */
+const loaderUtils = require(`loader-utils`);
 const path = require(`path`);
+const validateOptions = require(`schema-utils`);
 
+const OPTIONS_SCHEMA = {
+  type: `object`,
+  properties: {
+    hot: {
+      type: `boolean`,
+    },
+  },
+};
+
 // Retrieve elemName for hot injection from path convention
@@ -15,3 +26,3 @@ //
 
-module.exports.getElemName = function(resourcePath) {
+module.exports.getElemName = function(resourcePath, options) {
   const pathInfo = path.parse(resourcePath);
@@ -24,7 +35,16 @@ let elemName = pathInfo.name;
 
+  const transform = options.elementNameTransform;
+  if (typeof transform === `function`) {
+    elemName = transform(elemName, resourcePath);
+  }
+
   return elemName;
 };
 
-module.exports.isDevServerHot = function(webpackOpts) {
-  return webpackOpts.devServer && webpackOpts.devServer.hot;
+module.exports.getOptions = function(context) {
+  const options = loaderUtils.getOptions(context) || {};
+
+  validateOptions(OPTIONS_SCHEMA, options, `Panel HMR`);
+
+  return options;
 };

hot/README.md

@@ -29,3 +29,12 @@ # Using panel hot loaders with webpack
       { test: /\.styl$/, use: [
-        { loader: `panel/hot/style-loader`},
+        {
+          loader: `panel/hot/style-loader`,
+          options: {
+            // enables or disables the loader
+            hot: true,
+            // transforms a path derived element name into something else
+            // allows for more flexible naming convention
+            elementNameTransform: (name, path) => `mp-${name}`,
+          },
+        },
         { loader: `css-loader`},
@@ -32,0 +41,0 @@ { loader: `stylus-loader`},

hot/style-loader.js

@@ -8,30 +8,16 @@ /* eslint-env commonjs */
 
-module.exports.pitch = function(remainingReq) {
-  if (!helpers.isDevServerHot(this.options)) {
-    return;
-  }
+module.exports.pitch = function(request) {
+  const options = helpers.getOptions(this);
+  const moduleId = loaderUtils.stringifyRequest(this, `!!${request}`);
+  const elemName = helpers.getElemName(this.resourcePath, options);
 
-  const moduleId = loaderUtils.stringifyRequest(this, `!!${remainingReq}`);
-  const options = loaderUtils.getOptions(this);
-  const resourcePath = this.resourcePath;
-  const elemName = helpers.getElemName(resourcePath);
-
-  let updateSnippet = ``;
-  if (typeof options.cssHref === `string`) {
-    updateSnippet = `
-        const updateCssHref = require('panel/hot/update-css-href');
-        updateCssHref('${options.cssHref}');
-    `;
-  } else {
-    updateSnippet = `
-        const updateStyle = require('panel/hot/update-style');
-        updateStyle(newStyle.toString(), ${JSON.stringify(resourcePath)});
-    `;
+  if (!options.hot) {
+    return `module.exports = require(${moduleId});`;
   }
 
   return `
-    module.hot.accept(${moduleId}, () => {
-      const newStyle = module.exports = require(${moduleId});
+    module.hot.accept(${moduleId}, function() {
+      const newStyle = require(${moduleId});
       const updatePanelElems = require('panel/hot/update-panel-elems');
-      const updateCount = updatePanelElems('${elemName}', elem => {
+      updatePanelElems('${elemName}', elem => {
         if (elem.getConfig('useShadowDom')) {
@@ -42,8 +28,5 @@ elem.el.querySelector('style').textContent = newStyle.toString();
       });
-      if (!updateCount) {
-        ${updateSnippet.trim()}
-      }
     });
     module.exports = require(${moduleId});
-  `.trim().replace(/^ {4}/gm, ``);
+  `;
 };

hot/template-loader.js

@@ -8,10 +8,11 @@ /* eslint-env commonjs */
 
-module.exports.pitch = function(remainingReq) {
-  if (!helpers.isDevServerHot(this.options)) {
-    return;
+module.exports.pitch = function(request) {
+  const options = helpers.getOptions(this);
+  const moduleId = loaderUtils.stringifyRequest(this, `!!${request}`);
+  const elemName = helpers.getElemName(this.resourcePath, options);
+
+  if (!options.hot) {
+    return `module.exports = require(${moduleId});`;
   }
 
-  const moduleId = loaderUtils.stringifyRequest(this, `!!` + remainingReq);
-  const elemName = helpers.getElemName(this.resourcePath);
-
   return `
@@ -25,3 +26,3 @@ let template = require(${moduleId});
     module.exports = function() {return template.apply(this, arguments)};
-    `.trim().replace(/^ {4}/gm, ``);
+  `;
 };

hot/update-panel-elems.js

@@ -28,4 +28,4 @@ /* eslint-env commonjs */
     if (updateFn.call(null, elem)) {
-      const update = elem._update || elem.update;
-      numUpdated += update.apply(elem) ? 1 : 0;
+      numUpdated++;
+      (elem._update || elem.update).apply(elem);
     }
@@ -32,0 +32,0 @@ }

package.json

 {
   "name": "panel",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -49,2 +49,3 @@ "main": "build/index.js",
     "raf": "3.2.0",
+    "schema-utils": "1.0.0",
     "snabbdom": "0.6.2",
@@ -51,0 +52,0 @@ "snabbdom-delayed-class": "0.1.1",

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

119740

decreased by-0.73%

Dependency count

9

increased by12.5%

Number of package files

29

decreased by-6.45%

Lines of code

2644

decreased by-0.97%

Number of low supply chain risk alerts

9

increased by28.57%

Dependency changes

• + Addedschema-utils@1.0.0

• + Addedajv@6.12.6(transitive)

• + Addedajv-errors@1.0.1(transitive)

• + Addedajv-keywords@3.5.2(transitive)

• + Addedfast-deep-equal@3.1.3(transitive)

• + Addedfast-json-stable-stringify@2.1.0(transitive)

• + Addedjson-schema-traverse@0.4.1(transitive)

• + Addedpunycode@2.3.1(transitive)

• + Addedschema-utils@1.0.0(transitive)

• + Addeduri-js@4.4.1(transitive)