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

0.0.7

Compiler logic adjustments

Full Changelog: 0.0.6...0.0.7