Skip to content

0.0.9
Compare
Choose a tag to compare
@cblanquera cblanquera released this 30 May 17:30
· 153 commits to main since this release
0.0.9
6763ac1

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

Assets 2
Loading