deploy cloud run service

Getting Started

to get web components working include the component library

after that any elements with a [component] attribute will be treated as a web component module

the component.js library exposes a mod object, which holds as its keys the component modules, the key is either the element nodename, or its id, the id can be used when the page contains multiple of the same component

var editor = mod['web-editor']; var editor2 = mod.test;

Boiler Plate

warning : this extension is not quite stable yet
many of the official components, at this time, require some boiler plate code, mainly small dependencies.

http://libs.ext-code.com/js/dom/component/component.js?init
adding the init search parameter automatically sets up the default boilerplate, which for most of the official components is all that is required.

here is a simple example that includes the web-console

view the full list of components
html component list

view the component.js library documentation and api
component library

a component / module will has a standard lifecycle that is

  • initmod
    This is where local depencies are / can be passed to the component
    They fundamentally should not be relying on global state to receive their local depencies
  • init
    This is where the component first get executed, its an asynchronous function that allows the component to check that it has everything it needs to run, including access to the network to load resources it may need
  • initdom
    This is where the component is able to set up its ui, internally build the references it needs to run effeiciently, it should be treated potentially as asynchronous

components are also effectively namespaced so they are free to load any other components that they may need without having to worry that there will ever be a clash of variables or tag names.

the component library just needs to be included as a script tag, it exposes a global property mod, it runs on window.onload, it has a fundatmental loading stack that allows init runs to be delayed until the loading stack is complete



Here is a simple setup that loads the log-mod element. Its function is to log toaster style messages in a webpage.

the code for the log-mod component, note

  • the function that defines the api for the log-mod is wrapped in parenthesis' () making it a function expression, this is required.
  • the arguments to the function ({mod,dom,host})
    • mod
      the modules own namespaced component module reference
    • dom
      a reference to the original dom node
    • host
      the replaced element
  • the function defines an object that is returned, thats its variable name is obj is purely an internal reference. var obj = { version : 'v2.0' };
    return obj;
  • any methods and properties that are exposed to the public are added as properties to the obj
    obj.initmod = function(){} obj.init = function(){} obj.initdom = function(){}
here is an example of a standard web components
this went some way as to introducing the ability to include complex functionality into web pages, i feel however it fell short on a number of issues i have solved with my component.js library, these are
  • elements were scoped to the global namespace, always a problem when functionality gets ever more complex its only a matter of time before clashes occur
    there is the proposal of
    var registry = new ComponentRegistry();
    but its still some time away
  • methods and properties associated with the component were added to the host node of the element, again thats ok for simple components, but when components get ever more complex its going to be a problem
class newElement extends HTMLElement { constructor(){ super(); var root = this; }//constructor connectedCallback(){} disconnectedCallback(){} static get observedAttributes(){} attributeChangedCallback(name,oldValue,newValue){} adoptedCallback(){} render(){} // A getter/setter for a disabled property. get disabled(){} set disabled(){} // A getter/setter for an open property. get open(){} set open(){} }//class