Htx Guide

Scopes

In Htx scopes are pieces of JS and CSS that component require to function. These scopes are automaticly imported and put in a defined position.

Scope import placement

To define where a scopes should be placed you can use the builtin <SCOPES /> component. It requires a "type" property either set to "js" or "css" depending on the type of scopes you want to be placed there.

<SCOPES type="js" /> <!-- place all js code here -->
<SCOPES type="css" /> <!-- place all css code here -->

Internal component scopes

To add inline JS or CSS you can place a file ending in .js or .css next to your component file. For example the src/layouts/Default.htx file can have inline js code in src/layouts/Default.js and inline css in src/layouts/Default.css

WARNING

These scoped JS and CSS files don't have local variables or component specific classes, so you'll have to keep that in mind while writing code

Extenal component scopes

JS and CSS that is required for a component that uses a url for importing can also be used. You can use either the <JS /> or <CSS /> and set the "src" attribute on them to the link to import from. Here is an example of a layout that defines where to put scoped code and that also imports bootstrap.

<?php
if(!isset($props["title"])) $props["title"] = "Page";
?>
<!-- this imports bootstrap. If you want you can also move this to another component -->
<CSS src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<JS src="https://code.jquery.com/jquery-3.3.1.slim.min.js" />
<JS src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" />
<JS src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" />
<!-- the usual layout code -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $props["title"] ?></title>
    <SCOPES type="css" />
</head>
<body>
    <INNER />
    <SCOPES type="js" />
</body>
</html>