Palette offers three primary classes containing the vast majority of it's functionality

The Component Class

The Component class extends the base HTMLElement class to provide reactive rendering, state management, and general web component utilities.

You can extend this class directly to define your own components, or use the define() helper outlined later down the page.

import { Component } from "@rusticarcade/palette";

export class MyComponent extends Component {
  // Define a template
  static template = /* ... */

  // Define scoped styles
  static styles = /* ... */

  // Initialization scripting
  script() {
    /* ... */
  }
}
Copy

Read More: Component API Docs

The Template Class

The Template class wraps an html <template> element to create reusable, optimized templates.

import { Template } from "@rusticarcade/palette";

const $myTemplateElement = document.getElementById("some-template");
const $myRootNode = document.getElementById("root");

const template = new Template($myTemplateElement);
template.render($myRootNode, {
  data: {
    text: "Hello, Template!",
  }
});
Copy

Read More: Template API Docs

The State Class

The State class wraps state data to give a powerful and flexible API for modifying data and listening to stateful changes.

import { State } from "@rusticarcade/palette";

const appState = new State({
  page: "docs",
  tags: ["example", "code"],
});

appState.listen((state) => {
  console.log(state.tags);
})

// Deep proxied access with array manipulation support
// This will cause the listener to run!
appState.live.tags.push("self-referential");
Copy

The Component class uses the Template and State classes internally, but Template and State instances can be freely used in any context, even outside of the browser.

Read More: State API Docs

Additional Utilities

To compliment these classes, a few utility functions are made available:

CSS Template String Helper

The css template string helper streamlines creating CSS stylesheets inline within a JavaScript or TypeScript file. The contents of the template string are added to a CSSStyleSheet instance, which can in turn be passed to a component to be used as it's encapsulated styles.

const styles = css`
  .some-rule {
    font-color: #FF33CC;
  }
`;
Copy

HTML Template String Helper

The html template string helper, like the css helper, streamlines the construction of HTML templates for use with components.

import { Card } from "./card-component.ts";

const template = html`
<${Card} class="user-card">
  <div id="pfp">
    <img :src="@avatar" :title="@username" alt="Profile Picture" />
  </div>
  <div id="bio">
    ${"*user.bio"}
  </div>
</${Card}>
`;
Copy

In the example above, the imported Card component is interpolated into it's HTML tag, so if that ever changes for that component, our template will be fine.

Later, we're using ${"*user.bio"} which is a shorthand for saying "put the value of user.bio from the template data here."

Components can provide complex data to templates using their computedProperties.

Classify Helper Function

A very common operation in web development is taking some data and figuring out what CSS classes to use on an element based on the data. For example, maybe you have a user profile object and need to know which user-selected theme features to use. The classify() helper function makes this easy by converting data into a string suitable for use as a class list.

Put simply, you can use classify() instead of something like classnames.

Define Helper Function

The define() is a factory function for streamlining Palette component definitions. It allows for a slightly terser definition shape while automatically accounting for setting up observed attributes and registering your component with the browser.

define("my-component", {
  template: /* ... */,
  styles: /* ... */,
  script() {
    /* ... */
  }
});
Copy