Skip to content

Commit 63ffdd5

Browse files
cdatacdata
authored
Merge pull request #10 from PolymerLabs/better-examples
Split test folder into distinct examples
2 parents 0e8badc + 14c8b9c commit 63ffdd5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+12189
-367
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
node_modules
22
lib
3-
test/dist
3+
dist

‎README.md

+54-5
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,67 @@ solidify.
4343
## Installing
4444

4545
```sh
46-
npm install hd-html
46+
npm install @polymer/html-modules-toolkit
4747
```
4848

49+
## What is included
50+
51+
This project includes low-level, versatile string-to-string transforms that can
52+
analyze a file in place, and produce the appropriate ES Module-compatible
53+
output.
54+
55+
You can import these low-level transforms into your Node.js build pipeline or
56+
dev server of choice:
57+
58+
```javascript
59+
import {htmlModuleToJsModuleMap} from
60+
'@polymer/html-modules-toolkit/lib/html-module-transform';
61+
import {transformSpecifiersInHtmlString,transformSpecifiersInJsString} from
62+
'@polymer/html-modules-toolkit/lib/html-module-specifier-transform';
63+
```
64+
65+
This project also includes higher-level wrappers of the transform for different
66+
practical use cases. The available wrappers include:
67+
68+
- **Webpack plugin:**
69+
```javascript
70+
import {HtmlModulesPlugin} from
71+
'@polymer/html-modules-toolkit/lib/html-module-transform/webpack-plugin';
72+
```
73+
- **Gulp-compatible vinyl-fs transforms:**
74+
```javascript
75+
import {HtmlModuleTransform,HtmlModuleSpecifiersTransform} from
76+
'@polymer/html-modules-toolkit/lib/vinyl-transform';
77+
```
78+
- **Express middleware:**
79+
```javascript
80+
import {htmlModulesMiddleware} from
81+
'@polymer/html-modules-toolkit/lib/express-middleware';
82+
```
83+
- **Koa middleware:**
84+
```javascript
85+
import {htmlModulesMiddleware} from
86+
'@polymer/html-modules-toolkit/lib/koa-middleware';
87+
```
88+
89+
### Specifier transforms
90+
91+
If you look closely at the above import statements, you will notice that in some
92+
cases there are separate transforms offered for converting specifiers. This
93+
transform is offered separately because it is not always needed. For example, in
94+
a dev server the server can control the `Content-Type` of the file being sent,
95+
and can send `text/javascript` even if the file has a `.html` file extension.
96+
4997
## Usage examples
5098

5199
You can find some concrete usage examples in the
52-
[`test/`](https://github.com/PolymerLabs/hd-html/tree/master/test) directory
100+
[`examples/`](https://github.com/PolymerLabs/html-modules-toolkit/tree/master/examples) directory
53101
of this project. The examples include:
54102

55-
- [An Express dev server](https://github.com/PolymerLabs/hd-html/blob/master/test/serve-express.js)
56-
- [A Koa dev server](https://github.com/PolymerLabs/hd-html/blob/master/test/serve-koa.js)
57-
- [A vinyl-fs (Gulp) static build pipeline](https://github.com/PolymerLabs/hd-html/blob/master/test/build.js)
103+
- [An Express dev server](https://github.com/PolymerLabs/html-modules-toolkit/blob/master/examples/express)
104+
- [A Koa dev server](https://github.com/PolymerLabs/html-modules-toolkit/blob/master/examples/koa)
105+
- [A Gulp (vinyl-fs) build pipeline](https://github.com/PolymerLabs/html-modules-toolkit/blob/master/examples/gulp)
106+
- [A Webpack build pipeline](https://github.com/PolymerLabs/html-modules-toolkit/blob/master/examples/webpack)
58107

59108
Additionally, you can find a live example of the Koa middleware in action on
60109
[Glitch](https://glitch.com/edit/#!/html-modules).

‎examples/common/src/about.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<title>About HTML Modules</title>
14+
</head>
15+
<body>
16+
<script type="module" src="./modules/entrypoint-two.js"></script>
17+
</body>
18+
</html>

‎examples/common/src/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<title>HTML Modules Toolkit Demo</title>
14+
</head>
15+
<body>
16+
<script type="module" src="./modules/entrypoint-one.html"></script>
17+
</body>
18+
</html>

‎examples/common/src/modules/common-html-lib.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template id="header">
2+
<div>HTML Modules</div>
3+
</template>

‎examples/common/src/modules/common-js-lib.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const foo = 'hi';

‎examples/common/src/modules/entrypoint-one.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<script type="module" src="./x-hello-js.js"></script>

‎examples/common/src/modules/entrypoint-two.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './x-hello-html.html';

‎examples/common/src/modules/x-hello-html.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script type="module" src="./common-js-lib.js"></script>
2+
<script type="module">
3+
import commonDocument from './common-html-lib.html';
4+
5+
export class XHelloHtml extends HTMLElement {
6+
constructor() {
7+
super();
8+
9+
const content = commonDocument.querySelector('#header').content.cloneNode();
10+
this.attachShadow({mode: 'open'});
11+
this.shadowRoot.appendChild(content);
12+
}
13+
};
14+
15+
customElements.define('x-hello-html', XHelloHtml);
16+
</script>

‎examples/common/src/modules/x-hello-js.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import './common-js-lib.js';
2+
3+
import commonDocument from './common-html-lib.html';
4+
5+
export class XHelloJs extends HTMLElement {
6+
constructor() {
7+
super();
8+
9+
const content = commonDocument.querySelector('#header').content.cloneNode();
10+
this.attachShadow({mode: 'open'});
11+
this.shadowRoot.appendChild(content);
12+
}
13+
};
14+
15+
customElements.define('x-hello-js', XHelloJs);

0 commit comments

Comments
 (0)