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

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.

Examples project

Articles