В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.2), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

Вся статья основана на информации из документации, а также на примерах функциональных UI компонентов, созданных благодаря фреймворку.

Прежде всего, для того, чтобы создать сайт на фреймворке, необходимо будет его установить. Для установки фреймворка будет необходим Node.js. Благодаря нему, в консоли появится возможность использования npm, через который будет скачиваться фреймворк.

Скачивание фреймворка происходит путём ввода команды в консоль в папке с проектом:

npm i cample

После, в папке node_modules появляется сам модуль. Для использования фреймворка необходима среда, которая будет поддерживать import export модель, благодаря которой будет выстроен код. Такую среду, к примеру, можно настроить благодаря webpack и подходящим модулям, для работы с HTML, стилями, изображениями и т.д. Но, в теории, подходит почти любой сборщик модулей.

Далее, необходим HTML файл, который будет основой для сайта. К нему будет подключаться javascript файл, где будут реализованы скрипты фреймворка.

В HTML файле, стартовой точкой сайта пускай будет тег div с id main. В нём будет находится основной контент сайта.

<div id="main"></div>

В javascript файле для начала нужно импортировать такую функцию как cample. Данная функция создаёт экземпляр класса, который является начальной точкой в js для сайта.

import { cample } from "cample";

Данная функция принимает первым параметром selector блока, куда будет рендериться сайт, а вторым, необязательным параметром, функция принимает объект с опциями. Для дальнейшей работы будет использоваться один параметр.

const mainCample = cample("#main");

Все функции в фреймворке создают экземпляры классов. В данном случае, в переменную с названием main присваивается экземпляр класса. У данной переменной теперь можно вызвать метод render, в который будут переданы все компоненты, которые созданы, а также основной HTML template, который будет обработан.

mainCample.render(
  `
    <div class="wrapper">
      {{content}}
    </div>
  `,
  {
    content,
    tableRows,
  }
);

Используя двойные фигурные скобочки скрипт применяет такой приём как "интерполяция строк", благодаря которому будет создана срока такого типа:

<template data-cample="content-component" ...></template>

Такая строчка потом заменяется на HTML компонента. Для того, чтобы работать с компонентами, в js файл нужно импортировать соответствующие функции. В примере будут использоваться функции each и component, которые предоставляют необходимый функционал.

import { component, each } from "cample";

Сам же компонент, к примеру, будет выглядеть вот так:

const content = component(
  "content-component",
  `
  <div class="content">
    <h1 class="title">{{title}}</h1>
    <table>
      <thead>
        <tr>
          <th>Тестовые данные</th>
        </tr>
      </thead>
      <tbody><template
      data-cample-import="{{{tableData}}}"
      data-cample="rows-component"></template></tbody>
    </table>
  </div>
`,
  {
    data: () => {
      return {
        title: "Основная страница",
        data: ["Тестовая строка"],
      };
    },
    export: {
      tableData: {
        data: {
          data: "data",
        },
      },
    },
    exportId: "mainExport",
    style: ".title{font-size:60px}",
  }
);

В данном примере создаётся div с заголовком h1 и таблицей, данные для которой импортируются из компонента. Подробнее про работу с компонентами можно посмотреть в документации тут. Данные для таблицы хранятся в свойстве data, в которой есть один текст: "Тестовая строка". В зависимости от этого в таблице будет только одна строка.

Для того, чтобы отобразить данные для таблицы, необходим компонент each. Он повторяет HTML код в зависимости от данных.

const tableRows = each(
  "rows-component",
  ({ importedData }) => importedData.data,
  `<tr key={{index}}>
    <td>{{value}}</td>
   </tr>
  `,
  {
    import: {
      value: [],
      exportId: "mainExport",
    },
  }
);

Главным моментом при создании цикла является указание свойства key для повторяющегося HTML. Более подробно о том, чем отличается keyed реализация от non-keyed можно посмотреть тут. При импортировании, в функции данных можно указать то самое импортированное свойство data, тем самым отобразив данные на сайте. В самом свойстве import для значения value можно указать пустой массив, тем самым импортировав всё то, что экспортируется.

Таким образом, весь код выглядит примерно вот так:

import { cample, component, each } from "cample";

const content = component(
  "content-component",
  `
  <div class="content">
    <h1 class="title">{{title}}</h1>
    <table>
    <thead>
      <tr>
        <th>Тестовые данные</th>
      </tr>
    </thead>
    <tbody><template
    data-cample-import="{{{tableData}}}"
    data-cample="rows-component"></template></tbody>
  </table>
  </div>
`,
  {
    data: () => {
      return {
        title: "Основная страница",
        data: ["Тестовая строка"],
      };
    },
    export: {
      tableData: {
        data: {
          data: "data",
        },
      },
    },
    exportId: "mainExport",
    style: ".title{font-size:60px}",
  }
);
const tableRows = each(
  "rows-component",
  ({ importedData }) => importedData.data,
  `<tr key={{index}}>
    <td>{{value}}</td>
   </tr>
  `,
  {
    import: {
      value: [],
      exportId: "mainExport",
    },
  }
);
const mainCample = cample("#example");
mainCample.render(
  `
    <div class="wrapper">
      {{content}}
    </div>
  `,
  {
    content,
    tableRows,
  }
);

Результатом же кода, будет примерно такая страница:

Стили для таблицы были импортированы с основного сайта. Также, шрифт от браузера, в теории, может отличаться.

Всем большое спасибо за прочтение статьи!