Skip to content

v2.0.0 - Storybook, Webpack, Knockout and Code Quality
Compare
Choose a tag to compare
@ThaNarie ThaNarie released this 07 Nov 19:20
· 353 commits to master since this release
v2.0.0
c984003
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

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.

Assets 2
Loading