v3.5.0 - Storybook 🎉

This is a relative big release, with the main focus on @muban/storybook 🎉 , an app framework for the official Storybook.

Documentation has been updated, as well as the generator templates, to let everyone enjoy writing stories for all their components.

Note For older projects that want to use storybook

Adding Storybook also forced us to upgrade to core-js@3, and with it, we updated a lot of other packages related to the build process and tooling as well.

While the webpack config itself hasn't changed, it's structured slightly different to be reusable in the storybook webpack configuration.

The above makes it a bit more work to add storybook in your existing projects, but could still be possible if you haven't changed too much in your project setup, and follow the steps in the last few commits before this release.

v3.3.1

Fix support for import! in _variables.yaml

- The ReplacePlugin resulted in issues where requires and process.env replacements
were done in the same yaml file. Switching to a loader (which runs earlier in the chain)
resolves this conflict issue..
- Added example of shared footer for in the app.hbs, using a dynamic year, and the language in scss.
- Improved in-code documentation to make the usages a bit more clear.

v3.3.0

Update muban-core to 2.1.2 and typescript to 3.8.3

* getElements now can return null (so requires type checking)
* initComponents now never initializes a component twice
* fix for waitForStyleSheetsLoaded when chrome extensions inject empty link tags

v3.2.0

Align 3.2.0 muban

v3.1.0

Update muban-core to 1.13 to support wrapper in renderItems

v2.3.1

Bug fixes:

• Configure seng-scss $assetPath variable to correctly get fonts and images through its mixins (cd24343)

• Delay constructing components in dev mode to make sure styles are loaded to get proper DOM measurements in the constructor (588fee7)

• Remove duplicate import of main.scss (327dfd0)

v2.3.0

Add documentation that describes some examples and best practices for
working with dynamic data (fetch from the backend).

updateElement
Add the updateElement util to update the HTML content of an element,
including cleanup and initializing the new components. This can be
useful when you retrieved new HTML from the backend and need to replace
a section of the page.

initTextBinding
Add the initTextBinding util to set up a knockout binding to an
element and include its content as the initial value for the observable.

initListBinding
Add the initListBinding util to set up a knockout binding for a list
that renders using a knockout template. It has the option to extract
data from the already rendered items (or you can pass them manually),
so they can be re-rendered client-side.

v2.2.0

• Add missing file-loader and url-loader to package.json (9ca5e6d)
• Add option to dynamically set the publicPath at runtime (e749d43)

V2.1.0

Hot reloading fix (4306894)

Some code should have been remove but wasn't, now it shouldn't
interfere with hot reloading components anymore

Add util function to clean up a HTML element before replacing it (bc8cb64)

Remove all instances bound to this html element or its children.
Finds all elements with a data-component attribute, and disposes and
removes the created component instance for that element.

You should call this function before removing/replacing any piece of
HTML that has components attached to it (e.g. when calling
initComponents on replaced HTML)

v2.0.0 - Storybook, Webpack, Knockout and Code Quality

Storybook

Added a component viewer app just like Storybook. It's separated from muban itself, but allows you to add presets for components and view them in isolation. Besides the component itself, you can also view the different source files, the passed data, and what the rendered HTML looks like.

You can run the storybook locally in development mode using the webpack dev server, or create a build and upload it so others can view and interact with all your components.

Webpack

Updated all packages, including webpack, to the newest versions. Also updated the different webpack configurations to better extend base configuration settings. Included a config file to make it easier to change some basic settings without having to go into the webpack configuration.

Some new plugins are added for a better developer experience, for image minification, svg loading, bundle profiling and other small things.

Also update the build script to allow a custom --publicPath so it's easier to upload your muban build to sub-folder on a server.

Code Quality

Added editorconfig, eslint, tslint, stylelint and prettier. Configured them to run on staged files for every commit. All this should keep your code quality in check.

Knockout

Add the knockout library to allow global change detection and data-binding from code. You could use the observables in the global model or within components. Instead of the html data-bind we normally use, you can apply data-bindings from javascript with two knockout functions.

Read the docs for more information.

Other updates

• JSON Partial loader - Add json-partials-loader, where you can include a json file from within another. Useful for keeping the component json in its own folder, and referencing it from the page data json.

• update build path - Updated the build path to /dist/site for the normal site, and /dist/storybook for the Storybook.

• Fix memoryleak during dev - Fixed a memory leak that happened when hot-reloading scripts and templates, where the array of registered components wasn't cleaned up, and were all constructed when re-rendering the updated template.

• Find class for element - Component class instances can now be looked up based on the DOM element they are bound to using a new util function.

• Component construction order - Components are now constructed in a stable order, the deepest children first, the most top-level parent last. This allows any component constructor to select its child components DOM element and look up its class instance to communicate with. This can be used to listen for events, read properties or call functions.

• Preview created build - Use yarn preview after running a production build to preview this in your browser, no more manual work needed here.