Support external JS and CSS files

mojo2012 commented 1 week ago

I prefer having JS and CSS files in separate files like, app-hello.js, app-hello.html, etc.

Currently it doesn't seem to be supported to import the class into the html file using <script src="./app-hello.js"></script>.

It would be neat to have typescript support, so I can use autocomplete and all the other nice features in my ts files and transpile them to js, that is imported into the html.

Is this anything you have been considering before?

Cheers, matthias

vinyll commented 1 week ago

Hey Matthias,

You can definitely use external JS and CSS files into your Lego web components, we do that every day in production. Just to list a couple of examples:

Importing a AppHello component with into your HTML page can be done out of the box. Once imported you can give a name to your html element with:

<script src="/dist/app-hello.js"></script>
<script>
  customElements.define('app-hello', AppHello)
</script>
<body>
  <app-hello></app-hello>
</body>

mojo2012 commented 1 week ago

Hey, thanks for the quick response.

What I meant though is that I want to split my component into different files:

bricks/leg-app.html:

<script>
    export default class extends Lego {
        init() {
            this.state = {
                name: "World!",
                value: "",
                placeholder: "type ..."
            }
        }

        onInput(event) {
            this.state.name = event.value
            this.render({ name: event.target.value || "" })
        }
    }
</script>

<!-- <link rel="stylesheet" href="./lego-app.css"> -->
<style>
    @import url('/dist/lego-app.css');
</style>

<template>
    <p>Hello ${ state.name }</p>

    Message:<slot :if="!!state.name"></slot>

    <input value="${ state.name }" @input="onInput" placeholder="${ state.placeholder }">
</template>

I want to put the class from the script tag into it's own file.

Referencing css files works with the import statement. But it would be nice if the lego compiler would also copy all referenced files into the dist folder for convenience.

Polight / lego

Support external JS and CSS files #49