Mosaic v0.9.1

Update version / bug fixes

Mosaic v0.8.0

Versions 0.7.0 to 0.8.0 of Mosaic were all about fine tuning the array patching algorithm. It came with a lot of bug fixes that should make rendering feel much smoother and faster.

Mosaic v0.7.0

Mixins

Mosaic now comes with support for mixins! This allows you to group similar component login into a single object that can be reused for multiple components. Any data property created in a mixin will simply be added onto the end object's data property, and any lifecycle functions will be turned into an array of functions that run one after another until they reach the end component.

Shadow DOM

Since Mosaic uses web components, it is only fitting that it supports the use of the shadow dom to encapsulate components. When using Mosaic to create web components for, say, a design system, you may want to use the shadow dom so that your components are not affected by other styles/markup. To do so, just set the useShadow option on your components.

Keyed Arrays and Regular Arrays

• Regular arrays are now supported in the view function, meaning that you do not have to use the Mosaic.list function to render lists of data.
• A brand new patching algorithm is now being used for efficient arrays. The algorithm is based on the one used in the JSDiff library.

Received function for Attributes

The "received" lifecycle function now only takes in html attributes that are not being counted as data. In order for an attribute to count as data, it must have a default value specified in the "data" property.

Infinitely Nested Router Reference

Every infinitely nested component under a Mosaic Router page now has a direct reference to it through its "router" property. The router is also no longer a web component.

Internal Painting Process

Redid the painting/repainting process from scratch so that it is simpler to understand and cleaner overall.

Mosaic v0.6.0

Version 0.6.0 of Mosaic comes with a lot of new changes! Most of these changes do not necessarily require a massive rewrite of existing Mosaic apps.

Use of Web Components

Mosaic now uses web components! Each time you call "new Mosaic" you are creating and returning a new instance of a custom element. Composing elements no longer involves using the "${ }" syntax. Instead, you now write "</custom-component".

new Mosaic({
   name: 'my-label',
   view() { return html`<p>This is a label</p>` }
});

new Mosaic({
   name: 'my-app',
   view() {
      return html`<div>
         <my-label></my-label>
      </div>`
   }
})

New "name" property

Because Mosaic now uses web components, it was necessary to add a new property to the Mosaic constructor. "Name" is now required and is used to specify what the developer would like to name their custom element.

Better Array Patching and Mosaic.list

Version 0.6.0 introduces a better array patching algorithm than in the previous version. In addition to better patching, you can no longer use arrays directly in the view function. You are now required to use "Mosaic.list" in order to enforce efficient rendering.

Router is also a Web Component

The Mosaic Router is now its own web component. Also removed the ability to set multiple components on one route.

Paint function changes

As of right now, the ability to pass data and an injection DOM node to the paint function has been temporarily removed.

Mosaic v0.5.0

New Router:

• Rewrote the Mosaic Router to try and avoid circular reference errors.
• Many new features, including multiple "/" in paths, multiple Mosaics rendered per path, and the ability to send query parameters and other additional data to components being used in the router.
• The Router, as well as the Portfolio, and now separate exports from the Mosaic library. Now, use them in the following way:

import Mosaic, { Router, Portfolio } from '@authman2/mosaic';

New Mosaic Option:

• delayTemplate is the newest Mosaic Option!
• Using delayTemplate, you can force the component to wait until an instance of that component is created before making the template.
• This is useful for components that rely on complex data being passed in from parent components (i.e. objects with multiple properties).
• Normally, using complex objects passed in from parent components would cause an error because the creation of the template attempts to access data that has not been passed down yet. The delayTemplate option solves this option by waiting until any additional information is passed in before creating the template.
• Make sure to look at the demo in the "examples" folder to see how this works.

Self in view function:

• When using arrow function with the view option, you now have access to the entire Mosaic component as opposed to just the data and actions.
• Views can now be written using arrow functions in the following way:

new Mosaic({
   ...
   view: self => html`<h1>{ self.data.title }</h1>`
   ...
})

Mosaic v0.4.0

• Switch to Typescript. Type files are included in the build so you can get code completion in text editors.
• Fix memory leak when using Portfolio.
• Small updates when diffing components.

Mosaic v0.3.0

New View

Mosaic now uses tagged template strings to create views instead of JSX. This means that there is no need for a .babelrc file to transform JSX to regular JavaScript. The tagged template syntax is built in to standard JS and is used in the following way:

const name = "Mosaic";
html`<p>Welcome to ${ name }!</p>`;

Smart DOM

Another new feature of Mosaic is the use of a "Smart DOM," which refers to the rendering process of components. Once a Mosaic is created, a reusable template will be constructed and the dynamic portions of the template will be "memorized." This means that later on, when a data change is made, there is no need to traverse the DOM tree again or to construct an entirely new Virtual DOM tree. Instead, Mosaic will remember the location of the dynamic node and travel directly to that element to make updates.

Mosaic v0.2.1

New features in 0.2.1:

• Use the "link" property to define connections between parent and child. Takes the form
  <Component link={{ name: String, parent: Mosaic }} />
• You can now use templates in html! If you don't like writing JSX, you can include any data property in an HTML file by wrapping it around: <h1>{{ this.data.propertyName }}</h1>
• Mosaic.Router gives you a simple routing solution for web apps!
• Array functions are now tracked by Observables, so you can use methods like push, pop, splice, etc. to trigger re-renders.

Fixes:

• Actions can now access the data that is passed along from a parent component.

Mosaic v0.1.7

• Observable data instead of setData
• Actions object instead of actions function
• WillDestroy lifecycle function

Mosaic v0.1.4

Added support for arrays in the view function. If you pass an array of JSX in, it will detect that it is an array and render its contents in a parent div.