rnicholus / web-components-loader Goto Github PK

...possibly <script> tags in imported HTML files too. This may be less important for WCs pulled in as dependencies, but for Web Components developed as part of the project, this may indeed be needed.

Likely caused by a rookie mistake (this is my first Webpack loader):

ERROR [config]: Invalid config file!

Probably easiest to use Jasmine for this, since I'm most comfortable with that particular library.

example code seems to use webpack 1 syntax, so thought I shoul ask

...to ensure recompile in watch mode if any of these change.

Src currently targets Node 5+.

Include a few sample Webpack configs, covering a project with home-grown WCs, and a project with some home-grown WCs + 3rd-party WCs pulled in via package.json.

Building upon #2, which added the ability to transform WC JS files. This will take that one step further and allow <script> content inside of WC HTML files to be transformed as well.

1. When parsing an HTML file, grab each <script> element without a src attribute.
2. Call this.options.webComponentsLoader.transformJs (if available), passing the stringified contents of the <script>.
3. Replace contents of <script> with output returned from transformJs when writing HTML file to output location.

I would like to load web components that use typescript. Can I use web-components-loader loader in this scenario?
Currently I have the following setup:

webpack

module: {

    loaders: [{
            test: /\.ts?$/,
            loader: "awesome-typescript-loader",
            include: PUBLIC_DIR,
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: "style-loader!css-loader!autoprefixer-loader"
        },
        {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
        },
    ]

},

app.ts

/**
 * App
 */
export class App extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = this.template;
    }

    get template() {
        return `
        <div>This is a div</div>
        `;
    }
}
window.customElements.define('vs-app', App);

hi there, i noticed in the example, the web-component (WC) ref tag is appended to the body...
document.body.appendChild(importEl)

from a number of documentation i've read, WC ref tags are usually in the head tag. So i guess, the question is really why append to document.body?

Also generate transpiled loader code for older versions of Node.

Currently, an output query param must be passed to the loader. This is used to determine where to store the outputted WC files and used to determine the path of the href returned by the loader for the HTML import. This is probably not ideal, since it is possible that this path is not the root of the public directory.

Instead, the logic should probably be as follows:

• Output WC files to ${this.options.output.path}/web-components
• Construct returned href path using ${this.options.output.publicPath}/web-components