FrontElf Docs

ViteTemplateHTML

Локальні та глобальні змінні

Цей документ описує використання локальних змінних в HTML-компонентах та глобальних змінних в проекті.

Глобальні змінні:

Глобальні змінні вказуються в файлі template.config.js в корені проекту, в обєкті HTMLVariables: {}:

У поточній збірці глобальні HTML-змінні й helper-функції задаються в HTMLVariables і доступні в будь-якому компоненті як звичайні пропси. 

// template.config.js

export default {
   ...
   HTMLVariables {
      SITE_NAME: 'My Site',
      API_URL: 'https://jsonplaceholder.typicode.com/users',
      CURRENT_YEAR: () => new Date().getFullYear(),
      CLEAN_PHONE: (phone = '') => phone.replace(/(?!^)\+|[^\d+]/g, ''),
   }
   ...
}

// Використання в будь-якому місці проекту як звичайних пропсів

<head>
   <title>{{SITE_NAME}}</title>
</head>

<each data="{{API_URL}}" loop="user, index in data">
   <div class="user-card">
      <h2>{{user.name}}</h2>
      <p>{{user.username}}</p>
      <p>{{user.address.street}}</p>
      <p>{{user.email}}</p>
   </div>
</each>

Локальні змінні:

Локальні змінні вказуються в верхній частині файлу компонента в тегу<script define></script> як звичайні JS змінні.

Також локальні змінні можна передавати пропсами в любий компонент що викликається в середині цього компонента.

// template.config.js

<script define>
    const title = 'The Smartest Way to Do Laundry'
    const logo = '@i/logo.svg'
    const subTitle = 'DipDap picks up, cleans, and delivers your laundry & dry cleaning.'
    const contacts = {
       phone: '(800) 555-1212',
       email: 'text@gmail.com',
    }
</script>

<div class="product-card">
    <img src="{{logo}}" alt="{{title}}"/>
    <h2>{{title}}</h2>
    <p>{{subTitle}}</p>
    <ul>
       <li>{{contacts.phone}}</li>
       <li>{{contacts.email}}</li>
    </ul>
</div>

Destructuring у <script define>

Змінні зі звичайних декларацій, object destructuring, array destructuring і rest-патернів підхоплюються через AST-парсер.

<script define>
   const { title, image: heroImage } = card
   const [firstItem, secondItem] = items
   const { className = 'card', ...rest } = props
</script>
<article class="{{className}}">{{title}}</article>