0.1.7 - External Web Components, Slots, Styling API, Lifecycles Support, Temple CSS & Temple UI

What's New?

• Importing External Components
• Slots, Light & Shadow Mode Templates
• Programmatic Styling API
• Observed Attributes Lifecycle
• ElementInternals Lifecycle
• Temple CSS
• Temple UI

Importing External Components

You can now import any web components found on the web. This will add to your bundle script automatically.

<link rel="import" type="external" href="@shoelace-style/shoelace/dist/components/button/button.js" />
<link rel="import" type="external" href="@shoelace-style/shoelace/dist/components/alert/alert.component.js" name="sl-alert" />

<sl-button>Button</sl-button>
<sl-alert open>
  This is a standard alert. You can customize its content and even the icon.
</sl-alert>

Slots, Light & Shadow Mode Templates

If you use styles, Temple components naturally enable shadow mode. Shadow mode ignores styles defined outside the component and cannot be used natively in forms. There is now a way to expose HTML to the DOM while working in shadow mode using slots. Let's look at the following example.

<style>
  div {
    padding: 10px;
  }
  ::slotted(button) {
    cursor: pointer;
    text-align: center;
  }
</style>
<template type="light">
  <button>Hello</button>
</template>
<template type="shadow">
  <div><slot></slot></div>
</template>

In the example above, since we added styles, then shadow mode is turned on by default. We use the template tag to designate which markup to expose to the DOM and which to hide and we used native <slot> to marry both sides. You can read more about slots here and the ::slotted css selector here.

Programmatic Styling API

We added an API to allow developers to programmatically add styles.

<script>
  import StyleSet from '@ossph/temple/dist/style/StyleSet';
  //override default styles
  const styles = new StyleSet();
  this.styles = () => styles.toString();
  //now add some styles
  styles.add(':host', 'padding', '5px 10px');
</script>

Observed Attributes Lifecycle

Temple components can now listen when its attributes are changed, added, removed, or replaced. Read this background on
Lifecycle Callbacks. This is how you can take advantage of this lifecycle.

<script observe="name,value">
  import type { AttributeChangeEvent } from '@ossph/temple/dist/types';

  this.on('attributechange', ((e: AttributeChangeEvent)) => {
    const { action, name, value, target } = e.detail;
    switch (action) {
      case 'add':
      case 'update':
      case 'remove':
    }
  });
</script>

ElementInternals Lifecycle

A way to allow components to fully participate in HTML forms. It provides utilities for working with these elements in the same way you would work with any standard HTML form element. Read this background on ElementInternals. This is how you can take advantage of this lifecycle.

<script form>
  this.setFormValue('hello');
</script>

Temple CSS

Temple CSS is still in development.

Temple CSS is like TailwindCSS.

• Definitely not as complete as TailwindCSS. If you need really advance atomic styles, maybe Tailwind is more suited.
• More pattern and expression driven than fixed definitions. This makes styling faster, because you don't have to refer to a reference web page for every style when starting out.
• Highly pluggable into any front end library and extendable by design.
• Uses pixels (px) be default. Where as p-10 is padding: 10px.
• You can still use other measurements:
  • p-10p means padding: 10%
  • p-10e means padding: 0.1em
  • p-10r means padding: 0.1rem
• There is no limit to styles that use measurements:
  • m-100000 means margin: 100000px
  • m--100000 means margin: -100000px
• Mobile responsive strategy is desktop first vs mobile first.
  • This means you style for desktop resolutions first, then add responsive styles when moving to smaller screens.
  • Prefix xs to xl4 for mobile responsive styles. ie sm-p-10
• Pseudo :before and :after can be prefixed
  • ex. before-p-10 means .before-p-10::before { padding: 10px; }
  • ex. lg-after-p-10means media (max-width: 960px ) { .lg-before-p-10::before { padding: 10px; }}

More documentation to follow.

Temple UI

A turn key set of pre-defined components in order to use Temple right out of the box. Over 70 elements have been defined including the following.

• Alert
• Badge
• Breadcrumbs
• Button
• Icon
• Loader
• Notify (Toast)
• Pager (Pagination)
• Panel Layout
• Progress Bar
• Tab
• Table Layout
• Tooltip
• Checkbox Field
• Color Field
• Country Dropdown
• Currency Dropdown
• Date Field
• Datetime Field
• Code Editor
• File Uploader
• File List Uploader
• Input Field
• Markdown Editor
• Input Mask Field
• Metadata Field
• Number Field
• Password Field
• Radio Field
• Range Field
• Rating Field
• Select Dropdown
• Slug Field
• Switch Field
• Tag Field
• Textarea Field
• Text List Field
• Time Field
• WYSIWYG

