├── .github
└── workflows
│ ├── latest.yml
│ └── release.yml
├── .gitignore
├── .npmignore
├── .vscode
└── launch.json
├── LICENSE
├── README.md
├── dev
├── index.html
└── sample.html
├── examples
├── cdn
│ ├── basic.html
│ └── shadow.html
└── npm
│ ├── basic.html
│ └── shadow.html
├── index.js
├── index.min.js
├── package.json
└── src
└── wc-include.js
/.github/workflows/latest.yml:
--------------------------------------------------------------------------------
1 | name: Latest
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | verify:
7 | name: Verify
8 | runs-on: ubuntu-latest
9 | steps:
10 | - name: Checkout
11 | uses: actions/checkout@v1
12 | - name: Setup
13 | uses: actions/setup-node@v1
14 | with:
15 | node-version: 14
16 | - name: Cache
17 | uses: actions/cache@v1
18 | with:
19 | path: node_modules
20 | key: ${{ runner.OS }}-npm-cache-${{ hashFiles('**/package.json') }}
21 | restore-keys: |
22 | ${{ runner.OS }}-npm-cache-
23 | - name: Install
24 | run: npm i
25 | - name: Test
26 | run: npm run test --if-present
27 | - name: Lint
28 | run: npm run lint --if-present
29 | - name: Types
30 | run: npm run types --if-present
31 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | tags:
6 | - 'v*'
7 |
8 | jobs:
9 | check:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - name: Checkout
13 | uses: actions/checkout@master
14 | - name: Setup
15 | uses: actions/setup-node@v1
16 | with:
17 | node-version: 14
18 | - name: Cache
19 | uses: actions/cache@v1
20 | with:
21 | path: node_modules
22 | key: ${{ runner.OS }}-npm-cache-${{ hashFiles('**/package.json') }}
23 | restore-keys: |
24 | ${{ runner.OS }}-npm-cache-
25 | - name: Verify
26 | run: |
27 | npm i
28 | npm run preversion
29 | npm:
30 | runs-on: ubuntu-latest
31 | needs: check
32 | steps:
33 | - name: Checkout
34 | uses: actions/checkout@master
35 | - name: Publish
36 | run: |
37 | echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
38 | npm publish --access public
39 | gh:
40 | runs-on: ubuntu-latest
41 | needs: check
42 | steps:
43 | - name: Checkout
44 | uses: actions/checkout@master
45 | - name: Publish
46 | run: |
47 | echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
48 | ORG="$(echo '${{ github.repository }}' | cut -d'/' -f1)"
49 | echo "registry=https://npm.pkg.github.com/$ORG" > .npmrc
50 | npm publish
51 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | package/
3 | *.tgz
4 | package-lock.json
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .github/
2 | .vscode/
3 | dev/
4 | *.tgz
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "type": "chrome",
6 | "request": "launch",
7 | "name": "Chrome",
8 | "url": "http://localhost:5500/dev",
9 | "webRoot": "${workspaceFolder}",
10 | "pathMapping": {
11 | "/dev/": "${workspaceFolder}/dev/"
12 | }
13 | },
14 | {
15 | "type": "browser-preview",
16 | "request": "launch",
17 | "name": "Browser Preview",
18 | "url": "http://localhost:5500/dev/",
19 | "webRoot": "${workspaceFolder}",
20 | "pathMapping": {
21 | "/dev/": "${workspaceFolder}/dev/"
22 | }
23 | }
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2020 VanillaWC
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | 'Software'), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <wc-include> Include HTML from an External Source
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Sample HTML File
2 | This is a demonstration of loading an external HTML file using the WCInclude component
3 |
--------------------------------------------------------------------------------
/examples/cdn/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/cdn/shadow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/npm/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/npm/shadow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // src/wc-include.js
2 | var WCInclude = class extends HTMLElement {
3 | static get observedAttributes() {
4 | return ["src"];
5 | }
6 | attributeChangedCallback(name, oldValue, newValue) {
7 | if (!this.__initialized) {
8 | return;
9 | }
10 | if (oldValue !== newValue) {
11 | this[name] = newValue;
12 | }
13 | }
14 | get src() {
15 | return this.getAttribute("src");
16 | }
17 | set src(value) {
18 | this.setAttribute("src", value);
19 | this.setSrc();
20 | }
21 | constructor() {
22 | super();
23 | this.__initialized = false;
24 | this.__element = null;
25 | const shadow = this.hasAttribute("shadow");
26 | if (shadow) {
27 | this.attachShadow({mode: "open"});
28 | }
29 | this.__element = shadow ? this.shadowRoot : this;
30 | }
31 | async connectedCallback() {
32 | if (this.hasAttribute("src")) {
33 | this.setSrc();
34 | }
35 | this.__initialized = true;
36 | }
37 | async setSrc() {
38 | const src = this.getAttribute("src");
39 | const contents = await this.fetchSrc(src);
40 | this.__element.innerHTML = contents;
41 | }
42 | async fetchSrc(src) {
43 | const response = await fetch(src);
44 | return response.text();
45 | }
46 | };
47 | customElements.define("wc-include", WCInclude);
48 | export {
49 | WCInclude
50 | };
51 |
--------------------------------------------------------------------------------
/index.min.js:
--------------------------------------------------------------------------------
1 | var i=class extends HTMLElement{static get observedAttributes(){return["src"]}attributeChangedCallback(t,e,s){!this.__initialized||e!==s&&(this[t]=s)}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t),this.setSrc()}constructor(){super();this.__initialized=!1,this.__element=null;let t=this.hasAttribute("shadow");t&&this.attachShadow({mode:"open"}),this.__element=t?this.shadowRoot:this}async connectedCallback(){this.hasAttribute("src")&&this.setSrc(),this.__initialized=!0}async setSrc(){let t=this.getAttribute("src"),e=await this.fetchSrc(t);this.__element.innerHTML=e}async fetchSrc(t){return(await fetch(t)).text()}};customElements.define("wc-include",i);export{i as WCInclude};
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vanillawc/wc-include",
3 | "version": "1.1.22",
4 | "license": "MIT",
5 | "author": "Evan Plaice (https://evanplaice.com/)",
6 | "description": "A vanilla web component for including external media",
7 | "keywords": [
8 | "web-component",
9 | "vanilla",
10 | "include"
11 | ],
12 | "repository": "https://github.com/vanillawc/wc-include/",
13 | "main": "index.js",
14 | "scripts": {
15 | "start": "npx live-server --no-browser --port=5500 --open=dev",
16 | "lint": "esmtk lint",
17 | "build": "npm run build:esm && npm run build:min",
18 | "build:esm": "esmtk bundle src/wc-include.js index.js",
19 | "build:min": "esmtk minify src/wc-include.js index.min.js",
20 | "package": "npx rimraf package && npm pack | tail -n 1 | xargs tar -xf",
21 | "preversion": "npm run lint",
22 | "postversion": "git push --follow-tags"
23 | },
24 | "devDependencies": {
25 | "esmtk": "^0.5.6"
26 | },
27 | "standard": {
28 | "ignore": [
29 | "index.js"
30 | ]
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/wc-include.js:
--------------------------------------------------------------------------------
1 | /* eslint no-undef: 0 */
2 | export class WCInclude extends HTMLElement {
3 | static get observedAttributes () {
4 | return ['src']
5 | }
6 |
7 | attributeChangedCallback (name, oldValue, newValue) {
8 | if (!this.__initialized) { return }
9 | if (oldValue !== newValue) {
10 | this[name] = newValue
11 | }
12 | }
13 |
14 | get src () { return this.getAttribute('src') }
15 | set src (value) {
16 | this.setAttribute('src', value)
17 | this.setSrc()
18 | }
19 |
20 | constructor () {
21 | super()
22 | this.__initialized = false
23 | this.__element = null
24 | const shadow = this.hasAttribute('shadow')
25 | if (shadow) {
26 | this.attachShadow({ mode: 'open' })
27 | }
28 |
29 | this.__element = shadow
30 | ? this.shadowRoot
31 | : this
32 | }
33 |
34 | async connectedCallback () {
35 | if (this.hasAttribute('src')) {
36 | this.setSrc()
37 | }
38 | this.__initialized = true
39 | }
40 |
41 | async setSrc () {
42 | const src = this.getAttribute('src')
43 | const contents = await this.fetchSrc(src)
44 | this.__element.innerHTML = contents
45 | }
46 |
47 | async fetchSrc (src) {
48 | const response = await fetch(src)
49 | return response.text()
50 | }
51 | }
52 |
53 | customElements.define('wc-include', WCInclude)
54 |
--------------------------------------------------------------------------------