@myuw-web-components/myuw-help-link - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 # Changelog
 
+## 1.1.0
+
[phone]
+
+If the `url` attribute begins with `http`, instructs browser to open the link in
+a new tab (`target='_blank'` and `rel='noopener noreferrer'`)
+
 ## 1.0.0
@@ -4,0 +11,0 @@

dist/myuw-help-link.js

@@ -141,3 +141,3 @@ (function () {
 
-  var tpl = " <style> :host {\n    display: flex;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n  } </style> <a id=\"help-link\" href=\"https://www.example.edu/from-myuw-help-link\" rel=\"noopener noreferrer\"> Help and resources <!-- material.io launch icon--> <svg id=\"launch-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path d=\"M0 0h24v24H0z\" fill=\"none\"/> <path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/> </svg> </a> ";
+  var tpl = " <style> :host {\n    display: flex;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n  } </style> <a id=\"help-link\" href=\"https://www.example.edu/from-myuw-help-link\"> Help and resources <!-- material.io launch icon--> <svg id=\"launch-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path d=\"M0 0h24v24H0z\" fill=\"none\"/> <path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/> </svg> </a> ";
 
@@ -202,2 +202,7 @@ var MyUWHelpLink =
         this.shadowRoot.getElementById('help-link').setAttribute("href", this['url']);
+
+        if (this['url'].startsWith("http")) {
+          this.shadowRoot.getElementById('help-link').setAttribute("rel", "noopener noreferrer");
+          this.shadowRoot.getElementById('help-link').setAttribute("target", "_blank");
+        }
       }
@@ -204,0 +209,0 @@ }], [{

dist/myuw-help-link.min.js

@@ -1,1 +0,1 @@
-!(function(){"use strict";function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(t){return(e=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,r){return(o=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}})()?Reflect.construct:function(t,e,o){var r=[null];r.push.apply(r,e);var i=new(Function.bind.apply(t,r));return o&&n(i,o.prototype),i}).apply(null,arguments)}function r(t){var i="function"==typeof Map?new Map:void 0;return(r=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,u)}function u(){return o(t,arguments,e(this).constructor)}return u.prototype=Object.create(t.prototype,{constructor:{value:u,enumerable:!1,writable:!0,configurable:!0}}),n(u,t)})(t)}function i(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):e}var u,c,l=(function(o){function u(){var t;return(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")})(this,u),(t=i(this,e(u).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(u.template.content.cloneNode(!0)),t}var c,l,a;return(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)})(u,r(HTMLElement)),c=u,a=[{key:"observedAttributes",get:function(){return["app-context","url"]}}],(l=[{key:"attributeChangedCallback",value:function(t,e,n){this[t]=n,this.updateComponent()}},{key:"connectedCallback",value:function(){this["app-context"]=this.getAttribute("app-context"),this.url=this.getAttribute("url"),this.$link=this.shadowRoot.getElementById("help-link")}},{key:"updateComponent",value:function(){var t=this.shadowRoot.getElementById("launch-icon");this.shadowRoot.getElementById("help-link").innerHTML=this["app-context"]+" help and resources ",this.shadowRoot.getElementById("help-link").appendChild(t),this.shadowRoot.getElementById("help-link").setAttribute("href",this.url)}}])&&t(c.prototype,l),a&&t(c,a),u})();l.template=(u=' <style> :host {\n    display: flex;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n  } </style> <a id="help-link" href="https://www.example.edu/from-myuw-help-link" rel="noopener noreferrer"> Help and resources \x3c!-- material.io launch icon--\x3e <svg id="launch-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/> </svg> </a> ',c=document.createElement("template"),c.innerHTML=u,c),window.customElements.define("myuw-help-link",l)})();
+!(function(){"use strict";function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(t){return(e=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,r){return(o=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}})()?Reflect.construct:function(t,e,o){var r=[null];r.push.apply(r,e);var i=new(Function.bind.apply(t,r));return o&&n(i,o.prototype),i}).apply(null,arguments)}function r(t){var i="function"==typeof Map?new Map:void 0;return(r=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,l)}function l(){return o(t,arguments,e(this).constructor)}return l.prototype=Object.create(t.prototype,{constructor:{value:l,enumerable:!1,writable:!0,configurable:!0}}),n(l,t)})(t)}function i(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):e}var l,u,c=(function(o){function l(){var t;return(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")})(this,l),(t=i(this,e(l).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(l.template.content.cloneNode(!0)),t}var u,c,a;return(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)})(l,r(HTMLElement)),u=l,a=[{key:"observedAttributes",get:function(){return["app-context","url"]}}],(c=[{key:"attributeChangedCallback",value:function(t,e,n){this[t]=n,this.updateComponent()}},{key:"connectedCallback",value:function(){this["app-context"]=this.getAttribute("app-context"),this.url=this.getAttribute("url"),this.$link=this.shadowRoot.getElementById("help-link")}},{key:"updateComponent",value:function(){var t=this.shadowRoot.getElementById("launch-icon");this.shadowRoot.getElementById("help-link").innerHTML=this["app-context"]+" help and resources ",this.shadowRoot.getElementById("help-link").appendChild(t),this.shadowRoot.getElementById("help-link").setAttribute("href",this.url),this.url.startsWith("http")&&(this.shadowRoot.getElementById("help-link").setAttribute("rel","noopener noreferrer"),this.shadowRoot.getElementById("help-link").setAttribute("target","_blank"))}}])&&t(u.prototype,c),a&&t(u,a),l})();c.template=(l=' <style> :host {\n    display: flex;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n  } </style> <a id="help-link" href="https://www.example.edu/from-myuw-help-link"> Help and resources \x3c!-- material.io launch icon--\x3e <svg id="launch-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/> </svg> </a> ',u=document.createElement("template"),u.innerHTML=l,u),window.customElements.define("myuw-help-link",c)})();

package.json

 {
   "name": "@myuw-web-components/myuw-help-link",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Stylized hyperlink to help content.",
@@ -5,0 +5,0 @@ "module": "dist/myuw-help-link.min.mjs",

README.md

 # myuw-help-link
 
-**NOTE: this README is aspirational rather than describing current reality.**
-
 This Web Component presents a stylized link to help.
@@ -9,4 +7,28 @@
 
+To use the `myuw-help-link` web component,
+
+1. Make it available in the HTML page by invoking suitable `<script>`, and
+2. Use it via the `<myuw-help-link>` element.
+
 ### Import the web component
 
+#### In MyUW
+
+MyUW provides a local CDN-like (Content Delivery Network-like) affordance.
+
+Rely upon the latest v1-compatible release
+
+```html
+<script
+  type="module"
+  src="/static/web-components/myuw/myuw-help-link/1-x/myuw-help-link.min.mjs"></script>
+<script
+  nomodule
+  src="/static/web-components/myuw/myuw-help-link/1-x/myuw-help-link.min.js"></script>
+```
+
+(See [documentation about myuw-help-link in static][] for more conservative options.)
+
+#### Using unpkg
+
 In HTML `<head>`,
@@ -19,4 +41,12 @@
 
-to import via unpkg, or alternatively include the web component files locally in the application and import from there.
+to import via unpkg.
 
+WARNING: unpkg is a third-party service neither provided nor endorsed by MyUW.
+In a MyUW context, sourcing from `/static` is preferred.
+
+#### Redistribute with the downstream app
+
+Alternatively include the web component files locally in the application and
+import from there.
+
 ### Invoke the Web Component
@@ -37,4 +67,5 @@
 
-`myuw-help-link` uses it to compose the link label, as
-`{app-context} resources and help`.
+Implementation detail: `myuw-help-link` uses it to compose the link label, as
+`{app-context} resources and help`. (This is an implementation detail, not a
+guarantee of the API exposed by `myuw-help-link`).
 
@@ -45,3 +76,49 @@ #### url
 
-TODO: Eventually, host-relative links open in the same tab; absolute links open
-in a new tab (via `rel='noopener noreferrer'`).
+Absolute links (starting with `http`) open in a new tab (via `target='_blank'`
+with the page-jacking-prevention workaround of `rel='noopener noreferrer'`).
+
+## Developing
+
+### Practice Semantic Versioning
+
+Carefully practicing Semantic Versioning allows downstream applications making
+use of `myuw-help-link` to automatically, transparently upgrade to the latest
+compatible version of the component.
+
+If a change is not backwards-compatible, it MUST yield a MAJOR version number
+bump, e.g. from 1.1.12 to 2.0.0.
+
+### Keep a changelog
+
+Update `CHANGELOG.md` to document the changes. This is useful documentation, and
+it's also a prompt to think about the nature of the changes and to ensure that
+they are backwards-compatible.
+
+### Locally testing
+
+```shell
+npm install
+npm start
+```
+
+Visit <http://127.0.0.1:8080/docs/> .
+
+### Releasing aka Publishing
+
+**First**, update `package.json` to reflect the version number you intend to
+release.
+
+Then
+
+```shell
+npm publish --public
+```
+
+and capture the `/dist/` outputs to [myuw-shared-static][].
+
+### Oh no that release wasn't backwards-compatible
+
+Immediately release a new PATCH version that restores compatibility.
+
+[documentation about myuw-help-link in static]: https://git.doit.wisc.edu/myuw/myuw-shared-static/tree/master/src/main/webapp/web-components/myuw/myuw-help-link
+[myuw-shared-static]: https://git.doit.wisc.edu/myuw/myuw-shared-static/tree/master/src/main/webapp/web-components/myuw/myuw-help-link

No alert changes

Improved metrics

Total package byte prevSize

30927

11.2%

Lines of code

262

3.56%

Number of lines in readme file

121

175%

No dependency changes