More documentation to follow.

Change Log

Full Changelog: 0.1.6...0.1.7

0.1.6 - Core Work

Focused on some core fixes.

• Resumability bindings now consider directives (like conditionals and loops)
• Components definitely dont need markup. Can pass children or text directly.
• Mount event now triggers once per render
• Signals now have a change listener count.change(value => ...)
• New component() helper that returns the component instance so things like component.classList and component.innerHTML are possible in your components.
• Added connect, disconnect, adopt events that trigger when the DOM triggers those.
• Fixed rendering issue with components inside components.

0.1.4

• TailwindCSS Plugin now available in NPM. https://www.npmjs.com/package/@ossph/temple-tailwind
• compiler.render('page.dtml') - Now doesn't require to pass an options object.
• Less crashing and more reporting using developer tools.
• Fix for #2

0.1.2 TailwindCSS

0.1.2 TailwindCSS

• Fixed examples not rendering todo
• Events can now handle async functions
• Created example with TailwindCSS

https://github.com/OSSPhilippines/temple/tree/main/examples/with-tailwind

0.1.0

Temple Now in Beta

Been hitting the code hard for the last 3 months using the Temple documentation as a basis of stability. Today I was able to launch the documentation. At a high level here are the major updates.

• Finalized the project structure (mono repo)
• Better error reporting
• Developer tools (with fast refresh)
• Finished basic documentation

0.0.12

Full Changelog: 0.0.11...0.0.12

0.0.11 - Introducing Directives

Directives

A directive specifies how a compiler (or other translator) should process
its input. Temple compiler now allows custom directives and has predefined
directives built-in that can be overridden.

Conditional Directive

<if true={count === 1}>
  <p>Count is 1</p>
<elif true={count === 2} />
  <p>Count is 2</p>
<else />
  <p>Count is not 1 or 2</p>
</if>

Iterator Directive

<each key=index value=item from=list>
  <li>{index} {item}</li>
</each>

Try Catch Directive

<try>
  <p>{unknown_variable}</p>
<catch error=err />
  <p>{err.message}</p>
</try>

Full Changelog: 0.0.10...0.0.11

0.0.10

Full Changelog: 0.0.9...0.0.10

0.0.9

Preface

Currently you can import a component like the following.

<link rel="import" href="./components/ui-tab.html" />

This will enable the <ui-tab /> markup available in your document to use.

New Feature: Import Names

Import names are introduced in 0.0.9 to address components with the same
file name (even if the path is different). Consider the following example.

<link rel="import" href="./components/auth/ui-tab.html" />
<link rel="import" href="./components/user/ui-tab.html" />

In temple this syntax is accepted, but will only use the first ui-tab import
whenever <ui-tab> is found in your markup. Additionally the browser will
error because ui-tab is being registered twice.

If you want to use both ui-tab components, you can now rename them inline.
Consider the following example.

<link rel="import" href="./components/auth/ui-tab.html" name="ui-auth-tab" />
<link rel="import" href="./components/user/ui-tab.html" name="ui-user-tab" />
<link rel="import" href="./components/user/ui-tab.html" />

You can now use <ui-auth-tab>, <ui-user-tab>, <ui-tab> in your markup.

New Feature: Import Types

Web components are great, but there are times you don't want to use components
rather than reusable markup. Other template engines have concepts of blocks
and partials are located on separate files and called in the main template file,
or called in many times in a loop or conditionally called. It's possible for blocks
and partials to call in other blocks and partials as well.

Temple now has 2 import types.

• Components: Which are web components, whether light or shadow components.
• Templates: Partial markup, when called in, simply attaches to it's parent markup.

Consider the following import statements.

<link rel="import" type="template" href="./templates/ui-header.html" />
<link rel="import" type="component" href="./components/ui-tab.html" />

In the example above ui-tab is a web component and ui-header is a template.
Some facts about templates are the following:

• A template is not a web component
• A template is just for reusable markup
• A template can be called in like a component ie. <ui-header />.
• Templates can have custom names ie name="main-header"
• Templates can import components
• Templates can import templates
• A template should not have child markup (will be ignored)
• A template should not have attributes (will be ignored)
• A template inherits the attributes of its parent.
• Templates ignore <script> and <style> tags

New Feature: Import Alias Path

If imports start with @, it will be relative to the current working directory cwd
which you can define in the compiler options.

<link rel="import" type="component" href="@/components/ui-tab.html" />

Bug Fixes

• Fixed: Symbols like (), [] weren't rendering as text between markup.
• Fixed: Parser adding </script> and </style> as a text node.

Full Changelog: 0.0.8...0.0.9

0.0.8

Full Changelog: 0.0.7...0.0.8