Getting started
Starting usage
After setting the starting point of the application, the js file will contain the following code, or the same one, but with html import.
Javascript file
const newComponent = component(
"new-component",
`<div class="component">
<div> class="clicks" data-value="{ {dynamicData} }">Clicks:{ {dynamicData} }</div>
<button> class="button">Click</button>
</div>`,
{
script: ({ element, functions }) => {
const button = element.querySelector(".button");
const updateFunction = () => {
functions?.updateClicks((data) => {
return data + 1;
});
};
button.addEventListener("click", updateFunction);
},
data: () => {
return {
dynamicData: 0,
};
},
dataFunctions: {
updateClicks: "dynamicData",
},
}
);
cample("#app", {
trimHTML: true,
}).render(
`
<template> data-cample="new-component"></template>
`,
{
newComponent,
}
);
HTML file
<div id="app"></div>
You can change this code to any other you want. This code is presented as an example of how the framework works.
Classes instance
In Cample.js, all components are created using "new" or "class function". The "class function" does the same thing as creating with "new".
new
const newComponent
= new Component(
string,
string,
object,
object
);
class function
const newComponent
= component(
string,
string,
object,
object
);
The default framework uses two ways to create components. The more preferable of these is the method of creation through "class functions", since, in general, less code is obtained.
Importing files
Also, a big advantage of the syntax for creating components through creating an object instance is that when working with a component, you can import ready-made files into this syntax. For this purpose, there are HTML parsers that convert ready-made files into a line.
Files
Code
import templateButton from "button.html";
const newComponent
= component(
"component",
templateButton
);
It is also important that regular HTML markup is used. The syntax that complements it will not generate an error when parsing the string. All syntax works fine when creating components.