celo - npm Package Compare versions

Comparing version 1.1.0 to 1.1.2

celo.min.js

		@@ -1,1 +0,1 @@
		"use strict";function _instanceof(e,n){return null!=n&&"undefined"!=typeof Symbol&&n[Symbol.hasInstance]?n[Symbol.hasInstance](e):e instanceof n}!function(){var e="/components",n="_celo",t=[];function o(o){o.forEach(function(o){if(!(o=o.addedNodes[0])\|\|_instanceof(!o,HTMLElement)\|\|!o.tagName\|\|!o.tagName.includes("-")\|\|!function(e){return!t.includes(e.toLowerCase())}(o.tagName))return!1;var c=o.tagName.toLowerCase();r(),function(e){t.push(e)}(c),function(n){return fetch("".concat(e,"/").concat(n,".html")).then(function(e){if(e.ok)return e.text();console.warn("Component <".concat(n,"> not found. Is it a subcomponent?"))})}(c).then(function(e){return function(e){if(!e)return!1;var n=document.createDocumentFragment(),t=document.createElement("div");t.innerHTML=e;for(;t.firstChild;)n.appendChild(t.firstChild);return n}(e)}).then(function(e){return!!(n=e)&&(n.querySelectorAll("script").forEach(function(e){var t=document.createElement("script");t.appendChild(document.createTextNode(e.innerHTML));var o=e.parentElement\|\|n;o.appendChild(t),o.removeChild(e)}),n);var n}).then(function(e){return function(e){if(!e)return!1;document.querySelector("#".concat(n)).append(e)}(e)})})}function r(){if(!document.querySelector("#".concat(n))&&document.querySelector("body")){var e=document.createElement("div");e.id=n,document.body.appendChild(e)}}var c=customElements.define;customElements.define=function(){return t.push(arguments[0]),c.apply(customElements,arguments)},r(),new MutationObserver(o).observe(document,{childList:!0,subtree:!0}),Array.from(document.getElementsByTagName("*")).filter(function(e){return e.tagName.includes("-")}).forEach(function(e){return function(e){var n=e.parentNode,t=e.nextSibling;e.parentNode.removeChild(e),t?n.insertBefore(e,t):n.appendChild(e)}(e)})}();
		"use strict";function _instanceof(e,n){return null!=n&&"undefined"!=typeof Symbol&&n[Symbol.hasInstance]?n[Symbol.hasInstance](e):e instanceof n}!function(){var e=window.celoConfig?window.celoConfig:{},n=e.componentsPath?e.componentsPath:"/components",t=e.containerId?e.containerId:"_celo",o=[];function r(e){e.forEach(function(e){if(e.addedNodes&&(e=e.addedNodes[0]),e.hasChildNodes()&&r(e.childNodes),!e\|\|_instanceof(!e,HTMLElement)\|\|!e.tagName\|\|!e.tagName.includes("-")\|\|!function(e){return!o.includes(e.toLowerCase())}(e.tagName))return!1;var i=e.tagName.toLowerCase();c(),function(e){o.push(e)}(i),function(e){return fetch("".concat(n,"/").concat(e,".html")).then(function(n){if(n.ok)return n.text();console.warn("Component <".concat(e,"> not found. Is it a subcomponent?"))})}(i).then(function(e){return function(e){if(!e)return!1;var n=document.createDocumentFragment(),t=document.createElement("div");t.innerHTML=e;for(;t.firstChild;)n.appendChild(t.firstChild);return n}(e)}).then(function(e){return!!(n=e)&&(n.querySelectorAll("script").forEach(function(e){var t=document.createElement("script");t.appendChild(document.createTextNode(e.innerHTML));var o=e.parentElement\|\|n;o.appendChild(t),o.removeChild(e)}),n);var n}).then(function(e){return function(e){if(!e)return!1;document.querySelector("#".concat(t)).append(e)}(e)})})}function c(){if(!document.querySelector("#".concat(t))&&document.querySelector("body")){var e=document.createElement("div");e.id=t,document.body.appendChild(e)}}var i=customElements.define;customElements.define=function(){return o.push(arguments[0]),i.apply(customElements,arguments)},c();var a,u=((a=new MutationObserver(r)).observe(document,{childList:!0,subtree:!0}),a);Array.from(document.getElementsByTagName("*")).filter(function(e){return e.tagName.includes("-")}).forEach(function(e){return function(e){var n=e.parentNode,t=e.nextSibling;e.parentNode.removeChild(e),t?n.insertBefore(e,t):n.appendChild(e)}(e)})}();

