@ygles-es/yes-compcreator NPM

YES-COMPCREATOR

Yes-CompCreator is a module whose allows developer to create a native WebComponent with reactivity and translation.

This module is just an API to help user to create a native WebComponent, it has no dependency and the WebComponent created is a standard WebComponent with no dependency too.

As possible the retro-compatibility should be keeped, if not possible a wrapper should be proposed or an other module should be develop.

Versionning

There is 2 versionning types:

Development:

 > Version number pattern is #.#.#-rc.# (Major.Minor.Revision-rc.Patch)

 > "Major", "Minor", "Revision" version number not changed until an official version is publish

 > "Patch" version number must be increment for each publish

 > These versions can be unstable

 > When you install it a "demo" directory will be present in the module directory, it contains a full example to help you to use the module

 > Sources should not be minified

 > Requirements and design specification for the version can change before the official version

 > Unitary test not covered sources at 100%

Official:

 > Version number pattern is #.#.# (Major.Minor.Revision), it just remove the suffix "-rc.#" of the last development version

 > Always created from the last development version when qualified

 > These versions must be stable

 > Sources must be minified

 > Requirements and design specification for the version  will not change

 > Unitary test must covered sources at 100%

 > If you need to debug with not minified sources you can replace the official version by the last development version

 > "Major" version number is incremented for a new feature or if retro-compatibility is broken

 > "Minor" version number is incremented after each official version published

 > "Patch" verison number is incremented only for hotfix on the specific version

Installation

npm i @ygles-es/yes-compcreator

How to use

<script type="module">
  import newComponent from './node_modules/@ygles-es/yes-compcreator/main.mjs';
    newComponent('test', {
      prefix: 'yes-',
      template: `
        <h1>{{ value }}</h1>
        <h2>{{ lang.stringValue }}</h2>
        <h3>{{ int }}</h3>
        <ul>
            <li>{{ arrayValue }}</li>
        </ul>`,
      data: {
        value: undefined,
        stringValue: 'helloWorld',
        int: 516879684,
        arrayValue: ['val 1', 'val 2', 'val 3'],
        lang: 'en',
      },
      methods: {
        printName: function() {
          console.log(this.name);
        },
      },
      dictionnary: {
        helloWorld: {
          fr: 'Bonjour',
          en: 'Hello',
        },
      }
    });
</script>

If component name is "test" you can use it like:

<body>
    <yes-test></yes-test>
</body>

Each component "data" is an public property of a component instance.

ECMAScript Javascript Framework embedded

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago