Skip to content

Commit

Permalink
Make it to autonomous CEv1, support Polymer 2,
Browse files Browse the repository at this point in the history 
WIP: support WebComponents.js polyfill >=1.x - per-template script execution is missing.
webcomponents/webcomponentsjs#872

Implements #29
  • Loading branch information
@tomalec
tomalec committed Dec 2, 2017
1 parent ee003dd commit fc052bd
Show file tree
Hide file tree
Showing 28 changed files with 351 additions and 329 deletions.
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
==============
> Declarative way for client-side includes boosted with HTML Imports features.
`<imported-template>` (in fact `<template is="imported-template">`) is a custom element that lets you load template from external file into your document, and take full control over loaded `<script>`s and `<link rel="import">`s. Thanks to HTML Imports - caching, script execution, etc. are completely native.
`<imported-template>` is a custom element that lets you load template from external file into your document, and take full control over loaded `<script>`s and `<link rel="import">`s. Thanks to HTML Imports - caching, script execution, etc. are completely native.
It also provides a simple data-binding feature, that plays nice with Polymer or pure JavaScript + HTML data-binding.

### Small sample
Expand All @@ -19,10 +19,10 @@ If you have your partial **/path/to/file.html** full of your HTML magic:
```
You can load all dependencies and stamp template content in your main document with just
```html
<template is="imported-template" href="/path/to/file.html"></template>
<imported-template href="/path/to/file.html"></imported-template>
```

> Please note that dependencies will be loaded only once, but content and inner `<script>doMagic...` will get stamped and executed as many times as you use `<template is="imported-template">`
> Please note that dependencies will be loaded only once, but content and inner `<script>doMagic...` will get stamped and executed as many times as you use `<imported-template>`
## Demo/Examples

Expand Down Expand Up @@ -69,7 +69,7 @@ Or [download as ZIP](https://github.com/Juicy/imported-template/archive/master.z
1. Import Web Components' polyfill, if needed:

```html
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
```

2. Import Custom Element:
Expand All @@ -82,11 +82,11 @@ Or [download as ZIP](https://github.com/Juicy/imported-template/archive/master.z

To load content from file:
```html
<template is="imported-template" href="/your/partial.html"></template>
<imported-template href="/your/partial.html"></imported-template>
```
To attach data to content:
```html
<template is="imported-template" href="/your/partial.html" model='{"json":"data"}'></template>
<imported-template href="/your/partial.html" model='{"json":"data"}'></imported-template>
```

## Attributes/Properties
Expand Down
13 changes: 6 additions & 7 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
"html",
"declarative",
"client-side",
"partial",
"template",
"custom-element",
"web-components",
"polymer"
Expand All @@ -32,17 +34,14 @@
"wct.conf.json"
],
"dependencies": {
"juicy-html": "^2.0.0"
"juicy-html": "#master"
},
"devDependencies": {
"dom-bind-notifier": "~1.0.0",
"iron-icon": "PolymerElements/iron-icon#~1.0.4",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#~1.0.4",
"object.observe": "^0.2.6",
"array.observe": "^0.0.1",
"web-component-tester": "^6.2.0"
},
"resolutions": {
"webcomponentsjs": "^0.7.24"
"web-component-tester": "^6.2.0",
"polymer": "^2.0.0",
"webcomponentsjs": "^1.0.0"
}
}
4 changes: 2 additions & 2 deletions examples/asyncPolymer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
<title>Polymer binding issue</title>
<meta charset="utf-8">
<!-- Import Polymer platform -->
<script src="../../../webcomponentsjs/webcomponents.js"></script>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../polymer/polymer.html">

<link rel="import" href="../../imported-template.html">
</head>

<body>
<template id="root" bind>
<template is="imported-template" content="./templates/start.html"></template>
<imported-template href="./templates/start.html"></imported-template>
</template>

<script type="text/javascript">
Expand Down
6 changes: 3 additions & 3 deletions examples/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; basic partial</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../imported-template.html">

Expand All @@ -20,10 +20,10 @@
</style>
</head>
<body class="markdown-body">
<code>&lt;template is="imported-template" content="./partials/basic.html"&gt;&lt;/template&gt;</code>
<code>&lt;imported-template href="./partials/basic.html"&gt;&lt;/imported-template&gt;</code>
<hr/>

<template is="imported-template" content="./partials/basic.html"></template>
<imported-template href="./partials/basic.html"></imported-template>


</body>
Expand Down
14 changes: 7 additions & 7 deletions examples/concatenated_partial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; merged partial</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../imported-template.html">

Expand All @@ -22,15 +22,15 @@
<body class="markdown-body">
<h1>Concatenated partials/templates</h1>
<p>To boost performance <code>imported-template</code> supports concatenated partials, and stamps all "root" templates all together.</p>
<pre><code>&lt;template is="imported-template"
content="./partials/concatenated.html"
<pre><code>&lt;imported-template
href="./partials/concatenated.html"
model='{"path":"./partials/concatenated.html"}'
&gt;&lt;/template&gt;</code></pre>
&gt;&lt;/imported-template&gt;</code></pre>
<hr/>
<template is="imported-template"
content="./partials/concatenated.html"
<imported-template
href="./partials/concatenated.html"
model='{"path":"./partials/concatenated.html"}'
></template>
></imported-template>
<hr/>
<p>Please note, that if not specified otherwise, all shares same data model</p>

Expand Down
8 changes: 5 additions & 3 deletions examples/partials/concatenated.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
</template>
<link rel="import" href="../../../polymer/polymer.html">
<template>
<template is="dom-bind">
and this is from the second part of <code>{{model.path}}</code>.
</template>
<dom-bind>
<template is="dom-bind">
and this is from the second part of <code>{{model.path}}</code>.
</template>
</dom-bind>
</template>
10 changes: 6 additions & 4 deletions examples/partials/concatenated_scoped.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
<imported-template-scope scope="vendorB">
<link rel="import" href="../../../polymer/polymer.html">
<template>
<template is="dom-bind">
and this is from the second part of <code>./partials/concatenated_scoped.html</code>,
with data <em>{{model.data}}</em>.
</template>
<dom-bind>
<template is="dom-bind">
and this is from the second part of <code>./partials/concatenated_scoped.html</code>,
with data <em>{{model.data}}</em>.
</template>
</dom-bind>
</template>
</imported-template-scope>
13 changes: 7 additions & 6 deletions examples/partials/polymer_binding.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<link rel="import" href="../../../polymer/polymer.html">
<template>
<template is="dom-bind" id="test">
<!-- we use dom-bind-notifier to simplyfy two-way data-binding within dom-bind itself -->
<dom-bind-notifier ref="test" observed-object="{{model}}" path="model" deep></dom-bind-notifier>
This is <input value="{{model.content::input}}"/> stamped from `dom-bind` from
</template>
<dom-bind>
<template is="dom-bind" id="test">
<!-- we use dom-bind-notifier to simplyfy two-way data-binding within dom-bind itself -->
<dom-bind-notifier ref="test" observed-object="{{model}}" path="model" deep></dom-bind-notifier>
This is <input value="{{model.content::input}}"/> stamped from `dom-bind` from
</template>
</dom-bind>
<script>
(function () {
var script = document._currentScript || document.currentScript;
Expand All @@ -18,7 +20,6 @@
var script = document._currentScript || document.currentScript;
var template = script.previousElementSibling;
console.info('Here runs, imported per-partial script that could prepare template to be stamped;');
debugger
var codeElement = document.createElement('code');
codeElement.innerHTML = '"./partials/polymer_binding.html"';
template.content.querySelector('[is="dom-bind"]').content.appendChild(codeElement);
Expand Down
8 changes: 5 additions & 3 deletions examples/partials/wellBehaved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ <h3></h3>
console.log("and simply refer to the model attached", currentScript.model);
currentScript.previousElementSibling.innerText = currentScript.model.vanilla;
</script>
<template is="dom-bind">
<h3>{{model.polymer}}</h3>
</template>
<dom-bind>
<template is="dom-bind">
<h3>{{model.polymer}}</h3>
</template>
</dom-bind>
</template>
40 changes: 21 additions & 19 deletions examples/polymer_partial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; merged partial</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<script src="../../object.observe/dist/object-observe.min.js"></script>
<script src="../../array.observe/array-observe.min.js"></script>
Expand All @@ -30,30 +30,32 @@
</style>
</head>
<body class="markdown-body">
<template is="dom-bind" id="root">
<!-- we use dom-bind-notifier to simplyfy two-way data-binding within dom-bind itself -->
<dom-bind-notifier ref="root" observed-object="{{model}}" path="model" deep></dom-bind-notifier>
<h1><code>imported-template</code> within Polymer's <code>dom-bind</code></h1>
<p><code>imported-template</code> plays nice with Polymer, even when used within <code>dom-bind</code>, and it stamps nested one - object is shared (given by reference) to nested instances.</p>
<p>So, you can access, and edit same object properties from outside: <input value="{{model.data.content::input}}" /></p>
<p>See console for more details.</p>
<pre><code>&lt;template is="imported-template"
content$="{{model.path}}"
model="{{model.data}}"
&gt;&lt;/template&gt;</code></pre>
<hr />
<template is="imported-template"
content$="{{model.path}}"
model="{{model.data}}">
<dom-bind>
<template is="dom-bind" id="root">
<!-- we use dom-bind-notifier to simplyfy two-way data-binding within dom-bind itself -->
<dom-bind-notifier ref="root" observed-object="{{model}}" path="model" deep></dom-bind-notifier>
<h1><code>imported-template</code> within Polymer's <code>dom-bind</code></h1>
<p><code>imported-template</code> plays nice with Polymer, even when used within <code>dom-bind</code>, and it stamps nested one - object is shared (given by reference) to nested instances.</p>
<p>So, you can access, and edit same object properties from outside: <input value="{{model.data.content::input}}" /></p>
<p>See console for more details.</p>
<pre><code>&lt;imported-template
content$="{{model.path}}"
model="{{model.data}}"
&gt;&lt;/imported-template&gt;</code></pre>
<hr />
<imported-template
href="{{model.path}}"
model="{{model.data}}">
</imported-template>
<hr />
</template>
<hr />
</template>
</dom-bind>
<script>
(function () {
document.addEventListener('WebComponentsReady', function (){
var template = document.getElementById("root");

template.model = {
template.model = template.parentNode.model = {
path: "./partials/polymer_binding.html",
data: {
"content": "content"
Expand Down
14 changes: 7 additions & 7 deletions examples/scoped_concat_partial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; merged, scoped partial</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../imported-template.html">

Expand All @@ -23,21 +23,21 @@
<h1>Concatenated partials/templates with attached scopes</h1>
<blockquote>To boost performance <code>imported-template</code> supports <a href="concatenated_partial.html">concatenated partials</a>, and stamps all "root" templates all together.</blockquote>
<p>To mark isolated data scope for each partial, you may use <code>&lt;imported-template-scope&gt;</code> custom element.</p>
<pre><code>&lt;template is="imported-template"
content="./partials/concatenated_scoped.html"
<pre><code>&lt;imported-template
href="./partials/concatenated_scoped.html"
model='{
"vendorA": {"data": "from scope of Vendor A"},
"vendorB": {"data": "from scope of Vendor B"}
}'
&gt;&lt;/template&gt;</code></pre>
&gt;&lt;/imported-template&gt;</code></pre>
<hr/>
<template is="imported-template"
content="./partials/concatenated_scoped.html"
<imported-template
href="./partials/concatenated_scoped.html"
model='{
"vendorA": {"data": "from scope of Vendor A"},
"vendorB": {"data": "from scope of Vendor B"}
}'
></template>
></imported-template>


</body>
Expand Down
6 changes: 3 additions & 3 deletions examples/template_inline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; in a &lt;template&gt; with HTML partial from a string</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../imported-template.html">
<style>
Expand All @@ -16,7 +16,7 @@
<body>

<template id="test" bind>
<template is="imported-template" content="{{ subpage.html }}"></template>
<imported-template html="{{ subpage.html }}"></imported-template>
</template>

<script>
Expand All @@ -30,4 +30,4 @@
</script>

</body>
</html>
</html>
6 changes: 3 additions & 3 deletions examples/template_partial_sibling.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; in a &lt;template&gt; with HTML partial loaded as a sibling</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../imported-template.html">
<style>
Expand All @@ -19,7 +19,7 @@
<h2>Hey! those are siblings:</h2>
<ul>
<li class="specialExternal">Just plain <code>&lt;li&gt;</code></li>
<template is="imported-template" content="{{ partial }}" currentnode></template>
<imported-template href="{{ partial }}" currentnode></imported-template>
</ul>
</template>

Expand All @@ -32,4 +32,4 @@ <h2>Hey! those are siblings:</h2>
</script>

</body>
</html>
</html>
14 changes: 7 additions & 7 deletions examples/wellBehaved_partial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>&lt;imported-template&gt; with simple data binding</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../imported-template.html">

Expand All @@ -21,19 +21,19 @@
</head>
<body class="markdown-body">
<h1>Imported template with simple data binding</h1>
<pre><code>&lt;template is="imported-template"
content="./partials/wellBehaved.html"
<pre><code>&lt;imported-template
href="./partials/wellBehaved.html"
model='{"name":"imported-template"}'
&gt;&lt;/template&gt;</code></pre>
&gt;&lt;/imported-template&gt;</code></pre>
<hr/>
<template is="imported-template"
content="./partials/wellBehaved.html"
<imported-template
href="./partials/wellBehaved.html"
model='{
"polymer": "Polymer `dom-bind`",
"vanilla": "Native JS+HTML",
"data":"data model"
}'
></template>
></imported-template>

</body>
</html>
Loading

0 comments on commit fc052bd

Please sign in to comment.