@ygles-es/yes-compcreator
v1.0.5
Published
A component creator to help developer to create reactive web component
Downloads
5
Maintainers
yglesReadme
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-compcreatorHow 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.