@nymbus/coreweb-components v0.0.1

coreweb_components

Coreweb web components

Requirements

• node v12.8.x+ (dev), or node v10.x (prod)
• npm 6.x+

Dev mode

• npm i - install dependencies

Dev with demo html page

• npm run start - Start server with demo project (./demo/index.html) Supported HMR (Hot Module Replacement)

Or dev with storybook

• npm run build-custom-elements.json - Generate json for controls and docs from web components. Should be run before build storybook
• npm run storybook - Start server with storybook. Develop web components with storybook and HMR

Production

• npm run build - Generate build (./dist/*.min.js)
• ROLLUP_WATCH=1 npm run build - Generate non-minified build (./dist/*.js)
• npm run start:build - Start server with build files (from ./dist)

Tests

• npm run test - Run tests and generate testresults.stories.mdx

Bridge

For supporting old widgets (jquery) functionality new components can be used with bridge. Bridge wraps web components to a proxy which forwards jquery widget api call to web component. So web components can be integrated with old configuration and work like jquery widget.

npm run storybook-bridge - Start storybook server with STORYBOOK_WITH_BRIDGE=true for bridge supporting

Git

• dev - Branch for all common developers processes
• master - Branch must always contains work code. Uses for build All developers processes goes into dev branch. Before build dev branch merges into master branch. Master branch uses only for builds and must always contain stable project code. New branches can be created from dev branch.

How to document your components using JSDoc

Here's an example including all supported JSDoc tags. All JSDoc tags are on the the form @tag {type} name - comment and @tag {type} name=default - comment.

    /**
    * Here is a description of my web component.
    *
    * @element my-element
    *
    * @fires change - This jsdoc tag makes it possible to document events.
    * @fires submit
    *
    * @attr {Boolean} disabled - This jsdoc tag documents an attribute.
    * @attr {on|off} switch - Here is an attribute with either the "on" or "off" value.
    * @attr [my-attr=default value]
    *
    * @prop {String} myProp - You can use this jsdoc tag to document properties.
    * @prop value
    *
    * @slot - This is an unnamed slot (the default slot)
    * @slot start - This is a slot named "start".
    * @slot end
    *
    * @cssprop --main-bg-color - This jsdoc tag can be used to document css custom properties.
    * @cssprop [--main-color=red]

    * @csspart container
    */
    class MyElement extends HTMLElement {

    /**
    * This is a description of a property with an attribute with exactly the same name: "color".
    * @type {"red"|"green"|"blue"}
    * @attr
    */
    color = "red";

    /**
    * This is a description of a property with an attribute called "my-prop".
    * @type {number}
    * @deprecated
    * @attr my-prop
    */
    myProp = 10

    static get observedAttributes () {
    return [
    /**
       * The header text of this element
    */
    "header"
    ];
    }

    }

Overview of supported JSDoc tags