package.json

		{
		"name": "celo",
		"version": "1.1.0",
		"version": "1.1.2",
		"description": "A loader for HTML-based web components.",
		@@ -5,0 +5,0 @@ "main": "celo.js",

README.md


		# Celo
		This is a loader script for [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) that were written down in HTML, as they should be!
		The _Custom Element LOader_, aka Celo, listens for changes in DOM and when it detects a custom element, it fetches its markup and inserts it in the document.
		The _Custom Element LOader_, aka Celo, listens for changes in DOM and when it detects a custom element being added, it fetches its markup and inserts it in the document.

		@@ -9,7 +9,7 @@ ## How do I use it?
		+ [Import celo](#settingup), either as an ES6 module or a simple script.
		+ Place your components should be in the root folder "/components" (or change the default location in the script file).
		+ Place your components should be in the root folder "/components" (or change the default location in the [configuration](#configuration)).
		+ Each component's name must be lowercase and match the tag intended. So the "\<my-example>" component will be loaded from the file "my-example.html".

		## And how does it work?
		Celo uses a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to listen for any element inserted in the DOM that carries a hyphen (ie. a custom element). Upon detection, if it hasn't done it already it fetches the markup and add its code to a hidden \<div> with an id of "\_celo".
		Celo uses a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to listen for any element inserted in the DOM that carries a hyphen (ie. a custom element). Upon detection, if it hasn't done it already, it fetches the markup and add its code to a hidden \<div> with an id of "\_celo".
		Any custom element already parsed when Celo is called in is then reinserted into the DOM to be reparsed.
		@@ -20,13 +20,22 @@
		## <a name="settingup"></a>Setting up
		Celo is an ES6 module (4.3kB) that could be called with the code below.
		Celo comes in two flavours: the preferred one is an EcmaScript 6 Module, but you can also just import it as a simple script. Either way, Celo is an [iife](https://developer.mozilla.org/en-US/docs/Glossary/IIFE). It will execute automatically, won't pollute your global namespace and it returns the Mutation Observer, but you most likely won't need to keep a reference to it.
		### ES6 Module (4.7kB)
		```
		<script type="module">
		import celo from '/celo.mjs'
		import '/celo.mjs'
		</script>
		```
		The minified version is not a module, and is transpiled to ES5. You could just link to it as an external script, or add a _nomodule_ attribute to make it a fallback:
		In case you want a fallback, you can run the minified ES5 version with a _nomodule_ attribute:
		```
		<script nomodule src="/celo.js"></script>
		<script nomodule src="/celo.min.js"></script>
		```
		Either way, celo is just an [iife](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) -- it won't pollute the global namespace, but it won't return you anything. You're just meant to unleash it.
		### Simple ES5 Script (1.9 kB)
		```
		<script src="/celo.min.js"></script>
		```
		### <a name="configuration">Configuration
		To configure Celo you must create a global variable called _celoConfig_. Its "componentsPath" property determines the path you want to keep your components' HTML. The "containerId" property determines the id of the div that will receive the web components' templates. It is usually declared on a \<script> tag of its own just before importing Celo. In the example below, please note the use of "var" instead of "let" or "const".
		```
		<script>var celoConfig = { containerId: "_customId" }</script>
		```

		@@ -36,21 +45,19 @@ ## The fineprint you ought to know
		### Backward compatibility
		In this latest version Celo is an ES6 module. Under the hood, because modules are asynchronous, Celo will now retroactively address all components already parsed by the time it is loaded. This is done by detaching then appending the elements in the same position in the DOM, as not to brake any references.
		Starting at version 1.1.0, Celo is an ES6 module. Because those are asynchronous, Celo has to retroactively address all components already parsed by the time it is loaded. On the plus side, it doesn't need to be imported in the \<head> anymore. If your app used Celo prior to 1.1.0 and you want to update, please double check how it is being called.

		From a developer's perspective this change only affects how Celo is imported into your app. It doesn't require being in the \<head> anymore, and you should preferably used as an ES6 module with a _nomodule_ fallback. If you update Celo on an app with the previous version without addressing this, _it will brake_.

		### A word about subcomponents
		You can have multiple components in a single html file, but you should only do it if you have one main component and then _subcomponents_ for it. Think of a subcomponent as:
		Usually, each web component has its own HTML file. If you want to have multiple components in a single HTML, it should be a single main component and its _subcomponents_. Think of a subcomponent as:

		+ dynamically added by the main component;
		+ being dynamically added by the main component;
		+ not suitable to be added as a standalone component; and
		+ not intended to be reused by other components.
		+ not intended to be reused by other main components.

		Subcomponents are separated from their masters only for clarity. If you add the subcomponent tag directly to your html, Celo will try to load it from a file matching its tagName, resulting in a non-fatal error.
		Subcomponents are separated from their masters just for clarity. If you add the subcomponent tag directly to your HTML, Celo will try to load it from a file matching its tagName, resulting in a non-fatal error.

		### A word about \<script> tags
		Any \<script> tag you include in the root of yout html file will be executed right away. That's typically not the case if your \<script> tags are inside \<template> tags. That's because web components typically use the _cloneNode()_ function which flags the scripts as being already executed. Please note that:
		Any \<script> tag you include in the root of yout HTML file will be executed right away. That's typically not the case if your \<script> tags are inside \<template> tags. That's because web components typically use the _cloneNode()_ function which flags the scripts as being already executed. Please note that:

		+ You probably don't need to include \<script> tags inside the [shadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot);
		+ Even if you do include it in the shadowRoot, _the script won't be scoped_;
		+ But if you do need (want) to do it, its is an issue to be dealt in the web component itself to fix, not in Celo.
		+ But if you do need (want) to do it, its is an issue to be dealt with in the web component itself, it's not up to Celo.

		@@ -67,3 +74,3 @@ If you _must_ for some reason have the \<script> execute from within the shadowRoot, you can check out Celo's _recreateScripts()_ function for a reference on how to do it. But, again, you would be much better off handling your scripts in the component's _class_ definition.

		Note that \<script> is outside \<template> so it will run as soon as the component is fetched. It also means the code won't be inside the shadowRoot -- I would recommend placing all needed code inside the class definition and leave the \<template> clear of it.
		Note that \<script> is outside \<template> so it will run as soon as the component is fetched. It also means the code won't be inside the shadowRoot -- I would recommend placing all needed code inside the class definition and leave the \<template> clear of code.

		@@ -70,0 +77,0 @@ ```

celo.mjs

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

celo - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics