Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support external JS and CSS files #49

Open
mojo2012 opened this issue Oct 7, 2024 · 2 comments
Open

Support external JS and CSS files #49

mojo2012 opened this issue Oct 7, 2024 · 2 comments

Comments

@mojo2012
Copy link

mojo2012 commented Oct 7, 2024

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
Copy link
Member

vinyll commented Oct 7, 2024

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
Copy link
Author

mojo2012 commented Oct 8, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vinyll @mojo2012